Overview

Updated in May 2025. This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. This course teaches you how to build a JavaScript-based card game with random card ordering mechanics. By the end of the course, you will be able to create a fully functional game, applying key skills like HTML structure, CSS Grid for layout, JavaScript asynchronous programming with async/await, the Fetch API for data retrieval, and the Fisher-Yates shuffle algorithm for randomization. You'll also gain expertise in DOM manipulation, CSS animations, and adding interactive features such as dynamic card flipping and game logic with counters. The course is divided into six sections. In the first section, you'll learn to write the HTML, style with CSS, and implement CSS Grid for a responsive layout. You'll also explore CSS root variables and best practices for naming conventions. The second section focuses on populating your game board with cards, using JSON to store card data, and integrating JavaScript for dynamic card referencing. You'll also master advanced techniques for efficient DOM updates. In section three, you’ll implement card flip effects and randomize the card order using the Fisher-Yates shuffle. Section four delves into logic for matching cards, counters, and restricting clicks. The fifth section introduces visual effects like falling stars and a losing image overlay. By the end, you’ll have a polished game ready for testing. This is an intermediate-level course. Developers with basic HTML, CSS, and JavaScript knowledge who want to skill up will find it helpful.

Syllabus

Setting up the project code

In this module, we will kick off the project by setting up the essential HTML structure, diving into the fundamentals of CSS for layout and design, and introducing important styling concepts such as REM vs EM and CSS Grid. You'll also learn how to manage consistent styles with root variables and best practices for a clean, scalable CSS setup.

Populate our CSS grid with cards

In this module, we will focus on populating the CSS grid with dynamically loaded cards from a JSON file. You will learn how to reference, retrieve, and process data using async/await, Fetch, and array methods like map() and flatMap(). Additionally, we'll explore efficient DOM manipulation techniques, such as using document fragments, to enhance performance when adding cards to the grid.

Adding flip effect, and using the Fisher-Yates shuffle

In this module, we will implement interactivity with dynamic event listeners and use CSS 3D transformations for a smooth flip effect. You'll also learn how to randomize the card order using the Fisher-Yates shuffle algorithm and troubleshoot common array-related issues in JavaScript. Finally, we’ll simplify our code with destructuring assignment and other best practices.

Adding logic for matched and unmatched cards, and counters

In this module, we will add the necessary logic for detecting matched and unmatched cards. You will learn how to use flags to limit user interactions, apply the ternary operator for logic checks, and implement setTimeout() for timed actions. Additionally, we’ll explore how to reset game states and prevent repeated clicks, enhancing the overall gameplay experience.

Coding falling stars, and adding a losing image overlay

In this module, we will add an exciting visual effect by coding falling stars and implementing a losing image overlay for when the game ends. You'll learn how to use JavaScript and CSS animations to create the falling star effect, and manage game timing with setInterval and clearInterval to control the gameplay. Testing and cleanup of the animation elements will also be covered to ensure smooth performance.

Outro

In this module, we will wrap up the course by reviewing the concepts and skills you’ve gained in building your JavaScript-based game. We will summarize the techniques used throughout the course and reflect on how to apply them to future projects, ensuring you're ready to take on new challenges in game development.