Elon Musk - Tribute Page Challenge

Elon Musk - Tribute Page Challenge
0.0 0
#1

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.

#2

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 :slight_smile:

#3

@erretres 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.

#4

@erretres
Nevermind. I got it. Now I know about HTML inspector. :grinning:

So here is what is what:

  1. 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;
}
  1. 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.

#5

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 :thinking: .

Cheers and happy coding :slight_smile:

#6

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.