Site Map

Complete these tutorials in order to understand how the web works and set up your development environment.

Work through the essentials of commits, branches, merges, and remote repositories as part of the deployment pathway.

Build confidence with text, links, images, forms, and document structure before moving deeper into styling and interactivity.

Work through the builder-path lessons in order to move from design thinking into layout, reusable CSS patterns, component-style structures, responsive refinement, and the Black Swan Bistro project build. After the core sequence, optional modern CSS lessons extend that foundation with newer layout and architecture techniques.

Compare hosting approaches, deployment tools, and going-live decisions in a practical, beginner-friendly way, including when platform-specific options belong inside a broader hosting decision.

Work through the core styling tools that make a page readable, usable, and visually clear.

Build a stronger mental model for state, rendering, validation, events, debugging, and refactoring so you can turn interactive ideas into maintainable features. This sequence stays framework-free on purpose so the underlying logic is clear before abstractions arrive.

Cover Node.js, databases, and APIs as part of understanding how full websites work beyond the frontend.

This section sits after the completed Modern CSS material and before Technical SEO. You will learn how browsers load pages, how to use DevTools and Lighthouse, how to optimise images, CSS, fonts, JavaScript and delivery, and how to turn performance work into a repeatable improvement cycle.

Cover variables, operators, conditionals, loops, and functions before moving into DOM work.

This builder-path section turns JavaScript data work into something practical. You will move from Promises and request flow to parsing JSON, cleaning API data, and shipping a small live-data interface without hiding the moving parts.

Cover on-page SEO basics and analytics setup as part of maintaining and improving a live site.

Work through these lessons in order after core HTML and CSS fundamentals. The series teaches accessibility as ordinary web craft: structure, content, interaction, design, and testing, with WCAG 2.2 principles as the practical reference point.

Launching a site is not the finish line. This section teaches practical post-launch care: checking live pages, testing forms, reviewing content and metadata, reading analytics calmly, managing updates and backups, and using a repeatable maintenance checklist.

Use the DOM to select elements, react to user input, and build more interactive pages.

This section is the bridge between hand-built HTML, CSS, and JavaScript and the Vue tutorials that follow. You will learn why teams reach for frameworks, how JavaScript frameworks differ from CSS frameworks and design systems, what tradeoffs they introduce, and how to evaluate them calmly before using Vite, Vue, or Bulma in a real project.

This future section sits between the guided Black Swan Bistro project and the Rotto Rocks capstone. It is intentionally scaffolded so completed tutorials can be connected later without duplicating existing Frameworks 101, Git, deployment, accessibility, SEO, or website-care content.

Explore prompt fundamentals, ethical use, workflow integration, and project-oriented AI examples within a real development process.

Use the capstone to apply structure, styling, deployment, and maintenance thinking in one practical build.