Hey, Check out my product landing page

At first it was a Tesla Model S landing page. I took a break and watched a bunch of videos and started from scratch with this.
I think I’m ready to start making more complex layouts with flexbox and grid.

Hey Jon,

nice to meet you! :wave:

good job so far! :clap:


My ideas:

  • all tests pass, awesome!

  • your header should live in the body

  • when you use codepen (only there!), you only have to add the code that belongs into the body; so you can remove:

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body class="parallax">
  • you can move the head content into Settings > HTML > Stuff for <head>

  • after you moved and removed this stuff, you would end up with this:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<header id="header">
  ...
  • you can get a code validation:

    • HTML: paste your codepen HTML code into the body
    • CSS: paste your whole CSS code; you can ignore the errors about the CSS variables
    • you will see some small errors, that’s totally normal; try to fix them from top to bottom, I think you are able to fix them! :+1:
  • you can increase the readability of your code by:

    1. clicking on the small arrow on the right side of the code box and
    2. clicking Format HTML/CSS
  • you can increase the overall readability of your page by adding some more spacing, e.g. between the different sections; it’s also a good idea to separate the sections visually, e.g. with slightly different background colors; you can read more about it in principles of design

  • when I decrease the width of my browser, the navbar and the video overflow the screen; a horizontal scrollbar is mostly a bad sign; this is important for people who read your page on a smartphone:
    Screenshot_2020-09-01_08-29-12


Keep up the good work,
looking forward to seeing your next steps! :slightly_smiling_face: