Looking for Tribute Page project feedback!

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.

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.

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

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

    Screenshot from 2021-06-27 05-39-37


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

1 Like

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?

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

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.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.