Guided Project
Black Swan Bistro
A guided restaurant-site build that grows from a single HTML page into a deployed multi-page project.
View ProjectApplied JavaScript
Use JavaScript to structure real interface behaviour, not just isolated syntax exercises.
How to use this section
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.
Projects in this section
Use these guided, reference, and practice projects to connect the lessons to real site work.
Practice Project
Photo Gallery 2
A second gallery project for practicing dynamic rendering and interaction logic.
View ProjectPractice Project
Todo List 2
A second todo app focused on deeper array logic and filtering behaviour.
View ProjectPractice Project
Color Switcher
Build a simple interface that changes visual state with JavaScript.
View ProjectPractice Project
Temperature Converter
Use inputs, functions, and conditional logic in a practical converter tool.
View ProjectPractice Project
Calculator
Combine operators, functions, and UI controls in a practical calculator app.
View ProjectPractice Project
Quiz Game
Build an interactive quiz that tracks answers and gives feedback.
View ProjectLessons in this section
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 →Project Prep
Capstone Feature Build
Combine state, rendering, validation, debugging, and reuse in one bounded interactive feature.
Start tutorial →