Front-End Development: From Basics to Advanced

Path contents

1. 1
   

   1 Level 1 · 7 tutorials · 1h 51min

   Web Foundations and Semantic HTML

   Start with how browsers display web pages, then create meaningful HTML documents using a local editor. Semantic structure and native accessibility come first because styling and interactivity depend on a usable foundation.

   What you will learn

   • Explain the roles of browsers, servers, URLs, HTML, CSS, and JavaScript.
   • Create and link local HTML files, use relative paths, and inspect a page with browser developer tools.
   • Structure documents with metadata, landmarks, headings, lists, links, and images with appropriate text alternatives.
   • Build forms with associated labels, suitable input types, and native validation.

   1. 1 Tutorial 1: How Browsers Display Web Pages Explain how a browser obtains and displays a web page, and distinguish the responsibilities of HTML, CSS, and JavaScript. Beginner 8 min
   2. 2 Tutorial 2: Create and Inspect a Local HTML Page Create a complete HTML document in your own editor, open it in a browser, and inspect how its elements relate to the displayed page. Beginner 17 min
   3. 3 Tutorial 3: Link Local Pages with Relative Paths Connect local pages with reliable links, check keyboard navigation, and explain how native elements communicate a control's name and role. Beginner 20 min
   4. 4 Tutorial 4: Organize Content with Semantic HTML Organize an unstyled page into meaningful regions, headings, and lists so its structure remains understandable without visual styling. Beginner 15 min
   5. 5 Tutorial 5: Build Accessible Data Tables Build a semantic data table with a descriptive caption and clear row and column header associations, without using tables for page layout. Beginner 13 min
   6. 6 Tutorial 6: Add Images with Appropriate Alt Text Add an image of your own to a local page and provide an appropriate text alternative based on what the image contributes. Beginner 13 min
   7. 7 Tutorial 7: Build Accessible Forms with Native Validation Build a labeled, keyboard-usable form whose native controls expose meaningful names, roles, and states, then check browser validation locally with fictional input. Beginner 25 min
2. 2
   

   2 Level 2 · 7 tutorials · 1h 36min

   CSS Foundations

   Learn how CSS turns structured documents into readable, consistent interfaces. Establish predictable styling and sizing before tackling layouts that must adapt to different screens.

   What you will learn

   • Apply styles using selectors and resolve conflicts through the cascade, specificity, and inheritance.
   • Control element dimensions and spacing with the box model, display properties, and overflow.
   • Style typography, colors, and surfaces using suitable units and reusable custom properties.
   • Provide readable contrast and distinguishable hover, focus, and disabled states without removing keyboard focus indicators.

   Prerequisites

   • Create semantic HTML documents and link local files.
   • Inspect HTML elements in browser developer tools.

   1. 1 Tutorial 1: Apply CSS with Stylesheets and Selectors Connect a stylesheet to a local HTML page, target the intended elements with reusable selectors, and inspect which rules match. Beginner 11 min
   2. 2 Tutorial 2: Resolve CSS Conflicts with the Cascade Explain why a CSS declaration wins and correct unexpected styling using the cascade, specificity, and inheritance. Beginner 13 min
   3. 3 Tutorial 3: Style Readable Text with CSS Create a readable text hierarchy using locally available fonts, suitable length units, and predictable line spacing. Beginner 12 min
   4. 4 Tutorial 4: Control Element Size and Spacing Size and space individual elements predictably, choose suitable display behavior, and handle overflow without accidentally losing content. Beginner 18 min
   5. 5 Tutorial 5: Create Reusable Colors and Surfaces Build consistent text and surface styles with reusable CSS custom properties, then check that text remains readable against its background. Beginner 14 min
   6. 6 Tutorial 6: Style Accessible Hover, Focus, and Disabled States Give links and form controls clear hover, keyboard-focus, and disabled appearances while preserving native behavior and visible focus. Beginner 15 min
   7. 7 Tutorial 7: Create Accessible CSS Transitions Add restrained transitions to interface state changes and provide a reduced-motion alternative that preserves immediate, usable feedback. Beginner 13 min
