Web
Basics

In plain terms: Using <div> everywhere is like writing a book without chapters or paragraphs. The text is there, but nobody can navigate it. Semantic tags (<header>, <nav>, <main>, <footer>) give each zone a role. Google and screen readers understand your page without seeing it.

In plain terms: A form is a dialogue between your site and the visitor. Each field (<input>) is a question, and the <label> is the tag that tells what the field is for. Without a label, it's like a paper form with no heading: the visitor doesn't know what to write where. The field type (email, tel) even adapts the keyboard on mobile.

In plain terms: An HTML table is like an Excel spreadsheet. You have rows (<tr>), header cells (<th>) and data cells (<td>). <thead> and <tbody> separate the header from the content, like the frozen first row in a spreadsheet. Use tables for data, never for layout.

In plain terms: Each media type has its dedicated tag. <img> for images, <video> for videos, <audio> for audio. It's like plugging the right cable into the right device. The alt attribute on an image is the description for those who can't see it (visually impaired, slow connection). And width/height reserves space to prevent layout shifts during loading.

In plain terms: Links (<a>) are the doors between rooms on your site. An internal link leads to another page on your site, an external link leads elsewhere on the web. The href attribute is the destination address. And target="_blank" opens the door in a new tab, so the visitor doesn't leave your page.

In plain terms: Every HTML element is like a package. There's the content (the item), the padding (bubble wrap around the item), the border (the box), and the margin (space between packages on the shelf). By default, the browser adds padding and border on top of the size. With box-sizing: border-box, everything is included in the size you define.

In plain terms: Imagine a shelf. You place items on it and decide: push them left, center them, or space them evenly. Flexbox does the same with your HTML elements. You tell the parent "become a shelf" with display: flex, then choose how to distribute children with justify-content (horizontal) and align-items (vertical).

In plain terms: If Flexbox is a shelf (one dimension), Grid is a chessboard (two dimensions). You define columns and rows, then place your elements in the cells. It's like an architect's blueprint: you draw the grid first, then place the furniture. Ideal for complex layouts with header, sidebar, content, and footer.

In plain terms: Imagine painting an apartment. If you write the color reference on each wall, changing your mind means repainting everything. But if you label a can "primary color" and everyone dips into it, just change the can. CSS variables (--nom) work the same way: one value defined once, used everywhere.

In plain terms: Without transition, a style change is instant: the button is blue, then suddenly it's purple. With transition, you add a fade between two states. It's like a dimmer switch instead of an on/off switch. You choose what changes, how long it takes, and the rhythm (slow at start, fast at end, etc.).

In plain terms: Your HTML page is a tree. Each branch is an element. This tree is called the DOM (Document Object Model — the in-memory version of your page). JavaScript can shake this tree: add branches, cut some, change leaves. That's DOM manipulation. You select an element with querySelector, then modify its text, style, or attributes. Everything happens live, without reloading the page.

In plain terms: An event is something that happens: a click, a key press, a scroll. addEventListener tells JavaScript: "when this happens, execute this action." It's like a motion detector: you place it, and it reacts automatically when someone passes by. Without events, your page is a static poster.

In plain terms: fetch is your site's mailman. It goes to get data from a server via an API (a data counter on a server) and brings it back. The response arrives in JSON format: structured text that JavaScript natively understands. That's how your site displays the weather, loads articles, or sends a form without reloading the page.

In plain terms: It's a drawer in the browser. You store info in it (dark theme, cart, preferences). It persists even after closing the browser. Unlike cookies, this data never goes to the server. It's local storage, simple and free. Perfect for remembering visitor choices without a database.

In plain terms: ES6 is the modern version of JavaScript (released in 2015). Before, code was verbose and hard to read. Arrow functions (=>) shorten functions. Destructuring extracts values from an object in one line. Template literals (`...`) let you insert variables into text. It's cleaner, shorter, more readable.

In plain terms: Mobile-first means building your house starting with the studio apartment. You design for the smallest screen first (mobile), then add space and columns for larger screens. It's simpler than the reverse: adding is easy, removing is painful. And 60% of web traffic is mobile today.

In plain terms: A breakpoint is the screen size where your design changes shape. Like a folding door: from a certain width, it unfolds. You don't need 15 breakpoints. Three are enough: mobile, tablet, desktop. Choose them based on your content, not a specific phone model.

In plain terms: Sending a 4K image to a phone is like delivering a couch by helicopter. It works, but it's wasteful. srcset gives the browser a list of sizes. It picks the best one for the screen. WebP format is 30% lighter than JPEG. Result: faster pages, especially on 4G.

In plain terms: On a phone, you tap with your finger, not with a pixel-precise mouse cursor. A 20px button is too small: you miss one out of two. The rule: minimum 44x44 pixels for every clickable area. That's the size of a fingertip. Also think about spacing between buttons to avoid accidental taps.

In plain terms: DevTools' responsive mode is a simulation. Not reality. A real phone has a different screen, different browser, different bandwidth. If you don't test on a real device, you'll discover bugs in production. Test at minimum on an iPhone and an Android. Use your phone's Wi-Fi to see your local site.

