Feedback Please: Product landing page

Code Feedback
1

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.

2

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:

3

miku86

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,

Douglas

1 Like
4

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.
5

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.