🎨 Frontend
HTML, CSS, and vanilla JS — the building blocks of every page.
13 concepts
1
HTML structure & semantic tags
<nav>, <main>, <section>, <article> — describe what content IS, not just how it looks.
›
2
CSS box model
Every element is a box: content + padding + border + margin. Know the order.
›
3
Flexbox layout
display:flex turns a container's children into a row or column. Justify/align controls spacing.
›
4
CSS Grid
Two-dimensional layout. Perfect for sidebars + main content + footer rows.
›
5
CSS custom properties (variables)
--accent: #a0c000; color: var(--accent); Change once, update everywhere.
›
6
DOM manipulation
document.querySelector, createElement, addEventListener — the vanilla JS toolkit.
›
7
fetch() & async/await
Call an API, await the JSON, update the DOM. No jQuery, no axios — just fetch.
›
8
Template literals & HTML strings
Backticks let you embed ${vars} in strings. Powerful, but mind the backtick-in-backtick footgun.
›
9
HTML forms & inputs
<form> collects user input. input, textarea, select, button — name attribute becomes the form field key.
›
10
DOM events & addEventListener
click, input, submit, keydown — every user interaction fires an event you can listen to.
›
11
setInterval & setTimeout
Schedule code to run later. setTimeout runs once; setInterval runs every N ms. Clear with clear*.
›
12
localStorage — persist data in the browser
Save key→value pairs that survive page reloads. 5MB per origin. Strings only — JSON.stringify objects.
›
13
Responsive design & media queries
@media (max-width: 800px) { ... } — apply CSS only when the viewport matches. Mobile-first.
›