Web basics

45 courses, 730 lessons. A real Kali Linux lab in the browser.

How the web works: HTTP, DNS, TLS (Level 101, 17 lessons): HTTP, browsers, servers, DNS and cookies.
Browser developer tools (Level 101, 15 lessons): You learn to inspect a page’s HTML, styles, network traffic and storage with Firefox developer tools and to track down where errors come from.
HTML fundamentals (Level 101, 19 lessons): Tags, page structure, forms and accessibility.
CSS fundamentals (Level 101, 21 lessons): Selectors, the box model, layout and responsive design.
JavaScript fundamentals (Level 101, 20 lessons): Variables, functions, arrays and objects.
JavaScript practice (Level 101, 15 lessons): You consolidate basic JavaScript with short, real problems and combine what you learned in a task you solve on your own in each section.
Build and publish your first website (Level 101, 13 lessons): You plan, build, test and publish a multi-page personal site on the lab server with HTML, CSS and a little JavaScript.
HTTP in depth: methods, headers, bodies (Level 201, 18 lessons): You write and read HTTP messages by hand with curl and netcat and see how methods, headers and body formats really work.
Web server basics: publishing a site (Level 201, 18 lessons): You publish a static site first with Python’s built-in server and then with Nginx, setting up paths, redirects, logs and HTTPS.
HTML forms in depth (Level 201, 17 lessons): You build usable forms with the right input types, labels, groups and browser validation, and trace end to end how a form reaches the server.
Semantic HTML and search engines (Level 201, 16 lessons): You structure pages with the right elements and organise headings, metadata and structured data so a page makes sense to people and machines alike.
CSS layout: Flexbox and Grid in depth (Level 201, 19 lessons): You try the alignment, sizing and placement rules of Flexbox and Grid one by one and build real page layouts robustly.
Responsive design: pages that fit every screen (Level 201, 16 lessons): With a mobile-first approach you build flexible type, images and layouts, choose breakpoints from the content and adapt components independently with container queries.
JavaScript: the DOM and fetch (Level 201, 19 lessons): Changing the page, events and talking to servers.
Node.js fundamentals: JavaScript on the server (Level 201, 19 lessons): You use JavaScript outside the browser with Node.js: reading files, writing command-line tools, managing npm packages and building a small HTTP server.
React fundamentals and secure component writing (Level 201, 18 lessons): You build user interfaces from components and avoid the common security mistakes in React.
REST APIs: using and building them (Level 201, 18 lessons): You explore a REST API with curl and small scripts, read and change resources, then write and document your own simple API.
Web accessibility fundamentals (Level 201, 16 lessons): You try pages yourself with a screen reader and a keyboard and find and fix text, colour, form and navigation problems according to the WCAG principles.
Web debugging challenges (Level 201, 15 lessons): In short challenges featuring broken pages, collapsed layouts, failing scripts and faulty requests, you find the cause with developer tools and apply a lasting fix.
HTTP caching and content delivery (Level 301, 17 lessons): You measure how browser, proxy and CDN caches work through headers and diagnose stale content and cache misses.
Inside the browser: parsing, rendering and the security model (Level 301, 17 lessons): Through experiments you examine how a browser parses and draws a page, the event loop, and security boundaries such as the same-origin policy.
Media and graphics in HTML: responsive images, SVG, canvas (Level 301, 16 lessons): You choose the right image format and size, add video and captions, and draw with SVG and canvas, keeping media-heavy pages fast and accessible.
CSS architecture for large projects (Level 301, 16 lessons): You keep CSS organised, predictable and maintainable as a project grows, using naming conventions, cascade layers, design tokens and build tools.
Motion in CSS: transitions and animations (Level 301, 15 lessons): You add meaningful motion with transitions, keyframes and transforms and keep it fast and respectful of motion-sensitive users.
JavaScript in depth (Level 301, 18 lessons): Through experiments you grasp how the language really works, from prototypes, this, closures, iterators and generators to Proxy, and can explain the cause of surprising behaviour.
Asynchronous JavaScript and the event loop (Level 301, 16 lessons): Learning the event loop, task and microtask queues, Promise combinators and cancellation patterns, you correctly handle asynchronous code that waits, races and fails.
Type-safe JavaScript with TypeScript (Level 301, 18 lessons): You add types to JavaScript step by step, let the compiler catch errors before the code runs and design safe interfaces with the type system.
JavaScript tooling and testing (Level 301, 16 lessons): You set up a front-end project with Vite, add linting and formatting, write unit and end-to-end tests and manage dependencies safely.
Building applications with React (Level 301, 16 lessons): You build a multi-page React application end to end with routing, context, reducers, data fetching, forms and tests, keeping state and performance under control.
API design: contracts, versions, resilience (Level 301, 18 lessons): You design long-lived APIs with consistent naming, error formats, paging, versioning, idempotency and rate limiting, and protect the contract with tests.
Accessible interface components (Level 301, 15 lessons): You build components such as menus, tabs, dialogs, accordions and notifications that follow ARIA patterns and keyboard expectations, and test them with a screen reader.
Web performance fundamentals (Level 301, 18 lessons): You measure Core Web Vitals with Lighthouse and developer tools and make pages measurably faster with image, font, script and caching improvements.
Front-end project workshop (Level 301, 15 lessons): Starting from real requirements, you plan, write, test and publish small apps such as a data dashboard, a kanban board and an offline field form.
HTTP/2, HTTP/3 and QUIC (Level 401, 15 lessons): Starting from the limits of HTTP/1.1, you observe HTTP/2 frames, header compression and HTTP/3 over QUIC with real tools, then enable and measure them on a server.
Web components: custom elements and the Shadow DOM (Level 401, 14 lessons): Without a framework, you write reusable, accessible, form-friendly components using custom elements, templates and the Shadow DOM.
Modern CSS: :has, container queries, colour spaces (Level 401, 14 lessons): You use new CSS features such as the :has selector, container units, new colour functions, logical properties and anchor positioning, together with fallbacks for older browsers.
Browser APIs: workers, offline and real time (Level 401, 15 lessons): You write applications that work offline and update in real time using browser APIs such as Web Workers, Service Workers, IndexedDB, WebSocket, Server-Sent Events and Web Crypto.
API authentication: sessions, tokens, OAuth 2.0 (Level 401, 16 lessons): You set up and compare session cookies, API keys, JWTs and OAuth 2.0 and OpenID Connect flows, and learn hands-on how to use each correctly and safely.
Accessibility auditing and reporting (Level 401, 14 lessons): You audit a site against the WCAG success criteria automatically and by hand, report findings by severity and tie the fix plan into continuous integration.
Writing an HTTP server from scratch (Level 501, 15 lessons): You grasp the protocol at the lowest level by writing an HTTP/1.1 parser, a router, a static file server and concurrent connection handling with Python sockets.
HTML parsing and sanitising: inside the standard (Level 501, 13 lessons): You study the parsing rules, error recovery and DOM construction in the HTML standard and see through your own experiments why a safe HTML sanitiser is hard.
CSS and rendering performance (Level 501, 13 lessons): You measure selector cost and style recalculation, layout and paint times, and make large pages smooth with tools such as content-visibility and containment.
The JavaScript engine, performance and memory (Level 501, 13 lessons): You examine how the engine compiles and optimises code, the garbage collector and memory leaks with profiling tools, and speed things up by measuring.
Advanced web performance engineering (Level 501, 13 lessons): You analyse bottlenecks end to end, from server response time to cache layers and from the critical path to rendering strategies, and prove improvements with experiments.
End-to-end web application capstone (Level 501, 15 lessons): You build a booking application yourself from design to launch, combining an API, a database, an accessible front end, authentication, caching and performance measurement in one project.