3. 3
   

   3 Level 3 · 7 tutorials · 2h 15min

   Responsive Layouts

   Move from styling individual elements to composing complete interfaces. Flexible layouts and content-driven breakpoints establish the responsive page structure needed by later interactive applications.

   What you will learn

   • Use Flexbox for one-dimensional arrangements and Grid for two-dimensional layouts.
   • Combine fluid sizing, maximum widths, and media queries to adapt layouts to their content.
   • Make images, media, and typography fit their containers without distortion or unnecessary overflow.
   • Check layouts across viewport sizes, zoom levels, and content lengths while preserving meaningful reading and focus order.

   Prerequisites

   • Understand the CSS cascade, box model, sizing, and relative units.
   • Use semantic HTML and accessible visual states.

   1. 1 Tutorial 1: Arrange Content with Flexbox Build flexible rows and columns that align, distribute space, and wrap while preserving meaningful reading and keyboard order. Beginner 20 min
   2. 2 Tutorial 2: Create Two-Dimensional Layouts with CSS Grid Create page sections and card layouts with coordinated rows and columns, choosing Grid when two-dimensional alignment matters. Beginner 20 min
   3. 3 Tutorial 3: Adapt Layouts with Fluid Sizing and Media Queries Combine bounded fluid containers with content-driven media queries so a locally created page adapts from narrow to wide viewports. Beginner 18 min
   4. 4 Tutorial 4: Size Images and Video for Responsive Layouts Make your own local images and video fit responsive containers, preserving proportions and choosing deliberately when media should be cropped. Beginner 15 min
   5. 5 Tutorial 5: Make Typography Adapt Without Losing Readability Keep headings and body text readable as available space changes, including long words, expanded content, and user zoom. Beginner 15 min
   6. 6 Tutorial 6: Position and Layer Elements with CSS Position overlays, sticky headers, and fixed utilities deliberately, then resolve layering conflicts without hiding content or disrupting reading and keyboard order. Intermediate 25 min
   7. 7 Tutorial 7: Check Responsive Layouts Across Sizes and Zoom Evaluate a responsive page on your own computer across widths, zoom levels, and content variations, then fix layout problems without hiding content or disrupting keyboard use. Intermediate 22 min
4. 4
   

   4 Level 4 · 9 tutorials · 3h 0min

   JavaScript Fundamentals

   Develop the programming skills needed to make interfaces respond to users. Work with JavaScript independently of frameworks so later browser behavior and application logic remain understandable.

   What you will learn

   • Work with variables, primitive values, expressions, comparisons, and explicit type conversion.
   • Express decisions and repeated behavior with conditionals, loops, functions, and lexical scope.
   • Transform arrays and objects using iteration methods, destructuring, and spread syntax while recognizing mutation.
   • Handle exceptions and diagnose logic or runtime errors with the console and debugger.

   Prerequisites

   • Create and inspect local web pages.
   • Understand where JavaScript fits alongside HTML and CSS.

   1. 1 Tutorial 1: Work with JavaScript Values and Variables Run JavaScript from a local HTML page and use named values and expressions to calculate and display results in the browser console. Beginner 25 min
   2. 2 Tutorial 2: Make Decisions with JavaScript Conditionals Write predictable decisions by converting values deliberately, comparing them correctly, and selecting the appropriate conditional branch. Beginner 20 min
   3. 3 Tutorial 3: Write Functions with Parameters and Lexical Scope Package a calculation or decision into a reusable function and explain which values that function can access through lexical scope. Beginner 23 min
   4. 4 Tutorial 4: Represent Records and Lists with Objects and Arrays Represent a small collection of records with arrays and objects, access its data, and recognize when an edit changes a shared value. Beginner 20 min
   5. 5 Tutorial 5: Process Collections with JavaScript Loops Use loops to process collections and repeat calculations while keeping iteration boundaries and termination explicit. Beginner 18 min
   6. 6 Tutorial 6: Make Non-Mutating Updates with Spread Syntax Extract values with destructuring and produce updated copies with spread syntax without accidentally changing the original data. Beginner 18 min
   7. 7 Tutorial 7: Transform Arrays with Callback Functions Select and transform array data with callback methods, including creating updated records while preserving the source collection. Beginner 20 min
   8. 8 Tutorial 8: Handle Failures with JavaScript Exceptions Signal invalid operations with exceptions and handle recoverable failures without silently hiding programming errors. Beginner 16 min
   9. 9 Tutorial 9: Trace JavaScript Errors with the Browser Debugger Investigate a failing local script with console evidence and debugger controls, then verify that the correction addresses the actual cause. Beginner 20 min
