Intermediate Tutorials
Layouts, components, multi-page sites, and professional workflows.
Lessons at this level
How to Think About Layouts (Before You Write Any Code)
A mental model for breaking a design into rows, columns, and sections.
Start tutorial →Git & GitHub Basics
9 lessons covering setup, commits, branching, remotes, workflows, and a final wrap-up.
Start tutorial →Getting Started
Learn what Git is, why version control matters, and how it supports real development work.
Start tutorial →Installation & Setup
Install Git and configure your identity so you can start tracking work safely.
Start tutorial →Basic Commands
Learn essential Git commands for tracking changes and understanding repository history.
Start tutorial →Branching
Create and manage branches so you can experiment and build features without breaking main work.
Start tutorial →Merging
Combine work from different branches and understand what merge conflicts really mean.
Start tutorial →Remote Repositories
Work with GitHub or other remotes so you can push, pull, and collaborate effectively.
Start tutorial →Git Workflow
Learn common Git workflows and best practices for working confidently on real projects.
Start tutorial →Conclusion
Review the full Git Basics series, reflect on what you learned, and choose your next steps.
Start tutorial →How to Read a Design
Learn to extract spacing, colours, typography, and structure from a mockup.
Start tutorial →Design to Code Builder Path
14 lessons covering layout thinking, reusable CSS systems, component patterns, responsive refinement, and the Black Swan Bistro build from wireframe to multi-page site.
Start tutorial →Breaking Layouts into Sections
Divide a full-page design into header, hero, content sections, and footer.
Start tutorial →Black Swan Bistro (BSB) Part 2: Build the Homepage Wireframe Layout with CSS
Turn the Part 1 homepage into a low-fidelity wireframe using reusable CSS layout patterns, shared classes, and a simple colour system.
Start project →CSS Systems for Reusable Sections
Build a small CSS system with spacing, naming, and shared section patterns that scale beyond one page.
Start tutorial →Flexbox for Real Layouts
Deepen Flexbox skills for navigation, cards, split sections, and other one-dimensional layout decisions.
Start tutorial →Building Reusable Components
Create cards, buttons, and navbars you can reuse across pages.
Start tutorial →Black Swan Bistro — Part 3: Refactor Repeated Patterns into Components
Turn repeated bistro patterns into reusable navigation, menu card, CTA, and footer components with plain HTML and CSS.
Start project →CSS Grid for Repeated Layouts
Use Grid for galleries, card collections, and page regions where rows and columns matter together.
Start tutorial →Responsive Refinement for Reusable Components
Refine reusable sections and components across breakpoints with better rhythm, sizing, and content-driven decisions.
Start tutorial →Multi-page Structure
Organise a website with multiple linked pages, shared navigation, and consistent styles.
Start tutorial →Black Swan Bistro — Part 4 (Multi-page Site)
Expand the bistro into a multi-page site with menu, about, and contact pages.
Start project →Cascade, Specificity, and Debugging CSS
Understand why styles win, lose, inherit, or collide, then use that knowledge to debug CSS with more confidence.
Start tutorial →Styling Details: Selectors, Pseudo-elements, and Motion
Add finishing detail with practical selectors, pseudo-elements, transitions, transforms, and restrained animation.
Start tutorial →Modern CSS Layout Extensions
Extend Flexbox and Grid with intrinsic grids, fluid CSS, :has(), subgrid, and layout stress testing for resilient card grids.
Start tutorial →BSB Part 4B: Polish and Refine
Apply cascade cleanup, detail selectors, pseudo-elements, and restrained motion to bring the Black Swan Bistro site to a polished finish.
Start project →Container Queries for Reusable Components
Build reusable components that respond to the space they live in with container-type, @container, named containers, and container query units.
Start tutorial →Modern CSS Architecture
Organise resilient CSS with design tokens, responsibility layers, cascade layers, low specificity, utilities, and reusable component styles.
Start tutorial →How to Debug a Broken Web Page (Step-by-Step)
A systematic approach to finding and fixing HTML, CSS, and JS bugs.
Start tutorial →Test and Validate Your Site
Build a practical pre-launch QA workflow with validation, Lighthouse, browser testing, accessibility checks, and content review.
Start tutorial →Applied JavaScript
8 lessons on state, rendering, validation, events, debugging, and maintainable JavaScript for real interfaces.
Start tutorial →State and UI Thinking
Learn how data, user actions, and interface updates fit together before a feature grows complicated.
Start tutorial →Rendering Repeated Content
Turn arrays and objects into repeatable cards, lists, and empty states without duplicating markup.
Start tutorial →Forms, Validation, and User Feedback
Build friendlier form flows with clearer rules, useful error messages, and confident submission behaviour.
Start tutorial →Events at Scale
Move beyond one-off click handlers with event delegation, shared logic, and cleaner interface wiring.
Start tutorial →Objects for Real Features
Model interface data with objects and collections so feature logic stays readable as it grows.
Start tutorial →Debugging Interactive JavaScript
Use DevTools, console traces, and calmer diagnosis habits to find why interactive features fail.
Start tutorial →Refactoring for Reuse
Reduce repetition by extracting helpers, clarifying responsibilities, and organising small interface modules.
Start tutorial →Capstone Feature Build
Combine state, rendering, validation, debugging, and reuse in one bounded interactive feature.
Start tutorial →Working with Data
5 lessons on async JavaScript, fetch(), JSON, async/await, and rendering live API data into a real interface.
Start tutorial →Introduction to Async JavaScript
Understand why asynchronous JavaScript exists, how Promises work, and how browsers keep interfaces responsive while slow tasks finish.
Start tutorial →fetch() and the Request/Response Cycle
Use fetch() to make real HTTP requests, parse responses correctly, and handle both network and HTTP errors with calmer habits.
Start tutorial →Working with JSON
Parse, inspect, and reshape JSON so raw API responses become clean data structures your UI can actually use.
Start tutorial →async/await Patterns
Rewrite Promise chains with async/await, centralise error handling, and run independent requests in parallel with Promise.all().
Start tutorial →Mini-project: Fetch and Display Live Data
Combine async JavaScript, fetch(), JSON reshaping, and DOM rendering in a small live-data interface that behaves like a real app.
Start tutorial →Frameworks 101
5 lessons introducing JavaScript and CSS frameworks before the pathway moves into Vite, Vue, and Bulma.
Start tutorial →What Is a Framework, Really?
Learn what makes a framework different from a library, tool, or design system.
Start tutorial →Why JavaScript Frameworks Exist
Understand the UI, state, and scaling problems JavaScript frameworks are designed to reduce.
Start tutorial →Why CSS Frameworks Exist
Learn how CSS frameworks, utility systems, and component libraries try to speed up styling and consistency.
Start tutorial →Framework Tradeoffs and Costs
Compare the benefits of frameworks with their real costs in complexity, tooling, abstraction, and maintenance.
Start tutorial →How to Evaluate a Framework Without Panic
Use a calm decision-making checklist to judge whether a framework fits your project, team, and current skill level.
Start tutorial →Working with Vite
Learn how Vite handles the dev server and build workflow around modern frontend projects after your JavaScript and framework foundations are in place.
Start tutorial →First Vue App with Vite
Use the familiar Todo List project to understand Vue single-file components, reactive state, template rendering, and how a small Vite + Vue app fits together.
Start tutorial →Using Bulma in a Vue Project
Restyle the familiar Todo List project with Bulma inside Vue so learners can see where framework classes help and where custom CSS still matters.
Start tutorial →