I need some feedback

Code Feedback
1

After 1 week of learning, sweat & tears I finally managed to create my product page. I will have to do some tweaking but please give me some feedback. (I want to improve myself.) Cheers! https://codepen.io/roland-david-linthorst/full/rNepMBW

2

There’s a lot of evidence of learning here so far, so good job!

I tested this on Firefox, so the following might not apply on all browsers (worth test cross browser, though)…

In terms of functionality / bugs:

The hamburger menu doesn’t do anything, at any screen size. Typically I’d expect it to not appear on large screens when the nav bar is available, and it should give the nav links when the nav bar is missing (mobile screens).

When viewed on a small screen (mobile) the final card overlaps the container it’s in, which looks a little clunky.

Is the select button supposed to be inside the card? This is inconsistent across the three cards.

Finally, the styling is a little dated. Maybe look at other wellness sites for inspiration?

1 Like
3

Your page looks good @rolandlinthorst. In addition to what was noted above some other things to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
  • The one for CSS is good. Use it, there’s something to clean up. You’ll probably have to check it a couple of times. After cleaning up one and checking again it will show another.
  • (The one for HTML misses things which is why I recommend W3C)
  • Check that the user has entered a valid email address when clicking the submit button. Throw an error if not.
    • you learned how to do this when you created the survey form
  • Also on smaller screens, there is a horizontal scrollbar. Make the page responsive.
1 Like
4

thanks will fix those thing right away!

5

thanks for introducing me to the W3C validator!