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.
- I like that you have used the semantic
main tags. However one thing I’d say for the footer is that using a
section within it is unnecessary. The
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
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
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!
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.