Tech documentation page - computer hardware

Code Feedback
1

https://codepen.io/matthew-pourroy/full/YzpyOLZ

I love for any feedback!

1 Like
2

Hey, just a few things to consider:

  • You have no headings on the page. Each one of those bold topic subjects should definitely be a heading (h2). And then add a title heading (h1) at the top. I would think it would be 'Computer Components` since that seems to be the title in the TOC. But don’t make the text in the TOC nav the h1. Your h1 should probably be at beginning of the <main>. You might add some brief content between the h1 and h2 describing the purpose of this documentation?
  • Your layout never switches to a narrow version (it is always two columns with nav on the left and content on the right). The purpose of responsive design is to alter the layout based on how much room you have. You’ll want to add a CSS break point to switch it from two columns to one as the view port narrows (most people put the nav on top of the content but you could also do a hamburger menu icon and then pop the nav up when clicked). If you use ems for the break point then it will also be responsive to changes in text size as well.
  • Your using the <code> element a lot but I’m not seeing any computer code on the page. The <code> element is typically used just for displaying actual computer code (such as examples form a programming language). I think you can just get rid of all of them completely, but if you need a wrapping element then just use a plain old generic <div>.
1 Like
3

Your page looks good @pourroy.matt. Some things to revisit;

  • 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.
  • It really doesn’t make sense to have whole sections as code just to satisfy the user stories. What you can do to meet that requirement is to maybe have things like ‘motherboard’, ‘CPU’, ‘GPU’, ‘PSU’ in the code elements.
    • As you move to a dev career you’re going to learn more about tech docs. You’ll be reading a lot of them and possibly writing some too so it’s an important skill to learn.
  • Pay attention to the feedback from @bbsmooth also. These are things that you should revisit also.
4

Ahh, I didn’t realize that using <code> is a requirement for this project. Sorry about that. Definitely what @Roma said, figure out a way to incorporate some legit uses. Maybe for the CPU section you could give some examples of assembly language code?

1 Like
6

Hey I made some changes, but some of the changes caused the project to not pass all the requirements so those I left out. Here it is now https://codepen.io/matthew-pourroy/pen/YzpyOLZ

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.