Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Wordle Workshop

For this series, let's do something a little different! Because Wordle is such an incredibly popular game these days, what if, for fun, we designed and built a Wordle clone from scratch?

My daughter is constantly requesting that I hand-draw simple three-letter challenges for her. So, with that in mind, let's make our version of Wordle a bit more kid-friendly. Ready to get started?

Progress

Series Info

Episodes
17
Run Time
2h 21m
Difficulty
Intermediate
Last Updated
Mar 26, 2022
Version
Latest
Play Series

Series Episodes

  1. Introduction (1)

    1. Series Introduction

      Lately, my five year old daughter has constantly been asking me to make paper Wordles for her. These challenges usually consist of simple, three-letter sight words that she can instantly recognize.One day, it suddenly occurred to me that maybe I should program a kid-friendly clone of Wordle so that I can stop drawing paper grids every morning! And now here we are...
  2. The Grid (3)

    1. Build the Game Grid

      Before we touch any JavaScript, let's first hard-code the markup and CSS for a basic 3x3 Wordle grid. If we do this manually up front, switchcing over to a dynamic version in the next episode will be a much simpler task.

    2. Dynamic Grids With Vanilla JavaScript

      Next, let's turn the hard-coded grid we built into a dynamic one. We'll start by using vanilla JavaScript to construct the necessary elements and throw them into the DOM.

    3. Dynamic Grids With Alpine.js

      Now that you know how to manually build up a DOM fragment, let's save ourselves some time and instead pull in Alpine.js to do the job for us. It's my favorite micro JavaScript framework, and will save us a great deal of time.
  3. Make it Work (8)

    1. The Source of Truth

      In this lesson, we'll turn our grid into a source of truth for the game. To do so, we'll define it as an array on our Alpine component. And because Alpine provides reactivity out of the box, when we modify this array, the HTML grid will automatically re-render to reflect the change.

    2. Submit a Guess

      Let's next move on and validate the user's submitted guess for each row. To allow for this, we should "listen" for when they press the "Enter" key. When they do, we can then compare the current row against the secret word they're trying to guess.

    3. Provide User Feedback

      Currently, we're just displaying an alert box to provide game feedback to the user. But of course, that's only temporary. In this lesson, let's add an output element to the page that can display any message we set on our component.

    4. Conditional Tile Highlighting

      Now, we get to the fun part. A key part of Wordle is the tile highlighting that indicates if your guessed word contains any matching letters. I think this shouldn't be too hard to accomplish!

    5. Refactor Sweep and the Delete Key

      I'd like to accomplish two things in this next episode. First, we'll do a quick refactoring sweep. Steps like this should be performed continuously as you build an app. Once that's complete, we can move on to handling when the "Delete" key is pressed by the user.

    6. Make it Look Professional

      We still have more JavaScript to write, but let's take a short break to focus on the design of our Wordle clone. It's amazing when just a touch of CSS can make a page feel so much more professional.

    7. Check the Dictionary

      Next up, we can move on to word validation. At the moment, we accept any submission - which of course isn't fair. So let's figure out the simplest way to verify that the user's submitted word is, in fact, a word!

    8. Fix a Tile Highlighting Bug

      I think we have a small tile highlighting bug in our code. What if we guess a word that contains two of the same letter? We might run into a situation where one tile is incorrectly marked as "present." Let's fix that!
  4. The Keyboard (3)

    1. Build the Keyboard

      Our TryCat app is still missing one key feature. The Wordle keyboard is incredibly useful for deciding what your next guess will be. Let's begin building a similar version in this episode.

    2. Make the Keyboard Pretty

      The current "design" of our keyboard will get the job done, but let's take five minutes or so to make it look a bit more attractive and similar to what the official Wordle site provides.

    3. Keyboard Highlighting

      In this episode, let's figure out how to make each key on our keyboard conditionally highlight to reflect the tile status for the corresponding key. This is a core feature of the actual Wordle game, so it's important that we implement something similar.
  5. Finishing Up (2)

    1. Final Refactor Sweep

      At this point, our project is feature complete. So let's begin wrapping up by doing our final sweep through the codebase, performing any tweaks and refactors that jump out at us. Specifically, we'll do a third pass through the tile highlighting logic to get it just right.

Continue Learning

JavaScript Essentials for PHP Developers thumbnail

JavaScript Essentials for PHP Developers

With Jeremy McPeak

Unlock the power of JavaScript with this tailored series designed for PHP developers looking to expand their skills. Learn key concepts, syntax, and practical applications to seamlessly transition from server-side to client-side coding.

  • 35 Episodes
Object-Oriented Principles in PHP thumbnail

Object-Oriented Principles in PHP

With Jeffrey Way

Beginning developers are usually first introduced to procedural programming. But, before too long, they level up. Suddenly, an entirely different paradigm is introduced: object-oriented programming. Little do they know that they'll spend years researching and learning exactly what it means to work with objects and messages. In this course, you'll be introduced to the core principles of object-oriented programming through the lens of PHP. We'll begin with the basic constructs and work our way up. The only prerequisite is an elementary understanding of the PHP language and syntax.

  • 10 Episodes
PHP For Beginners thumbnail

PHP For Beginners

With Jeffrey Way

We all start somewhere. For programming, this series is that first step. I've designed it specifically for newcomers to, not just PHP, but programming in general. Here, you'll learn the fundamentals of PHP - all the way down to defining basic variables and arrays.Think of this series as a key stepping stone for your programming journey.

  • 50 Episodes
JavaScript: The First Steps thumbnail

JavaScript: The First Steps

With Andre Madarang

JavaScript is one of the most popular and versatile programming languages when working on the web. It makes for a great first language to learn as you can get started with any web browser and its built-in devtools.This beginner-focused series will take you through the fundamentals of JavaScript and give you a solid understanding of how the language works. Once the fundamentals are under your belt, you should be comfortable writing JavaScript in your own applications or continue your JavaScript journey by learning new frameworks or technologies that are built on top of it.

  • 30 Episodes
CSS Flexbox Simplified thumbnail

CSS Flexbox Simplified

With Shruti Balasa

Flexbox is no longer an advanced topic in CSS. Today, it's an essential tool for styling modern web pages. In this course, we'll use a variety of real-world examples and components to explore all of the CSS properties related to flexbox. These examples will help you to better understand the core concepts and commit them to memory.

  • 12 Episodes