Live coding a WORDLE clone (5 hrs) | HTML Sass JS
Source code on GitHub:
Live demo here:
Boilerplate files (if you don’t want to use the generator):
๐ฅ My course: Responsive Design for Beginners!
๐ป Become a full-stack web dev with Zero to Mastery:
In this video I’ll show you how I research and build a Wordle clone from scratch with HTML, Sass, and JavaScript.
0:00 – Intro
0:49 – Tea break
0:53 – Set up boilerplate project files
2:07 – Research and taking notes
32:57 – HTML and Sass
52:37 – JS: detect keypress
1:20:28 – Save typed guess
1:38:14 – Update tiles with letters and backspace
2:07:07 – Choose random solution word
2:23:05 – Submit guess and evaluate
2:43:27 – Flip tile animation
3:38:27 – Increment guesses
4:25:26 – Win tile animation
____________________________
SUPPORT THE CHANNEL
โญ Join channel members and get perks:
๐๐ฝ Hit the THANKS button in any video!
๐จ Get my VS Code theme:
WANT TO LEARN WEB DEV?
Check out my courses:
๐ Responsive Design for Beginners:
๐ Gulp for Beginners:
RECOMMENDATIONS
โจ My keyboard, Vissles V84 — — ๐ฅ get 10% off with code THECODERCODER —
๐ป Other gear —
๐ My Favorite Books —
๐บ My Favorite Courses —
๐ฝ FOLLOW CODER CODER
Blog —
Twitter —
Instagram —
#webdevelopment #coding #programming