Case study · Educational website
Three Pillars of the Web
An educational one-page site about the three technologies every website is built from: what HTML, CSS and JavaScript are, how they differ and how they work together. It’s made from exactly those three technologies, with live demos, a code sandbox and a short quiz. The site itself is in Russian (original title: “Три кита веба”).
- Type
- Educational website, personal project
- Date
- September 9, 2026, 1 commit
- Stack
- HTML, CSS, JS in three files with no dependencies · 1,251 lines
First screen, 1440px wide.
Phone, 393px.
Sandbox on a phone.
01
Who it’s for and why
A page for complete beginners: explain the basics of front-end development in one evening, in plain language, and let people try things out right away. Instead of dry definitions there’s an analogy (HTML is the skeleton, CSS the clothes, JavaScript the ability to move), code examples with a “Copy” button and demos where the result shows up instantly.
It also demonstrates the approach itself: no frameworks, no bundler, no web fonts — three files you open with a double click, and they work offline.
02
What was built
- First screen“HTML, CSS and JavaScript — what every website is made of” and three analogy cards with a code example each
- HTMLtags and attributes, the document skeleton, semantic markup
- CSSselectors, the box model, the cascade and specificity; a live demo driven by buttons
- JavaScriptvariables, functions, conditions, loops, the DOM and events; a counter as an example
- How they work togetherwhat happens while a page loads, plus a comparison table of the three technologies
- Sandboxan editor with HTML / CSS / JS tabs and a live preview
- Mini quizfive questions with explanations and a final score
- Beginner’s routewhere to start and what to read next
- Filesindex.html — 442 lines, style.css — 478, script.js — 331. No frameworks, no bundler, no font downloads.
- ThemesDark by default and light; the toggle in the header remembers the choice.
- NavigationA reading progress bar, the current section highlighted in the menu and a back-to-top button.
- ResponsiveTwo breakpoints, 900 and 720px; on narrow screens the menu hides behind a ☰ button. With “reduce motion” on, animations are switched off.
03
Decisions worth a look
-
Each technology has its own colour
HTML is orange #e8622c, CSS is blue #3a8ee0, JavaScript is yellow #ecc72c. These three variables colour the code highlighting, the section cards, the column headers in the comparison table and the progress bar at the top — so the colour alone tells you which technology you’re looking at.
-
The sandbox builds a page inside an iframe
The three fields — HTML, CSS and JS — are joined into one document and loaded into an iframe via srcdoc. The preview updates 350 ms after the last keystroke rather than on every character. A window.onerror handler is injected into the page, so an error in the visitor’s code shows up right in the preview instead of getting lost in the console. The Tab key in the editor inserts two spaces.
-
The demo writes its own CSS
The “Round”, “Gradient”, “Rotate” and “Shadow” buttons toggle properties on a block, and the resulting code is assembled right below it. Active properties are kept in a Map, so the order of lines in the code matches the order of clicks, and “Reset” returns both the block and the code to their initial state.
-
It works even when opened from disk
When a page is opened via file://, some browser features aren’t available. The theme is saved to localStorage inside try/catch — if storage is blocked, the choice simply isn’t remembered and nothing breaks. The “Copy” button tries the Clipboard API and, without a secure context, copies through a hidden text field.
-
The quiz is built from data
The questions are an array of objects with options, the index of the right answer and an explanation; the script builds the cards from it. After an answer the options lock, the right one is highlighted and the explanation appears; after the fifth question the score is shown and the page scrolls smoothly to it.
What’s worth improving
- In all five quiz questions the right answer is the second option, so the quiz can be passed without reading.
- Tab in the sandbox editor inserts indentation, so keyboard users can’t leave the field with the Tab key.
- The ☰ menu button doesn’t tell screen readers whether the menu is open: it has no
aria-expanded. - The back-to-top button scrolls smoothly even with “reduce motion” on: the smoothness is set in the script, and the CSS setting doesn’t affect it.
04
How to check
Get in touch