Tribute to Elon Musk

1

Any Feedback would be appreciated

Much love

2

Hi Hasan…

Great content on your subject.

Feedback on layout and style would be:

  • Size… it’s BIG on my Chrome Browser running under Mac OS… really big.
  • The page isn’t “responsive” … the page doesn’t scale when I resize my window, it’s just cut off. You might want to look at Bootstrap containers.

Good luck with this project.

Casey

2 Likes
3

A couple of things:

  • Huge font
    As w9lp mentioned above, the font is huge and it makes the content unreadable.
  • Responsive image
    You could make the image responsive by adding a simple max-width: 100%; declaration (and by getting rid of the huge 60px margin on the sides). Or, as you’re already using Bootstrap, by adding the .img-responsive class to your image.
  • CSS goes to CSS
    You put CSS in the HTML instead of the CSS frame. CSS is designed to enable the separation of content from presentation. Let’s make it really separated :slight_smile: So cut the content between the style tags, paste it into the CSS section, hit that “Tidy” button, and see the difference.
  • Selectors
    You shouldn’t use classes like black-color and grey-color, especially if both of them is just to make the colour black. The same with .thin-black-border. If the only thing that you’ll use it is to add a thin black border to your image, then add it to your img or .larger-image.
  • Headings
    There are “only” 6 headings, <h1> to <h6>, where <h1> defines the most important and <h6> the least important one. There is no such thing as <h10> or <h17>. You could use <h1> for the title, <h2> for the “Lessons to be Learned From Elon Musk” and <h3>s for every other headings you have.
  • Underlined text
    Although the <u> tag is no longer deprecated, you shouldn’t use it between your headings. You could just add a simple text-decoration: underline; rule to the (new) <h3> tags.
2 Likes
4

looks great! keep up the good work!

1 Like