5. 5
   

   5 Level 5 · 6 tutorials · 2h 10min

   Interactive Browser Interfaces

   Connect JavaScript to real browser interfaces through the DOM and event system. Learn explicit state-to-interface updates and accessible interaction before a framework manages those responsibilities.

   What you will learn

   • Read and update DOM elements, text, attributes, and classes without treating untrusted text as HTML.
   • Handle browser events using listeners, propagation, delegation, and deliberate control of default behavior.
   • Keep interface state and rendered output consistent, including form validation and useful feedback.
   • Implement interactive controls with appropriate native semantics, keyboard behavior, and focus management.
   • Persist non-sensitive preferences with browser storage and recover from missing or invalid saved values.

   Prerequisites

   • Use JavaScript functions, arrays, objects, and control flow.
   • Build accessible HTML forms and responsive page structures.

   1. 1 Tutorial 1: Read and Update the DOM Safely Read and modify a local page through JavaScript, including its text, controls, classes, and child elements, while keeping user-supplied text separate from HTML markup. Beginner 20 min
   2. 2 Tutorial 2: Handle Browser Events with Listeners and Delegation Connect browser interactions to JavaScript callbacks and use delegation to handle repeated controls, without accidentally blocking useful browser behavior. Intermediate 25 min
   3. 3 Tutorial 3: Keep Interface State and Rendering Consistent Build a small interface over an in-memory list whose controls, results, and summaries remain consistent through explicit state updates and rendering. Intermediate 20 min
   4. 4 Tutorial 4: Show Accessible Form Validation Feedback Enhance a local form with persistent, accessible validation feedback while retaining native constraint rules and making clear that no data is being sent. Intermediate 25 min
   5. 5 Tutorial 5: Manage Keyboard Focus in a Native Dialog Implement a native modal dialog with meaningful labeling, predictable keyboard behavior, and reliable focus handling instead of recreating modal behavior with generic elements. Intermediate 20 min
   6. 6 Tutorial 6: Save and Restore Browser Preferences Persist a non-sensitive display preference where browser storage is available, restore only supported values, and keep the interface usable when storage is missing, invalid, or blocked. Intermediate 20 min
6. 6
   

   6 Level 6 · 6 tutorials · 1h 58min

   Modules and Local Development Tools

   Organize growing browser code into modules and establish a repeatable local development workflow. This prepares the toolchain required for API exercises, TypeScript, and component-based applications without introducing deployment operations.

   What you will learn

   • Separate responsibilities into JavaScript modules using imports and exports.
   • Set up Node.js, npm, package scripts, a linter, and a local development server such as Vite.
   • Explain dependencies, lockfiles, and how development tools resolve modules and transform source code for browsers.
   • Use local Git commits and diffs to track changes and restore earlier work.

   Prerequisites

   • Build JavaScript-driven interfaces using DOM events and explicit state.
   • Create local files and diagnose browser errors.

   1. 1 Tutorial 1: Prepare a Local Project with Node.js and npm Set up Node.js and npm on your computer, navigate to a project in a terminal, and run a simple JavaScript program through a repeatable package script. Beginner 20 min
   2. 2 Tutorial 2: Manage npm Dependencies and Lockfiles Manage a local project's packages and explain how its manifest, lockfile, and installed dependencies work together to recreate a recorded setup. Beginner 16 min
   3. 3 Tutorial 3: Run a Local Development Server with Vite Serve a locally authored HTML, CSS, and JavaScript page with Vite and use a reliable edit-save-check workflow on your own computer. Beginner 15 min
   4. 4 Tutorial 4: Split Browser Code into JavaScript Modules Refactor a small browser interface into connected JavaScript modules and explain how Vite makes local modules and installed packages usable by the browser. Intermediate 22 min
   5. 5 Tutorial 5: Check JavaScript with ESLint Configure ESLint for browser JavaScript, run checks through npm, and resolve useful diagnostics without mistaking lint success for complete correctness. Intermediate 20 min
   6. 6 Tutorial 6: Track and Restore Local Changes with Git Record understandable checkpoints for a local project, inspect exactly what changed, and recover earlier file contents without relying on a remote service. Beginner 25 min
