Learn to code, one step at a time.

Courses

• </>
  HTML: Build it

  The skeleton of every web page.

• #
  CSS: Style it

  Colors, fonts and layout. Make it beautiful.

• JS
  JavaScript: Bring it to life

  Make your pages think, react and do things.

• Re
  React: Build apps with components

  After JavaScript: build interfaces from components, with JSX, props, state, lists, forms and effects, like Instagram and Netflix do.

• A+
  Web exam: Websites & Frontend: the summary exam

  HTML, CSS and JavaScript together. Opens after all three courses.

• { }
  JSON: Shape your data

  The format every app, game save and API speaks.

• SQL
  SQL: Talk to databases

  Ask your data questions and get answers in milliseconds, like every big app does.

• R
  Redis: Super-fast data

  The in-memory database behind caches, sessions, leaderboards and queues. Learn it one command at a time.

• A+
  Data exam: Databases: the summary exam

  JSON and SQL together. Opens after both courses.

• API
  Node.js: Build the server

  Write real APIs with Node.js and Express: routes, JSON, data and security.

• A+
  Backend exam: Backend: the summary exam

  Servers, APIs, data and security. Opens after the backend course.

• Lua
  Lua: Roblox for beginners

  Roblox-style Lua from zero: from your first print to coins, lava and a working obby. Then go on to Roblox for advanced.

• Pro
  Lua Pro: Roblox for advanced

  After the beginner course: smart tables, classes, cloning, debounce, timers and tweens, server and client, and saving player data.

• JS
  JavaScript: Arcade games

  Draw, move and collide: build arcade games for the browser with JavaScript and canvas.

• A+
  Games exam: Games: the summary exam

  Game scripting from start to finish. Opens after the games courses.

Every course is open: start wherever you like. Inside a course each step opens when you finish the one before it, every course ends with an exam and a final project, and every category ends with a summary exam.

TOMPA in numbers

• 15Courses
• 341Hands-on lessons
• 93Chapters

What you will learn

Every chapter here is real and ready to open. Pick a course to see what is inside.

Build it (HTML)

1. Hello, Web! · 6 lessons

   Write your first tags, then see what happens when one is missing and how browsers react to mistakes.

2. Text & Structure · 7 lessons

   Headings, bold, italic and lists. The building blocks of every article and menu.

3. Links & Images · 6 lessons

   Connect pages together and add pictures. Plus what happens when a picture goes missing.

4. Page Anatomy · 5 lessons

   What every real page is made of: head, body, title and friendly structural tags.

5. Forms & Inputs · 6 lessons

   Text boxes, buttons, checkboxes and dropdowns. Let visitors type things in.

6. Project: All About Me · 3 lessons

   Put it all together and build your own personal profile page from scratch.

7. HTML exam · 1 lesson

   Ten questions about everything in this course. Pass with 8 right answers.

8. Final project · 1 lesson

   Build a complete web page of your own, from scratch, and send it for review.

Style it (CSS)

1. First Styles · 2 lessons

   Change colors and sizes, and learn how CSS handles mistakes.

2. Selectors · 6 lessons

   Pick exactly which elements to style, and find out why your style sometimes does not win.

3. The Box Model · 6 lessons

   Every element is a box. Learn margin, padding and borders with an interactive diagram.

4. Colors, Fonts & Effects · 5 lessons

   Hex colors, Google Fonts, gradients and soft shadows.

5. Layout · 6 lessons

   Line things up with Flexbox and Grid using small visual puzzles.

6. Responsive & Motion · 4 lessons

   Make pages work on phones, then make things move.

7. Project: Style Your Page · 3 lessons

   Take your All About Me page from the HTML course and give it a professional look.

8. CSS exam · 1 lesson

   Ten questions about everything in this course. Pass with 8 right answers.

9. Final project · 1 lesson

   Take a plain page and design it into a real site of your own: layout, cards, colors, hover and phones. Then send it for review.

Bring it to life (JavaScript)

1. Hello, JavaScript · 2 lessons

   Print your first message and learn to read your first error.

2. Variables & Types · 5 lessons

   Give names to values. Text, numbers and yes/no.

3. Decisions · 5 lessons

   Make your code choose with if and else.

4. Functions · 5 lessons

   Package code into reusable tools.

5. Arrays, Loops & Objects · 6 lessons

   Handle lists of things without repeating yourself.

6. The DOM · 4 lessons

   Reach into the page and change it from JavaScript.

7. Events · 4 lessons

   React to clicks, typing and key presses.

8. Final Project · 3 lessons

   Build a real interactive app. A to-do list or a color palette maker.

