Web Fundamentals
How browsers, HTML, CSS, and the web platform actually work.
Beginner
- How the Web Works: What actually happens, step by step, between typing a web address and seeing a page appear on screen.
- HTML Basics: The language used to describe what's on a page and how it's structured — not what it looks like.
- CSS Basics: The language used to control how a page looks, kept deliberately separate from what the page contains.
- The DOM: The live, in-memory version of a page's structure that a browser builds and that JavaScript can read and change.
- Browser Rendering: The step-by-step process a browser follows to turn HTML and CSS into the pixels you actually see on screen.
Intermediate
- CSS Layout (Flexbox & Grid): Two modern CSS tools for arranging elements on a page without relying on old workarounds like floats.
- Responsive Design: Designing a single page so it still looks and works well on a huge range of screen sizes, from phones to large monitors.
- Browser Storage: Different ways a website can save small pieces of data directly in the user's browser, so it's still there the next time they visit.
- Web Accessibility (a11y): Designing and building a site so people using assistive technology, like screen readers or keyboard-only navigation, can actually use it.
- Web Performance Basics: What actually makes a page feel slow to use, and the basic techniques for making it feel fast.
Advanced
- Web Security Basics: Two of the most common ways attackers abuse a website's trust of its own content or its users, and why they work.
- CORS: Why a browser blocks a webpage from freely talking to a different website's server, and how that server can explicitly allow it.
- Browser DevTools & Debugging: The built-in browser tools for inspecting, debugging, and understanding exactly what a page is doing, beyond just what it shows.
- Progressive Web Apps (PWA): What lets an ordinary website behave more like a native app — installable, working offline, and launchable from a home screen.