Linux Technical Documentation Page

Hi guys, kindly check out my Technical Documentation Page about Linux

https://codepen.io/arAlamoudi/pen/JjRwzXV

I’ve been using Linux since 1992 so I just had to check this one out :slight_smile:

A few things:

  • In my browser (Firefox on Linux) the CSS color ‘green’ is represented as #008000. This is not quite enough contrast with the black background to be color accessible. Likewise for black on green in the nav bar. You can check the color contrast at https://webaim.org/resources/contrastchecker/.
  • Your doc needs to be responsive. As I narrow my browser the layout never changes and the left nav ends up taking just over half the page, so the content is squeezed into a very narrow box and I get horizontal scroll bar. Use a CSS media query to alter the layout for narrow view ports, something like putting the nav at the top of page and the content underneath. I would also suggest you use em units for your break point so that it is responsive to both changes in width and also increases in text size.
  • The <li> elements must be direct children of a list (either <ul> or <ol>). So get rid of all those <section>s wrapping the list items. Also, you can’t have a <header> element in a list. You might want to run your HTML through a validator as it will help you catch any other errors.
  • You’ve only got one heading element on the page and it is an <h3>. The first heading near the top of the page should be an <h1> and then all other headings below that should only drop by one heading level. So most likely you would want each heading that is linked to in the nav to be an <h2> (e.g. “Introduction”, “Why Linux”, etc…). And then if you need headings under those they would be <h3>. Basically, all of those <header>s you currently have in each section should be an <h2>.

That’s enough for now.

Your page looks good @ar.programmer. 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.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • and </br> is not a valid HTML tag

-Maybe rethink your page at smaller screens. The attached screenshot of a smaller screen is not a good UX.
The navbar can be moved to the top on a smaller screen giving more space for the main section and a better UX