Let me know what you think of my code

Just want some critism please on my code :slight_smile:

Welcome to the forum!

I’m seeing quite a few syntax errors in the head element. Links can have an attriburte of rel but not ref or re.

  <link ref="stylesheet" href="styles.css"></link>
    <link re="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"></link>

They also do not need a closing tag as they are self closing.

       <li class="nav"><a class="nav-link" href="#form">Features</a></li>
          <li class="nav"><a class="nav-link" href="#video">About Us<a></li>
          <li class="nav"><a class="nav-link" href="#pricing">Pricing<a></li>

Also the anchor elements inside the li elements are not all closed correctly.

I advise using a HTML validator like this one to check your code. Hope this helps!

1 Like

Thank you, I have fixed them issues now, I normally use VS Code, so I must be lazy from the autocompletes. Thanks for the input.

1 Like

Nice job!

What I personally didn’t realize until later is that CSS readability is a big deal. You may find that it’s impossible to fix /change anything when you come back to a codebase like this without more documentation. Here are some things I like to do:

  • Some kind of system for organizing your css properties. I just do it in alphabetical order. There’s nothing more frustrating than looking for a “margin-top” property in a list of 15 randomized props!
  • Your html looks semantic which is great, but I noticed a few things:
    • If you’re using “header”, you should also use “main” after that
    • If you’re using unique elements that should only appear on the html once anyway, don’t use an id of the exact same name. Just use the element itself
  • For grid and flex containers, I like using the class name explicitly like grid-container and grid-item instead of just grid
    • Default to classes before ids. As a matter of fact, you’ll see in React that exclusively classes are used and ids are avoided. This is so you have the option of sharing CSS code. If you have a class “red” that colors the text red, and “size-3” which sets a text to a certain text, all you need to do for that html element is chain them like <span class = "red size-3>". Don’t create a brand new class that does both if can reuse existing css. It’s great to get into a habit of creating smaller helper classes and chaining them together!
  • Put more comments in the CSS file. For example, just add a big comment to visually separate sections like
/* ==================== HEADER ============ */
all of your header stylings here
/* ==================== INTRO SECTION ========== */
all of your intro stylings here 

Good work overall!

1 Like

Thanks for the advice, I will try on future project to comment more, and try to create a more readable layout for my CSS. Cheers