Project Preview
I created a practical HTML, CSS, and JavaScript reference guide that translates technical concepts into plain language, helping learners quickly connect what they want to accomplish with the code needed to do it.
Project Snapshot
Role: Designer, Technical Writer & Developer
Organization: Personal Professional Development
Project Type: Technical writing and illustration
Primary Focus: Technical documentation, developer education, reference design
Tools used: Microsoft Word, HTML, CSS, JavaScript, Khan Academy, Web documentation resources
Where This Was Used
This guide was initially intended as a resource for myself, but I have also shared it as a resource on my software tutorials site, Simple Software Tutorials, so those who enjoy learning from my various tutorials can benefit from it as well.
What I Created
- Comprehensive HTML reference guide
- HTML Mailto quick-reference section
- HTML special characters table
- CSS text properties guide
- CSS shorthand reference
- JavaScript function reference
- Programming examples with commented code
- Resource lists for validation, templates, color tools, and live preview websites
- Tables connecting everyday tasks to technical terminology
- Visual examples and screenshots demonstrating expected results
Why I Created It
I created this reference guide as a resource for myself when I was refreshing my coding skills in 2020. I would get frustrated because I knew exactly what I wanted to build, but didn’t always know the technical term I needed to search for, which made even simple tasks take longer than they should. My solution was to create a resource that connected everyday language with proper terminology, code syntax, and visual examples.
Who I Created It For
This reference guide was created for people who already have some coding knowledge or want to learn coding and have a guide that connects plain language with technical terminology,
How I Created It
Observe
While learning HTML, CSS, and JavaScript, I noticed that I often knew what I wanted to accomplish but struggled because I didn’t know the terminology documentation expected me to use.
Understand the Goal
Rather than creating another coding reference, I wanted to build something that helped people think through problems the way beginners naturally do.
Remove the Friction
I organized every table around user intent, then connected it to the proper technical language, syntax, and examples so answers could be found quickly.
Design for People
Each section uses plain language, consistent formatting, screenshots, examples, and commented code because documentation should reduce cognitive load rather than add to it.
Evaluate Results & Adoption
The guide became my primary coding reference and significantly reduced the amount of time spent searching online for information I’d already learned once before.
Refine & Improve
Whenever I discovered a better explanation, useful resource, or common point of confusion, I added it to the guide so it continued improving alongside my own knowledge.
What It Accomplished
Although originally created as a personal learning resource, the guide evolved into a reusable reference that dramatically reduced the time spent searching multiple websites for coding syntax and explanations.
The documentation:
- Simplified common HTML, CSS, and JavaScript concepts
- Connected user intent with technical terminology
- Reduced repetitive searching during development
- Provided consistent examples and formatting
- Created a reusable learning resource suitable for future publication
- Demonstrated an approach to technical communication centered on usability rather than completeness
View the Project
The guide is a simple, functional document with a linked table of contents for quick navigation and tables to display the contents in an easy-to-read format.
