Git & GitHub●Web Application Basics●APIs●Databases●Server Basics●Programming Fundamentals●Python Basics●JavaScript Basics●HTML & CSS●The Command Line●How the Internet Works●Computer Science Basics●Linux Basics●Data Structures, Gently●Debugging & Problem Solving●Markdown & Technical Writing●Cloud & Deployment Basics●FastAPI●PostgreSQL●Redis●Celery●MongoDB●System Design●Low Level Design●Microservices●React●Vue.js●Micro Front-ends●Django●Web Servers (NGINX & Apache)●AI for Developers●ChatGPT & Claude for Coding●Prompt Engineering Basics●Build with the Claude API●Claude Code●Finance for Everyone●Freelancing●Digital Marketing●SEO●GEO — Generative Engine Optimisation●Social Media Marketing●Performance Marketing●PPC Ads●Google Ads●Google AdSense●Meta Ads●Ad Library Research●Biology: Advanced●Biology: Beginner●Biology: Intermediate●Canva Designing: Beginner●Chemistry: Advanced●Chemistry: Beginner●Chemistry: Intermediate●Communication Skills: Advanced●Communication Skills: Beginner●Communication Skills: Intermediate●Digital Entrepreneurship: Advanced●Digital Entrepreneurship: Beginner●Digital Entrepreneurship: Intermediate●History: Advanced●History: Beginner●History: Intermediate●Leadership Skills: Advanced●Leadership Skills: Beginner●Leadership Skills: Intermediate●Mathematics: Advanced●Mathematics: Beginner●Mathematics: Intermediate●Personal Branding: Advanced●Personal Branding: Beginner●Personal Branding: Intermediate●Physical Education: Beginner●Physical Education: Intermediate●Physics: Advanced●Physics: Beginner●Physics: Intermediate●Presentation Skills: Beginner●Presentation Skills: Intermediate●Project Management: Advanced●Project Management: Beginner●Project Management: Intermediate●Public Speaking: Advanced●Public Speaking: Beginner●Public Speaking: Intermediate●Sales and Negotiation: Advanced●Sales and Negotiation: Beginner●Sales and Negotiation: Intermediate●

Advanced · 4h 54m · 20 lessons

Micro Front-ends

Split a large frontend into independent pieces owned by different teams.

Start course

What you'll learn

  • ✦Explain what a micro-frontend is and the team problem it solves
  • ✦Describe what the app shell owns and choose a composition method for a page
  • ✦Compare build-time and run-time composition and explain how Module Federation loads a remote
  • ✦Design how pieces share state, styles, routes and events without coupling to each other
  • ✦Decide which libraries to share, how to load pieces fast and how to ship one piece on its own
  • ✦Contain a failing piece, version the contracts between pieces and judge when a team should adopt micro-frontends

Part of these career paths

Certification projects

Build 4 projects to earn your certificate

Hands-on work that proves you can apply what you learned — part of the certificate requirements.

View projects →

Syllabus

Module 1 · 53m
What are micro-frontends? Free
What you'll be able to do
  • Can explain what makes a piece of UI a micro-frontend, and tell it apart from a shared component or a microservice
  • Can name the team pains micro-frontends fix (a shared release train, a gradual migration) and the costs they add
  • Can decide when one SPA or a modular monolith is the better choice, and say why code size alone is not a reason to split
Module 2 · 1h 2m
Composing them Locked
What you'll be able to do
  • Can list what the app shell should own (layout, nav, login session, routing, loading pieces) and spot business logic that has leaked into it
  • Can explain when the pieces come together in build-time, server-side and run-time composition, and pick one for a team set-up
  • Can read a Module Federation config and trace how a host loads a remote and shares React
  • Can match iframes, Web Components, single-spa and import maps to the need each one fits
Module 3 · 55m
Cross-cutting concerns Locked
What you'll be able to do
  • Can decide which data pieces share, who owns each value, and whether it travels as props, events or the URL
  • Can write an event contract (name, payload, version) and explain why a late-loading piece misses an event
  • Can stop CSS collisions with CSS Modules, prefixes or Shadow DOM, and give every route prefix one owner
  • Can keep many pieces feeling like one product with a versioned design system and the right version bumps
Module 4 · 40m
Performance & delivery Locked
What you'll be able to do
  • Can decide which libraries to share between pieces, and work out how many bytes sharing saves
  • Can lazy-load pieces by route and calculate what a page downloads first
  • Can ship, cache and roll back one piece without touching the others
Module 5 · 41m
Reliability & ownership Locked
What you'll be able to do
  • Can contain a failing piece with error boundaries and fallbacks, and say which errors they miss
  • Can version a piece's contract and change it without breaking other teams
  • Can split teams by feature and give every piece, including the shell, a clear owner
Module 6 · 43m
Making the call Locked
What you'll be able to do
  • Can decide whether to adopt micro-frontends by counting blocked teams and waiting, not lines of code
  • Can start with a modular app and plan a route-by-route migration when the split is due
  • Can build and debug a first Module Federation demo and plan the next month of practice

More Web courses

Web Application Basics

How the web works, from the request that starts it all to the HTML and CSS of a page.

Beginner24 lessons5h 32m

HTML & CSS

Build real web pages from scratch: structure them with HTML, then style them with CSS.

Beginner22 lessons5h 53m

React

Build interactive UIs from components — from your first useState to custom hooks.

Intermediate20 lessons5h 34m