Phase 1 · Lesson 1

Our Code Editor — Visual Studio Code

Before we write a single line, we need the right tool. Our choice is VS Code — free, supports every programming language, and is one of the most widely used code editors in the world.

⏱ 30 min

🛠 Setup

🆓 Completely free

🎯 Goal: open your first HTML file

1What is a code editor and why do we need one?

Technically you can write HTML in Windows Notepad — but that's like performing surgery with a hammer. It's possible, but much harder and more error-prone. A code editor helps prevent mistakes, lets you work faster, and makes it immediately clear what is what in the code.

What a code editor does that Notepad doesn't

Syntax highlighting — HTML tags appear in red, JS keywords in purple, strings in green. The structure is visible at a glance.

Auto-completion — start typing <div and it suggests the closing </div>.

Error highlighting — red underlines show typos before you even try to run the code.

Find and replace — finds and replaces every occurrence of a word across the entire project at once.

2Why VS Code — a comparison

Editor	Price	Languages	Extensibility	Learning curve
VS Code ✓	Free	100+	Thousands of extensions	Medium — 1–2 days
Notepad++	Free	Many	Limited	Very easy
Sublime Text	~$80	Many	Medium	Easy
WebStorm	~$70/year	Web-focused	Built-in	Harder
Notepad (Windows)	Free	No highlighting	None	Instant

Our choice

VS Code is the best balance: completely free, but professional grade. This is what Google, Microsoft and Netflix developers use. Learn it now and this knowledge will serve you for decades.

3Installation — step by step

Download address

https://code.visualstudio.com
Windows, Mac and Linux versions are all available here. Choose the one that matches your operating system.

Installation steps — WindowsSETUP

1. Go to: https://code.visualstudio.com
2. Click the big blue "Download for Windows" button
3. Run the downloaded VSCodeSetup-x64-*.exe file
4. During installation, keep these boxes checked:
   ✓ "Add to PATH"               ← important!
   ✓ "Register Code as editor for supported file types"
   ✓ "Add 'Open with Code' action to Windows Explorer"
5. After installation, launch VS Code
6. The welcome screen opens — you're ready!

First launch — what you'll see

A welcome screen appears on first launch. You can close it. The most important areas:

Explorer (Ctrl+Shift+E)

On the left — your files and folder tree. This is where you open HTML files.

Editor (centre area)

This is where you write code. Multiple files can be open at once as tabs.

