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

Опубликовано: 02 Октябрь 2024
на канале: Coder Coder

45,218

1.9k

💥 Hit that subscribe button (for SCIENCE!) and we'll see how many people actually sub from this video 😂

Source code on GitHub: https://github.com/thecodercoder/word...
Live demo here: https://thecodercoder.github.io/wordl...
Boilerplate files (if you don't want to use the generator): https://github.com/thecodercoder/fron...

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...

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:    / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...

WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/

RECOMMENDATIONS
⌨ My keyboard, Vissles V84 -- https://vissles.com/?ref=mu96kxst5w -- 🔥 get 10% off with code THECODERCODER --
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...

🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter --   / thecodercoder
Instagram --   / thecodercoder

#webdevelopment #coding #programming