Web Development Course for Beginners¶

Welcome! This course will teach you to build complete websites — from structure and design to interactivity. By the end, you'll have a personal online portfolio, an interactive quiz, and a weather app with real data.

What you'll build¶

A personal "About me" page with photos, links and text
A school timetable styled with hover effects and colors
A responsive photo gallery that looks great on mobile
A contact form with JavaScript validation
An educational quiz with scoring
A multi-page online portfolio
A weather app that fetches data from an API

Course map¶

Introduction¶

Nr	Lesson	What you learn
00	How the web works	Internet, client-server, tools
01	Your first page	`.html` file, basic structure

Module 1 — HTML (Structure)¶

Nr	Lesson	What you learn
02	HTML basics	Headings, paragraphs, links, images
03	Lists and tables	`<ul>`, `<ol>`, `<table>`
04	Forms	`<input>`, `<label>`, `<button>`
05	Multi-page site	Navigation between pages, `<nav>`

Module 2 — CSS (Design)¶

Nr	Lesson	What you learn
06	CSS introduction	Selectors, colors, fonts
07	Box Model	Margin, padding, border
08	Flexbox and Grid	Modern layout
09	Advanced CSS	Hover, transitions, animations
10	Responsive design	Phone, tablet, desktop

Module 3 — JavaScript (Interactivity)¶

Nr	Lesson	What you learn
11	JavaScript introduction	What JS is, `console.log`
12	Variables and types	`let`, `const`, types
13	Conditions and loops	`if`, `for`, `while`
14	Functions	Arrow functions, parameters
15	DOM	Selecting and modifying HTML
16	Events	Click, input, submit
17	Forms with validation	Capture and validate data
18	Fetch and APIs	JSON, `fetch`, async/await

Final projects¶

Nr	Project	What you build
19	Personal portfolio	Multi-section, responsive site
20	Quiz app	Interactive quiz with scoring
21	Weather app	Live data from the Open-Meteo API

Prerequisites¶

A computer with Windows / macOS / Linux
A code editor (VS Code recommended) — see lesson 00
A modern browser (Chrome, Firefox, Edge)
No prior experience required

Estimated duration¶

~22 sessions of 90 minutes each
Recommended pace: one lesson per week
Period: September – June (one school year)

Tools used¶

Tool	What for	Where
VS Code	Code editor	code.visualstudio.com
Live Server (VS Code extension)	Auto-reload on save	VS Code Marketplace
Chrome DevTools	Debugging in browser	Built into Chrome
Open-Meteo	Weather API without a key	open-meteo.com

How to use the course

Don't rush. Type every piece of code with your own hands — don't copy from solutions. View the result in the browser at every step. If something doesn't work, open the Console in DevTools (F12) — that's where the browser tells you exactly what went wrong.

Ready? Let's begin! → Lesson 00: How the web works