Problem-solver Product Landing Page

I’m currently using h3 elements to allow for each section to be navigated to from the nav bar. Otherwise the header would cover the beginning of each section when navigated to from the nav bar. Is there a better more accessibility-friendly way of doing this? Also, I need help making it responsive to all screen sizes. If you have any suggestions or feedback please share. The link to my project is below. Thank you!
https://codepen.io/creativecodepenuser/pen/ZEOpoPw

1 Like

Your page looks good @Problem-solver. 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.
  • 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.
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    • You learned to do this when coding the survey form
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

You don’t want to do this, headers have a distinct purpose. Have you looked into adding padding to the top? Or maybe search for something like “scroll-padding”.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

1 Like

I changed the h3 navigation aides to divs. Is that acceptable?