7. 7
   

   7 Level 7 · 6 tutorials · 2h 17min

   Asynchronous JavaScript and APIs

   Introduce asynchronous work and HTTP communication after the local workflow is established. Build dependable data-loading behavior that will later transfer into typed, component-based applications.

   What you will learn

   • Reason about promise sequencing and use async/await with appropriate error handling and cleanup.
   • Use fetch with HTTP methods, headers, status checks, and JSON to exchange and validate data.
   • Represent loading, empty, success, and error states, and prevent outdated requests from overwriting newer results.
   • Explain origins and CORS, diagnose browser request failures, and recognize restrictions that client code cannot bypass.

   Prerequisites

   • Use JavaScript modules, exceptions, and state-driven DOM updates.
   • Run a project through a local development server.

   1. 1 Tutorial 1: Sequence Asynchronous Work with async/await Write asynchronous functions that wait for dependent results, handle failures, and perform cleanup. Use small delayed operations on your own computer to observe execution order before introducing network requests. Intermediate 25 min
   2. 2 Tutorial 2: Fetch and Validate JSON Responses Retrieve JSON with fetch, check the HTTP result, and verify the fields your interface needs before using the data. Practice with JSON files you create locally from text included in the tutorial and serve through Vite. Intermediate 25 min
   3. 3 Tutorial 3: Send JSON Data with HTTP Requests Construct JSON write requests and handle their response contracts without assuming that sending data means it was saved. Inspect outgoing requests locally, using response examples to interpret successful writes and recognizing that the Vite server does not provide a writable API. Intermediate 20 min
   4. 4 Tutorial 4: Diagnose Request Failures and CORS Restrictions Investigate browser request failures by checking origins, the Network panel, and console messages. Determine which problems your client code can fix and which require changes from the API owner, without disabling browser protections. Intermediate 20 min
   5. 5 Tutorial 5: Render Loading, Empty, Error, and Recovery States Build a data-loading interface that communicates progress, displays results or an empty outcome, and offers recovery after failure. Keep its controls and accessible feedback consistent throughout each request. Intermediate 22 min
   6. 6 Tutorial 6: Prevent Outdated Requests from Updating the Interface Keep rapidly changing selections from displaying outdated results. Combine cancellation with request-identity checks so only the current operation can update results, errors, or loading feedback. Intermediate 25 min
8. 8
   

   8 Level 8 · 6 tutorials · 2h 10min

   TypeScript for Front-End Code

   Make data contracts and assumptions explicit with TypeScript. Introduce static checking before React so components and application boundaries can be typed from the beginning.

   What you will learn

   • Enable strict type checking and type variables, functions, arrays, and object structures.
   • Model alternatives with unions and safely handle optional or nullable values through narrowing.
   • Define reusable contracts with type aliases, interfaces, and straightforward generics.
   • Treat external data as unknown until checked, distinguishing compile-time guarantees from runtime validation.

   Prerequisites

   • Write modular JavaScript using objects, functions, and asynchronous operations.
   • Use npm scripts and distinguish application data from external input.

   1. 1 Tutorial 1: Enable Strict Type Checking in a Local Vite Project Add TypeScript to a local Vite project, enable strict checking, and extend the existing ESLint workflow to cover TypeScript source while keeping linting, type checking, and browser execution separate. Intermediate 25 min
   2. 2 Tutorial 2: Define Reusable Object and Array Types Describe records and collections with reusable TypeScript contracts, then share those contracts between modules without creating runtime data. Intermediate 18 min
   3. 3 Tutorial 3: Type Function Boundaries and Callbacks Make function boundaries explicit, type callbacks without unnecessary annotations, and describe the results of asynchronous operations. Intermediate 18 min
   4. 4 Tutorial 4: Narrow Unions and Nullable Values Represent alternative states and safely use values that may be missing or have different shapes, including values obtained from browser APIs. Intermediate 24 min
   5. 5 Tutorial 5: Preserve Type Relationships with Generics Write small reusable functions and contracts that preserve specific data types instead of losing information or duplicating nearly identical definitions. Intermediate 20 min
   6. 6 Tutorial 6: Validate Unknown Data at Typed API Boundaries Build a typed API boundary that checks external JSON before returning application data and handles invalid input without bypassing the type checker. Intermediate 25 min
