Coursera Plus Annual is 40% Off — Ends July 13.

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

YouTube

Live Coding a Wordle Clone - HTML, Sass, JS

via YouTube

Start learning Write review
Boot.dev Ad

The Most Addictive Python and SQL Courses

Learn More → DataCamp Ad

PowerBI Data Analyst - Create visualizations and dashboards from scratch

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Follow along with a comprehensive 4-hour and 45-minute live coding session to build a WORDLE clone from scratch using HTML, Sass, and JavaScript. Begin by setting up boilerplate project files and conducting research. Progress through HTML and Sass implementation, then dive into JavaScript functionality including keypress detection, guess saving, tile updates, random word selection, guess evaluation, and animations. Learn to create engaging game mechanics and visual effects while gaining practical experience in front-end web development.

Syllabus

- Intro.
- Tea break.
- Set up boilerplate project files.
- Research and taking notes.
- HTML and Sass.
- JS: detect keypress.
- Save typed guess.
- Update tiles with letters and backspace.
- Choose random solution word.
- Submit guess and evaluate.
- Flip tile animation.
- Increment guesses.
- Win tile animation.

Taught by

Coder Coder

Reviews

Start your review of Live Coding a Wordle Clone - HTML, Sass, JS

Start learning

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.