Codeloft
0 0 XP
Free · No sign-up · No ads

Learn to code by building, not by reading.

Short lessons where you type real code beside a live preview, get instant checks that tell you what works, and earn XP for every small win.

Start the first lesson See all paths
5 languages34 lessons2 projects7 challenges55 reference entries
Try it: change "Sam" to your name
Live

Pick a path

Each path is one clear sequence of short lessons. You always know what comes next.

<html>

HTML

Give every page its structure: headings, links, images, lists, tables and forms.

0 of 8 lessons52 min
 { css }

CSS

Style pages with color, spacing and layouts that work on any screen.

0 of 7 lessons50 min
 js()

JavaScript

Make pages respond: variables, functions, decisions, arrays, objects and clicks.

0 of 7 lessons52 min
 #include

C++

Learn how programs really run: types, loops, decisions, functions, vectors and classes.

0 of 6 lessons47 min
 Console.

C#

Build solid foundations for apps and games with clean, typed code.

0 of 6 lessons44 min

How a lesson works

Every lesson follows the same four steps, so you spend your energy on the code, not on figuring out the page.

  1. Read for two minutes

    One idea at a time, in plain words, with a worked example and key terms you can tap for a definition.

  2. Type it yourself

    The editor sits next to the lesson. The preview updates as you type.

  3. Watch the checks tick

    Each task turns green the moment your code works, with a clear reason when it doesn't.

  4. Build something real

    Projects pull the lessons together into pages and programs you can show people.

Everything you need in one place

Practice, look things up and experiment without leaving the site.

12

Challenges and quizzes

Code challenges with test cases, a daily challenge, and quizzes that explain every answer.

 55

Reference entries

Short entries with an example and a Try it button, linked to the official docs.

 2

Guided projects

Build a profile card and a working tip calculator, one checklist item at a time.

Playground

HTML, CSS and JavaScript with a live preview and a console. Try any idea.

Code tracer

Watch C++ and C# programs run one line at a time, with every variable shown.

Made for people who are new to this

Everything here is designed around the moments where beginners usually get stuck.

Errors in plain English

When code breaks, you see what the message means and which line to look at, not just red text.

Help that teaches

Hints come one step at a time, and the full solution is there when you need it, so you're never stuck for long.

Checks that test behavior

Your code passes when it works, even if it doesn't match one exact answer word for word.

See code run, line by line

The code tracer steps through C++ and C# programs and shows every variable as it changes.

Progress that adds up

XP, levels, streaks, badges and certificates, saved automatically. No account needed.

Easy on the eyes

No ads. A typeface built for legibility, dark mode, and text size you control.

Your first web page takes 6 minutes.

No account and no download. Open the lesson and start typing.

Start lesson 1