YoVDO

Live Coding a Wordle Clone - HTML, Sass, JS

Offered By: YouTube

Tags

HTML & CSS Courses Web Development Courses Javascript Courses Sass Courses Animation Courses HTML Courses Web Application Development Courses

Course Description

Overview

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

Related Courses

Programming Languages
University of Virginia via Udacity
Building a Basic Website
University of Massachusetts Amherst via Independent
iDESWEB, Introducción al desarrollo web
Miríadax
Web Engineering II: Developing Mobile HTML5 Apps
Technische Hochschule Mittelhessen via iversity
Web Application Architectures
University of New Mexico via Coursera