WriteMate is a six-page website I built for a uni front-end module. It uses plain HTML, CSS and JavaScript, no frameworks and no build step.
The site brings together four things students reach for a lot: a typing speed test that shows live WPM and accuracy, a keyboard practice mode with an on-screen keyboard, a set of writing tools (word counter, case converter, text transform, lorem ipsum), and an essay helper that fills six different document templates from your inputs.
HTML5, CSS3, plain JS
CSS variables for the colour theme
Responsive grid layout
Google Fonts (Fraunces, Inter, JetBrains Mono)
Static multi-page site
Shared base + navbar stylesheets
One CSS file per page
One JS file per interactive page
I started with the typing test because that was the part I was least sure about. Once the WPM and accuracy logic worked, the rest came faster. The keyboard practice page took the longest to style, mostly because I kept redoing the finger-zone colours. I finished the templates page last and ended up rewriting the essay builder twice before I was happy with how it preview-updated as you type.
WriteMate/ index.html Home typing-test.html Typing speed test practice.html Keyboard practice tools.html Writing utilities templates.html Essay templates about.html This pag contact.html Contact form css/ base.css Variables, layout, buttons, cards navbar.css Top navigation home.css Home page about.css About page (timeline) contact.css Contact form practice.css Keyboard practice tools.css Writing tools tabs templates.css Templates & builder typing.css Typing test responsive.css Mobile breakpoints js/ main.js Shared (mobile menu, year, toast) typing.js Speed test engine practice.js Keyboard practice tools.js Writing tools templates.js Essay builder contact.js Form validation
Built as a coursework submission. Fonts from Google Fonts.