Feedback Please: Product landing page

I’m no designer but here’s my first pass at the product landing page. Any criticism or suggested resources (there’s so many opinions out there) would be appreciated especialy on how I could simplify and streamline the CSS. I feel like I’m repeating myself too much.
Additionally I intend to continue to improve responsivness for mobile so any suggestions beyond just more @media rules would be useful.

Thanks for your time.

Hey Douglas,

nice to meet you! :wave:

Congrats on your project,
great job so far! :clap:

My ideas:

  • all tests pass, awesome!

  • you can get a code validation:

    • HTML validation: paste your codepen HTML code into the body
    • CSS validation: paste your whole CSS code
    • 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 blue/white headings and the black texts in the sections; you can read more about it in principles of design

I think it’s easier to start from the smallest view and build the bigger ones on top of it instead of doing it the other way.

Overall I like your site.
Some small improvements and you’re done.

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


Thanks for the kind words and all of the direction. It is very helpful and the resources are perfect.

I hadn’t thought of building from small to big. I just sort of defaulted to building for desktop and working my way down. It makes sense now that I’m thinking about it. I’ll give it a shot moving forward.

Thanks again,


1 Like

Welcome to the forums @douglas.amport. Your page looks good. In addition to the above something to revisit;

  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.

Hi @Roma,

Thanks for taking a look at my project and for pointing out the poor line break usage.
I’ve replaced the <br> elements in the HTML with the declaration {white-space: pre-wrap;} in my CSS which (after a little reading) seems like a more well accecpted way to organize text blocks. Thanks again.