9. 9
   

   9 Level 9 · 8 tutorials · 2h 32min

   React Components and State

   Use React to express interfaces as typed, composable components. Focus on component behavior and state ownership before adding application-wide routing and shared data coordination.

   What you will learn

   • Create a local React application with TypeScript and compose semantic interfaces using JSX, props, conditional rendering, and stable list keys.
   • Handle user interactions and controlled inputs with state and immutable updates.
   • Choose state ownership, lift shared state, and derive values instead of storing redundant state.
   • Use effects and refs only for necessary external synchronization, with correct dependencies and cleanup.

   Prerequisites

   • Use TypeScript to model data and function contracts.
   • Understand DOM events, interface state, accessibility, and asynchronous JavaScript.
   • Run module-based projects with local development tools.

   1. 1 Tutorial 1: Build a Local React App with TypeScript Configure React in a local TypeScript and Vite project, render a semantic interface with JSX, and extend the existing checking workflow to cover TSX and official React Hooks rules. Intermediate 25 min
   2. 2 Tutorial 2: Compose Interfaces with Typed Props Extract reusable components with explicit prop contracts and compose them into an interface while preserving semantic structure. Intermediate 15 min
   3. 3 Tutorial 3: Render Conditional Content and Keyed Lists Render alternative interface states and collections from typed data, choosing keys that keep item identity stable as the data changes. Intermediate 14 min
   4. 4 Tutorial 4: Update Component State from User Events Make components respond to user events with typed local state, predictable queued updates, and immutable changes, using lint diagnostics to catch invalid Hook placement. Intermediate 22 min
   5. 5 Tutorial 5: Build Controlled Forms in React Build a labeled React form whose controls stay synchronized with state and whose local submission behavior preserves native validation. Intermediate 20 min
   6. 6 Tutorial 6: Lift Shared State to a Common Parent Coordinate sibling components by assigning clear state ownership, passing typed callbacks, and deriving shared output without redundant state. Intermediate 18 min
   7. 7 Tutorial 7: Focus Native Controls with React Refs Use typed React refs to focus native controls when an interaction calls for it, without storing visible data outside React state. Intermediate 13 min
   8. 8 Tutorial 8: Synchronize External Systems with React Effects Synchronize React state with browser listeners and native element APIs using Effects with complete dependencies, reliable cleanup, and meaningful lint checks. Intermediate 25 min
10. 10
    

    10 Level 10 · 9 tutorials · 3h 4min

    Application Architecture and Routing

    Expand from individual components to coherent applications with multiple views and shared behavior. Introduce architecture decisions that become necessary when navigation, client state, and remote data interact.

    What you will learn

    • Implement client-side routes, route parameters, URL-based state, and accessible navigation.
    • Organize features and extract custom hooks while keeping presentation, domain logic, and data access responsibilities clear.
    • Use reducers and context for suitable shared client state without treating all state as global.
    • Distinguish remote data from client state and coordinate fetching, cache reuse, updates, and recovery across routed views.

    Prerequisites

    • Build typed React components with deliberate state ownership.
    • Handle API requests and asynchronous interface states.
    • Organize code into modules with clear responsibilities.

    1. 1 Tutorial 1: Build Accessible Client-Side Routes with React Router Create multiple URL-addressable views in a local React application with persistent navigation. Make page changes understandable through active links, document titles, and deliberate keyboard-focus behavior. Intermediate 25 min
    2. 2 Tutorial 2: Represent Detail Views and Filters in the URL Make record selection and list filters reproducible through the URL. Handle invalid values and ensure that direct navigation, refresh, and browser history restore the intended view. Intermediate 20 min
    3. 3 Tutorial 3: Organize React Features by Responsibility Organize a small routed application around features and clear responsibilities. Separate view composition, application rules, and typed data access without introducing unnecessary abstraction layers. Intermediate 18 min
    4. 4 Tutorial 4: Extract Reusable Stateful Logic into Custom Hooks Extract reusable stateful behavior into a typed custom Hook while keeping rendering decisions in components. Distinguish sharing a Hook implementation from sharing its state. Intermediate 15 min
    5. 5 Tutorial 5: Model Client-State Transitions with Reducers Model related client-state changes with a typed reducer. Keep transitions predictable and application rules consistent when several user actions affect the same state. Intermediate 18 min
    6. 6 Tutorial 6: Share Scoped Client State with Context Share a focused piece of client state across routed views using context and a reducer. Place the provider deliberately so state survives the intended navigation without becoming application-wide by default. Intermediate 18 min
    7. 7 Tutorial 7: Contain React Rendering Failures with Error Boundaries Contain unexpected React rendering failures so one broken feature does not remove the entire application. Provide an accessible fallback and recovery behavior that distinguishes resetting the boundary from correcting the cause. Intermediate 20 min
    8. 8 Tutorial 8: Reuse Resource Data Across Routes with TanStack Query Connect routed React views to a typed query cache. Fetch JSON files you create locally through Vite, reuse resources across routes, and recover from failed reads without a backend. Advanced 25 min
    9. 9 Tutorial 9: Synchronize Cached Data After Mutations Keep routed views consistent after a data update by coordinating mutations with cache updates and refreshes. Practice reads and writes with an in-memory adapter you create locally, handling failure and recovery without claiming server persistence. Advanced 25 min
11. 11
    

    11 Level 11 · 6 tutorials · 1h 44min

    Client-Side Security

    Examine the trust boundaries of data-driven applications. Go beyond safe defaults to recognize browser-side attack paths and understand which protections must be enforced outside the front end.

    What you will learn

    • Identify cross-site scripting risks in HTML rendering, URLs, and third-party code, and choose safer handling patterns.
    • Distinguish authentication from authorization and explain why hiding a route or control does not enforce access.
    • Explain cookie- and token-based session trade-offs, cross-site request forgery risks, and the limits of browser-side protections.
    • Keep secrets and sensitive data out of exposed code and inappropriate storage, and recognize when server-enforced controls such as CSP and secure cookie attributes are required.

    Prerequisites

    • Build routed applications that consume external data.
    • Understand browser origins, DOM rendering, and client-side storage.
    • Distinguish runtime validation from static typing.

    1. 1 Tutorial 1: Protect Sensitive Data at the Browser Boundary Review a front-end feature for exposed private credentials and unnecessary sensitive data, and identify which operations require a server-controlled boundary. Intermediate 12 min
    2. 2 Tutorial 2: Prevent XSS When Rendering External Content Trace external content into React rendering and choose safe handling for plain text, justified rich HTML, and link destinations without relying on TypeScript alone. Intermediate 22 min
    3. 3 Tutorial 3: Evaluate the Risks of Third-Party Scripts Evaluate the trust granted to third-party browser code and explain what dependency review and server-delivered script restrictions can—and cannot—protect. Intermediate 15 min
    4. 4 Tutorial 4: Distinguish Authentication from Authorization Separate sign-in status from resource permissions, identify ineffective client-only access checks, and choose appropriate interface behavior when an API refuses access. Intermediate 15 min
    5. 5 Tutorial 5: Compare Browser Session Storage and Transport Compare browser session designs by separating credential format, storage, and transport, and explain which protections depend on cookie attributes and server-enforced session behavior. Advanced 22 min
    6. 6 Tutorial 6: Recognize and Mitigate Cross-Site Request Forgery Recognize requests vulnerable to cross-site request forgery and explain how a front end participates in server-enforced defenses without claiming that CORS or cookie settings alone solve the problem. Advanced 18 min
12. 12
    

    12 Level 12 · 6 tutorials · 2h 15min

    Testing Front-End Behavior

    Make application behavior verifiable before optimizing it. Use a focused combination of automated tests and manual accessibility checks to protect user-visible outcomes rather than implementation details.

    What you will learn

    • Write unit tests for application logic, edge cases, and data-validation boundaries using a tool such as Vitest.
    • Test React components through accessible queries and realistic user interactions.
    • Control network responses in tests to verify loading, success, empty, failure, and recovery behavior deterministically.
    • Run essential local browser journeys with Playwright and complement automated accessibility checks with keyboard and screen-reader checks.

    Prerequisites

    • Build modular TypeScript and React applications with routing and API integration.
    • Understand accessible interaction patterns, failure states, and client-side security boundaries.

    1. 1 Tutorial 1: Test TypeScript Logic with Vitest Set up Vitest in a local TypeScript project and write independent tests for application rules and runtime data parsers, including edge cases and expected failures. Intermediate 20 min
    2. 2 Tutorial 2: Test React Components Through User Interactions Test React forms and controls through accessible queries and realistic user actions, checking observable outcomes without depending on component internals. Intermediate 25 min
    3. 3 Tutorial 3: Test Asynchronous Interfaces with Controlled Responses Control API responses in local React tests to verify loading, populated, empty, failure, and recovery behavior without relying on external services or timing guesses. Advanced 25 min
    4. 4 Tutorial 4: Run Local Browser Journeys with Playwright Run the same critical Playwright journey in locally installed Chromium and Firefox, control API responses, and investigate cross-browser differences without treating engine checks as complete target-browser coverage. Advanced 25 min
    5. 5 Tutorial 5: Run State-Based Accessibility Scans with Playwright Integrate axe into local Playwright tests and scan meaningful interface states, interpreting reported violations without treating a clean result as proof of accessibility. Intermediate 15 min
    6. 6 Tutorial 6: Audit a User Task with Keyboard and a Screen Reader Audit one short user task with a keyboard and an available screen reader, record reproducible accessibility findings, and verify corrections through targeted manual and automated checks. Advanced 25 min
13. 13
    

    13 Level 13 · 6 tutorials · 2h 12min

    Front-End Performance

    Learn how browsers and React spend time, then improve an existing application using evidence rather than guesswork. This final stage integrates earlier skills while adding rendering, loading, and responsiveness optimization performed locally.

    What you will learn

    • Explain how tasks, microtasks, style calculation, layout, and painting affect responsiveness and visible updates.
    • Use browser performance tools and the React Profiler to locate loading delays, long tasks, layout shifts, and unnecessary renders.
    • Interpret LCP, CLS, and interaction measurements while distinguishing local diagnostics from real-user performance evidence.
    • Reduce initial work with route-level code splitting, selective lazy loading, and deliberate media-loading choices.
    • Address measured bottlenecks with state locality, selective memoization, and reduced layout work, then verify improvements without breaking behavior or accessibility.

    Prerequisites

    • Understand responsive layouts, asynchronous JavaScript, and React rendering behavior.
    • Build routed, modular applications and run local regression tests.
    • Use browser developer tools to investigate application behavior.

    1. 1 Tutorial 1: Understand Browser Tasks and Rendering Explain when browser work can become visible and why JavaScript can delay interaction even when an interface uses asynchronous functions. Intermediate 12 min
    2. 2 Tutorial 2: Measure Loading and Responsiveness Locally Record repeatable local performance baselines, locate loading and responsiveness bottlenecks, and interpret the measurements without mistaking them for real-user evidence. Advanced 25 min
    3. 3 Tutorial 3: Load Route Components on Demand Load selected route components only when needed, retain usable navigation during loading, and verify that the optimized local build performs less initial code loading. Intermediate 25 min
    4. 4 Tutorial 4: Optimize Image and Media Loading Reduce unnecessary media transfers and loading-related layout shifts while preserving image quality, responsive behavior, and accessibility. Use your own media for local comparisons. Intermediate 25 min
    5. 5 Tutorial 5: Reduce React Rendering Costs with Profiling Use the React Profiler to find expensive render work, apply the smallest justified state-placement or memoization change, and verify that the interaction improves without changing its behavior. Advanced 25 min
    6. 6 Tutorial 6: Reduce Forced Layout with Batched DOM Updates Remove avoidable synchronous layout work from a measured interaction, compare the result with its baseline, and confirm that the improvement preserves behavior and accessibility. Advanced 20 min