Live coding a WORDLE clone (5 hrs) | HTML Sass JS - wordle.plus

Live coding a WORDLE clone (5 hrs) | HTML Sass JS

Coder Coder
Views: 34119
Like: 1634
๐Ÿ’ฅ Hit that subscribe button (for SCIENCE!) and we’ll see how many people actually sub from this video ๐Ÿ˜‚

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