Terminal (Ctrl+`)

Built-in command line. Not needed yet, but useful later.

Extensions (Ctrl+Shift+X)

Where you install extensions. Go here for Live Server.

4Essential extension: Live Server

Live Server is the most important extension for this course. Without it you need to press F5 to refresh the browser after every save — with it the browser refreshes automatically the moment you save.

Installing Live ServerEXTENSION

1. In VS Code press Ctrl+Shift+X (Extensions panel)
2. Type in the search box: "Live Server"
3. Find "Live Server" — by Ritwick Dey
4. Click the "Install" button
5. After installing, the status bar shows:
   "Go Live"  ← click this to start serving

Usage:
- Open an HTML file
- Click "Go Live" (bottom right corner)
- Browser opens automatically: http://127.0.0.1:5500
- Every save (Ctrl+S) triggers an instant refresh!

Recommended extensions (optional but useful)

Prettier — automatically formats your code on save
Auto Rename Tag — rename the opening tag and the closing tag updates too
Color Highlight — shows the actual colour next to codes like #ff0000

5Most useful keyboard shortcuts

Shortcut	What it does	When it's useful
`Ctrl + S`	Save	After every change — Live Server watches for it
`Ctrl + Z`	Undo	When you made a mistake
`Ctrl + /`	Toggle comment	Quickly comment out a line
`Alt + ↑↓`	Move line	Rearrange code without copy-paste
`Ctrl + D`	Select next match	Edit multiple occurrences at once
`Ctrl + F`	Find in file	Locate a tag or variable
`Ctrl + Shift + F`	Find in all files	Project-wide search
`F12`	Go to definition	Jump to where a function or variable is defined
Ctrl + `	Open terminal	Command line inside VS Code
`Shift + Alt + F`	Format document	Instantly tidy up messy code

6Opening Castle Siege in VS Code

Let's try it for real! Open the castle_siege.html file in VS Code and see how the code appears.

First open — stepsPRACTICE

1. In VS Code: File → Open Folder (not File → Open File!)
   → Select the folder where the games are stored
   → All files appear in the left panel

2. Click "castle_siege.html" in the left panel
   → It opens in the editor
   → Can you see syntax highlighting? Red tags, yellow attributes?

3. Click "Go Live" (bottom right corner)
   → Opens in the browser and is playable!

4. Try it: find the <title> tag (Ctrl+F → "title")
   → Change its text
   → Save (Ctrl+S) → watch the browser tab!

What you'll see in the code

Castle Siege is nearly 900 lines of code. That may look daunting at first — but by the end of the course you'll understand every single line. In the first lessons we only look at the first 15 lines.

✏️ Lesson 1 Task — VS Code first steps

Install VS Code and complete these tasks:

Install VS Code from code.visualstudio.com
Install the Live Server extension (by Ritwick Dey)
Open the games folder (File → Open Folder)
Open castle_siege.html — can you see the syntax highlighting?
Launch with Live Server (Go Live button) — does the game run in the browser?
Find the <title> tag (Ctrl+F), change its text, save (Ctrl+S) — did the tab title change?

🧠 Which statement about VS Code is true?

It's paid software with a 30-day trial

It only supports HTML and CSS editing

It's free and supports 100+ programming languages via extensions

Live Server is automatically installed with VS Code

Phase 1 · Lesson 2

The HTML Document Structure

We learn the "skeleton" of a webpage — the frame that holds everything else. We'll see how this same structure looks in the Castle Siege game.

⏱ 45–60 min

📁 HTML

🎮 Castle Siege example

🎯 Goal: your first HTML file

1What is HTML?

HTML (HyperText Markup Language) is not a programming language — it's a markup language. We use it to say what is on the webpage and what each thing is. Our job is not to give instructions to the machine, but to give structure to content.

Analogy

HTML is like a building's floor plan. It shows where the door, windows and walls are — but doesn't say what colour they should be. Colours are CSS's job, and movement (who opens the door) is JavaScript's.

HTML is made of tags (markers). Every tag has an opening and a closing version:

example.htmlHTML

<h1>This is a heading</h1>
<!--  ↑ opening tag     ↑ closing tag (starts with a slash) -->

<p>This is a paragraph.</p>

<!-- Some tags are self-closing (they have no content): -->
<br>    <!-- line break -->
<img src="image.jpg">  <!-- image -->

2The basic document structure

Every HTML file must start like this. It's not optional — this is what the browser expects:

index.html — the basic skeletonHTML

<!DOCTYPE html>                    <!-- 1. This is an HTML5 document -->
<html lang="en">                    <!-- 2. The page language -->

  <head>                             <!-- 3. Head (not visible) -->
    <meta charset="UTF-8">          <!-- special chars work -->
    <meta name="viewport"
          content="width=device-width">  <!-- mobile view -->
    <title>Page Title</title>         <!-- browser tab -->
    <style>
      /* CSS goes here */
    </style>
  </head>

  <body>                             <!-- 4. Body (this is visible) -->
    <h1>Hello World!</h1>
    <script>
      // JavaScript goes here
    </script>
  </body>

</html>

We see exactly this in Castle Siege

Open castle_siege.html in a text editor — its first 10 lines are exactly this structure, just with a different title and content:

castle_siege.html — the real file's openingHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Castle Siege – 50 Levels</title>
  <style>
    /* ... all the styles live here ... */
  </style>
</head>
<body>
  <canvas id="c"></canvas>   <!-- the game canvas -->
  <div id="hud">...</div>    <!-- speed buttons -->
  <script>
    // ... all the JavaScript lives here ...
  </script>
</body>
</html>

Key observation

Castle Siege's <body> contains just 3 things: a <canvas>, a <div>, and a <script>. 99% of the game lives inside the script — but the HTML frame is always the same.

3The four main elements explained

Element	What it does	Where you see it in the game
`<!DOCTYPE html>`	Tells the browser this is HTML5 — mandatory first line	Castle Siege, Froggy Rush, Turtle Race — always the very first line
`<html lang="en">`	Root of the whole document; the `lang` attribute helps screen readers and search engines	All our games have `lang="en"` (or the original Hungarian)
`<head>`	Meta-data, title, styles — the user does NOT see this directly	Castle Siege's <head> contains all CSS styles (300+ lines)
`<body>`	Visible content — what appears in the browser	Froggy Rush's body contains the canvas, D-pad buttons and modal window

4Comments in the code

Comments are only for the code reader — the browser ignores them completely. They're very important so you can understand your own code later.

comments in HTMLHTML

<!-- This is a single-line HTML comment -->

<!--
  This is a
  multi-line comment
-->

<canvas id="c"></canvas>  <!-- the game canvas, controlled by JavaScript -->

✏️ Lesson 2 Task

Create your very first HTML file! Open a text editor, create a file called mypage.html, and type in the basic structure.

Include the correct DOCTYPE, html, head, body structure
Set the title to "My First Page"
Inside the body write your name in an h1 tag
Add a comment explaining what the h1 does
After saving, double-click to open in the browser — does your name appear?

🧠 Quick check — which statement is true?

The <head> content is displayed in the browser

The DOCTYPE is optional and can be left out

The <body> contains the visible elements

Comments affect how the page is displayed

Phase 1 · Lesson 3

Text, Headings, Lists

We learn how to display text — and how this looks in our games' interfaces.

⏱ 45 min

📁 HTML

🎮 Froggy Rush panel

1Headings — h1 to h6

HTML has 6 levels of heading. <h1> is the most important (largest), <h6> is the smallest. A page should only have one <h1>!

headings.htmlHTML

<h1>🐸 Froggy Rush!</h1>          <!-- largest -->
<h2>Current Level</h2>
<h3>Statistics</h3>
<h4>Controls</h4>              <!-- rarely used -->
<h5>Footer note</h5>            <!-- even rarer -->
<h6>Legal text</h6>             <!-- smallest -->

Game example

In Froggy Rush: <h1>🐸 FROGGY RUSH!</h1> — this is exactly what you see above the game. The browser renders it large and bold automatically.

Paragraphs and text formatting

text.htmlHTML

<p>This is a paragraph. It can contain multiple sentences.</p>

<p>This is <strong>bold</strong> text — for important emphasis.</p>
<p>This is <em>italic</em> text — for subtle stress.</p>

<br>   <!-- line break (self-closing, no </br>) -->
<hr>   <!-- horizontal dividing line -->
<code>Math.floor(Math.random() * 10)</code> <!-- inline code -->

Lists

lists.htmlHTML

<!-- Unordered list — with bullet points -->
<ul>
  <li>Froggy Rush</li>
  <li>Turtle Race</li>
  <li>Castle Siege</li>
</ul>

<!-- Ordered list — with numbers -->
<ol>
  <li>Open in browser</li>
  <li>Use arrow keys to steer</li>
  <li>Collect the eggs</li>
</ol>

When to use which?

<ul> — when order doesn't matter (e.g. listing game rules)
<ol> — when order matters (e.g. steps in sequence)

✏️ Lesson 3 Task

Expand your previous file with text content!

Add an h2 subheading: "My Favourite Games"
Below it, a ul list with the three games
In a paragraph, briefly write why you enjoy games — highlight one word with strong
Add an ol list: how to launch Froggy Rush (3 steps)

🧠 Which list element has the correct syntax?

Phase 1 · Lesson 4

Links and Images

Linking is the essence of the web. We learn how to connect pages — and how to display images. The links on our game portal are all built this way.

⏱ 45 min

📁 HTML

🎮 Game portal links

1Links — <a> tag

links.htmlHTML

<!-- External link — to another website -->
<a href="https://netlify.com">Netlify website</a>

<!-- Internal link — to your own file -->
<a href="castle_siege.html">Castle Siege game</a>

<!-- Opens in a new tab -->
<a href="froggy_rush.html" target="_blank">Froggy Rush</a>

<!-- Jump within the same page (anchor) -->
<a href="#l2">Jump to Lesson 2</a>
<!-- ... then somewhere on the page: -->
<h2 id="l2">Lesson 2</h2>

Images — <img> tag

images.htmlHTML

<!-- Basic image -->
<img src="frog.png" alt="A green frog">

<!-- With dimensions -->
<img src="turtle.png" alt="Turtle character"
     width="200" height="150">

<!-- Image as a link -->
<a href="turtle_race.html">
  <img src="preview.png" alt="Turtle Race">
</a>

The alt attribute is required!

The alt text is displayed if the image fails to load — and it's what screen readers read aloud for visually impaired users. Always give a meaningful alt text.

✏️ Lesson 4 Task — Game portal page

Build the foundation of your own game portal! In one HTML file:

h1 heading: "My Games"
Three links to the three games (castle_siege.html, froggy_rush.html, turtle_race.html)
Each link should have target="_blank" (opens in new tab)
Create a "contact" anchor at the bottom of the page and link to it from the top

🧠 Which attribute opens a link in a new browser tab?

href="_new"

target="_blank"

open="new"

link="tab"

Phase 1 · Lesson 5

div, span, id and class

The "boxes" of HTML — we use these to group elements together. Every panel in Castle Siege and Froggy Rush is built on exactly this.

⏱ 60 min

📁 HTML + CSS

🎮 Castle Siege HUD

1div — block-level container

The <div> (division) is an invisible box that groups elements together. On its own it does nothing — but combined with CSS and JavaScript it's one of the most important tools in web development.

castle_siege.html — the HUD panel divsHTML

<!-- A panel for the speed-change buttons -->
<div id="hud">
  <span>Speed:</span>

  <!-- Each button is a button element inside the div -->
  <button class="sb on" id="s0">🐌 Child</button>
  <button class="sb"    id="s1">🐢 Slow</button>
  <button class="sb"    id="s2">⚔️ Normal</button>
</div>

id vs class — what's the difference?

Property	id	class
Uniqueness	Can appear only once per page	Can be used on multiple elements
CSS syntax	`#hud { ... }`	`.sb { ... }`
JS syntax	`getElementById('hud')`	`getElementsByClassName('sb')`
When to use	To identify a unique element (canvas, modal)	For reusable styles (buttons, cards)

In Castle Siege for example

id="hud" is unique — there's only one HUD on the entire page.
class="sb" (speed button) appears on 4 buttons — they all share the same style.

span — inline-level container

span_example.htmlHTML

<!-- div: starts a new line (block element) -->
<div>This is a block — takes up the full line.</div>
<div>This goes on the next line.</div>

<!-- span: stays inline (inline element) -->
<p>Score: <span id="ui-score">0</span> points.</p>
<!-- The span only wraps the "0", the paragraph stays continuous -->

<!-- Froggy Rush also displays the score this way: -->
<div class="pbox">
  <div class="plabel">Score</div>
  <div class="pval" id="ui-score">0</div>
</div>

✏️ Lesson 5 Task

Build your game portal's panel structure using divs!

Create an id="header" div for the title and navigation
Create an id="games" div containing 3 divs each with class="game-card"
Each card should contain: h3 (game name), p (short description), a (link to game)
Create an id="footer" div at the bottom of the page

🧠 What's the difference between id and class?

No difference, they're interchangeable

id is for styling, class is for identification

id can only appear once per page; class can be used on multiple elements

class is only for CSS, id is only for JavaScript

Phase 1 · Lesson 6

Buttons and Input Elements

Castle Siege's save system, its speed buttons and its modal window all have HTML inputs. Now we understand them.

⏱ 45 min

📁 HTML

🎮 Castle Siege — save modal

1Buttons and text fields

castle_siege.html — the save modal HTMLHTML

<!-- The save modal window -->
<div id="modal-bg">
  <div id="modal">

    <!-- Text input field -->
    <input id="save-name"
           maxlength="12"
           placeholder="Enter your name...">

    <!-- Buttons -->
    <button class="mb" onclick="doSave()">💾 Save</button>
    <button class="mb" onclick="closeModal()">✕ Cancel</button>

  </div>
</div>

A clickable button. JavaScript can be run in the onclick attribute.

Single-line text input. The save system uses this to ask for a name.

Only accepts numbers. Useful for level or score inputs.

A tick box. For settings and options.

placeholder=

Faint hint text in an empty field — disappears when typing starts.

maxlength=

Maximum character count in the field (Castle Siege: 12).

✏️ Lesson 6 Task

Add a "Player Registration" section to your portal!

Name field (input, maxlength=15, placeholder="Your name")
Favourite game dropdown (select + 3 options)
"Register" button (button, onclick=alert('Hi!'))
Give buttons a class attribute for styling

🧠 Which input type only accepts numbers?

Phase 1 · Lesson 7

CSS — Colour, Font, Size

CSS gives our games their visual appearance. In this first CSS lesson we learn colours, fonts and sizes — through Castle Siege's dark theme.

⏱ 60 min

📁 CSS

🎮 Castle Siege styling

7Lesson — Colour, Font, Size

castle_siege.html — CSS variables and base stylesCSS

/* CSS variables — the entire game's colour palette in one place */
:root {
  --bg: #0d0a05;           /* dark background */
  --player: #00d4ff;      /* blue — player colour */
  --ai: #ff3d6e;           /* red — AI colour */
  --gold: #FFD700;          /* gold — score colour */
}

/* Base style for the whole page */
body {
  background: var(--bg);    /* using a variable */
  color: #c4a870;           /* text colour */
  font-family: Georgia, serif; /* font */
  font-size: 15px;           /* font size */
}

/* Button styles */
.sb {
  background: #1a1208;
  border: 1px solid #5a3a10; /* width | style | colour */
  color: #c4a870;
  border-radius: 4px;          /* rounded corners */
  cursor: pointer;            /* hand cursor on hover */
}
.sb.on {                       /* active button style */
  background: #3a2010;
  border-color: #FFD700;
  color: #FFD700;
}

CSS variables (:root)

Variables declared in :root (--name: value) can be used anywhere in the file. To change a colour, you only need to edit one place — this is the professional approach.

✏️ Lesson 7 Task

Style your game portal page with CSS:

Give the body a dark background (background: #1a1a2a)
Change the text colour to light (color: #c4d0e0)
Set a Google Fonts typeface (Fredoka One or Nunito)
Define 3 CSS variables in :root: --bg, --text, --highlight
Use these variables in your styles

🧠 How do you USE (not define) a CSS variable?

color: --primary;

color: $primary;

color: var(--primary);

color: #{--primary};

Phase 1 · Lesson 8

CSS — Box Model

Why is something not where you expected it? The box model explains it. Every HTML element is a box — its size is the sum of content, padding, border and margin.

⏱ 60 min

📁 CSS

🎮 Game panel dimensions

8Lesson — Box Model

box_model.cssCSS

.game-card {
  width: 300px;           /* content width */
  padding: 20px;          /* inner spacing (around content) */
  margin: 10px;           /* outer spacing (around element) */
  border: 2px solid #444; /* border */

  /*
    Actual width = width + padding*2 + border*2
    = 300 + 40 + 4 = 344px
    (unless box-sizing: border-box is set)
  */
}

/* Modern approach — padding and border are included in width */
* {
  box-sizing: border-box; /* present in all our games! */
}

✏️ Lesson 8 Task

Box model experiments — open browser DevTools (F12 → Elements):

Give the game cards padding: 20px — what happens?
Give one card border: 3px solid #4d9fff
Add * { box-sizing: border-box } — did anything change?
In F12, look at the "Box Model" diagram in the Elements panel — can you see the margin/padding/border layers?

🧠 What does `box-sizing: border-box` do?

Removes the border from the calculation

Padding and border are included in the given width, not added on top of it

Only sets the border size

Can only be applied to boxes

Phase 1 · Lesson 9

CSS — Flexbox Layout

Flexbox is the modern web layout system. All the HUD panels and button rows in our games are arranged with this.

⏱ 60 min

📁 CSS

🎮 Froggy Rush panel

9Lesson — Flexbox

froggy_rush.html — panel CSSCSS

/* Arranging speed buttons in a row */
#hud {
  display: flex;          /* enable flexbox */
  align-items: center;  /* vertically centred */
  gap: 10px;             /* space between items */
  flex-wrap: wrap;       /* wrap on small screens */
}

/* Froggy Rush page layout */
#layout {
  display: flex;
  gap: 16px;
  justify-content: center; /* centred horizontally */
}

/* Fixing the side panel width */
#panel {
  width: 160px;
  flex-shrink: 0; /* don't let it shrink */
}

