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
| Organization | Personal Professional Development |
| Role | Designer, Technical Writer & Developer |
| Timeframe | 2020 |
| Primary Focus | Technical documentation, developer education, reference design |
| Audience | Beginning web developers, self-learners, students, and future me |
| Deliverables | * HTML reference guide * CSS text properties reference * JavaScript programming guide * Resource directory * Visual examples * Quick-reference tables |
| Tools | * Microsoft Word * HTML * CSS * JavaScript * Khan Academy * Web documentation resources |
The Challenge
Learning web development often means jumping between dozens of websites, each using different terminology, examples, and teaching styles. I frequently found myself knowing what I wanted to build but not knowing the technical term I needed to search for. That made even simple tasks take longer than they should.
Many reference sites are written for people who already understand the vocabulary of web development. They explain what a property does but not why someone would go looking for it in the first place. I wanted something organized around real questions instead of technical categories. Rather than creating another list of HTML tags or CSS properties, I wanted a resource that connected everyday language with proper terminology, code syntax, and visual examples.
My Approach
I approached this project the same way I approach any documentation effort: start with the user’s goal instead of the technology.
Rather than organizing information alphabetically or by technical specification, I organized each section around the question, “What do you want to do?” Once I identified the task, I connected it to the proper terminology, demonstrated how to write it, and showed the expected result.
Whenever possible, I included examples, screenshots, notes, and alternative approaches so users could immediately understand both the syntax and the outcome. If I encountered terminology that confused me while learning, I assumed other learners would struggle with it too and rewrote the explanation in plain English.
The guide also became an exercise in information architecture. I wanted someone to be able to find an answer within seconds instead of reading lengthy documentation or performing multiple internet searches
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
Results & Impact
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
My Process
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.
Measure 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.
Work Samples
This project includes:
- Complete HTML, CSS & JavaScript Cheat Sheet (embedded PDF)
- Sample HTML reference pages
- CSS property tables
- JavaScript programming examples with commented source code
- Khan Academy programming projects (external link)
Key Takeaways
Good technical documentation isn’t about documenting everything. It’s about helping people find the right answer at the moment they need it.
This project reinforced my belief that documentation should be organized around how people think, not around how technology is structured. When technical information is presented using familiar language, clear examples, and logical organization, learning becomes faster and far less frustrating.
Sally Scott 