What You'll Build
By the end of this guide, you'll have a personal profile page with your name, a short bio, styled text, and a link — all built from scratch.
What you need: A laptop with any web browser (Chrome recommended) and a text editor (VS Code — it's free).
Step 1: Set Up Your Workspace
Download Visual Studio Code from code.visualstudio.com if you haven't already. It's the most popular code editor for web development, and it's completely free.
Create a new folder on your desktop called my-first-website. Open VS Code, then open that folder.
Create a new file inside it called index.html. This is your website.
Step 2: Write Your First HTML
Type this into index.html:
My First Website
Hello, World!
This is my first website. I built it myself.
Now open this file in your browser (right-click the file and select "Open with Chrome").
You should see "Hello, World!" as a heading and your paragraph text below it. That's it — you just built a website.
Step 3: Understanding What You Wrote
Let's break down each part:
- •
— Tells the browser this is an HTML5 document - •
— The root element that wraps everything - •
— Contains metadata (title, character set, etc.) - •
— Contains everything you see on the page - •
— A heading (h1 is the largest, h6 is the smallest) - •
— A paragraph of text
HTML uses tags that come in pairs: an opening tag and a closing tag . Everything between them is the content.
Step 4: Add More Content
Let's make this a proper profile page. Replace your content with:
Your Name
Aspiring Software Developer
I'm learning web development and building my first website.
My goal is to become a fullstack developer and build products
that solve real problems.
Skills I'm Learning
- HTML & CSS
- JavaScript
- React
Contact Me
Email: your@email.com
GitHub: github.com/yourusername
New tags you used:
- •
,— Smaller headings - •
- •
— A list item - •
— A link to another page or email
Refresh your browser. Looking better already.
Step 5: Add CSS (Make It Look Good)
HTML gives you structure. CSS gives you style. Create a new file called style.css in the same folder.
First, link it in your HTML. Add this line inside the :
Now add this to style.css:
body {
font-family: system-ui, -apple-system, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 40px 20px;
background-color: #f8fafc;
color: #334155;
line-height: 1.6;
}
h1 {
color: #0f172a;
font-size: 2rem;
margin-bottom: 0;
}
h2 {
color: #0ea5e9;
font-weight: normal;
font-size: 1.1rem;
margin-top: 4px;
}
h3 {
color: #0f172a;
margin-top: 32px;
}
a {
color: #1e40af;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
padding-left: 20px;
}
li {
margin-bottom: 4px;
}
Refresh your browser. Your page now has proper typography, colors, spacing, and a centered layout.
Step 6: Understand the CSS
CSS works with selectors and properties:
selector {
property: value;
}
- •
body— Styles the entire page - •
font-family— Sets the font - •
max-width: 600px— Limits the content width - •
margin: 0 auto— Centers the content horizontally - •
color— Text color - •
background-color— Background color - •
a:hover— Styles a link when you hover over it
Step 7: Add a Simple Card Style
Let's wrap your content in a card to make it stand out. Update your body:
Your Name
Aspiring Software Developer
Add this to your CSS:
.card {
background-color: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
The .card selector targets elements with class="card". This is how you apply styles to specific elements.
What You Learned
In about 30 minutes, you:
- •Created an HTML file from scratch
- •Understood HTML tags and structure
- •Added content with headings, lists, and links
- •Created a CSS file and linked it
- •Styled your page with colors, fonts, and layout
- •Used a class selector for targeted styling
This is the foundation of every website on the internet. Facebook, Google, Twitter — they all start with HTML and CSS, just more of it.
What's Next
Now that you can build a basic page, here's your learning path:
- 1.CSS Layout — Learn Flexbox and Grid to create complex layouts
- 2.Responsive Design — Make your site work on mobile phones
- 3.JavaScript — Add interactivity (click events, dynamic content)
- 4.Git & GitHub — Save your code and share it with the world
Or if you want a structured path with mentorship, check out our Fullstack Bootcamp where HTML & CSS is just Week 1 — by Week 12 you'll be building full applications with React, databases, and AI.
The journey of a thousand lines of code begins with a single . You just wrote yours.