Projects

Build and publish a first website for a clinic: You write a site for a Lavinya Klinikleri branch with home, services and contact pages in HTML and CSS, and publish it on the lab web server.
Trace how a page loads: a DNS, TLS and HTTP report: You trace step by step how Kuzeyyıldızı Kargo's tracking page in the lab loads, using browser developer tools and curl, and write a short report showing where the slowness comes from.
A made-to-measure price calculator in JavaScript: You write a JavaScript page that prices Karaçam Mobilya's made-to-measure wardrobe orders by width, height and material, and show a clear warning for invalid measurements.
An accessible company portal page: You build a company portal web page that is also easy to use with a screen reader and keyboard, and show it passes accessibility checks.
A shareable search page (state in the URL): You build a page that keeps search and filter choices in the address bar, and show that someone opening a shared link sees the same results.
An accessible signup form with validation: You build a signup form that clearly points out mistakes, works with a keyboard and screen reader, and show that its validation works.
A schedule page in React: You build a React page that lists an event schedule and lets visitors filter it by day, and deliver the working result.
Publish two sites on one server with Nginx: You publish Selvikent Belediyesi's main site and events site on a single Nginx server with virtual hosts, set up redirects, custom error pages and access logs, and verify with curl.
A restaurant menu page that fits every screen: You build a page for Mercanköşk Otelcilik's restaurant menu with Flexbox and Grid that looks right from phone to wide screen, and show it working at three screen widths.
Tune cache headers and a reverse proxy cache: You fix the origin's cache headers and the reverse proxy's cache rules on Turnalı Perakende's product site, and show with measurements that personal pages are not cached and the hit ratio has gone up.
An order dashboard with React and TypeScript: You write a React dashboard in TypeScript that pulls data from Ayçiçeği Gıda's order API, handle loading and error states, and test the components.
Accessible dialog, tabs and combobox components: You write dialog, tabs and combobox components for Saklıvadi Üniversitesi's student portal so they are fully usable with keyboard and screen reader, and test each one with a screen reader.
Measure and speed up a slow catalogue page: You measure Ilgıntepe Tekstil's fabric catalogue page, which is full of heavy images, speed it up with responsive images, lazy loading and resource ordering, and report the before and after measurements.
Build a contract-first, versioned REST API in Node.js: You write the contract for a shipment API for Mavikaya Lojistik's partners, implement it in Node.js with versioning, pagination and a consistent error format, and test that it matches the contract.
Refactor messy CSS into a layered, token-based structure: You split the clashing styles on Göktaşı Yazılım's product site into layers and design tokens, simplify them without changing the look, and add transitions that respect the reduced-motion preference.
Add secure OAuth 2.0 sign-in to an application: You add sign-in to Yelkovan Bankası's internal announcements app through the lab identity provider using the authorisation code flow with PKCE, set the session cookies securely, and document each step of the flow.
An accessibility audit and report for a parent portal: You audit Gelincik Okulları's parent portal against the WCAG criteria with automated tools, keyboard and screen reader, and write an audit report with findings ranked by severity and suggested fixes.
A field notes web app that works offline: You write a web app for Demirsu Enerji's field crews that opens and saves notes without a connection, syncs when the connection returns, shows live announcements, and build the note card as a custom element.
Write your own HTTP server starting from sockets: You write a small HTTP/1.1 server without a framework that serves Lodoskaya Denizcilik's port sailing schedule, and show that it correctly handles keep-alive, malformed requests and attempts to leave the document root.
An end-to-end booking app: API, database and deployment: You complete a booking app for Sedirli Hukuk Bürosu with a front end, a Node.js API and a PostgreSQL database, publish it behind Nginx, and show it works with an end-to-end test.