✏️ Lesson 9 Task

Use Flexbox to arrange the game portal cards:

Give the #games div display: flex
Add gap: 20px between cards
Centre them: justify-content: center
Try flex-direction: column — what changes?
Switch back to row and add flex-wrap: wrap

🧠 Which CSS property centres flex items horizontally?

align-items: center

justify-content: center

text-align: center

flex-align: center

Phase 1 · Lesson 10

CSS — Responsive Design

How does the game look on mobile? With @media rules our games work perfectly on phones and tablets.

⏱ 60 min

📁 CSS

🎮 Mobile D-pad display

10Lesson — Responsive Design

responsive.css — mobile resizingCSS

/* Desktop view: two columns side by side */
#layout {
  display: flex;
  flex-direction: row;   /* horizontal */
}

/* If screen is smaller than 768px (tablet/phone): */
@media (max-width: 768px) {
  #layout {
    flex-direction: column; /* stacked vertically */
  }
  #panel {
    width: 100%;           /* full width */
  }
}

/* If the device is touch (phone/tablet) — D-pad appears */
@media (pointer: coarse) {
  #dpad {
    display: flex;  /* only visible on touch devices */
  }
}

✏️ Lesson 10 Task

Make the game portal mobile-friendly with @media rules:

Add a @media (max-width: 768px) block to your CSS
On mobile, stack cards vertically: flex-direction: column
On mobile, make cards full width: width: 100%
Test with Chrome DevTools: F12 → phone icon — can you see the mobile view?

