Case study
Resume Builder
Solo project · built with no framework to strengthen my JavaScript basics.
A resume builder I made with core HTML5, CSS, and vanilla JavaScript — no framework. You fill in your details, the preview updates as you type, and you can print or save it as a PDF.
Overview
I built this with only HTML, CSS, and vanilla JavaScript on purpose — I wanted to get comfortable with the DOM and events before leaning on a framework. You fill in a form for each section (details, experience, education, skills), a live preview shows the resume, and you can print or save it as a PDF.
Problems I ran into
…and how I worked through them.
The problem
Keeping the preview in sync with the form as the user typed, without a framework doing it for me.
How I solved it
I listened for input events on the form fields and updated the matching parts of the preview in the DOM directly, so the preview changes instantly as you type.
The problem
When I printed, the browser included the form and buttons and the resume layout broke on the page.
How I solved it
I added a print stylesheet (an @media print block) that hides the form and controls and styles just the resume, so print / save-as-PDF comes out clean.
The problem
Refreshing the page wiped everything the user had typed.
How I solved it
I saved the form data to localStorage and loaded it back on start, so your details survive a refresh.
UI / UX decisions
- Two-panel layout — form on one side, live preview on the other — so you see changes as you make them.
- Stacks to a single column on mobile so it stays usable on a phone.
- Kept the resume itself clean and print-friendly, since the whole point is a document you can hand in.
What I learned
- DOM manipulation and event handling without a framework.
- How print CSS differs from screen CSS, and how browsers handle print / PDF.
- Saving and restoring user data with localStorage.