Skip to content

Repository files navigation

The Workshop

Note

If you're new to GitHub, you don't need to worry about repository settings or menus; you only need to read through these pages. Each project folder is like a chapter, with step-by-step exercises inside. When you're ready to begin, head straight to Project 0: Setup.

Table of contents

  1. Welcome
  2. Rules
  3. How to use this workshop
  4. Where to start
  5. License

Welcome!

This is a hands-on workshop where you learn by building real projects.

Each project starts as a runnable skeleton, and your task is to write the code that fills in the missing logic. If you get stuck, every exercise includes hints, so you always have a safety net while working through the logic yourself.

You don't need any prior experience to get started. The first project is a simple browser clicker game that gradually grows into something more complete with upgrades, saved progress, custom styling, etc. You'll pick up standard developer tools and workflows naturally as your projects require them.

One more thing before we dig in: you can't really fail here. If your code isn't working, remember that professional developers spend much of their day diagnosing bugs and figuring out why something isn't working, so treat errors as normal practice rather than a mistake.

Who this is for: Anyone comfortable using a computer who wants to learn programming by building things.

Who this isn't for: Anyone looking for deep computer science theory before writing code, or anyone planning to rely on AI to generate their answers.

Rules

  1. No AI assistance. Don't use ChatGPT, Copilot, Claude, or similar tools to write code for you. Generating code with AI skips the part where the skill gets built, and that part only happens while you work through the problem yourself. When you run into a wall, use the hints instead.
  2. No copying premade solutions. Looking up documentation or language syntax, such as checking how addEventListener works, is expected and standard practice. However, copying a full solution that solves the exercise for you means you finish it without learning anything. A simple rule of thumb: if you can't explain what a line of code does, do not keep it in your project.

How to use this workshop

The workshop is organized into self-contained project folders, each focused on building a complete tool or game through short, incremental exercises. Projects are grouped by difficulty in the project catalog. If you're new to programming, working through the Beginner level in order is recommended, though you're free to jump around.

To work through the projects you'll need your own copy of the workshop, so follow Project 0: Setup to set up your working environment.

Tips for working

Work at whatever pace feels right. Some exercises take minutes, while others take multiple sessions to finish. And when you get stuck, check the collapsible hint section at the bottom of the exercise page. The hints go from gentle to more specific, the last one is usually a search phrase to look up, and none of them will ever just be the answer.

Also read these pages on GitHub, rendered in your browser. Opening them as plain text files in your code editor might accidentally spoil the hidden hints. It's not even comfortable to read anyway.

Skills, achievements, and your PROGRESS.md

Each project lists the skills it covers (such as events, state management, or DOM manipulation) at the top of the page. As you complete projects, you'll copy these skills into your PROGRESS.md. More on that in Project 0: Setup.

  • Prerequisites: Later projects list required skills at the start. You can check your PROGRESS.md to see if you've covered those topics yet, or if you should complete an earlier project first.
  • Achievements: Projects also include secret achievements for exploring beyond the core exercises. When unlocked, these can be added to your PROGRESS.md log.

PROGRESS.md exists entirely for your own reference, to keep track of what you have built and learned throughout the workshop.

Where to start

Head over to Project 0: Setup to get started. It covers everything you need before writing code, including setting up your development environment, installing tools, and making your first commit. You don't need any prior experience with GitHub to begin. It'll walk you through everything. Just click the link.

License

Everything in this workshop is licensed under CC BY-SA 4.0. In plain terms, that means you're free to use it, share it, and build on it, including commercially, as long as you give credit and share what you build under the same license.

About

Learn to code by building real projects, level by level. Fork it and start with Project 0.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors