Tools

View all tools →

Web Dev Learning Roadmap

Aligned with industry-standard roadmaps. Progress from IT basics to real projects step by step. Completely free, runs in your browser.

No coding experience needed. Follow the 2-step format — read the guide, then do the exercises — to learn HTML, CSS, JavaScript, and API integration without giving up.

Recommended approach

① Read the guide → ② Do the exercises

Skipping guides makes exercises hard. Follow this order.

① Start from the first step (IT/Web Basics)
🌐

IT/Web Basics

1-2 hours Beginner

Understand how the Web works. Essential foundational knowledge before coding.

Overview

What is this?

IT/Web Basics covers the knowledge of how websites and web apps work. Knowing terms like server, client, HTTP, and network makes learning programming much smoother.

Why does it matter?

Most programming schools start with these basics. You can build simple pages without it, but when you build complex things, you'll get stuck not knowing 'why it's broken'. Learning this early saves time.

What you'll learn
  • How web pages are displayed (Client and Server)
  • What HTTP/HTTPS is
  • The role of the browser
  • Differences in roles between HTML, CSS, and JavaScript

In depth

Client and Server

On the Web, a 'Client' (your PC/smartphone) sends a request ('Please give me this page') to a 'Server' (a distant computer hosting data), and the server returns files like HTML. The browser interprets and displays it.

Example:
  • You enter a URL → Browser requests from server → Server returns HTML → Browser displays it
Tips:
  • Client = requesting side, Server = providing side
  • One server responds to many clients
Common Mistakes:
  • Confusing server and client
  • Thinking a 'server' is a special machine → A normal PC can be a server

HTTP and HTTPS

HTTP is the 'protocol' for exchanging data between server and client. HTTPS is the encrypted, secure version. If a URL starts with https://, the communication is encrypted.

Example:
  • http://example.com → Unencrypted
  • https://example.com → Encrypted (padlock icon)
Tips:
  • HTTPS is standard now. HTTP is being deprecated.
  • Always use HTTPS for submitting forms.
Common Mistakes:
  • Confusing HTTP and HTML
  • Thinking HTTPS is a 'different system' → It's just encrypted HTTP

Roles of HTML, CSS, and JS

HTML is 'structure' (what there is: headings, paragraphs, links). CSS is 'appearance' (colors, size, layout). JavaScript is 'behavior' (reacting to clicks, inputs). The three work together to form a web page.

Example:
  • HTML: <h1>Title</h1> defines a heading
  • CSS: h1 { color: blue; } makes it blue
  • JavaScript: Shows an alert on button click
Tips:
  • Skeleton with HTML, decorate with CSS, move with JS
  • Separating roles makes maintenance easier
Common Mistakes:
  • Trying to handle appearance in HTML → leave it to CSS
  • Trying to write everything in JavaScript → put structure in HTML

Practical steps

  1. 1
    Open Developer Tools (DevTools) 2 mins

    Let's peek behind the scenes (HTML) of the page you're looking at right now. Pros use this literally every day.

    • Right-click anywhere on the page and select 'Inspect' or 'Inspect Element'
    • A scary-looking panel with code will pop up on the right or bottom
    • Make sure the 'Elements' tab is selected

    You can also hit F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac).

    ✓ DevTools opened successfully / You can see something that looks like HTML code

    Troubleshooting:

    Right-clicking doesn't show 'Inspect' → Make sure you're using a modern desktop browser like Chrome, Firefox, or Edge.

FAQ

What's the deal with HTTP vs HTTP/3?
HTTP/1 and 2 used TCP, which is like 'I will definitely deliver this package!'. HTTP/3 uses UDP (QUIC), which is more like 'YEET! Throw it as fast as possible!'. It miraculously recovers from connection drops way faster. For now, just know 'newer is faster'.
Why separate Web Servers and DB Servers? Why not just bundle them?
Security and scalability, my friend. If a hacker breaches your Web server, you still want your DB safe. Plus, when traffic spikes, you can say 'Spin up 3 more Web servers!' without replicating your entire heavy database. Don't put all your eggs in one easily-hackable basket.
I got a red screen saying 'CORS error'. What did I do wrong?
Ah, everyone's favorite trauma—CORS! It's your browser playing bouncer, saying 'Whoa there, you can't just fetch data from a random different domain!'. It's a security feature. It's annoying at first, but it's a rite of passage when you start working with APIs.
What are those 404 and 500 numbers all about?
Status codes! The 400s (like 404) mean 'You (the user) messed up, that page doesn't exist'. The 500s mean 'I (the server) messed up and died, sorry bro'. It's the ultimate 'whose fault is it?' indicator for debugging.

You understand how the Web works.

Next is environment setup. Prepare your browser and editor, and let's write our first HTML.

① Read the guide → ② Next step (Environment Setup)
🔧

Environment Setup

30 mins Beginner

Just a browser and an editor. Start right now. Everything runs in the browser.

Overview

What is this?

Environment setup is preparing to start programming. It sounds difficult, but on this site, you can practice in the browser alone. For local development, having a 'browser' and a 'text editor' gets you started immediately.

Why does it matter?

The great thing about web development is that you can start with tools already on your computer. Exercises are completed in the browser, so no installation is needed. Let's start casually.

What you'll learn
  • The role and usage of a browser
  • How to create an HTML file with a text editor (for local dev)
  • How to use the exercise screen (Code → Run → Preview)
  • How to install VS Code (Optional)

In depth

What is a browser?

A browser is software for viewing web pages. Examples include Chrome, Edge, Firefox, Safari. You are using one right now. It interprets HTML and displays it in a readable format.

Example:
  • Windows: Edge (pre-installed)
  • Mac: Safari (pre-installed)
  • Any OS: Chrome (free download)
Tips:
  • Basic functions are the same across browsers
  • Developers usually use Chrome (DevTools is handy)
Common Mistakes:
  • Confusing a browser with Google Search
  • Using Internet Explorer → old and deprecated

Exercise Flow

Write code in the top editor, click 'Run', and see the result in the preview below. No setup required. It's all in the browser. Start with the 'Experience' problem to get the feel of pressing Run.

Example:
  • 1. Read the explanation
  • 2. Write code (or fill in the blanks)
  • 3. Click the Run button
  • 4. Check the preview
Tips:
  • It's okay to copy-paste the solution first to experience it 'working'
  • If there's an error, click the line number to jump to it
Common Mistakes:
  • Starting with hard problems right away → go in order: Experience → h1 → p

What is an HTML file? (For Local Dev)

An HTML file is the blueprint of a web page. A file ending in .html becomes a web page in a browser. You can create it in Notepad. You don't need to create files for the exercises here.

Example:
  • index.html: Common name for a top page
  • about.html: Company info page, etc.
Tips:
  • Use half-width alphanumeric characters for filenames
  • It won't open in a browser unless the extension is .html
Common Mistakes:
  • index.html.txt → double extension
  • Using spaces in filenames → use hyphens

Practical steps

  1. 1
    Open the exercise page 1 min

    Open the 'Exercises' page.

    • Click 'Learning' → 'Exercises' from the top menu
    • Or go to /en/learn/ directly
    • Pick a problem to solve

    ✓ Exercise page displayed / Problem list is visible

    Troubleshooting:

    Page not found → Check the URL. Does it start with https://?

  2. 2
    Solve the 'Experience' problem 2 mins

    In the first 'Experience: Let's Run It' problem, press Run and check the preview.

    • Select the 'Environment' category
    • Click 'Experience: Let's Run It'
    • Click 'Run' without changing the code
    • Success if 'Hello World' appears in the preview
    <h1>Hello World</h1>

    The Run button is below the code editor

    ✓ Pressed the Run button / Something appeared in the preview

    Troubleshooting:

    Nothing displayed → Scroll to check the preview area. Check the console for errors.

  3. 3
    Write your first HTML 5 mins

    In the 'First HTML' problem, write code using an h1 tag to display 'Hello World'.

    • Type <h1>Hello World</h1> in the editor
    • Use half-width < and >
    • h1 should be lowercase
    • Run and check the preview
    <h1>Hello World</h1>

    < and > must be half-width. Full-width won't work.

    ✓ Entered the code / Ran and displayed 'Hello World'

    Troubleshooting:

    < or > are full-width characters → Ensure they are typed in English input mode.

FAQ

I changed my code but the browser didn't update. Why?
Browser caching is probably trolling you. Open DevTools (F12), click and hold the refresh button, and smash 'Empty Cache and Hard Reload'. Or just spam Ctrl+Shift+R (Cmd+Shift+R on Mac).
Can't I just use local files (file://) instead of a Web Server (http://)?
You can for basic stuff, but the second you try to use Fetch API or ES Modules (import/export), the browser will scream 'SECURITY RISK!' and block you. Using the 'Live Server' extension in VS Code is the easiest workaround—it spins up a fake server for you.
I saved as .html but it just shows up as plain text in the browser...
Classic Windows trap. Your OS is hiding file extensions, so you probably actually named it 'index.html.txt' without knowing. Go to Explorer view settings and check 'File name extensions' to reveal the truth.
Any God-tier VS Code extensions I should install on day 1?
Definitely 'Live Server' (auto-reloads your browser the second you hit save) and 'Auto Rename Tag' (because manually changing the closing tag every time you change an opening tag is a form of torture).

Environment ready! You experienced writing code and seeing results instantly.

Next, we'll dive deeper into HTML basics. Headings, paragraphs, lists, links — we'll cover tags that structure text one by one.

① Read the guide → ② Do exercises (6)
📝

HTML Basic

1-2 weeks Beginner

Headings, paragraphs, lists, links. Learn tags one by one.

Overview

What is this?

HTML is the language that structures a web page. It uses tags (like <h1>) to tell the browser 'this is a heading' or 'this is a paragraph'.

Why does it matter?

You can't build web pages without HTML. It is the foundation of all websites. Let's master the basic tags.

What you'll learn
  • How to use headings (h1-h6)
  • Writing paragraphs (p)
  • List structures (ul, ol, li)
  • Links (a) and images (img)
  • When to use strong, em, div, span

In depth

HTML Tag Basics

HTML wraps elements in 'tags'. Write text between an opening tag <h1> and closing tag </h1>. Example: <h1>Title</h1>. Lowercase is recommended.

Example:
  • <h1>Heading</h1>
  • <p>Paragraph text</p>
  • Error: <h1>Heading (forgot closing tag)
Tips:
  • Always pair open and close tags
  • Close inner tags before outer tags when nesting
Common Mistakes:
  • Forgetting </h1>
  • Using uppercase tag names (it works but is discouraged)

Headings (h1-h6)

Headings represent document structure. h1 is largest, h6 smallest. h1 is the main title (use only one per page). h2 is a major section, h3 a subsection.

Example:
  • <h1>My Page</h1>
  • <h2>About Me</h2>
  • <h3>Hobbies</h3>
Tips:
  • Don't skip hierarchy (avoid going from h1 to h3 directly)
  • Prioritize meaning over appearance
Common Mistakes:
  • Using multiple h1s → bad for SEO
  • Using headings just to make text bold

Paragraphs (p)

The p tag stands for paragraph. It defines a block of text. Example: <p>This is a paragraph.</p>. Use multiple p tags for multiple paragraphs.

Example:
  • <p>My first web page.</p>
  • <p>Paragraph 1</p><p>Paragraph 2</p>
Tips:
  • Placing paragraphs under headings makes it readable
  • Use multiple p tags instead of <br> for spacing
Common Mistakes:
  • Putting a p inside another p → Invalid HTML
  • Forgetting the p tag and just typing text

Lists (ul, ol, li)

