Hi guys,
I know this pen of mine won’t be winning any rewards any time soon but would love some feedback.
-
On the code - What could I have done better/neater/more efficiently?
-
The design - This was not a design project but still. It looks a bit wonky, so feedback on this would be great.
I won’t even ask about the content because Elon Musk is awesome, and I stole everything from Wikipedia.
Saying that allowed makes me feel a bit guilty. A bit.
Thanks in advance for your feedback.
1 Like
Hi @JanvdW1983,
HTML inspector
- The ‘align’ attribute is no longer valid on the
<div>
element and should not be used.
<div align="center">
<img src="http://forums.teslacentral.com/images/custom/forum_icons/311.png" id="logo">
</div>
<div align="center">
Reference:
https://www.w3.org/TR/html401/present/graphics.html#h-15.1.2
align = left|center|right|justify [CI]
Deprecated. This attribute specifies the horizontal alignment of its element with respect to the surrounding context.
- This code don’t comply with Bootstrap
<div class="container">
<div align="center">
<img src="http://forums.teslacentral.com/images/custom/forum_icons/311.png" id="logo">
</div>
<div align="center">
<h1>. Elon . Musk .</h1>
<h2>The man changing our world!</h2>
</div>
<div id="stats" class="col-md-8 col-md-offset-2">
Bootstrap documentation:
http://getbootstrap.com/css/#grid
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
- Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Example:
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
Cheers and happy coding 
@Diego_Perez I see you came to visit after asking for your hard critique. Hahaha!
Not according to what the page shows me when I remove it. Except if you are talking about the “”. I removed those.
I am not sure what I should be seeing here.
Can you maybe clarify…?
I see where I messed up now. Didn’t do anything to the page, but good practice is good practice.
P.S. Thanks for the comment.
@Diego_Perez
Nevermind. I got it. Now I know about HTML inspector. 
So here is what is what:
- Image align is not done in HTML. It is done with divs. Surround an image with a div and give it a class. Make the div the same size as the image, and center it with margin.
.center {
width: 300px;
height: 300px;
margin: 0 auto;
}
- If you want to use bootstrap to place your content. Create a row, and then specify where you want the content.
<div class="row">
<div class="col">
I don’t know if I missed anything, but that is what I got from it.
Hi,
1 - Image align:
I can’t see nothing wrong with your solution, the <div>
is a generic container and the <img>
element is a permitted content (for the <div>
). But you need to know the width and height of the image.
Another options (you don’t need to know the dimension of the image):
- Use flexbox
- This seems pretty popular:
img {
display: block;
margin: 0 auto;
}
That code is not enough to get the idea
.
Cheers and happy coding 
That works great for the img.
It is. After going to look at everything, I didn’t feel much like typing anymore.
Thanks again man.