In plain terms: ARIA is a translator for screen readers. When HTML alone isn't enough (a menu that opens, an active tab, a loading spinner), ARIA adds invisible information. aria-expanded tells if a menu is open or closed. role="alert" announces an important message. But the golden rule: if a native HTML tag is enough, use it. ARIA is a complement, not a replacement.

In plain terms: Imagine reading light gray text on a white background in bright sunlight. Impossible. The 4.5:1 ratio guarantees everyone can read, even in poor conditions. This ratio compares text brightness with background brightness. Tools calculate it for you. If it's below 4.5, change your color. It's a legal requirement in many countries.

In plain terms: Some people don't use a mouse. They navigate with Tab (next element), Shift+Tab (previous) and Enter (activate). If your site only works with a mouse, you're excluding these users. Visible focus (the blue outline) is essential: it's the keyboard version of the cursor arrow. Never hide it. If you create a clickable element, it must be focusable.

In plain terms: A screen reader (VoiceOver, NVDA) reads your page aloud. It announces headings, links, buttons, images. If an image has no alt, it just says "image" with no explanation. If a button has no text, it just says "button." Every interactive element must have a name that makes sense when heard. Think: "does this make sense if I hear it without seeing it?"

In plain terms: Your visitor may have enabled dark mode, reduced animations, or enlarged text in their system settings. CSS can detect these preferences and adapt automatically. prefers-color-scheme detects dark mode. prefers-reduced-motion detects people sensitive to animations. Respecting these choices is digital courtesy.

In plain terms: H1 to H6 headings are your page's table of contents. Google reads it to understand the topic. One H1 per page (the main title). Then H2s for sections, H3s for subsections. Like a book: one cover title, multiple chapters, multiple paragraphs per chapter. Never skip levels (no H1 then H4).

In plain terms: Google measures 3 things on your page. LCP: how long before the largest element appears (your hero image, for example). FID: how long before the site responds to the first click. CLS: does the page shift by itself during loading. It's like a restaurant: the dish arrives fast (LCP), the waiter responds fast (FID), and the table doesn't move (CLS).

In plain terms: A 5 MB image is like sending a 10 kg package by mail for a 200 g item. WebP format compresses better than JPEG (30% lighter). Lazy loading tells the browser: "load this image only when the visitor reaches it." Less weight = faster page = happier visitors = happier Google.

In plain terms: Imagine preparing a meal. You take out ingredients from the fridge before cooking, not at the last minute. preload tells the browser: "this resource is urgent, download it right away." prefetch says: "the visitor will probably go to this page next, prepare it in the background." Good timing makes all the difference.

In plain terms: Your CSS and JS code contains spaces, line breaks, comments. Useful for you, but unnecessary for the browser. Minification removes all of that. It's like compressing a suitcase: same content, less space. Result: lighter files, faster download, happier visitors.

In plain terms: Git is a supercharged Ctrl+Z for your project. Each "commit" is a snapshot of your code at a moment in time. You can go back, compare versions, work with others without overwriting each other's work. Without Git, a file deleted by mistake is lost forever. With Git, you travel back in time with one command.

In plain terms: DevTools is an X-ray for your web page. You see the bones (HTML), the clothes (CSS), the reflexes (JS). You click an element, you see its code, styles, margins. You modify live to test. Nothing is saved: it's a sandbox. All browsers have it. Shortcut: F12 or right-click > Inspect.

In plain terms: Your site works on your computer. Great. But nobody else can see it. Deployment is moving your site from your PC to a server accessible to all. Free services like Netlify or Vercel do it in 2 minutes. You connect your GitHub repo, and on every push, the site updates automatically. Zero config, zero stress.

In plain terms: It's the guest list for your party. Only authorized scripts can enter. Others are blocked at the door. CSP (Content Security Policy) tells the browser: "accept scripts from my domain and Google Fonts, but block everything else." If a hacker injects a malicious script, the browser refuses it because it's not on the list.

In plain terms: Imagine someone sticking a fake sign on your storefront. Visitors believe it's real. XSS is the same: fake code injected into your page. A hacker writes JavaScript in a form field. If you display that text as-is, the code executes for all visitors. It can steal cookies, redirect to a fake site, or display misleading content.

In plain terms: Imagine a trap site sends a form to your bank on your behalf, without you knowing. CSRF (Cross-Site Request Forgery) is exactly that: a fake order sent with your credentials. The solution: a unique, secret token in every form. The server verifies the token is valid. If someone submits the form from another site, they don't have the token. Request denied.

In plain terms: Every form field is an entry point. A visitor can type anything: code, commands, weird characters. Sanitization is the guard searching bags at the entrance. You clean every piece of data before using it. You strip HTML tags, limit length, verify the format. Client-side AND server-side. Always both.

In plain terms: Security headers are instructions your server gives to the browser. "Don't embed my page in an iframe" (clickjacking). "Don't send the full referrer" (privacy). "Force HTTPS for 1 year" (HSTS). It's like putting an alarm, a lock, and a camera on your house. Each header blocks a specific type of attack.