🧠 Which @media condition activates when the screen is smaller than 768px?

@media (screen: mobile)

@media (width < 768px)

@media (max-width: 768px)

@media (min-width: 768px)

Phase 1 · Lesson 11

🏆 Phase Project — Game Portal Page

The closing project for Phase 1. You now know all the HTML and CSS basics — it's time to put together a real, stylish game portal page.

⏱ 2–3 hours

🎯 Independent work

📁 HTML + CSS

11Lesson — 🏆 Phase Project: Game Portal Page

Phase 1 closing project

You now know all the necessary HTML and CSS fundamentals. It's time to assemble a real, stylish game portal page where your three games appear as links — just like a proper website.

Requirements

games.html — the portal structure to buildHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- charset, viewport, title -->
  <!-- CSS: dark theme, flex layout, card styles -->
  <!-- @media responsive rules -->
</head>
<body>
  <div id="header">
    <h1>🎮 My Games</h1>
    <p>Three browser games I built myself</p>
  </div>

  <div id="games">
    <!-- 3 cards, each containing: -->
    <div class="card">
      <h2>🏰 Castle Siege</h2>
      <p>Tower defence game with 50 levels</p>
      <a href="castle_siege.html" target="_blank">
        <button class="play-btn">▶ Play</button>
      </a>
    </div>
    <!-- ... 2 more cards ... -->
  </div>

  <div id="footer">
    <p>Made by: <strong>[Your name]</strong></p>
  </div>
