What's up guys?

Just finished my product landing project… Can you guys give me feedback please?


Link: https://codepen.io/Mohamedb3850/full/YzyGOXM

CBD haha nice! Maybe try spicing up the menu and sign up form with some detailed CSS? Just my 2 cents.

Im just starting out too. Just finished my tribute page here lol: https://sp3ck.github.io/charles-babbage-tribute-page/

Your page looks good @Mohamed5. Some things to revisit;

  • When using codepen it only expects the code you’d put within the <body> </body> element 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.
    • Mentioning because codepen provides the boilerplate for you. You have a boilerplate but there are errors with it. Google “html boilerplate template”
  • Run your HTML code through the W3C validator.
    • There are errors you should clean up such as duplicate id's and an obsolete attribute.
  • Look into the different sections being under the navbar. Links hard to see on the video

This is pretty cool! The navbar should probably have a background that covers everything behind it as the user scrolls down. The links in the background should probably have the underline removed and they should probably get a different font. You may also want to consider putting the links closer together and off to the right. When the page is resized to the smallest size, the navigation links disappear. I think these changes may improve your landing page a little, but you did a great job!

How do I put the links close together and off to the right? And also I have no idea why the navigation links disappear when I resize it to the smallest size. I would appreciate it if you helped me.

The navigation links disappear when the page gets smaller because they set to disappear in the media query after the screen reaches the specified max-width. The way I would put the links together and off to the right is by making an extra div and putting the logo and navigation links in it. I would set the display on this div as flex. Then I would put the links in another flexbox. Then I would have the logo on the left side of the first flexbox and the links on the right side of it. Then I would adjust the spacing in the links’ flexbox as you’d prefer.