Frontend from Zero
by Sergey Okinchuk

Frontend from Zero

Welcome

Every website you have ever used is three plain-text languages that a browser turns into something you can see and touch. This course starts at an empty folder and a blank file, and ends with a small site of your own on the web: readable on a phone, usable with a keyboard, and able to answer clicks and load live data.

≈12 hours to complete Knowledge check on every topic

About This Course

The frontend is the part of software a person actually touches: the text, the buttons, the form you type into. On the web it is built from three languages. HTML says what each part of a page is, CSS says how it looks, and JavaScript says what it does. Every browser on every phone and computer understands all three, and this course teaches them from zero.

It is a hands-on book. Every idea is explained in plain words before any code appears, and almost every page ends with something you type into your own files and see in your own browser. Along the way you build one small site of your own, a home page, a projects page and a contact page, and by the last chapter it is published at an address anyone can open.

Who This Is For

Anyone who uses the web every day and wants to know how to build it: career-switchers, students, designers who want to understand what developers do with their work, testers and support engineers who keep opening DevTools without knowing what they are looking at, and readers of this catalogue who reached the words "the frontend" and wondered what is behind them. If you can install an app and find a file in a folder, you have the background this course needs.

It is not a course about a framework. React, Vue and their relatives are named in the last chapter, with what they are for, but the course teaches the platform they are all built on: the browser, and the three languages it speaks. That knowledge does not go out of date when the next framework arrives.

What You Should Already Know

  • How to use a computer, a browser and everyday apps, at an ordinary user's level
  • How to find, create and rename files and folders in your file manager
  • No programming at all: JavaScript is your first programming language, taught from zero in Chapter 6
  • No command line: nothing in this course is typed into a terminal

How the Course Is Built

Thirteen chapters in six movements. The ground (Chapter 1): what frontend is, how a page reaches your screen, and your tools. Meaning (Chapter 2): HTML, the structure of a page. Look (Chapters 3 to 5): CSS, layout, and pages that work on every screen size. Behaviour (Chapters 6 to 9): JavaScript from zero, then using it to change the page and answer the person using it. Input and data (Chapters 10 and 11): forms, and loading data from the internet. Finish (Chapters 12 and 13): accessibility as a discipline, speed, publishing your site, and a map of what comes after this book.

Every topic has the same shape: the problem it solves, the idea built step by step with code you can try, the confusions people really have, why it matters, and a short knowledge check. Where a running example helps, it is your own site. Everything else uses the smallest example that makes the point.

Meaning, then look, then behaviour
The book follows the order of the craft: a page that works as plain HTML, then styled with CSS, then improved with JavaScript. Nothing depends on a script to exist.
Built for everyone from the first page
Accessibility is not a chapter bolted on at the end. From Chapter 2 on, every element, style and interaction is built so it works with a keyboard and a screen reader.
Listen for the ideas, read for the code
The narration explains every piece of code in words, including what the browser shows as a result. The exact code lives on the page, ready to type.
Honest, never hyped
No "it's easy", no false simplicity. Where something is simplified, the page says so, and only features that work in every major browser are taught as normal.

Chapter Map

Chapter 1
What Frontend Is
The part of software you can touch, what a browser does between the address bar and the pixels, the standards and references, your tools, and your first page.
Chapter 2
HTML: Structure and Meaning
Elements and attributes, headings, lists and tables, links and paths, images and alt text, the regions of a page, and DevTools for looking inside any site.
Chapter 3
CSS: Style and the Cascade
How styles reach a page, selectors, why one rule beats another, colour, units and type, and a small design system built from custom properties.
Chapter 4
Layout
The box model, normal flow, flexbox for rows, grid for rows and columns together, and positioning for the things that must sit apart.
Chapter 5
Responsive Design
One page for every screen, media queries and the visitor's own preferences, layouts that adapt without breakpoints, and images sized for the device.
Chapter 6
JavaScript: First Steps
What JavaScript does in a page, values and names, comparisons and decisions, functions, and reading error messages with the debugger.
Chapter 7
JavaScript: Working with Data
Arrays and loops, objects, the four array methods that do most of the work, JSON, and splitting code into modules.
Chapter 8
The DOM: JavaScript Meets the Page
The page as a tree of objects, finding elements, changing content without opening a security hole, classes and attributes, and building elements from data.
Chapter 9
Events: Answering the User
Listening for clicks and keys, one listener for many elements, buttons that work for everyone, and remembering a visitor's choice.
Chapter 10
Forms
What a form really sends, inputs and labels, the checks the browser does for free, and handling a form in JavaScript honestly.
Chapter 11
Talking to Servers
Waiting without freezing the page, fetch and what a response really says, loading your own data, the rule behind CORS errors, and a live API that sometimes fails.
Chapter 12
Accessibility
Who the web is for, the accessibility tree and when ARIA helps, contrast, motion and zoom, and testing with a keyboard, a screen reader and automated checks.
Chapter 13
Ship It, and What Comes Next
A fast page, the invisible head that decides how a page appears everywhere, publishing your site, and a map of the tools and frameworks beyond this book.

Disclaimer

This course is an independent educational project created and maintained by Sergey Okinchuk. It is provided for learning and reference purposes only.

No affiliation. This course is not affiliated with, sponsored by, endorsed by, or officially connected to any browser maker, standards body, GitHub, Microsoft, or any other company, product, or organization.

Trademarks. Product and company names referenced are the property of their respective owners. Use of any name is for identification and educational purposes only and does not imply endorsement.

Educational simplifications. This material teaches durable concepts for understanding. Explanations are deliberately simplified for learning; where a simplification could mislead, the text flags it. This course is not professional or legal advice, including on accessibility law.

Accuracy and currency. Browsers, tools and services change over time. Facts reflect the author's understanding at the time of writing, against the web platform features that were widely available in September 2026. Always consult MDN and the official documentation for the current state of any feature or tool.

No warranty. This material is provided "as is" without warranty of any kind. The author accepts no liability for any loss or damage arising from reliance on the content.