Black Swan Bistro
Follow one restaurant website across the full curriculum so each new concept lands inside a real build.
Project overview
Black Swan Bistro is the main guided build for GraphitEdge. It starts with your first HTML page, grows through layout and multi-page work, and ends with deployment and maintenance decisions.
How it fits the pathways
- The beginner path introduces the site structure and first page content.
- The builder path turns that structure into layouts, components, and a multi-page site.
- The deployment path prepares the project for launch, publishes it, and covers care after go-live.
Project parts
- Black Swan Bistro — Part 1 (Build Your First Web Page)
Create a real restaurant homepage from scratch using HTML and CSS.
- 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.
- 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.
- Black Swan Bistro — Part 4 (Multi-page Site)
Expand the bistro into a multi-page site with menu, about, and contact pages.
- 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.
- Black Swan Bistro — Part 5 (Prepare for Deployment)
Optimise assets, add meta tags, and prepare the bistro site for production.
- Black Swan Bistro — Part 6 (Deploy the Site)
Push the bistro project to GitHub and deploy it live on the web.
- Black Swan Bistro — Part 7 (Maintain & Improve)
Add analytics, update content, improve performance, and keep the site healthy.
Reference versions
Use these finished versions to compare your work, inspect structure, and understand how the project evolves.