Technical Documentation page

This was my attempt to emulate a documentation page on the CSS Tricks website -- specifically, their guide to Flexbox. Something I don't like about their guide is the amount of blank space at the end of the shorter column, so I tried to improve that. I also added a side-nav and a dark mode (to see what all the fuss was about).

Background:

I'd just learned about SVG images and the CSS ::before and ::after selectors, so I wanted to put those to use here. I still hadn't heard of Figma, however, so the SVG design I came up with isn't quite as good as the one on CSS Tricks website. I tried to use more semantic HTML than I'd used in the past, so the code is better in that way. Unfortunately, I still didn't know SASS so the CSS is more complicated than it needs to be, and I think the side-nav could have been implemented better. I'd built the Dark Mode in a tutorial somewhere along the way, so I decided to include it in this project.

Technology:

HTML, CSS, Javascript.

What I learned or used for the first time:

• Javascript for DOM manipulation
• Dark mode
• An alternative CSS file
• CSS Grid
• The Flexbox flex property
• A side-nav
• An SVG "swoop"
• A background gradient
• Styled scrollbars