Advanced CSS and Web Development

About this course

Basic tier: cascade, box model and Flexbox. Advanced tier: grid, subgrid, fluid design systems and motion - eight modules culminating in the DevFolio capstone.

This is a 6-week short course - enough depth to build real projects and a portfolio piece, without a long commitment. It runs online in the August 2026 cohort (starting 1 August 2026) and is taught the EchoLens way: you learn by doing real, gradeable work rather than just watching lectures.

What's included

• Live, instructor-led online sessions across 8 weeks (20 hours total).
• Hands-on coding quests you solve inside the EchoLens browser compiler - nothing to install.
• Gems, stages and a leaderboard that keep you moving instead of grade anxiety.
• A verified certificate with a scannable QR code, ready to share on LinkedIn, when you finish.
• Completely free - no fee, just create an account and start.

What you will learn

Course outline - level by level

8 leveles, each with hands-on quests you clear in the portal.

• Level 1. Basic 1: The Cascade, Specificity and Design Tokens - Specificity is a comparison, not a score - once that is clear the endless override war ends. The fix for a rule not applying is almost never to add an override of last resort, it is to lower the specificity of the competing rule. Custom properties cascade and inherit, which means a theme is a set of values redefined at one place in the tree rather than a duplicate stylesheet. Key rules: - Specificity compares identifier count, then class count, then element count. A later rule wins only on a tie. - The override of last resort is a maintenance debt - reach for it only in a utility layer. - Custom properties inherit; redefine them on a wrapper element to retheme everything inside it. - Cascade layers let you order whole groups of rules, so a reset can never accidentally outrank a component. Worked example - a token system retheming through one redefinition: :root { --brand: #0E3457; --accent: #03C39A; --surface: #FAF8F3; --text: #12212F; } [data-theme="dark"] { --surface: #0B1620; --text: #E8EFF3; } .card { background: var(--surface); color: var(--text); border-top: 3px solid var(--accent); }
• Level 2. Basic 2: The Box Model, Formatting Contexts and Overflow - Most mysterious spacing comes from two behaviours: the default box sizing that adds padding and border on top of the declared width, and margin collapsing between adjacent vertical margins. A new formatting context is created by overflow, flex, grid or a few other properties - it contains floats and stops margin collapse. Debugging layout is a matter of asking which box and which context, in that order. Key rules: - With border-box sizing, the declared width includes padding and border - set it globally. - Adjacent vertical margins collapse to the larger of the two; horizontal margins never collapse. - A new formatting context contains floats and stops margin collapse. - Overflow hidden clips silently; overflow auto scrolls only when needed. Worked example - predictable sizing and a contained context: *, *::before, *::after { box-sizing: border-box; } .card { inline-size: 320px; padding: 1.5rem; border: 1px solid var(--line); display: flow-root; }
• Level 3. Basic 3: Flexbox Alignment Mechanics - Nearly every flexbox difficulty is an axis mistake. Justification works along the main axis, alignment works along the cross axis, and changing the direction swaps which is which. Modern gap spacing removed the last reason to space items with margins, which also removed the last row spacing defect. Key rules: - Justify along the main axis; align along the cross axis. - An automatic margin absorbs free space and is the cleanest way to push one group apart from another. - Use gap for spacing between items - margins on children produce edge defects when wrapping. - Align-self overrides the container alignment for one item without a wrapper. Worked example - a navigation bar with a pushed group and no margin hacks: .nav { display: flex; align-items: center; gap: 1.5rem; } .nav__brand { margin-inline-end: auto; }
• Level 4. Basic 4: Flexible Sizing, Wrapping and Intrinsic Layout - The growth, shrink and basis triple decides what happens when the container is bigger or smaller than the content. The other half of this module is intrinsic sizing: keywords that let an element size itself from its own content rather than a guessed pixel value. Layouts built from intrinsic sizes survive content changes; layouts built from fixed pixel values break the first time a longer word arrives. Key rules: - The shorthand order is grow, shrink, basis. Basis wins over a declared width when both are present. - An item cannot shrink below its minimum content size unless that minimum is explicitly lowered. - Wrapping plus a basis with a minimum produces a responsive grid with no media query. - Intrinsic keywords let content decide the size. Worked example - auto wrapping cards with no media query at all: .cloud { display: flex; flex-wrap: wrap; gap: 1rem; } .cloud > * { flex: 1 1 min(18rem, 100%); min-inline-size: 0; }
• Level 5. Advanced 1: Two Dimensional Grid Layout - Grid is the first layout system that is genuinely two dimensional - rows and columns are declared together rather than emerging from the content flow. The single most valuable pattern is the automatically fitting track with a minimum and maximum size, because it produces a responsive grid that adds and removes columns by itself as the container changes, replacing a stack of breakpoints with one line. Key rules: - The fractional unit distributes leftover space after fixed tracks are placed. - Automatically fitting tracks collapse empty ones; automatically filling tracks keep them. - A minimum and maximum track function gives a floor and a ceiling, making reflow automatic. - Implicit rows are created as needed - set their size explicitly when consistency matters. Worked example - a responsive grid with no media queries: .editorial { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: clamp(1rem, 2vw, 2rem); }
• Level 6. Advanced 2: Named Areas, Subgrid and Alignment Across Components - Named template areas turn a layout into something readable in the stylesheet, because the declaration is a picture of the arrangement. Subgrid solves the harder problem: making the internals of separate child components line up with each other. With it, a row of cards can have its titles, bodies and footers aligned across all cards regardless of content length. Key rules: - Template areas are declared as rows of names - each name must form a rectangle. - Subgrid makes a child use the parent tracks, aligning internals across sibling components. - Grid items can overlap deliberately by assigning them to the same lines. - Reordering by grid placement changes the visual order only - reading order stays as written. Worked example - card internals aligned across siblings using subgrid: .card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
• Level 7. Advanced 3: Fluid Type, Container Queries and Accessible Motion - Fluid sizing replaces a stack of breakpoint overrides with one expression that has a floor, a preferred value that scales with the viewport, and a ceiling. Container queries fix the deeper flaw in responsive design: a component should respond to the space it has been given, not the size of the window. Motion needs a user preference check - for some users motion causes real physical discomfort. Key rules: - A clamped value takes a minimum, a preferred scaling value and a maximum. - Container queries respond to the parent size, so a component behaves correctly wherever placed. - Always honour the reduced motion preference - replace movement with a fade or with nothing. - Animate transform and opacity; animating layout properties forces a full recalculation each frame. Worked example - fluid type, a container query and a motion preference check: h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem); } .panel { container-type: inline-size; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; } }
• Level 8. Advanced 4: Performance, Design Systems and the Course Capstone - An interface is finished when it meets a number, not when it looks done. Layout shift, interaction delay and largest paint time are all measurable and fixable: reserving space for images, avoiding long synchronous work, loading what matters first. A design system replaces one-off decisions with a small set of tokens and components that have already been measured. Key rules: - Reserve space for every image and embed with width and height - unreserved space is the main cause of layout shift. - Set the performance budget before building, measured on a mid range device. - A design system is tokens, components and rules for combining them. - Document each component with its variants, states and accessibility notes. Worked example - reserving space and loading in priority order: <img src="hero.avif" width="1600" height="900" alt="Cohort graduation" fetchpriority="high"> <style> .hero { aspect-ratio: 16 / 9; } </style>

How you submit: Coding quests solved in the built-in EchoLens compiler.

Who it's for

Advanced CSS and Web Development suits learners at a beginner to intermediate level who want a practical, project-based route into Advanced CSS and Web Development. You need only a browser and an internet connection - all coding runs inside the EchoLens compiler, so there is nothing to set up.

Certificate

Finish every stage and EchoLens issues a verified certificate carrying a QR code anyone can scan to confirm it on our site. You can add it to your CV or share it to LinkedIn in one click.