Build Your First Website
What You'll Build?
A colourful webpage all about YOU! Share your name, hobbies, favourite things, and photos.
By the end, you'll have your very first website that you can show to friends and family!
Before You Start Building - Choose Your Workspace:
Option A: Online (Easiest - No Installation!)
Using CodePen (Recommended for Beginners)
Go to codepen.io
Click "Start Coding" (no account needed!)
You'll see 3 boxes: HTML, CSS, and JS
You only need HTML and CSS for this project
Your website appears at the bottom as you type!
OR
Using Replit
Go to replit.com
Click "Start building"
Choose "HTML, CSS, JS" template
Click "Create Repl"
Your files will be on the left, website preview on the right
Option B: On Your Computer (Using VS Code)
Step 1: Download VS Code
Go to code.visualstudio.com
Click the big download button (it knows your computer type!)
Open the downloaded file and install (keep clicking "Next")
Open VS Code when done
Step 2: Install Live Server Extension
Click the squares icon on the left sidebar (Extensions)
Type "Live Server" in the search box
Find "Live Server" by Ritwick Dey
Click the green "Install" button
Wait for it to finish
Step 3: Create Your Project Folder
Create a new folder on your Desktop called "my-first-website"
In VS Code, click "File" → "Open Folder"
Select your "my-first-website" folder
Step 4: Create Your Files
Click the "New File" icon (looks like a page with a +)
Name it index.html and press Enter
Create another file called style.css
Step 5: See Your Website Live
Right-click on index.html
Select "Open with Live Server"
Your browser will open and show your website!
Every time you save, the website updates automatically! ✨
Let's Build! (Step-by-Step)
PART 1: Create the Basic Structure (HTML)
Open your index.html file and type this EXACTLY:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello! I'm [Your Name]</h1>
</body>
</html>
What does this Code Snippet Mean?
<!DOCTYPE html> - Tells the browser this is a website
<html> - The container for everything
<head> - Information about your page (not visible)
<title> - What shows in the browser tab
<link> - Connects your CSS file (for colours/styles)
<body> - Everything you SEE on the page goes here!
<h1> - Big heading text
YOUR TASK: Replace [Your Name] with your actual name!
SAVE: Press Ctrl + S (Windows) or Cmd + S (Mac)
PART 2: Add Information About Yourself
Add these lines INSIDE the <body> tag, right after your <h1>:
<h1>Hello! I'm [Your Name]</h1>
<br>
<h2>About Me</h2>
<p>I am [your age] years old and I live in [your city].</p>
<p>I love learning new things, especially coding!</p>
<br>
<h2>My Hobbies</h2>
<ul>
<li>Playing video games</li>
<li>Drawing</li>
<li>Reading books</li>
</ul>
<br>
<h2>My Favorite Things</h2>
<p><strong>Favorite Color:</strong> Blue</p>
<p><strong>Favorite Food:</strong> Pizza</p>
<p><strong>Favorite Animal:</strong> Dogs</p>
What does this Code Snippet Mean?
<h2> - Smaller heading (for sections)
<p> - Paragraph of text
<ul> - Unordered list (bullet points)
<li> - List item (one bullet point)
<strong> - Makes text bold
YOUR TASK: Change ALL the information to YOUR favourites!
SAVE and watch your page update!
PART 3: Add a Picture
First, get an image:
Find a picture you like (or use an emoji website like emojipedia.org)
For online editors: Use an image URL (search on google -> open it in a new tab -> right click -> copy image address)
For VS Code: Put an image file in your "my-first-website" folder.
Add this AFTER your <h1> heading:
<h1>Hello! I'm [Your Name]</h1>
<br>
<img src="https://example.com/your-image.jpg" alt="Picture of me">
<h2>About Me</h2>
If using VS Code:
<img src="your-photo.jpg" alt="Picture of me">
What does this Code Snippet Mean?
<img> - Shows an image (no closing tag needed!)
src - The location of your image
alt - Description (helps if image doesn't load)
YOUR TASK:
Replace [src="https://example.com/your-image.jpg"] with your image URL, OR
Replace [src="your-photo.jpg"] with your image file name (must be with .jpg or .png).
Replace [alt="Picture of me"] with your desired alt text.
SAVE: Press Ctrl + S (Windows) or Cmd + S (Mac)
PART 4: Add Links to Your Favorite Websites
Add this new section at the bottom, BEFORE the </body> tag:
<h2>Cool Websites I Like</h2>
<ul>
<li><a href="https://www.youtube.com">YouTube</a></li>
<li><a href="https://scratch.mit.edu">Scratch</a></li>
</ul>
</body>
What does this Code Snippet Mean?
<a href=""> - Creates a clickable link
Put the website address in the quotes
The text between <a> and </a> is what you click
YOUR TASK: Add YOUR favorite websites!
SAVE: Press Ctrl + S (Windows) or Cmd + S (Mac)
PART 5: Make It Beautiful with CSS!
Now open your style.css file and add this:
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
margin: 50px;
}
h1 {
color: #ff6b6b;
text-align: center;
font-size: 48px;
}
h2 {
color: #4ecdc4;
border-bottom: 3px solid #ffe66d;
padding-bottom: 5px;
}
p {
font-size: 18px;
line-height: 1.6;
}
img {
width: 200px;
border-radius: 50%;
display: block;
margin: 20px auto;
border: 5px solid #4ecdc4;
}
ul {
font-size: 18px;
}
li {
margin: 10px 0;
}
a {
color: #ff6b6b;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #4ecdc4;
}
What does this CSS Code Snippet Mean?
Changes colors, sizes, and spacing
Makes your image round!
Centers things
Makes links change color when you hover
SAVE: Press Ctrl + S (Windows) or Cmd + S (Mac)
PART 6: Customize Your Colors!
Want different colors? Change these hex codes:
#f0f8ff - Light blue background (try #ffe6f0 for pink!)
#ff6b6b - Red headings (try #6b5fff for purple!)
#4ecdc4 - Turquoise (try #4caf50 for green!)
#ffe66d - Yellow (try #ffa726 for orange!)
Color picker tool: colorhunt.co - Pick beautiful color combinations!
PART 7: Show off your work!
For Online Editors:
CodePen: Click "Save" and share the URL
Replit: Click "Share" and copy the link
For VS Code:
Take a screenshot and share it!
Or learn to publish on GitHub Pages
Troubleshooting
-> My CSS isn't working!
Check that style.css is spelled exactly right in both files
Make sure the <link> tag is in the <head> section
Save both files!
-> My image doesn't show!
Check the image name is spelled exactly right
For VS Code: Make sure the image is in the same folder as index.html
For URLs: Make sure the link ends in .jpg, .png, or .gif
-> I don't see my changes!
Did you save? (Ctrl+S or Cmd+S)
Try refreshing your browser (F5 or Cmd+R)
