Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Build a Typing Speed Test with JavaScript and CSS

via Zero To Mastery Path

Overview

Learn how to build a real-time Typing Test app using HTML, CSS, and JavaScript. Practice DOM manipulation, event handling, timers, and responsive design in a hands-on front-end project. Boost your skills and get hired.
  • Handle keyboard input and events in JavaScript
  • Create timers that update the UI in real time
  • Dynamically update the DOM with user feedback
  • Implement state management for web apps
  • Build responsive layouts with CSS
  • Design interactive user experiences
  • Add basic error handling for smoother performance
  • Track typing speed with WPM logic

Syllabus

  •   Introduction
    • Introduction
    • Exercise: Meet Your Classmates and Instructor
    • Course Resources
    • Developer Setup
  •   Typing Test
    • Main UI
    • Shuffle & Generate Text JS
    • Keyboard Input JS (Part 1)
    • Keyboard Input JS (Part 2)
    • Timer & Calculate Score JS
    • Reset Test JS
  •   Appendix - Developer Setup
    • Introduction
    • Mac / Linux Device Setup
    • Windows Device Setup
    • VSCode Setup & Template
    • VSCode Extensions
    • DevTools
    • GitHub
  •   Where To Go From Here?
    • Let's Keep Learning Together!
    • Review This Project!

Taught by

Jacinto Wong

Reviews

Start your review of Build a Typing Speed Test with JavaScript and CSS

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.