Documentation Project feedback and recommendations!

Hi guys, I would like you to see and give some feedback of the documentation page I’ve built for the freecodecamp certification! Thanks!

Check here - https://codepen.io/Mikeavocado01/pen/rNYXJYo

Overall, this is very nice. Doing a hamburger menu properly requires JS, but since these projects are just HTML/CSS only I’m not going to comment on your implementation other than to say that you would use a <button> to do it properly.

Just a few minor issues:

  • Your social media links need to have text content that explains where they link to (eg. “Facebook”, “FreeCodeCamp”). This is so people who are listening to your page with a screen reader will know where the links go to. You can add the text inside the <a> tag and visually hide it so it isn’t shown on the page but screen readers can still see it.

  • The <h5> at the bottom should be an <h2>. This isn’t a subheading under “Recursion versus iteration”. It’s a brand new topic. Also, I think “Resources” and “More” should probably be headings as well (<h2>s).

  • Most would recommend that you wrap the <code> tags in a <pre> tag so the formatting holds as the browser narrows, and then you can get rid of all those &nbsp;s and <br>s. And then you’ll want to use CSS to allow the <pre> to scroll horizontally if needed. This is one of those instances where horizontal scrolling on an element at narrower view port widths is acceptable.

  • Your main content should be wrapped in a <main> element and then the footer content can be wrapped in a <footer>. These are known as “landmark” elements and they help people who use screen readers navigate the page. Best practices say that all content on the page should be inside of landmarks. Speaking of which, your menu of links should be in a <nav> element (which is a navigation landmark). You are already using a <header> at the top so you are good there.

Thanks. I will be working on these points right away!