Cheat Sheet Project - review needed

Hello everyone :slight_smile:,
as a part of my codecademy studies I have come to a point where I am looking for a code review :nerd_face:.
The code is written in HTML and CSS and basically it is a short cheat sheet :robot:.

You can find it here: GitHub - patrik-sosa/CheatSheet: Codecademy project about creating a Cheat Sheet.

Huge thanks for everyone who would participate and help me on my journey :sunrise_over_mountains:.
Have a nice day :wave:.

Hey there, congrats on completing the project and getting to this point! Your site is looking good and I really like the design you’ve gone for. Going to leave a couple of points neatly below for my review!

Parts I like

  • I really like the design you’ve chosen, the colours aren’t too harsh on the eyes and give a nice welcoming feeling to the page. Given a cheatsheet as it grows would hopefully end up with a ton of different information, it needs to be easy to look at and I would say it is!
  • I like the use of the styling on the span elements, to make the code sections stand out. It’s something that’s absolutely necessary on code websites and the one you’ve chosen fits well with the page and also is easy to see at a glance.
  • Your code is very well formatted, making it easy to follow and understand what is going on as you read through it even if you don’t look at the page.
  • The use of the table is good and gives a solid structure to the page, it makes it easily expandable also as you can just add on a new row whenever you need it, and the rest of the page will be unaffected.

Possible Improvements

  • I like that you have used the semantic footer and main tags. However one thing I’d say for the footer is that using a section within it is unnecessary. The section and footer tags I would consider to be on the same “level” so to speak, and thus I think you can remove this section tag and give a better structure there by just applying the styles to the footer directly.
  • The way you have used section in the header is perfect and exactly what I’d recommend for the use of a section tag. However I think it would be worth using the semantic header tag instead just to keep following with the semantic tags and help accessibility!
  • For your header text, you have used an h1 and two h2’s. The h1 is perfect, it’s the title of your page and thus should be an h1 element! However I would suggest that the h2’s do not fit the role that you would expect for an h2 element. This is important for accessibility as the heading tags should be used like a document structure, to denote sections, for example:
<h1>This is the page title</h1>

<h2>This is my first section</h2>
    <section>This is my section content</section>

<h2>This is my second section</h2>
    <section>This is a second section with unrelated content to the first section</section>
  • By doing things this way, screenreaders have an easier time following the flow of the document. On this page, a reasonable h2 would probably be a section header for your cheat sheet body (if you were going to add multiple cheatsheets, like a CSS and JS one also on the same page). However I don’t think it’s necessary, so I would change your h2’s to p elements instead, and targeting them with a class of page-subtitle or something similar.

Overall though a very impressive page given at this point in the course, my understanding is that it’s still pretty early, so you’re definitely on a really strong track. The main takeaway would just be accessibility considerations and flow of the document, but that stuff will all come with time. Very well done!

3 Likes

Huge thanks Adam for your quick and comprehensive reply. I really appreciate the help your post has provided.

I will definitely look more into rules how to properly use semantic HTML elements (e.g. footer vs section element you have mentioned) as well as using HTML heading tags. It was something I had felt I was not completely sure on how to use.

Thanks to you I have a better insight on the topic now.

1 Like