Honestly critique my product landing page please!

Code Feedback
1

Just don’t look at my code because I haven’t cleaned it up yet :weary: lol

https://codepen.io/Jelliebeans/full/LYVreaZ

edited to add that I didn’t make it readable on a mobile phone :pensive:. Any help with that would be nice as well

2

You may fix the relative position of the video.
If you scale your page, the video position is moving.

1 Like
3

Hi @jellie! Your page looks great on desktop, but as you said, it really falls apart on a mobile screen.

One of the ways to deal with this is to use percentages instead of pixels. Also, consider putting your styles in the CSS box; it will make it easier to read your HTML.

And you should consider making the disclaimer text a bit smaller. It looks a bit awkward so large. You should also add a background to your navbar. It is hard to see when you start moving through the page.

Also, I’m not sure why but none of the pictures showed up on my computer.

But like I said, the page looks pretty good in desktop view. Keep up the good work. :+1:

4

@montanio19 Thank you so much for this feedback!! I will go and fix that :hugs:

5

@Code_Camper this is so helpful!! I truly appreciate each point that was made and will work on each one- thank you! :hugs:

1 Like
6

Hi @jellie, some things to revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • Your boilerplate is incorrect so let codepen do it for you. Then you and us will be able to see the font you link to instead of the default serif font.
  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are errors in your code you need to clean up.
  • We don’t have access to your Google acc’t so we don’t see any of your images. Consider hosting on GitHub or the like
  • Check to see if users have entered an email addr and give a warning if it’s empty or not formatted correctly.
    • You learned how to do that in the survey form.