9. JavaScript exam · 1 lesson

   Ten questions about everything in this course. Pass with 8 right answers.

10. Final project · 1 lesson

    Bring a shopping-list app to life with JavaScript, add your own touch, and send it for review.

Build apps with components (React)

1. Hello, React · 5 lessons

   What React is, your first components, JSX, and JavaScript inside JSX.

2. The rules of JSX · 4 lessons

   className, styles as objects, and why every tag must close.

3. Props · 5 lessons

   Pass data into components, reuse them, and fill them with children.

4. Lists and keys · 5 lessons

   Turn arrays into lists with map, give every item a key, and filter what to show.

5. State and events · 5 lessons

   Make pages that react to clicks: useState, onClick, counters and switches.

6. Forms and input · 5 lessons

   Fields that follow typing, adding to lists, and forms that send without reloading.

7. Conditions and effects · 5 lessons

   Show things only when needed, and run code after drawing with useEffect: titles and loading data.

8. React exam · 1 lesson

   Ten questions about everything in this course. Pass with 8 right answers.

9. Final project · 1 lesson

   Build a shopping list app with your own components, state, a form and a list. Then send it for review.

Websites & Frontend: the summary exam (Web exam)

1. Summary exam · 1 lesson

   Twelve questions that connect HTML, CSS and JavaScript. Pass with 9 right answers.

Shape your data (JSON)

1. Hello, JSON · 5 lessons

   What JSON is, how an object is written, and the two mistakes everybody makes at first.

2. Six kinds of values · 5 lessons

   Text, numbers, true and false, null, and objects inside objects. Each one has its own rules.

3. Lists and nesting · 5 lessons

   Lists hold many values in order, and objects can live inside objects. This is how real data is shaped.

4. JSON in real apps · 5 lessons

   Your JSON powers little apps here: a profile card, a playlist, a weather widget and a shop. Change the data, and the app changes.

5. JSON exam · 1 lesson

   Eight questions about everything in this course. Pass with 6 right answers.

6. Final project · 1 lesson

   Design the data for an app of your own, and send it for review. A real person checks it and answers you.

Talk to databases (SQL)

1. Your first queries · 5 lessons

   A database is a set of tables. SELECT asks a table for its rows, and you choose which columns come back.

2. Filter with WHERE · 5 lessons

   Ask only for the rows you need: players from one country, rich players, names that start with S.

3. Sort, count and group · 5 lessons

   Top-3 lists, totals and statistics: ORDER BY, LIMIT, COUNT and GROUP BY.

4. Add, change and remove · 5 lessons

   INSERT a new player, UPDATE coins, DELETE a cheater, and learn the one mistake that wipes a whole table.

5. Your own tables, and JOIN · 4 lessons

   Design tables with CREATE TABLE, and connect tables with JOIN to answer "who bought what?".

6. SQL exam · 1 lesson

   Ten questions about everything in this course. Pass with 8 right answers.

7. Final project · 1 lesson

   Design and fill the database for an app of your own, ask it a real question, and send it for review.

Super-fast data (Redis)

1. Hello, Redis · 5 lessons

   What Redis is and why apps love it. Save keys, read them, delete them, and name them like a pro.

2. Counters and time · 6 lessons

   Count visits and coins in one safe step, and make keys that delete themselves after a while.

3. Lists · 5 lessons

   Ordered values: to-do lists, job queues and "the latest 10" lists.

4. Hashes · 5 lessons

   One key, many fields: user profiles and objects, and counters inside them.

5. Sets · 5 lessons

   Unique values: tags, who is online, and friends in common.

6. Sorted sets · 5 lessons

   Members with scores, always in order: leaderboards, ranks and score ranges.

7. Redis in real apps · 6 lessons

   The patterns behind real products: caches, rate limiters, login sessions and transactions.

8. Redis exam · 1 lesson

   Ten questions about everything in this course. Pass with 8 right answers.

9. Final project · 1 lesson

   Design the data of an online game in Redis: profiles, a leaderboard, inventories, sessions and counters. Then send it for review.

Databases: the summary exam (Data exam)

1. Summary exam · 1 lesson

   Twelve questions that connect JSON and SQL. Pass with 9 right answers.

Build the server (Node.js)

1. Your first server · 5 lessons

   What a server is, how a request becomes an answer, and how to start one with Express.

2. Send JSON · 4 lessons

   Apps don't want web pages from an API, they want data. res.json() sends it, in exactly the format you learned.

3. Routes with parameters · 5 lessons

   One route for every player: /api/hello/:name, ?search=pizza, and the 404 for things that do not exist.

