This is my personal reference wiki, or notebook, for web design and programming. As I learn more, I add more pages and expand existing ones.
Continuing education is an important part of any career, regardless of industry. With web design, the technology advances rapidly enough that training and learning can be out of date within a matter of years. To keep my skills current, I regularly read design blogs and take online classes to brush up the skills I have and learn new ones.
Technologies used
- HTML & CSS
- JavaScript
- Bootstrap
- GitHub Pages
Making myself a quick reference guide
The idea for this website came about when I was learning about flexbox. I wanted to have an easy to understand visual reference in my own words, so that I could look back at it as needed in the future and not spend time puzzling out someone else’s documentation. Juggling four different notebooks from various stages in my career was also decidedly frustrating. I decided that a live, editable website with real-world examples and code snippets was the best solution.
After doing some research, I chose to use GitHub Pages to host my wiki. This gives me easy version control directly from the GitHub client, and any changes I make and commit to the repository automatically sync to the website within an hour.
Adding more content and improving the site structure
My personal reference wiki very quickly expanded from a few pages into something much more advanced. I found myself needing a better left-hand navigation than just a handful of links. I reorganized all the pages by category, and added in an expand-collapse feature to keep the navigation from getting too tall.
Instead of hard-coding the left-hand navigation and the cards on the homepage, I use a JSON file to store nested objects. Each page in my wiki has its own object in the JSON file, and I wrote scripts to generate the homepage cards and left nav from that data. Now, I only have to change a page’s data in one place and it updates everywhere on the site.
Designing for usability
This site was built using the Bootstrap 5.0 and 5.1 framework, HTML, CSS, and JavaScript. While it’s designed mostly for use on tablets and computers, I make sure that each page is readable on mobile so that I can read on the go if I need to. This involves hiding some columns in a table, prioritizing which data is visible as the screen gets smaller, and occasionally rearranging graphics and text for better flow on a single-column layout.
Screenshots