</body>
</html>

✏️ Lesson 11 — Project Checklist

Correct HTML5 document structure (DOCTYPE, html, head, body)
Special characters display correctly (charset UTF-8)
Readable on mobile (@media and viewport)
Dark background, readable text (CSS color + background)
3 game cards in flex layout side by side (desktop)
Cards stack vertically on mobile (@media)
Every card has a link to the game (target="_blank")
Buttons change on hover (:hover CSS)
Header and footer are clearly separated
Code is tidy and commented

← Back

Course Home

Next phase →

Phase 2 — JavaScript Basics

Our Code Editor — Visual Studio Code

1What is a code editor and why do we need one?

2Why VS Code — a comparison

3Installation — step by step

First launch — what you'll see

4Essential extension: Live Server

5Most useful keyboard shortcuts

6Opening Castle Siege in VS Code

🧠 Which statement about VS Code is true?

The HTML Document Structure

1What is HTML?

2The basic document structure

We see exactly this in Castle Siege

3The four main elements explained

4Comments in the code

🧠 Quick check — which statement is true?

Text, Headings, Lists

1Headings — h1 to h6

Paragraphs and text formatting

Lists

🧠 Which list element has the correct syntax?

Links and Images

1Links — <a> tag

Images — <img> tag

🧠 Which attribute opens a link in a new browser tab?

div, span, id and class

1div — block-level container

id vs class — what's the difference?

span — inline-level container

🧠 What's the difference between id and class?

Buttons and Input Elements

1Buttons and text fields

🧠 Which input type only accepts numbers?

CSS — Colour, Font, Size

7Lesson — Colour, Font, Size

🧠 How do you USE (not define) a CSS variable?

CSS — Box Model

8Lesson — Box Model

🧠 What does box-sizing: border-box do?

CSS — Flexbox Layout

9Lesson — Flexbox

🧠 Which CSS property centres flex items horizontally?

CSS — Responsive Design

10Lesson — Responsive Design

🧠 Which @media condition activates when the screen is smaller than 768px?

🏆 Phase Project — Game Portal Page

11Lesson — 🏆 Phase Project: Game Portal Page

Requirements

🧠 What does `box-sizing: border-box` do?