Posts

Playwright Tutorial: Test a Course Filter and Empty State

Web Development Learning Series — Part 9 of 10 · Advanced A useful browser test protects behavior that matters to a visitor. For a course catalog, that might be finding a beginner lesson and understanding when a filter has no results. A test that only proves a button exists gives less confidence. This guide assumes an application with a visible Difficulty label, a select control, course cards, and a status message. Use the official Playwright setup instructions for a project that does not already have the test runner installed.

Core Web Vitals: Diagnose LCP, INP and CLS

Web Development Learning Series — Part 8 of 10 · Advanced A fast website helps learners reach the lesson and use its controls without unnecessary waiting. Performance work begins by identifying the slow experience, not by applying every optimization tip at once. This guide uses a course landing page as a practical example. Imagine the page opens with a large banner image, a signup widget, and a video lesson. Those features can affect loading, interaction, and stability in different ways. Measure each problem separately before changing the design.

Node.js API Tutorial: Build a Read-Only Course Endpoint

Web Development Learning Series — Part 7 of 10 · Advanced A backend gives a web application a place to apply trusted rules and deliver data. In this lesson, create a small read-only course API using Node.js and its built-in HTTP module. Keeping the first endpoint simple makes routing and response behavior easier to understand. Use a currently supported Node.js release. Save the code as server.mjs so its module syntax is explicit. This demonstration has no authentication, database, or write route; it is a local learning server.

React State Tutorial: Build a Course Filter

Web Development Learning Series — Part 6 of 10 · Intermediate to Advanced React is useful when a page has several connected interactive views. The challenge is often deciding what the application needs to remember. This lesson builds a difficulty filter for a course catalog and keeps the state small. Use an existing React learning project or the official documentation's interactive editor. This example is a component, not a complete installation guide. You should already know JavaScript arrays, functions, and basic JSX.

TypeScript Tutorial: Validate API Data at the Boundary

Web Development Learning Series — Part 5 of 10 · Intermediate TypeScript can catch many mistakes before a program runs, but an API response is still outside your control. A server can send an unexpected value even if your editor says the variable is a Course. This lesson shows where static types help and where a runtime check is necessary. You need basic JavaScript objects, arrays, and functions. Run the examples in the TypeScript Playground or a project configured with the current TypeScript compiler and strict checking.

JavaScript Fetch API: Loading, Errors and Cancellation

Web Development Learning Series — Part 4 of 10 · Intermediate A page that loads remote data needs more than a successful request. It needs to explain what happens while waiting, when the server fails, and when the response is not the shape you expected. This lesson adds a small API-driven course panel. You should already understand functions and DOM updates. The example uses a same-origin courses.json file so you can practice without an external service or an API key.

JavaScript DOM Tutorial: Build a Searchable Course List

Web Development Learning Series — Part 3 of 10 · Intermediate JavaScript becomes easier to learn when each interaction has a clear job. This project filters a course list as the reader types. It teaches events, arrays, and DOM updates without a framework. The finished feature should handle three situations: a matching query, an empty query that shows everything, and a query with no matches. Decide those behaviors before writing the event handler.

CSS Grid Tutorial: Build Responsive Course Cards

Web Development Learning Series — Part 2 of 10 · Beginner to Intermediate A course catalog should remain readable when the browser is narrow, the text is enlarged, or a card appears in a sidebar. In this lesson, build a small catalog without hard-coding a separate layout for every device. You need basic HTML and a stylesheet. Start with three cards containing a title, a short description, and a lesson link. Use real course names so you can notice when a longer title breaks the layout.

Semantic HTML Tutorial: Build a Course Landing Page

Web Development Learning Series — Part 1 of 10 · Beginner HTML gives a webpage its structure. In this lesson, you will build a course landing page that answers three questions: what will I learn, what do I need, and where should I begin? You do not need a framework or a build tool to complete the first version. Our example is a small course called Web Foundations. Replace the sample content with your own topic, but keep the structure clear. A successful first page is useful before you add animations or a complex design.

HTML Audio and Video Tutorial: Controls and Captions

You can add audio and video to an HTML page with the <audio> and <video> elements. This beginner project turns multimedia theory into a small lesson page with a recording, a demonstration video, and readable notes. This tutorial continues our introduction to the World Wide Web, HTML, and multimedia . You need a text editor, a browser, and short media files that you own or have permission to use.