Product Landing Page - Feedback. Niod

Project Feedback
#1

Hello,

I just finished my product landing page, I’m pretty happy with the results. But surely there is something to be said about it.
I think my code is not very clean …

1 Like
#2

Welcome to the forum @r.fantou84. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • The video falls out of the container on smaller screens.
  • I don’t normally comment on someone’s design because that’s what they choose. I will say though that you can give your navbar a little less height and it will still look good. It takes up a lot of real estate on a desktop/laptop.
#3

Hey @r.fantou84!

I think your page looks good.
When it comes to your code, I noticed a few things.

When I ran your code through the html analyzer I noticed a few errors. So I would address those issues.

Also , I noticed that you would repeat the same color alot.

color: rgb(48 107 79);

Maybe you could place that color in the body and then if you need to use another color like black then you can simply apply that when needed.

body {
color: rgb(48 107 79);
}

Hope that helps!

Happy coding!

#4

Hello @r.fantou84, welcome!
This is a very decent project. I like it. Simple & Clean. But, some suggestions:

Design Feedback (click to show)
  • I like the overall design, but there are many problems with it.
  • You could make the header links in the same line as the logo. But, it’s now sitting at the bottom of the header and is making the header big:

Screenshot 2020-10-31 115416
Screenshot 2020-10-31 1154161920×192 24.5 KB

  • You could give some padding to the “Did You Know” box. If you give some, it will have more space inside and will look better:

image
image1471×255 82.2 KB

  • Consistency is a great fact of a good design. If you use the same types of icons for your features section, it would be good. Now, each icon has separate colors:

image
image1136×282 32.2 KB

  • Your buttons lack some styling and looks very basic. Also, giving a hover animation to it would be nice.
  • The email input field lacks some padding.
  • The footer lacks good alignment. If I was you, I would center align the footer items. Making them right-aligned makes them hard to read:

Screenshot 2020-10-31 120020
Screenshot 2020-10-31 1200201920×92 6.52 KB

  • The header looks terrible on mobile devices:

image

  • When I click on the header link “features”, it navigates me to the how to make video section. The same is with other links.
  • On mobile devices, I see a horizontal scrollbar which is absolutely crazy.
Code Feedback (click to show)
  • Add html { scroll-behavior: smooth; } to your CSS code and notice the smooth scrolling effect when clicking on the header links.
  • You should add the Google Fonts code inside the head tag and not the body tag. Everything inside the CodePen’s HTML box goes inside the body tag. To add resources to the head tag, click on the settings icon at the top of the HTML box and then paste the code inside the "Stuff for <head>" box.
  • One of your images is missing the required alt tag. You can find it by clicking on the down arrow and then “Analyze HTML” in the HTML box itself.
  • Wrap your logo inside an a tag so that when I click on it, it brings me to the top.

Anyway, wonderful work! Best of luck with your next project!

1 Like