"Missile Man Of India" tribute page feedback

This page is in beta stage,feedbacks are welcome!

See the Pen "Missile Man Of India" tribute page by Shivendra Singh (@shivendrarox) on CodePen.

1 Like

@ShivendraDave Great start so far! :rocket: All of the fCC tests are passing. I like that you added FontAwesome icons. :smile: Here are some things to think about for improvement:

  • Strange Doctype: Here’s what you currently have: <!DOCTYPE html lang="en">. For HTML5, the preferred doctype is <!DOCTYPE html>. The lang="en" part goes below the doctype in the starting HTML tag like this: <html lang="en">.

  • Styling IDs: Currently, you’re selecting the #img-caption id in your CSS. I lean on the side of not selecting ids in CSS, so I would recommend against this. Here’s some info from CSS Wizardry that helps explain why I think it’s not a good idea to select ids in CSS:

    … there are a number of things we can do to mitigate [the effects of specificty]:

    • Never use IDs in CSS, ever. They have no advantage over classes (anything you can do with an ID, you can do with a class), they cannot be reused, and their specificity is way, way too high. Even an infinite number of chained classes will not trump the specificity of one ID.

    • Do not nest selectors unnecessarily. If .header-nav {} will work, never use .header .header-nav {}; to do so will literally double the specificity of the selector without any benefit.

    • Do not qualify selectors unless you have a compelling reason to do so. If .nav {} will work, do not use ul.nav {}; to do so would not only limit the places you can use the .nav class, but it also increases the specificity of the selector, again, with no real gain.

    • Make heavy use of classes because they are the ideal selector: low specificity (or rather, all classes have the same specificity, so you have a level playing field), great portability, and high reusability.

    tl;dr never use a selector more specific than the one you need.

  • Main Element: If you use the main element instead of <div id="main">, you can gain an interesting accessibility benefit, as mentioned in the Jump Straight to the Content Using the main Element challenge:

    The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you’ve ever seen a “Jump to Main Content” link at the top of a page, using a main tag automatically gives assistive devices that functionality.

Those are the issues I see. This is a good start to the fCC projects. :sunny:

1 Like

so, should i use an in-line style tag,in-spite of using a an id in CSS for targeting a particular element?

Hi @ShivendraDave,

First part above <hr> looks gorgeous! and the second part under <hr> looks unfinished. No margins, no paddings, no text-aligns, just block of plain text. Play with it it is a lot of fun when You changing one line and whole page looks different.

an answer to your question to camper is use class instead of id or inline styles. You can use tag names but try to use it in more specific way. Look at your img when you put another img to this page you the img will be formatted same as the first img, when you may want to put in in different way. here is a selectors explanation.

Good luck. :slight_smile: