Build Your First Web Page with AI
Welcome! By the end of this workshop, you'll have created a professional web page—and you don't need any coding experience to start.
The Big Picture
By the end of this workshop, you'll have a professional web page published on the internet with a real URL you can share with anyone.
Freedom to Choose: Build ANY Page You Want
This is YOUR project. You get to decide what to create. Here are some ideas:
Personal Portfolio
Showcase your work, skills, and achievements. Perfect for freelancers and creatives.
Resume/CV Page
A modern, interactive resume that stands out from traditional PDFs.
Business Landing Page
Promote your startup, service, or idea with a clean landing page.
Event Page
Announce a conference, workshop, wedding, or community event.
Product Showcase
Display your product with beautiful images and descriptions.
Club/Organization Page
Represent your team, club, or non-profit with an online presence.
Hobby/Passion Project
Share your photography, recipes, travel stories, or any passion.
Your Own Idea
Have something else in mind? Go for it! The choice is yours.
No Coding Experience Needed
You don't need to know HTML, CSS, or any programming language to start. If you can describe what you want in plain English (or French, or Spanish), you can build a website with Copilot's help.
Throughout this workshop, Copilot will be your coding assistant. Your job is to:
- Think about what you want your page to look like
- Describe it clearly to the AI
- Review what AI creates
- Refine and improve through conversation
Thousands of complete beginners have successfully completed this workshop. You can too!
Time Commitment
Total time: ~3-4 hours
Good news: You don't need to do it all at once! This workshop is designed to be flexible:
- Complete it in one focused session (great for a weekend afternoon)
- Split it across multiple sessions (maybe 45-60 minutes at a time)
- Go at your own pace—take breaks, come back when ready
Your progress is automatically saved as you work through each section.
Understanding the Foundation
Before we start building, let's take a quick trip through time to understand how websites evolved—and why modern web development is organized the way it is.
Important: You don't need to memorize any of this. Copilot will write all the code for you. This is just so you recognize what you're looking at and understand what each piece does. Think of it like learning to order at a restaurant—you don't need to know how to cook, but it helps to know what's on the menu!
A Brief History: The Evolution of Web Technologies
The 1990s: HTML Did Everything
In the early days of the web, HTML did it all—content, styling, layout, everything!
Developers used HTML tags like <font>, <center>, and <bgcolor>
to control how pages looked. It worked, but it was messy and hard to maintain.
CSS Arrives: Separation of Style
Then came CSS (Cascading Style Sheets). Developers realized: "Wait, why mix content and styling? Let's separate them!" CSS took over all visual aspects—colors, fonts, layouts, spacing. HTML could finally focus on structure and meaning.
JavaScript Enters: Making Things Interactive
JavaScript was created to add interactivity—form validation, dynamic updates, animations. Now we had three technologies, each with its own job. But the separation wasn't perfect yet...
Today: Separation of Concerns
Modern web development follows a principle called "Separation of Concerns". Each technology should focus on what it does best. It's not strictly enforced (you can still mix things), but it's highly recommended—and it's what professional developers strive for.
The Modern Web: A Perfect Trio
Each technology now has its own clear responsibility:
HTML
- Data and content
- Logical structure
- Semantic meaning
- Metadata (SEO, accessibility)
CSS
- Visual styling
- Layout and positioning
- Animations & transitions
- Responsive design
JavaScript
- User interactions
- Data processing
- Dynamic content updates
- Complex interactions
Note: This separation is still evolving! For example, complex animations used to require JavaScript, but CSS has become so powerful that many animations can now be done purely with CSS. The web development community constantly works to keep each technology focused on what it does best.
HTML – The Structure
Simple Explanation
HTML is like the skeleton of your page. It defines what content exists and how it's organized.
Real-World Analogy
Think of HTML as the blueprint of a house. It shows where the walls go, where the rooms are, where doors and windows should be placed. It doesn't say what color the walls are or what furniture to use—just the basic structure.
Mini Code Snippet
Here's what basic HTML looks like:
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
<button>Click Me</button>What you see:
<h1>= Heading (large title text)<p>= Paragraph (regular text)<button>= A clickable button
See? Just English words in brackets. Nothing scary! These are called "tags" and they tell the browser what type of content you have.
CSS – The Style
Simple Explanation
CSS makes things look beautiful. It controls colors, fonts, spacing, layouts—everything visual.
Real-World Analogy
If HTML is the blueprint of a house, CSS is the paint, furniture, and decoration. It decides if walls are blue or white, if the couch is modern or vintage, if there's a chandelier or recessed lighting. Same structure, completely different look and feel.
Mini Code Snippet
Here's what CSS looks like:
h1 {
color: blue;
font-size: 36px;
text-align: center;
}What this does:
- Makes all
<h1>headings blue - Sets the text size to 36 pixels
- Centers the text on the page
You just describe what you want ("Make the heading blue and centered"), and AI writes this for you!
JavaScript – The Behavior Optional
Simple Explanation
JavaScript makes things interactive—buttons that do something when clicked, forms that validate, animations, etc.
Real-World Analogy
Continuing the house analogy: JavaScript is like the smart home system. It makes lights turn on when you clap, doors open automatically, thermostats adjust based on temperature. The house works fine without it, but it adds cool interactive features.
When is it useful?
- Contact forms that actually send emails
- Image galleries that open in lightboxes
- Mobile menus that slide in/out
- Animations and interactive effects
Important: We might not even need JavaScript for your first page! HTML and CSS are often enough to create something beautiful and functional. We'll only add JavaScript if your specific design needs it.
Click to Try in the Playground
Choose any example below and start coding instantly!
Prerequisites & Tools Setup
Let's get your workspace ready! We'll set up everything you need—it's easier than you think, and most of it is free.
Setup Checklist
Check off each item as you complete it. Your progress is saved automatically.
1. Web Browser
You Already Have This!What you need: Chrome, Firefox, Safari, or Edge (any modern browser)
Why: To view and test your web page
✓ Everyone has a browser - nothing to install here!
2. Visual Studio Code (VS Code)
Free DownloadWhat it is: A free, professional code editor made by Microsoft
Why: This is where you'll write and edit your code
Installation Steps
Install It
Run the installer and follow the prompts. Accept the default settings - they work perfectly for beginners!
Launch VS Code
Open VS Code - you'll see a welcome screen. We'll set it up together in the next steps!
3. Live Server Extension
VS Code ExtensionWhat it is: An extension that creates a local web server
Why: See your changes instantly as you code - no need to manually refresh!
Installation Steps
Open Extensions in VS Code
Click the Extensions icon in the left sidebar (looks like 4 squares)
Or press: Ctrl + Shift + X (Windows/Linux) or Cmd + Shift + X (Mac)
Search & Install
Type "Live Server" in the search box
Look for the one by Ritwick Dey (millions of downloads)
Click the Install button
You're Done!
You'll now see a "Go Live" button at the bottom-right of VS Code
4. GitHub Account
Free AccountWhat it is: A platform where developers store and share code
Why: We'll use it to save your code and potentially publish your website for free!
Create Your Account
Verify Your Email
Check your email inbox and verify your account
You're All Set!
Keep your GitHub login handy - we'll use it in the next step
5. Connect GitHub to VS Code
One-Time SetupWhat this does: Links your GitHub account with VS Code
Why: Required to use GitHub Copilot (your AI coding assistant)
Connection Steps
Click Account Icon
In VS Code, click the account icon at the bottom-left corner (looks like a person)
Select "Sign in to use GitHub Copilot"
Sign In with GitHub
A browser window will open
Click "Authorize Visual Studio Code"
Enter your GitHub password if prompted
You're Connected!
Return to VS Code - you'll see your GitHub username at the bottom-left
GitHub Copilot is now ready to help you code! 🤖
Tip: If you're a student or teacher, you can get GitHub Copilot for free! Visit GitHub Education to apply. Otherwise, you'll get a free trial, then it's $10/month.
Setup Checklist Summary
Vision & Planning
Have a conversation with Copilot about your CV/portfolio idea
The Goal
Before asking AI to write any code, you need to have a conversation with it. Think of AI as your creative partner—you describe your vision, AI asks questions, and together you agree on exactly what to build.
Key insight: The clearer your description, the better the result. Don't worry about technical details—just describe what you want to see.
Your Copilot Conversation
Start Your Conversation
Open Copilot Chat in VS Code (Ctrl/Cmd + Shift + I) and have a conversation like this:
Topics to Discuss with Copilot:
What sections do you want? (About me, Skills, Experience, Projects, Contact...)
Modern? Minimal? Professional? Creative? Playful?
Do you have favorite colors? A color scheme in mind?
What's your profession? What do you want to highlight?
⚠️ This is crucial for a CV! Since you're building a personal CV/portfolio, Copilot needs to know your actual information to create meaningful content:
- Your skills — programming languages, tools, soft skills
- Your work history — job titles, companies, dates, responsibilities
- Your education — degrees, schools, certifications
- Your projects — what you've built, technologies used
- Your social links — LinkedIn, GitHub, email, etc.
💡 Pro tip: If you already have your CV as a PDF, you can drag and drop it directly into the Copilot chat! Copilot can read PDF files and extract all your information. Alternatively, just copy-paste the text content from your PDF.
Exercise: Write Your Vision
After your AI conversation, write down the agreed description:
You're Ready for Phase 2 When:
- You and Copilot have agreed on what sections your page will have
- You have a clear picture of the style/colors you want
- You've written down your vision description above
HTML Structure
Ask Copilot to generate the HTML based on your Phase 1 discussion
The Goal
Now you'll ask Copilot to generate the HTML code based on your vision. The page will look "ugly" at first—that's completely normal! HTML is just the skeleton, the structure. CSS (in Phase 3) will make it beautiful.
Remember: HTML = skeleton/content. It's supposed to look plain at this stage!
Understanding Agent Mode & Models
Before we start, you need to understand two crucial settings in Copilot Chat: Agent Mode and Model Selection. These are like choosing the right tool and the right expert for the job.
What is Agent Mode?
At the top of the Copilot Chat, you'll see a dropdown with different modes. Agent mode is what makes Copilot truly powerful:
Like asking a consultant for advice. They give you suggestions, but you have to do the work yourself.
Like hiring a skilled contractor. You describe what you want, and they actually build it—creating files, writing code, saving changes, all automatically!
Always use Agent mode for this workshop. It's the difference between getting a recipe vs. having a chef cook for you!
Choosing the Right Model
Next to the mode selector, you can choose which AI model powers Copilot. Think of models like hiring different specialists:
Imagine you're renovating a house. You could hire:
- A junior handyman — Fast and cheap, but makes more mistakes. Good for simple tasks.
- An experienced contractor — Balanced speed and quality. Solid for most projects.
- A master architect — Slower, more thoughtful, exceptional quality. Best for complex work.
Model Recommendations:
Excellent at understanding context, writing clean code, and following complex instructions. Like a seasoned architect who listens carefully.
Very capable and reliable. A skilled all-rounder that handles most tasks well.
Quick responses but may need more corrections. Good for simple edits, not full page creation.
Our recommendation: Use Claude Sonnet 4 or GPT-4o for this workshop. The better the model, the fewer corrections you'll need to make!
Step by Step
Open VS Code with an Empty Folder
Important: Before we start, VS Code needs to be opened in a project folder. By default, VS Code opens without any folder—but Copilot Agent needs a workspace to create files in!
- Create a new empty folder on your computer (e.g.,
my-portfolioon your Desktop) - In VS Code, go to File → Open Folder (or Ctrl/Cmd + K then O)
- Select the empty folder you just created
- You should now see your folder name in the Explorer sidebar (left panel)
Why? Agent mode creates and saves files automatically. Without an open folder, it won't know where to put your new files!
Ask Copilot to Create Your Page
Open Copilot Chat (Ctrl/Cmd + Shift + I) and make sure Agent mode is selected (look for the dropdown at the top of the chat).
Then ask:
Create an index.html file for a CV/portfolio page with these sections: [Your vision will appear here after you save it in Phase 1]. Keep it simple, semantic HTML only - no inline styles.
Watch Copilot Work
In agent mode, Copilot will:
- Create the
index.htmlfile automatically - Write all the HTML code for you
- Save the file
Just watch it happen — no buttons to click!
👀 Review What Copilot Created
Take a moment to look at the generated code:
- Does it have all the sections you asked for?
- Is your name and information included?
- Does the structure make sense?
Not quite right? Just tell Copilot what to change: "Add a skills section" or "Change the header text to..."
See It in Your Browser
Right-click on index.html → "Open with Live Server"
Your browser will open showing your "ugly" unstyled page!
What You'll See
Web Developer
About Me
I am a passionate developer...
Skills
• HTML • CSS • JavaScript
Plain, unstyled, but structured! ✓
Same structure, beautiful styling! ✓
Take a Moment to Inspect
Look at your index.html file. Notice:
<html>wraps everything<head>contains page info (title, meta)<body>contains what you see<section>or<div>groups each section<h1>, <h2>are headings<p>is paragraph text
You don't need to memorize this—just recognize the structure.
CSS Styling
Ask Copilot to make your page beautiful with CSS
The Goal
This is where the magic happens! You'll ask Copilot to create CSS that transforms your plain HTML into a beautiful, professionally-styled page. Watch your page come to life!
Remember: CSS = look and feel. Colors, fonts, spacing, layouts—everything visual!
Step by Step
Ask Copilot for Styling
In the same Copilot Chat (still in Agent mode), ask:
Create a styles.css file that makes my index.html look modern and professional. Use a clean color scheme with good contrast. Include nice fonts, spacing, and a clean layout. Link the CSS file to my HTML.
Watch Copilot Work
In agent mode, Copilot will:
- Create the
styles.cssfile - Write all the CSS styling
- Add the
<link>tag to your HTML automatically
Everything happens automatically!
🎉 See the Transformation!
Live Server will refresh automatically.
Watch your page transform from ugly to beautiful!
👀 Review the Styling
Look at your page in the browser. Check if:
- The colors match what you wanted
- Text is readable and well-spaced
- The overall look feels right
Want changes? Tell Copilot: "Make the background darker", "Use a blue color scheme", or "Make the headings bigger"
What CSS Controls
Take a Moment to Inspect
Look at your styles.css file. Notice patterns like:
color: #333;
→ Sets text color
font-size: 24px;
→ Sets text size
padding: 20px;
→ Adds inner spacing
background: #f5f5f5;
→ Sets background color
CSS reads like English: "make the color blue, the size 24 pixels"
Responsive Design
Make your page work beautifully on mobile devices
The Goal
Your page looks great on a computer, but what about phones and tablets? In this phase, you'll ask Copilot to add "responsive" styles so your page adapts to any screen size.
Responsive design: Same content, adapts to any screen size!
Step by Step
Test on Mobile View
In your browser, press F12 or right-click anywhere and select "Inspect" to open Developer Tools.
Click the "Toggle device toolbar" icon (phone/tablet icon) or press Ctrl/Cmd + Shift + M
Select different devices (iPhone, iPad) to see how your page looks.
Ask Copilot to Make It Responsive
In Copilot Chat (Agent mode), ask:
Make my page responsive for mobile phones. Update styles.css with media queries for screens smaller than 768px. Stack elements vertically and make text readable on small screens.
Watch Copilot Update Your CSS
Copilot will automatically edit your styles.css file and add the responsive styles.
Live Server will refresh — check the mobile preview!
👀 Review on Different Sizes
Test your page at different screen sizes:
- Does it look good on phone size?
- Is text still readable?
- Do elements stack nicely?
Issues? Tell Copilot: "The navigation is too cramped on mobile" or "Make the images smaller on phone screens"
Pro tip: You can send Copilot a screenshot of the problem! Just paste an image in the chat and describe what's wrong — Copilot can see it and suggest the right fix.
How It Works: Media Queries
CSS uses "media queries" to apply different styles based on screen size:
/* Normal styles for big screens */
.hero { font-size: 48px; }
/* When screen is smaller than 768px */
@media (max-width: 768px) {
.hero { font-size: 24px; }
}Copilot writes these for you—just understand that different rules apply to different screen sizes.
Your Page on Different Devices
Polish & Refine
Iterate with Copilot to add finishing touches
The Goal
Your page is functional and responsive. Now it's time to make it shine! This is where you iterate with Copilot—asking for small improvements until everything feels perfect.
Iteration is key: Professional developers never get it perfect on the first try. They refine, adjust, and improve step by step.
Ideas for Refinements
Here are common things to ask Copilot to improve:
Adjust sizes of any element
Interactive feedback on mouse hover
Visual icons for skills, social links
Elements fade in as you scroll
Let users switch themes
Depth and visual interest
Example Prompts to Use
"Can you make the section headings stand out more?"
"Add a subtle shadow to the profile photo"
"Make the contact links change color when I hover over them"
"Add Font Awesome icons next to my skills"
"Can you add a gradient background to the hero section?"
Exercise: Make 3 Improvements
Ask Copilot for at least 3 refinements to your page. Track them here:
Final Checklist Before Publishing
Publish to the World
Deploy your CV to GitHub Pages and share your URL!
The Goal
Your page is beautiful and polished. Now let's put it on the internet so anyone can see it! GitHub Pages is a free service that hosts your website with a real URL.
Good news! You already connected GitHub to VS Code in the Prerequisites section, so publishing is super easy!
You're about to have a live website! A real URL you can put on your resume, share on LinkedIn, or send to anyone in the world!
Publishing Steps
Open Source Control
Click the Source Control icon in the left sidebar (or press Ctrl/Cmd + Shift + G)
Click "Publish to GitHub".
Choose Public Repository
A popup will appear asking you to name your repository.
You can name it anything you like (e.g., my-cv, portfolio, etc.)
Important: Select "Publish to GitHub public repository" (not private!) so your website can be accessed by everyone.
Enable GitHub Pages
Go to your repository on GitHub → Settings → Pages (in left sidebar)
Under "Branch", select main and click Save
Wait 1-2 Minutes
GitHub needs a moment to build your site.
Refresh the Settings → Pages page to see your URL appear.
Visit Your Live Website!
Your URL will be: https://your-username.github.io/your-repo-name
Congratulations—your CV is now live on the internet!
💡 Updating your site later: Whenever you make changes, go to Source Control, type a commit message, click "Commit", then "Sync Changes". Your live website will update automatically!
Save Your URL
🎉 Congratulations! You Did It!
You've just:
- ✅ Planned a website with Copilot assistance
- ✅ Created HTML structure
- ✅ Styled it beautifully with CSS
- ✅ Made it responsive for all devices
- ✅ Polished it with finishing touches
- ✅ Published it to the world!
Need Help?
If you're stuck or have any questions, don't hesitate to reach out!
Inspiration Gallery
Examples of what students have built with this workshop.
Student showcase coming soon!
Your work could be featured here. Keep building!