AI Lodge
Live workshop
Build & Host
Your Own Website
A beginner-friendly workshop to create and publish your first live site.
No experience — zero coding knowledge required to start.
Real results — go live with your own URL today.
Approach — practical, exciting, and approachable.
Agenda
Today's journey
Phase 01
Understand
How the web works and the core languages behind every modern page.
Phase 02
Build
Leverage AI and modern development tools to craft your unique personal site.
Phase 03
Launch
Deploy your project to a live global server for the world to see and visit.
Phase 04
Grow
Explore the next steps in your tech journey, from APIs to automation.
Theory · 01
Three languages build every webpage
HTML
The skeleton
Organises the core structure: headings, text, buttons, and images.
sunnycafe.com
Home | Menu | Contact
Sunny Cafe
Welcome to Sunny Cafe. Fresh coffee and homemade pastries in the heart of town. Open daily, 7am to 4pm.
Menu
• Coffee — $3.50
• Latte — $4.50
• Iced Tea — $4.00
• Croissant — $3.00
• Sandwich — $6.50
• Muffin — $3.50
About us
Sunny Cafe started in 2016 as a tiny corner stall. Today we roast our own beans and bake everything on site each morning.
Opening hours
Monday to Friday — 7:00am to 4:00pm
Saturday — 8:00am to 5:00pm
Sunday — 8:00am to 2:00pm
What people say
“Best flat white in town.” — Priya
“The croissants are unreal.” — Marcus
“My favourite morning stop.” — Dana
Find us
12 Baker Street, Riverton. Phone: (555) 010-2288. Email: hello@sunnycafe.com
© Sunny Cafe · 12 Baker Street
Content & structure — the foundation of every page.
CSS
The appearance
Defines the visual style: colours, fonts, spacing, and layouts.
sunnycafe.com
Sunny Cafe
Home
Menu
Contact
Fresh coffee & homemade pastries · Open 7am–4pm
Our menu
Coffee$3.50House blend, freshly roasted
Latte$4.50Silky steamed milk, double shot
Croissant$3.00Baked fresh every morning
Sandwich$6.50Ham & cheese on sourdough
Iced Tea$4.00Cold-brewed, lightly sweet
Muffin$3.50Blueberry, still warm
About us
Started in 2016 as a corner stall, we now roast our own beans and bake everything on site each morning.
Opening hours
Mon–Fri7:00am – 4:00pm
Saturday8:00am – 5:00pm
Sunday8:00am – 2:00pm
What people say
★★★★★
“Best flat white in town.”
Priya
★★★★★
“The croissants are unreal.”
Marcus
Find us
12 Baker Street, Riverton · (555) 010-2288 · hello@sunnycafe.com
Visual design — same content, beautiful page.
JavaScript
The interactivity · try me
Powers the action: button clicks, form submissions, and dynamic content.
sunnycafe.com
Sunny Cafe
{{ cafePageLabel }}
Fresh coffee & homemade pastries
Our menu
{{ ci.name }}
{{ ci.priceStr }}
About us
Started in 2016 as a corner stall, we now roast our own beans and bake everything on site each morning.
Opening hours
Mon–Fri7:00am – 4:00pm
Saturday8:00am – 5:00pm
Sunday8:00am – 2:00pm
What people say
★★★★★
“Best flat white in town.”
Priya
★★★★★
“The croissants are unreal.”
Marcus
Find us
12 Baker Street, Riverton · (555) 010-2288 · hello@sunnycafe.com
Your cart
Your cart is empty — add something tasty from the menu.
{{ cl.name }}
{{ cl.qtyStr }}
{{ cl.lineStr }}
Total
{{ cafeTotalStr }}
Please enter your name to place an order.
Thank you! Your order is being prepared.
{{ cafeCartText }}
Behaviour & interactivity — this one really works.
Modern websites combine all three to create a complete digital experience.
Theory · 02
Meet the backend
Frontend
the dining room
Everything the user sees and interacts with. It's the interface, the layout, and the visual experience.
HTMLCSSJavaScript
nimbus.app/login
N
Nimbus
Authenticating…
✓ Signed in — welcome, alice
✗ Incorrect username or password
user: alice
pass: hunter2
pass: hunter2
Backend
the kitchen
The behind-the-scenes brain. It processes requests, stores data, and communicates with external AI services.
PythonNode.jsJavaGo
auth.py — python3
{{ ln.t }}
$
Database
the pantry
Holds every account and its data — passwords stored encrypted, never in plain text.
PostgreSQLMySQLMongoDBSQL
psql — nimbus
{{ ln.t }}
nimbus=#
Data flow architecture
User
→
Frontend
→
Backend
→
Database / AI APIs
Today's focus: frontend. Future workshops: building capable backends.
Theory · 03
Serverless vs traditional hosting
The old way
Traditional hosting
Server is always running 24/7
Requires manual management
Best for massive, complex systems
Server activity
00:00
Always on — billed all day, visitors or not
$0.00
The modern way
Serverless
Code runs only when needed
Zero server management
Automatically scales with users
Function activity
00:00
Runs only while someone visits — billed per use
$0.00
Why we use Vercel today — beginner-friendly, fast, and perfect for modern web apps.
Theory · 04
VS Code, GitHub & Vercel
01
VS Code
Write
The professional editor where you write and refine your code. Your digital workshop.
02
GitHub
Store
A secure home for your projects. It tracks every change and keeps your work safe online.
03
Vercel
Deploy
The deployment engine. It takes your code and turns it into a live website for the world.
Peel a sticker
→
stick it on the laptop
Write in VS Code → Store on GitHub → Deploy via Vercel → Live website
Hands-on time
The mission — build, personalise & publish your first website
01
Build
Use AI-assisted coding to generate your site's foundation.
02
Personalise
Add your own content, images, and unique style.
03
Publish
Deploy your project live to the web via Vercel.
04
Share
Get your unique link and share it with the world.
By the end of today, everyone will have their own live website.
Check-in
Quick tool recap
Question 01
What do we use VS Code for?
Question 02
What is the main role of GitHub?
Question 03
Why do we use Vercel for our site?
Master the core tools of modern web development.
The modern development workflow
From idea to website
Idea
It starts with your concept.
Generate
with AI
with AI
AI writes the first version for you.
Edit in
VS Code
VS Code
Refine and tweak the code.
Upload to
GitHub
GitHub
Save and version your project.
Deploy with
Vercel
Vercel
Publish to a global server.
Live
website
website
Your site is live for the world.
Click any step — or press Next step — to walk the path from concept to a live global presence.
Showcase your website
Paste your live link
The class gallery
The live pinboard
Click a card to visit the live site
What's next
Continue building with us
AI Applications
Build intelligent applications that interact with advanced AI models to solve complex problems.
API Security
Learn to connect services securely, manage sensitive API keys, and protect your user data.
Workflow Automation
Automate repetitive tasks and streamline your digital life using powerful tools like n8n.
AI Agents
Explore the Model Context Protocol (MCP) and build autonomous agents that act on your behalf.
Knowledge Systems
Create Retrieval-Augmented Generation (RAG) apps that use your own documents as a brain.
Your Own Project
Apply everything you've learnt to create a real product that solves a problem you care about.
Practical AI skills for startups, consulting, analytics, and engineering.
Your invitation
Join the
AI Lodge
Today was just the start. The AI Lodge is where you keep building — hands-on sessions on AI applications, agents, automation and more.
Learn more about the lodges ailodge.smubia.comSign up here
scan · or click to sign up
Workshop · Build & Host Your Own Website
Thank you!
Keep building. Keep creating.
Questions? We're here to help you on your next steps.
Feedback
Scan to share