Hello Future Web Developer!
Welcome to the exciting world of Web Development!
You're about to learn the language that builds almost
every website you've ever visited — HTML.
🧩 What is HTML?
HTML stands for HyperText Markup Language.
Think of it as the skeleton of a website — it gives your
webpage its structure, telling the browser what content to
show and how to arrange it (like where to put headings,
paragraphs, images, and links).
We’ll learn by doing — and you’ll build your first
webpage about yourself!
Getting Started: Your Tools
All you need is a text editor and a web browser.
Text Editor: Notepad (Windows) or TextEdit (Mac)
Browser: Chrome, Firefox, or Safari
👉 Create a new folder called “MyFirstWebsite” on your
computer. We’ll save all your files there.
🧱 Lesson 1: The Basic Structure & Page Title
Every HTML page begins with the same structure.
Type this into your editor:
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Bio Page</title>
</head>
<body>
</body>
</html>
🧠 What’s Happening Here
<!DOCTYPE html> → Declares the document as
HTML5
<html> → The root element
<head> → Holds information about the page
<title> → Sets the browser tab title
<body> → Contains everything you’ll actually see on
the page
Your Turn:
1. Save this as [Link] inside your
“MyFirstWebsite” folder.
2. Double-click the file to open it in your browser.
3. You should see “My Awesome Bio Page” on the
browser tab!
✍️Lesson 2: Formatting, Quotations & Comments
Add text to your page! Inside <body>, type:
<body>
<h1>About Me</h1>
<p>My name is [Your Name] and I am learning HTML. It's
<b>really cool</b>!</p>
<p>Sometimes I feel like I'm <i>flying</i> through these
lessons.</p>
<!-- This is a comment. It won't show up on the page. -->
<h2>My Favorite Quote</h2>
<blockquote>
<p>"The only way to do great work is to love what you
do."</p>
<cite>- Steve Jobs</cite>
</blockquote>
</body>
🧠 Key Points
<h1> = Heading
<p> = Paragraph
<b> = Bold text
<i> = Italic text
<!-- ... --> = Comment (not visible in browser)
<blockquote> + <cite> = Quotation formatting
🌐 Lesson 3: Adding Links & Images
Add a link and an image to your page:
<h2>My Favorite Website</h2>
<p>I love visiting <a
href="[Link] website</a> for
space pictures!</p>
<h2>A Picture I Like</h2>
<img src="[Link]" alt="A cute kitten playing with
yarn">
🧠 Key Points
<a href="..."> = Hyperlink
<img src="..." alt="..."> = Image tag
Always use alt text for accessibility!
Try it:
1. Download a small image (e.g., a kitten 🐱).
2. Save it as [Link] in your folder.
3. Add the code above and refresh your browser.
Lesson 4: Organizing with Lists & Tables
Let’s organize your hobbies and weekly schedule:
<h2>My Hobbies</h2>
<ul>
<li>Playing video games</li>
<li>Reading books</li>
<li>Riding my bike</li>
</ul>
<h2>My Weekly Schedule</h2>
<table border="1">
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>School</td>
</tr>
<tr>
<td>Saturday</td>
<td>Soccer Practice</td>
</tr>
</table>
🧠 Quick Breakdown
<ul> = Unordered List (bullets)
<ol> = Ordered List (numbers)
<table> = Table container
<tr> = Table row
<th> = Table header
<td> = Table data
🧍♂️Mini Project 1: Build Your Bio Page
Combine everything into your own bio page!
✅ Your page should include:
1. Full HTML structure
2. A creative page title
3. A main heading (<h1>) with your name
4. A short paragraph about you
5. A picture of your favorite animal or hobby
6. A list of your favorite foods
7. A link to your favorite website
8. A table of your top 3 movies and release years
9. A hidden comment about what you had for
breakfast 🍳
🎨 Lesson 5: Styling with CSS
Add this CSS inside your <head>:
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p{
color: #333333;
}
</style>
🧠 CSS Basics
CSS = Cascading Style Sheets
Selector → { property: value; }
Color formats: names (lightblue), HEX codes
(#333333)
Try changing colors and fonts to your taste!
📦 Lesson 6: Structuring with Div, Class & ID
Group and style sections with <div>, .class, and #id.
Example:
<div class="intro-section">
<h1>About Me</h1>
<p>My name is [Your Name] and I am learning
HTML.</p>
</div>
<div id="hobbies-section">
<h2>My Hobbies</h2>
<ul>
<li>Playing video games</li>
<li>Reading books</li>
<li>Riding my bike</li>
</ul>
</div>
CSS:
.intro-section {
background-color: #f0f8ff;
padding: 20px;
margin-bottom: 15px;
}
#hobbies-section {
background-color: #e6e6fa;
padding: 20px;
border: 2px solid navy;
}
Remember:
class → can be reused (.classname)
id → unique per page (#idname)
🎬 Lesson 7: Iframes & Favicon
Add a Favicon:
<link rel="icon" type="image/png" href="[Link]">
Embed a Video:
<h2>My Favorite Music Video</h2>
<iframe width="560" height="315"
src="[Link]
allow="fullscreen"></iframe>
Now your page has its own icon and an embedded
video!
⚡ Lesson 8: A Peek into JavaScript
Add interactivity with JavaScript!
<button onclick="showMessage()">Click Me!</button>
<script>
function showMessage() {
alert("Hooray! You are a web developer!");
}
</script>
Click the button — your browser should show a pop-up 🎉
🧑💻 Mini Project 2: Style & Finalize
Upgrade your bio page with:
1. Two sections (<div>) — each with unique class or
id
2. Background colors and padding
3. Custom text color and font
4. Favicon
5. Embedded YouTube video
6. A button that shows an alert
🏁 Congratulations! 🎉
You’ve learned how to:
Build webpages with HTML
Style them with CSS
Add interactivity with JavaScript
You now have your very first personal web page — a
strong foundation for your journey into web development!
Would you like me to format this version into HTML
(styled) so you can view it directly in your browser with
larger, readable fonts and spacing (like a real online
tutorial page)?