Looking for Tribute Page project feedback!

[BrandenEv]

Steve Yzerman Tribute

I’m about 2 weeks into my learning now. I’m aware my css is probably kind of “Hacky” but overall I’m happy with it. I might revisit the project later to redo all the css as I believe it would be good practice to try and clean it up a bit.

[staranbeer]

Hey! i just checked out your page and it looks pretty cool. The text-content as well as images are responsive and display well in small screen sizes.

Here are a few suggestions some of which are good coding practices and others are my personal opinion on the design.

1. when using codepen you do not need to use the body tag as all of that is provided to you.

2. You should be using the section tag as containers for different sections instead of the general purpose “div” as it is really important for your code to be semantic.

Here’s an awesome article about semantic html which explains this concept in detail.

Semantic HTML5 Elements Explained

3. You should also try to adopt a strategy which helps in arranging your CSS code so it’s easier to find and debug stuff in the long run a popular way of doing this is

//tag selectors and base styles

  body {color: red;}
  h1 {padding: 1rem;}

//component styles
    //first component
    .header { color: green;}
    
    //then any children of the component
    .logo{max-width: 3rem;}
    .nav {margin: 1rem;}
   
    //second component
    ...

//media queries
@media  screen and (max-width: 300px){
  .header{color: red;}
}

4. this is just my opinion but you could totally change this

   

   to

     h3:not(:first-of-type){
        margin-top: 2em;
     }

because it looks like you’re only trying to get rid of top-margin on the first heading and this one would work better if the number of headings increase

Hope this helped!

[BrandenEv]

Thank you so much for the reply. I knew my css needed some work. I really appreciate the help

Edit; what exactly do the double forward slashes do? Maybe I’m not phrasing my question right on Google?

[Roma]

Welcome to the forums @BrandenEv. Your page looks good. Something to revisit;

• Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
  • “wikipedia page” is not accessible

@BrandenEv

what exactly do the double forward slashes do?

In CSS they do nothing. In JavaScript the double forward slashes are a way to comment a line.

On a side note, h1 is explicitly assigned bold so adding this font-weight: 700; to the h1 selector in CSS doesn’t do anything.