Tribute page. feedback appreciated

Code Feedback
1

Here is my tribute page :grin:
tribute page

2

I had quick look and nothing jumped out and screamed at me. :smile: There appears to be a lot effort put into the aesthetics (nice choice of font) and the page is, as far as I can tell, mostly responsive, and both the page and the code are clean (with very appropriate use of semantic HTML elements).

The only things that I spotted are:

  • The section that contains the article title could potentially poke out on smaller devices (with screen with < ~320px) because of “Legendary” being a bit long. Just something to keep in mind particularly when you are not using a styling framework
  • In CodePen, the html and body elements don’t have to be specified in order to style them, they are implicitly there in the iframe if I’m not mistaken
  • The ‘Go Top’ button’s position doesn’t look as good on smaller devices because it just looks off-centered instead of being intentionally put on the side. One way to get around this is to have this absolute-position it to the bottom left corner of the container for the bulk of the content (if I’m not mistaken it would be the main element in this case); alternatively, and perhaps more appropriately for longer pages, you could absolute-position with respect to the viewport—that way the user always has the option to go back to the top of the page and not just at the end
  • Just being picky—spacing seems to be inconsistent in the HTML and CSS. Don’t be afraid to space things out, too—you can always minimise your code for production

I hope that helps! Good work and good luck. :slight_smile:

3

@honmanyau thanks for the feedback!, i’ll keep everything in mind and i’ll push some changes to the project :smile:

4

@alemrv I agree with @honmanyau and feel this is a great first fCC project! :fire: It’s awesome that you used CSS Flexbox! Here are some additional suggestions for improvement:

  • HTML5 Semantic Elements: I like that you’re using the HTML5 semantic elements. However, I think it’s better to structure your HTML to be more like the W3C examples, specifically example 41:

    Bare Bones W3C Example 41 
    <!DOCTYPE html>
<html lang="en">
 <head>
   <title></title>
 </head>
 <body>

   <header>
   <nav>
     <ul>
       <li></li>
       <li></li>
       <li></li>
     </ul>
   </nav>
   </header>

   <main>
     <section>
       <h2></h2>
       <p></p>
     <section>

     <section>
       <h2></h2>
       <p></p>
     <section>
   </main>

   <footer>
   </footer>
 </body>
</html>

  • Article element: I’m not totally sure, but I don’t think the article element is supposed to be used the way you’re using it. Internetingishard.com’s info about semantic HTML is helpful for me and says this:

    The element represents an independent article in a web page. It should only wrap content that can be plucked out of your page and distributed in a completely different context.

    I feel like the content you have within the article element can’t be plucked out of the page and used elsewhere, while still leaving a meaningful page behind, if you know what I mean.

  • Section vs. Div: Some of your section elements can probably be divs instead, especially if they’re only being used to help designate flexbox sections. This HTML5 Doctor post about the difference between section and div has been helpful for me.

  • CSS Specificity: I notice that you both select ids in your CSS (#main) and use qualified selectors (#title > h4). CSS Wizardry’s Hacks for Dealing with Specificity really helped me understand how to avoid unnecessary specificity wherever possible:

    … 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.

  • Heading Levels: I see your heading levels go from h1 to h4. MDN suggests that it’s important to avoid skipping heading levels:

    • Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

    • Do not use lower levels to decrease heading font size: use the CSS font-size property instead.

    • Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

    • You should consider avoiding using <h1> more than once on a page. See “Defining sections” in Using HTML sections and outlines for more information.

Overall, you’ve done very well with this and I look forward to seeing your future projects! :sunny:

1 Like
5

@camper thanks for the feedback, everything you said will help me to improve my future projects, that being said, i don’t necessarily agree on your opinion about divs vs sections, i believe that an excessive use of divs will make the code harder to read and maintain I think i used the section tag properly or i just could just be completely wrong, anyway thanks for your feedback again, you taught me some things today.:grinning:

P.D: please forgive any grammatical error, english is not my main language.

1 Like