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.
live in ~90 minutes
hover to assemble
Agenda · Option C — glass lift

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
CoffeeCoffee$3.50
House blend, freshly roasted
LatteLatte$4.50
Silky steamed milk, double shot
CroissantCroissant$3.00
Baked fresh every morning
SandwichSandwich$6.50
Ham & cheese on sourdough
Iced TeaIced Tea$4.00
Cold-brewed, lightly sweet
MuffinMuffin$3.50
Blueberry, 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
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
VS Code
GitHub
Vercel
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
VS Code
What do we use VS Code for?
Question 02
GitHub
What is the main role of GitHub?
Question 03
Vercel
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
AI writes the first version for you.
VS Code
Edit in
VS Code
Refine and tweak the code.
GitHub
Upload to
GitHub
Save and version your project.
Vercel
Deploy with
Vercel
Publish to a global server.
Live
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.
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