4. Receive data with POST · 4 lessons

   Sign-ups, new posts, high scores: apps send data to the server. Read it, check it, save it, and answer 201 or 400.

5. A full REST API · 4 lessons

   Read, create, update and delete: a complete to-do API, with middleware that logs every request and protects private routes.

6. Backend exam · 1 lesson

   Ten questions about servers, routes, JSON and REST. Pass with 8 right answers.

7. Final project · 1 lesson

   Build a real API for a topic you love, test it with requests, and send it for review.

Backend: the summary exam (Backend exam)

1. Summary exam · 1 lesson

   Twelve questions about servers, APIs, data and security. Pass with 9 right answers.

Roblox for beginners (Lua)

1. Hello, Lua · 5 lessons

   Lua is the language of Roblox scripts. Print your first messages and learn how comments work.

2. Variables · 5 lessons

   Coins, health, player names: games are full of values that change. Store them in variables, do math, and join text with ..

3. Decisions with if · 5 lessons

   Can the player afford the sword? Is the boss defeated? if, elseif and else let your game decide.

4. Loops · 5 lessons

   Countdowns, waves of enemies, laps: loops repeat code so you don't have to.

5. Tables and functions · 5 lessons

   An inventory is a table, a player is a table, and a heal is a function. The two building blocks of every Roblox game.

6. Build the world · 5 lessons

   Parts are the blocks every Roblox world is made of. Create them, size them, color them and place them, from code.

7. Players and events · 6 lessons

   Games react: a player joins, a coin is touched, someone steps on lava. Events and :Connect make it happen.

8. Lua exam · 1 lesson

   Ten questions about Lua and Roblox scripting. Pass with 8 right answers.

9. Final project · 1 lesson

   Script a mini obby of your own: a course, collectibles, danger and a leaderboard. Then send it for review.

Roblox for advanced (Lua Pro)

1. Tables like a pro · 6 lessons

   Dictionaries, pairs, sorting and tables inside tables: how real games keep shops, inventories and player data.

2. Functions like a pro · 6 lessons

   Return several values, give defaults, pass functions around, make closures and format text: the tools behind every clean script.

3. Objects and classes · 5 lessons

   Methods with self, the colon that matters, an Enemy class you can make a hundred times, and modules shared between scripts.

4. Working with the world · 5 lessons

   Clone templates, loop over folders, give objects your own attributes, and find things safely.

5. Events like a pro · 7 lessons

   Debounce, buttons you click, Press E prompts, deaths and respawns, and events that run only once.

6. Time and animation · 6 lessons

   Timers with task.wait, things that come back with task.delay, smooth movement with TweenService, and the loop that freezes a game.

7. Server and client · 5 lessons

   Where your code really runs, how the server and the players talk with RemoteEvents, and how to stop cheaters.

8. Saving data · 5 lessons

   DataStores that remember every player: save when they leave, load when they come back, and stay safe when the servers fail.

9. Advanced exam · 1 lesson

   Ten questions about everything in this course. Pass with 8 right answers.

10. Final project · 1 lesson

    Build Coin Rush: cloned coins, prompts, timers and saved progress, in one game of your own. Then send it for review.

Arcade games (JavaScript)

1. Drawing on a canvas · Coming soon

   A canvas is a blank board you draw on with code: shapes, colors and sprites.

2. The game loop · Coming soon

   Every game redraws itself 60 times a second. Learn the loop that makes things move.

3. Keyboard and touch controls · Coming soon

   Arrow keys, jumping and tapping: let the player take control.

4. Collisions · Coming soon

   Did the player hit the wall, the coin or the enemy? The math behind every arcade game.

5. Score, lives and levels · Coming soon

   Turn a moving square into a real game, with a score, lives and a game-over screen.

Games: the summary exam (Games exam)

1. Summary exam · 1 lesson

   Twelve questions about scripting games. Pass with 9 right answers.

How it goes

1. 1. Read a short mission

   Two or three sentences: the new idea, and what to do with it.

2. 2. Write real code

   A real code editor with highlighting, right in the browser. Nothing to install.

3. 3. See it right away

   The preview updates as you type, and a checklist ticks off each requirement.

4. 4. Level up

   Earn XP, keep a streak and unlock the next lesson, chapter and course.

How do I do it?

• Try it

  Change working code and see the result immediately.

• Exercise

  Complete a task. A checklist confirms each requirement as you type.

• Debug

  Fix code that is broken on purpose, and learn why it failed.

• Quiz

  Check your understanding at the end of a chapter.

Then build a site of your own

The Playground is a full editor for HTML, CSS and JavaScript files. When your site is ready, publish it at your own address and send the link to anyone.

Questions