ul is an unordered list (bullet points), ol is an ordered list (numbered). li represents a list item. li must be placed directly inside ul or ol.

Example:
  • <ul><li>Apple</li><li>Orange</li></ul>
  • <ol><li>Step 1</li><li>Step 2</li></ol>
Tips:
  • Never put anything except li directly inside ul/ol
  • Use ol for steps and rankings
Common Mistakes:
  • Putting other tags directly inside ul
  • Using li outside of ul/ol

Links (a)

The a tag creates a link. The href attribute specifies the destination URL. Example: <a href="https://example.com">Site</a>. href is mandatory.

Example:
  • <a href="/about">About Us</a>
  • <a href="https://google.com">Google</a>
Tips:
  • Add target="_blank" rel="noopener" for external links to open in a new tab
Common Mistakes:
  • Forgetting the href attribute
  • Forgetting quotes around the URL

Images (img)

The img tag displays an image. src sets the image URL, alt provides an alternative description (required for accessibility). It's a self-closing tag.

Example:
  • <img src="https://example.com/img.png" alt="Sample Image">
Tips:
  • alt is read by screen readers and displayed if the image fails to load
Common Mistakes:
  • Skipping the alt attribute
  • Wrong src URL path

strong, em, div, span

strong indicates strong importance (bold), em implies emphasis (italic). div is a block element, span is inline. div and span carry no semantic meaning; they are for group/styling.

Example:
  • <p>This is <strong>important</strong>.</p>
  • <div>Block 1</div><div>Block 2</div>
  • <p>This is <span style="color:red">red</span>.</p>
Tips:
  • strong/em add meaning. Avoid b/i (presentation only)
Common Mistakes:
  • Confusing the use case for div vs span

Tables (table)

Tags for creating tabular data. Wrap everything in table, and use tr (row), th (header cell), and td (data cell).

Example:
  • <table>\n <tr>\n <th>Header</th>\n </tr>\n <tr>\n <td>Data</td>\n </tr>\n</table>
Tips:
  • Do not use tables for page layout
Common Mistakes:
  • Writing text directly inside tr → must be inside th or td

Semantic Tags

Tags that carry meaning about their content: header, main, footer, nav, article (independent content), section (thematic grouping). Useful for SEO and accessibility.

Example:
  • <article>\n <section>Chapter 1</section>\n</article>
Tips:
  • Think if there's a better semantic tag before using div
Common Mistakes:
  • Using div for everything (div soup)

Form Basics

Forms gather data from users. Wrap everything in a form, and place input (single line), textarea (multi-line), select (dropdowns), etc., inside.

Example:
  • <form>\n <input type="text" name="username">\n <button type="submit">Submit</button>\n</form>
Tips:
  • Data won't be sent properly without a name attribute
Common Mistakes:
  • Forgetting the form tag and just writing inputs

Labels and Checkboxes

Connecting a label tag to an input makes the text clickable to toggle the input. Match the 'for' attribute to the input's 'id'.

Example:
  • <label for="agree">I agree</label>\n<input type="checkbox" id="agree" name="agree">
Tips:
  • Wrapping the input inside the label also works (<label><input> Agree</label>)
Common Mistakes:
  • Forgetting 'for' and 'id' attributes

Custom Data Attributes

Attributes starting with data- allow you to store custom information on an element. Easily retrievable via JavaScript.

Example:
  • <div data-id="123" data-status="active">User</div>
Tips:
  • Useful for storing state that doesn't affect appearance
Common Mistakes:
  • Trying to force custom data into standard attributes like class or id

Practical steps

  1. 1
    Write an h1 tag 2 mins

    Let's write a heading.

    • Type <h1>Hello</h1>
    • Run to check the preview
    <h1>Hello</h1>

    ✓ Displayed in large text

    Troubleshooting:

    Doesn't show → Ensure tags are spelled correctly

  2. 2
    Add paragraph with p tag 2 mins

    Add a paragraph below the heading.

    • Below <h1>Title</h1>, add <p>Paragraph.</p>
    • Run and verify
    <h1>Title</h1>
<p>Paragraph.</p>

    ✓ Paragraph is displayed

  3. 3
    Create a list with ul and li 3 mins

    Make a bulleted list.

    • Wrap with <ul> and </ul>
    • Put <li>Item</li> inside
    <ul>
  <li>Apple</li>
  <li>Orange</li>
</ul>

    ✓ List with bullets appeared

    Troubleshooting:

    li is outside ul → li must be directly inside ul

FAQ

Writing <article> and <section> is annoying. Can't I just use <div> for everything?
You *could* (it's called 'div soup'), and visually it'll look the same. But screen readers for visually impaired users, and Google's search bots will be incredibly confused about what the actual main content is. If you care about SEO and accessibility, eat your semantic vegetables.
<button> and <a> (links) look identical when styled. Which one do I use?
Golden rule: If it navigates to a new URL, use <a>. If it triggers an action on the *current* screen (like opening a modal or submitting a form), use <button>. Mixing them up is how you create UI that drives keyboard-navigating users absolutely insane.
Should I add a slash at the end of empty elements? (like <img />)
In HTML5, both <img> and <img /> are perfectly valid. However, if you ever plan on learning React (JSX) or writing super strict XML, the self-closing slash is required. Many devs just add the slash out of habit to avoid crying later.
Can I use multiple <h1> tags per page now?
We used to think 'HTML5 will let us use an h1 inside every <section>!'. Turns out, browsers never really supported that outline algorithm. The current reality is: stick to one <h1> per page for the main title, and use h2, h3, etc. strictly in order.

You've mastered HTML basics.

Next, let's style it with CSS. We'll learn colors, spacing, and fonts.

① Read the guide → ② Do exercises (12)
Related tools: HTML Escape
🎨

CSS Basic

1 week Beginner

Colors, spacing, fonts. Styling the look.

Overview

What is this?

CSS defines how HTML elements look on screen. It controls color, size, spacing, layout, and more.

Why does it matter?

Without CSS, the web is just plain text. CSS makes it readable and beautiful.

What you'll learn
  • Color properties (color, background-color)
  • Spacing (margin, padding)
  • Typography (font-size, font-family)
  • Classes and Selectors

In depth

Writing CSS

Syntax: selector { property: value; }. Ex: h1 { color: blue; } makes h1 text blue. Use semicolons to separate rules.

Example:
  • h1 { color: blue; }
  • p { font-size: 16px; margin: 10px; }
Tips:
  • Colon between property and value
  • Always end declarations with a semicolon
Common Mistakes:
  • Missing colon
  • Missing units (writing 16 instead of 16px)

Specifying Colors

color is text color, background-color is the background. You can use names (blue), hex (#0000ff), or rgb(0,0,255).

Example:
  • color: blue;
  • background-color: #f5f5f5;
  • color: rgb(255, 0, 0);
Tips:
  • CSS variables are great for dark mode
  • Ensure good contrast
Common Mistakes:
  • Spelling color names wrong
  • Text blends into background

Margin and Padding

margin is outside space, padding is inside space. Can specify top, bottom, left, right.

Example:
  • margin: 16px; (all sides)
  • padding: 8px 16px; (top/bottom left/right)
Tips:
  • Vertical margins can collapse
  • Padding adds space inside the element's background
Common Mistakes:
  • Confusing margin and padding
  • Forgetting px unit

Width and Borders

Use width to set an element's width, and border for outlines. Use border-radius for rounded corners.

Example:
  • width: 300px;
  • border: 1px solid #ccc;
  • border-radius: 8px;
Tips:
  • border is written as: width style color
Common Mistakes:
  • Forgetting the style (e.g., solid), so the border doesn't show

Classes and Selectors

Use a class (.classname) to style multiple elements. Add class="classname" in HTML.

Example:
  • .card { border: 1px solid #ccc; }
  • <div class="card">Card</div>
Tips:
  • Classes are reusable, IDs are for single elements
Common Mistakes:
  • Applying the same ID to multiple elements
  • Overusing !important

Pseudo-classes (:hover)

Add :hover to style an element when the user's mouse hovers over it.

Example:
  • a:hover { color: red; }
Tips:
  • Essential for providing visual feedback on buttons and links
Common Mistakes:
  • Relying too much on hover for mobile designs where it doesn't work well

Practical steps

  1. 1
    Add a style tag 2 mins

    The quickest way to add CSS is writing it directly in the HTML file.

    • Write <style> and </style> inside the <head> tag
    • Add some color magic inside
    <style>
h1 {
  color: #ef4444;
}
</style>

    ✓ The title changed color!

    Troubleshooting:

    Nothing changed → Did you forget the curly braces {} or the semicolon ; ?

  2. 2
    Style with Classes 3 mins

    Targeting 'h1' styles all h1s. Let's use a class to style just one specific element.

    • Add class="highlight" to a <p> tag
    • Write .highlight { ... } in your CSS
    <style>
.highlight {
  background-color: #fef08a;
  font-weight: bold;
}
</style>

<p class="highlight">Look at me!</p>
<p>I am just normal text.</p>

    ✓ Only one paragraph got the yellow background

    Troubleshooting:

    The class isn't working → Don't forget the dot (.) before the class name in CSS!

  3. 3
    Build a Clickable Button 5 mins

    Combine padding, colors, rounded corners, and a hover effect to make a juicy button.

    • Create a button with class 'btn'
    • Add padding and border-radius
    • Use the :hover pseudo-class to change color on mouseover
    <style>
.btn {
  padding: 10px 20px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.btn:hover {
  background-color: #2563eb;
}
</style>
<button class="btn">Send Message</button>

    Notice how the color slightly darkens when you hover over it.

    ✓ Looks like a modern, 3D-ish button / Changes color when hovered

    Troubleshooting:

    It still has an ugly border → Make sure you added border: none;

FAQ

Why are my margins squishing together instead of adding up?
Ah, the infamous 'Margin Collapse'. When vertical margins touch, they don't add up; the bigger one just swallows the smaller one. It's an ancient CSS quirk. Adding a tiny bit of padding or a border magically fixes it. Welcome to CSS, it's wild here.
I set z-index to 999999 but it's STILL not on top!
Z-index completely ignores your element unless its 'position' is set to relative, absolute, fixed, or sticky (anything but the default 'static'). Also, if its parent is trapped underneath another element, no amount of 9s will save the child element.
Is 'box-sizing: border-box;' really that important?
Yes! Without it, adding padding makes your elements grow wider like a balloon, blowing up your perfectly calculated 100% width layout and creating the dreaded horizontal scrollbar. It's the ultimate 'make math easy' spell.
My CSS file is 3,000 lines long and I hate it. Help?
Classic developer pain. You can learn naming conventions like BEM, or skip straight to the modern way: Utility-first CSS like Tailwind (putting styles directly in HTML), or CSS-in-JS if you're using React. For now, just embrace the spaghetti.

You've grasped CSS basics.

Next, we'll add interactivity with JavaScript.

① Read the guide → ② Do exercises (10)
Related tools: Color Converterpx/rem Converter
⚡

JavaScript Basic

2 weeks Intermediate

Clicking a button changes text. Creating interactions.

Overview

What is this?

JavaScript adds behavior and interactivity to web pages.

Why does it matter?

Transforms static pages into web apps.

What you'll learn
  • Variables and data types
  • Functions
  • DOM manipulation
  • Events

In depth

Variables (const, let)

Containers for data. const cannot be reassigned; let can. var is no longer recommended.

Example:
  • const name = 'John';
  • let count = 0;
Tips:
  • Use const by default. Use let only when you need to reassign.
Common Mistakes:
  • Trying to reassign a const variable causes an error

Conditionals (if & ternary)

Create 'if this, do that' logic. For simple splits, the ternary operator (condition ? true : false) is handy.

Example:
  • if (age >= 18) { console.log('Adult'); }
  • const result = score >= 60 ? 'Pass' : 'Fail';
Tips:
  • Use === instead of == for strict equality (checks both value and type)
Common Mistakes:
  • Using = (assignment) instead of === (comparison) like if (a = 1)

Loops (for loop)

Repeat the same operation multiple times. Often used to process arrays.

Example:
  • for (let i = 0; i < 5; i++) {\n console.log(i);\n}
Tips:
  • map or forEach are often better for array iterations
Common Mistakes:
  • Creating an infinite loop that crashes the browser

Functions and Arrow Functions

Blocks of code. Recently, the shorter `() => {}` syntax (arrow function) is very popular.

Example:
  • function greet() { return 'Hello'; }
  • const double = (x) => x * 2;
Tips:
  • Single-line arrow functions can omit the return keyword and curly braces
Common Mistakes:
  • Adding {} but forgetting the return keyword, resulting in 'undefined'

String Manipulation (Template Literals)

You can use + to combine strings, but wrapping in backticks (`) lets you embed variables directly.

Example:
  • const msg = `Hello, ${name}`;
Tips:
  • Backticks are usually found near the top left of the keyboard
Common Mistakes:
  • Using single quotes ' ' means ${name} won't be replaced

Arrays & Array Methods (map, filter)

Group multiple values. map transforms every item, filter creates a new array with items that match a condition.

Example:
  • const arr = [1, 2, 3];
  • const doubled = arr.map(n => n * 2);
Tips:
  • These methods do not modify the original array (non-destructive)
Common Mistakes:
  • Forgetting that array indexes start at 0, not 1

Practical steps

  1. 1
    Hello, Developer Console 2 mins

    Open the console and let's run some math directly in the browser.

    • Write a console.log statement inside a <script> tag
    • Check the 'Console' tab in DevTools
    <script>
console.log('Calculating...');
console.log(100 + 50 * 2);
</script>

    ✓ 'Calculating...' and '200' appeared in the Console

    Troubleshooting:

    I don't see the Console → Press F12 and click the 'Console' tab next to 'Elements'.

  2. 2
    Variables and Math 3 mins

    Store prices, calculate tax, and output the result.

    • Declare a 'price' variable using const
    • Calculate 'tax' using let or const
    • Log the final total
    <script>
const price = 1000;
const taxRate = 0.1;
const total = price + (price * taxRate);

console.log(`The total price is $${total}`);
</script>

    ✓ It printed 'The total price is $1100'

    Troubleshooting:

    SyntaxError: missing ) → Make sure every parenthesis is paired.

  3. 3
    Arrays and Loops 5 mins

    Group data together and loop through them to print each one.

    • Create an array of fruits
    • Use a 'for' loop to iterate and log each one
    <script>
const fruits = ['Apple', 'Banana', 'Orange'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
</script>

    ✓ The three fruits printed out one by one

    Troubleshooting:

    My browser froze! → You probably wrote an infinite loop. Double-check your i < fruits.length and i++ logic.

FAQ

Why doesn't 0.1 + 0.2 equal 0.3? Is JS broken?
Welcome to programming! It's not a JS bug, it's caused by the 'IEEE 754' standard for floating-point math. When dealing with money, multiply by 10/100 to make them whole numbers, do the math, and divide back down. It's an ugly but necessary hack.
Why do everyone hate 'var'? It works fine for me.
Because it's an agent of chaos. 'var' doesn't respect block scope (things inside {}), meaning it can randomly overwrite a variable with the same name halfway across your code and cause nightmare bugs. Just stick to 'const' and 'let' to keep your variables safely contained.
What the heck is the difference between == and ===?
=== is strict. It checks if both value AND type match. == is way too friendly; it tries to convert types behind your back, meaning it thinks string '0' and number 0 are the same. It breeds unpredictable bugs. Seriously, just use === for the rest of your life.
My 'this' keyword randomly changed its value and broke my app...
Ah, the darkest corner of JavaScript. The value of 'this' changes based on *how* the function was called, like a chameleon. Thankfully, modern JS gave us Arrow Functions (() => {}), which lock 'this' to whatever it was when you wrote it. Peace at last.

You've learned JS basics.

Next we learn layout (Flexbox/Grid).

① Read the guide → ② Do exercises (15)
Related tools: JSON Formatter
🕹️

DOM Manipulation

1 week Beginner

Control HTML elements from JS to dynamically update pages.

Overview

What is this?

DOM (Document Object Model) is how JavaScript represents and interacts with HTML elements.

Why does it matter?

Without manipulating the DOM, you can't change what's on the screen. It's the foundation for frameworks like React.

What you'll learn
  • Selecting elements
  • Event listeners
  • Changing classes and styles
  • Creating and removing elements

In depth

Selecting Elements

Bring HTML elements into JS. Grab one by ID, or use querySelector like CSS selectors.

Example:
  • document.getElementById('msg')
  • document.querySelectorAll('li')
Tips:
  • querySelectorAll returns a NodeList, which you can iterate with forEach
Common Mistakes:
  • Trying to manipulate an element that wasn't found (null reference error)

Events (Clicking, Typing)

Running code when something happens (e.g. 'Button clicked') is called listening for an event.

Example:
  • btn.addEventListener('click', () => {\n console.log('Clicked');\n})
Tips:
  • Event Delegation: attaching one listener to a parent lists (ul) instead of all children

Modifying, Adding, Removing

Use textContent for text, classList.add for CSS classes. Use createElement to make new boxes, and remove() to delete them.

Example:
  • el.textContent = 'Hello'
  • el.classList.add('active')
  • el.remove()
Tips:
  • Combining class toggling with CSS transitions creates easy animations
Common Mistakes:
  • Using innerHTML directly with user input, creating security holes (XSS)

Practical steps

  1. 1
    Grab an element and change its text 3 mins

    Use JS to find an HTML element and forcefully change its content.

    • Create a <p> with an ID
    • Find it using getElementById
    • Change its textContent
    <p id="message">Old text...</p>

<script>
const pTag = document.getElementById('message');
pTag.textContent = 'Hacked by JavaScript!';
</script>

    ✓ The text changed immediately on page load

    Troubleshooting:

    Cannot set properties of null → Make sure the <script> is placed *below* the HTML tag, or the JS will try to grab it before it exists!

  2. 2
    Change CSS with JavaScript 3 mins

    Make a box turn red and bold just by using JS.

    • Find the element
    • Modify its style property
    <div id="box">I am a box</div>

<script>
const box = document.getElementById('box');
// Notice how background-color becomes backgroundColor in JS (camelCase)
box.style.backgroundColor = 'red';
box.style.color = 'white';
box.style.fontWeight = 'bold';
</script>

    ✓ The text turned bold and the background turned red

  3. 3
    Listen for Clicks 5 mins

    The holy grail of interactivity: doing something *only* when a button is clicked.

    • Create a button with an ID
    • Attach an 'addEventListener' for the 'click' event
    • Show an alert
    <button id="btn">Click Me</button>

<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  alert('Boom! Button clicked!');
});
</script>

    ✓ An alert pops up when you click the button

    Troubleshooting:

    Nothing happens → Check for typos in 'click' or missing closing brackets.

FAQ

People yelled at me for using innerHTML. What's wrong with it?
textContent safely spits out whatever text you give it. innerHTML actually executes it as HTML. If you grab user input (like a comment section) and use innerHTML, a troll could inject a malicious script (XSS attack) that steals your users' data. It's highly dangerous.
I added a new button with JS, but my click event isn't firing on it!
If you set up `addEventListener` *before* the new button was created, JS didn't know it existed. The pro move is 'Event Delegation': attach the listener to the parent container, and when a click happens, check if the target (`e.target`) was your new button.
I used querySelectorAll to get divs, then tried to map() over them and it crashed.
Trick question! React/Vue devs fall for this too. querySelectorAll returns a 'NodeList'. It *looks* like an Array, and it has `forEach`, but it lacks `map` and `filter`. You have to evolve it into a real array first by writing `Array.from(nodeList)` or `[...nodeList]`.

You can make pages interactive with JS.

Next we'll learn modern layout techniques.

① Read the guide → ② Do exercises (10)
📐

Layouts

1 week Intermediate

Horizontal, vertical, grids. Positioning elements.

Overview

What is this?

Position elements freely with Flexbox and Grid.

Why does it matter?

Broken layouts ruin user experience.

What you'll learn
  • Flexbox
  • Grid
  • Responsive Design

In depth

Flexbox

display: flex aligns children in a row by default. Easy centering and wrapping control.

Example:
  • display: flex;
  • justify-content: space-between;
  • flex-wrap: wrap;
Tips:
  • The 'gap' property is the easiest way to add space between items
Common Mistakes:
  • Applying display: flex to the child instead of the parent container

Grid

display: grid creates a 2D layout grid. Great for rich card galleries.

Example:
  • grid-template-columns: repeat(3, 1fr);
  • gap: 16px;
Tips:
  • Flex for 1D (rows/cols), Grid for 2D layouts

Responsive Design (Media Queries)

Switch CSS based on screen width. Essential for handling mobile vs desktop.

Example:
  • @media (min-width: 768px) {\n .container { display: flex; }\n}
Tips:
  • Mobile-first: Write styles for mobile by default, then override with @media for larger screens

Practical steps

  1. 1
    Flexbox Basics: Aligning a Header 5 mins

    Align a logo to the left and a menu to the right instantly using Flexbox.

    • Wrap elements in a header div
    • Apply display: flex
    • Use justify-content to spread them apart
    <style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1f2937;
  color: white;
  padding: 10px 20px;
}
.menu { display: flex; gap: 15px; }
</style>

<div class="header">
  <h2>MyLogo</h2>
  <div class="menu">
    <span>Home</span>
    <span>About</span>
  </div>
</div>

    ✓ Logo is on the far left, menu items are on the far right

    Troubleshooting:

    They are stacked vertically → Did you put the class name correctly on the parent container?

  2. 2
    Grid Basics: A Responsive Card Gallery 5 mins

    Create a 3-column grid that automatically drops to 1 column on smaller screens.

    • Use display: grid
    • Use the magic 'auto-fit' and 'minmax' formula
    <style>
.grid-container {
  display: grid;
  /* The magic line that creates responsive columns */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.card { border: 1px solid #ccc; padding: 20px; }
</style>
<div class="grid-container">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
  <div class="card">Item 4</div>
</div>

    Try shrinking your browser window. Watch the columns adjust automatically!

    ✓ It forms a neat grid that reflows when shrunk

    Troubleshooting:

    Auto-fit isn't working → Check your spelling of minmax and auto-fit.

FAQ

Flexbox vs Grid... which one should I actually use?
Think of it this way: If you want to line things up in a single row OR a single column (1D), use Flexbox. That's for headers, nav bars, and buttons. If you're building a 2D layout like a chessboard or a photo gallery, use Grid. Easy!
My flex items refuse to shrink and text overflows off the screen!
Ah, the 'I refuse to shrink' CSS trap. Flex items try to be as wide as their content by default. Add `min-width: 0;` to the flex child elements. It forces them to swallow their pride and shrink/wrap the text properly.
Is using 'float: left' to align things totally dead?
Stone dead. We used to write spaghetti code with 'clearfix' hacks just to put two boxes next to each other. Today, Flexbox and Grid do it in one line. The only time you should ever use float is if you genuinely want text to wrap around an image like in a newspaper.
Writing tons of @media queries for mobile responsive design is exhausting.
I feel your pain. The good news is, modern CSS properties like Flex's `flex-wrap: wrap;` and Grid's `repeat(auto-fit, minmax(200px, 1fr));` let the browser handle the math. You can often build fully responsive mobile layouts without writing a single media query. It's basically magic.

Layout basics complete.

Next up: forms and validation.

① Read the guide → ② Do exercises (8)
Related tools: CSS Grid Generator
📋

Forms & Validation

1 week Intermediate

Receiving user input.

Overview

What is this?

Forms gather data from users.

Why does it matter?

The foundation of interactive apps.

What you'll learn
  • input, textarea, select
  • labels
  • Validation

In depth

Form Elements

input, textarea, select. The name attribute identifies the data.

Example:
  • <input type="text" name="email">

Validation

Checking for empty fields or invalid formats.

Example:
  • required attribute
  • pattern attribute

Practical steps

  1. 1
    Create a Basic Form 5 mins

    Build a form to collect a user's name with a submit button.

    • Create a <form> tag
    • Add an <input> and a <button>
    • Give the form and input IDs so JS can find them
    <form id="myForm">
  <input type="text" id="nameInput" placeholder="Your Name">
  <button type="submit">Send</button>
</form>

    ✓ The input field and button appear

  2. 2
    Stop the Page Refresh 3 mins

    By default, submitting a form reloads the whole page. We need to stop that using JavaScript.

    • Listen for the 'submit' event on the form
    • Call e.preventDefault() to stop the reload
    <script>
const form = document.getElementById('myForm');
const input = document.getElementById('nameInput');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // This is the magic spell!
  alert(`Hello, ${input.value}`);
});
</script>

    ✓ Clicking 'Send' shows an alert WITHOUT refreshing the page

    Troubleshooting:

    The page still refreshes → Make sure you attached the event to the <form>, not the <button>.

  3. 3
    Empty Field Validation 5 mins

    Show an error if the user tries to submit an empty form.

    • Check if the input value is empty ('')
    • If empty, alert and 'return' to stop execution
    <script>
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const val = input.value.trim(); // Removes accidental spaces
  if (val === '') {
    alert('Hey, type your name!');
    return; // Stops here
  }
  alert('Success: ' + val);
});
</script>

    ✓ Submitting an empty field triggers an error / Typing something triggers 'Success'

FAQ

Why do I need to write type="button" on my buttons inside a form?
Because any <button> inside a <form> acts like a 'Submit' button by default. If you just want a button that opens a popup, and you don't explicitly say `type="button"`, clicking it will instantly try to submit the form and refresh your page, driving you crazy.
Can't I just use HTML's 'required' attribute instead of writing JS validation?
HTML's `required` is awesome for basic stuff because it gives you free browser tooltips. But if you need complex rules like 'must be exactly 8 characters and contain a special symbol', you'll eventually need JavaScript. Doing both is the ultimate gigachad move for bulletproof forms.
What's the point of using .trim() before checking the input?
Users will accidentally hit the spacebar and submit forms. If you don't use `.trim()`, JS thinks a giant space ' ' is a valid name. `.trim()` nukes all the leading and trailing spaces, saving your database from filling up with ghosts.
Why use a <form> tag at all? Can't I just use a <div> and put an onClick event on the button?
You *could*, but then you lose browser superpowers. ` <form>` gives you the ability to submit by just hitting the 'Enter' key while typing in an input. If you build it with a `<div>`, you have to code the 'Enter key' logic yourself in JS, which is annoying.

Form basics complete.

Next let's fetch data with APIs.

① Read the guide → ② Do exercises (5)
🌐

API Integration

2 weeks Advanced

Fetching and displaying external data.

Overview

What is this?

APIs let you request data from external services.

Why does it matter?

Essential for modern web apps.

What you'll learn
  • fetch
  • JSON
  • Error Handling
  • Async Operations

In depth

Async and setTimeout

JavaScript doesn't stop and wait during network requests; it moves on. To intentionally delay execution, use setTimeout.

Example:
  • setTimeout(() => {\n console.log('After 3 sec');\n}, 3000);
Common Mistakes:
  • Trying to use data from an API before the request actually finishes

fetch and JSON

Use fetch(url) to make an HTTP request. Use await to pause until the response arrives, then extract JSON.

Example:
  • const res = await fetch(url);
  • const data = await res.json();
Tips:
  • await can only be used inside an async function
Common Mistakes:
  • Forgetting the parentheses: res.json instead of res.json()

Error Handling (try-catch & res.ok)

Assume networks will fail. Handle crashes (like no internet) with try-catch, and server errors (like 404 Not Found) by checking res.ok.

Example:
  • try {\n const res = await fetch(url);\n if (!res.ok) throw new Error('Bad status');\n} catch (e) {\n console.log(e.message);\n}
Tips:
  • Always think about the 'unhappy path'
Common Mistakes:
  • Writing fetch calls without any error handling

Practical steps

  1. 1
    Fetch Mock Data 3 mins

    Use JSONPlaceholder (a free fake API) to fetch some user data.

    • Pass the URL to the fetch function
    • Use await to wait for the response
    • Use res.json() to convert it into a JS object
    <script>
const url = 'https://jsonplaceholder.typicode.com/users/1';

async function getData() {
  const res = await fetch(url);
  const data = await res.json();
  console.log('Fetched Data:', data);
}

getData();
</script>

    ✓ User data (like Leanne Graham) printed in the Console

    Troubleshooting:

    'await is only valid in async functions' error → Make sure you have the 'async' keyword in front of your function definition.

  2. 2
    Display Data in HTML 5 mins

    Take that fetched data and actually put it on the screen.

    • Create a <div> with an ID
    • Set its textContent using the data we fetched
    <div id="profile">
  Loading...
</div>

<script>
const url = 'https://jsonplaceholder.typicode.com/users/1';

async function renderData() {
  const res = await fetch(url);
  const data = await res.json();
  
  const profileDiv = document.getElementById('profile');
  profileDiv.textContent = `Name: ${data.name} (Email: ${data.email})`;
}
renderData();
</script>

    ✓ 'Loading...' changed to 'Name: Leanne Graham...'

  3. 3
    Handle Deliberate Errors 3 mins

    Intentionlly break the URL to see how try-catch handles failures gracefully.

    • Use a fake URL
    • Wrap the code in try { ... } catch (e) { ... }
    • Throw an error if !res.ok
    <div id="profile">Loading...</div>

<script>
const url = 'https://jsonplaceholder.typicode.com/users/999999'; // Broken URL

async function renderData() {
  const profileDiv = document.getElementById('profile');
  try {
    const res = await fetch(url);
    if (!res.ok) {
      throw new Error(`HTTP Error: ${res.status}`);
    }
    const data = await res.json();
    profileDiv.textContent = `Name: ${data.name}`;
  } catch (error) {
    profileDiv.textContent = 'Failed to load data.';
    profileDiv.style.color = 'red';
    console.error(error);
  }
}
renderData();
</script>

    ✓ Text turns red and says 'Failed to load data.'

FAQ

What are some good free APIs to practice with?
JSONPlaceholder (dummy data), GitHub API (fetching repos), PokéAPI (yes, a Pokémon encyclopedia), and OpenWeatherMap are the holy grail of beginner APIs. Building a Pokédex is a rite of passage.
I tried to fetch an API and got a giant red 'CORS error'. Am I hacked?
Welcome to the club! Browsers have a security policy that stops you from secretly downloading data from a different domain. If the API doesn't explicitly allow CORS, your browser bricks the request. You usually fix it by setting up your own backend proxy, which is a headache for another day.
A senior dev told me to use 'Axios' instead of 'fetch'. Should I?
Axios used to be mandatory because the old 'fetch' kinda sucked. It auto-converts JSON and handles timeouts better. But modern 'fetch' is quite good now, and many projects are moving back to native 'fetch' to avoid installing extra libraries. Learn fetch first.
Is it safe to put API Secret Keys directly in my frontend JS code?
ABSOLUTELY NOT. Never. Ever. Your frontend JavaScript is completely visible to anyone who hits F12. If you put an AWS or OpenAI key in there, bots will scrape it in 5 seconds and you'll wake up to a $50,000 bill. Always keep keys on a backend server.

API integration complete.

Finally, let's tie it all together in a project.

① Read the guide → ② Do exercises (5)
🚀

Final Project

2 weeks Advanced

Applying everything to build an app.

Overview

What is this?

Build a complete web app combining HTML, CSS, and JS.

Why does it matter?

Solidifies your skills. Great for your portfolio.

What you'll learn
  • Project Design
  • Incremental implementation
  • Deployment

In depth

Design Process

Idea → Feature List → Priority → Build small.

Deployment

Host for free on GitHub Pages, Netlify, or Vercel.

Practical steps

  1. 1
    Sketch the Wireframes 10 mins

    Before writing a single line of code, plan 'what it does' and 'how it looks' on paper.

    • Decide what app to build (e.g. ToDo list)
    • List the required data (task name, isCompleted)
    • Draw rough boxes and buttons on physical paper

    It sounds analog, but this speeds up your coding 10x.

    ✓ You can explain exactly how the app works to someone else

  2. 2
    Build an Ugly Mockup First Hours

    Prioritize making the JavaScript work before you waste time on CSS gradients.

    • Connect HTML buttons to JS functions even if they look terrible
    • Finish the core CRUD (Create, Read, Update, Delete) logic
    • Only start polishing the CSS when there are no red errors in the Console

    ✓ The app is butt-ugly, but it functions perfectly

    Troubleshooting:

    I broke it and don't know what I changed → Ctrl+Z has limits. This is why learning Git (Version Control) is your absolute next priority.

  3. 3
    Deploy to the Internet 15 mins

    Put your creation on a server so anyone in the world can see it.

    • Create a GitHub account
    • Upload your files to a 'Repository'
    • Go to Settings -> Pages and turn on deployment
    • Open the generated link on your phone

    That 'It's alive!' moment never gets old.

    ✓ You can share the URL with your friends

    Troubleshooting:

    The screen is completely blank → Make sure your main HTML file is named exactly 'index.html' and is in the root folder.

FAQ

What should my very first portfolio project be?
The classics are a ToDo List, a Pomodoro Timer, or a Weather App fetching API data. You might think 'But everyone builds those!' - true, but employers look at *how* you built it. Clean code, bug-free forms, and a responsive mobile layout on a 'basic' app are way more impressive than a broken 'innovative' app.
What's the right way to Google errors when I get stuck?
Don't type 'my JS button is broke'. Copy the exact red error message from your console, like 'Uncaught TypeError Cannot read properties of null', and search that. Better yet, just paste your entire broken function and the error into ChatGPT or Claude. It's the modern way.
Does hosting (deploying) my app cost money?
If you're deploying static HTML/CSS/JS, platforms like GitHub Pages, Netlify, Vercel, and Cloudflare Pages offer incredibly generous 'Free Tiers'. Unless you're buying a custom domain name (like myname.com) or getting millions of hits, it's 100% free forever.
I finished the roadmap! What do I need to learn to get hired?
Congrats! The next 'Big Three' are: 1. A framework (React is king, Vue is great too). 2. TypeScript (JavaScript with strict rules to prevent bugs). 3. Git/GitHub (so you can collaborate with teams). Welcome to the real grind!

Congratulations! You are job-ready.

Consider learning a framework like React or Vue next.

① Read the guide → ② Do exercises (5)

How to proceed

① Read the guide → ② Do the exercises. Following this order builds skills steadily.

Read each step's guide before moving on to that category's exercises.

① Start from the first step

Not sure what role to target? See career roadmaps →