Chapters
HTML + CSS: Build Your First Web Page — A Beginner’s Practical Guide
📘 Chapter 5: Building a Complete Web Page Project
🧩 Introduction: Bringing
It All Together
You’ve learned how to structure HTML, style with CSS, create
layouts with Flexbox, and make your designs responsive using media queries. Now
it's time to apply all your skills to build a real-world project — a
fully responsive, professional-looking web page.
This chapter walks you through:
- Planning
your layout and structure
- Writing
clean, semantic HTML
- Styling
the page with reusable, scalable CSS
- Adding
responsive behavior with Flexbox and media queries
- Launching
and reviewing your page like a real developer
By the end, you'll have a polished “Personal Portfolio
Web Page” that you can customize, showcase, and build upon.
🎯 Project Overview:
Personal Portfolio Page
🔹 Page Sections:
- Header
with navigation
- Hero
(intro) section
- About
section
- Projects
showcase
- Contact
form
- Footer
🧠 Features & Learning
Goals:
- Semantic
HTML5 tags
- External
CSS with variables and classes
- Responsive
Flexbox layout
- Mobile-first
design
- Interactive
hover styles and button effects
🧱 Step 1: Project
Structure
📁 File Organization
|
File/Folder |
Purpose |
|
/images |
Store images or icons |
|
index.html |
Main HTML
page |
|
style.css |
External stylesheet |
|
favicon.ico |
(Optional)
tab icon |
📝 Step 2: Writing the
HTML
index.html
html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>John Doe Portfolio</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1
class="logo">JohnDoe</h1>
<ul class="nav-links">
<li><a
href="#about">About</a></li>
<li><a
href="#projects">Projects</a></li>
<li><a
href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h2>Hello, I'm John 👋</h2>
<p>I'm a front-end developer
passionate about clean UI.</p>
<a href="#projects"
class="btn">View Projects</a>
</section>
<section id="about">
<h2>About Me</h2>
<p>I build responsive websites and
enjoy turning ideas into reality.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="projects-grid">
<div
class="project-card">
<h3>Weather App</h3>
<p>JavaScript-powered weather
forecast app using APIs.</p>
</div>
<div
class="project-card">
<h3>Portfolio Site</h3>
<p>This site you're viewing —
built using HTML & CSS!</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form>
<input type="text"
placeholder="Your Name" required>
<input type="email"
placeholder="Your Email" required>
<textarea placeholder="Your
Message"></textarea>
<button type="submit"
class="btn">Send</button>
</form>
</section>
<footer>
<p>© 2025 John Doe. All
rights reserved.</p>
</footer>
</body>
</html>
🎨 Step 3: Creating the
CSS
style.css
css
/*
Base Styles */
:root
{
--primary-color: #0077cc;
--background: #f9f9f9;
--text: #333;
}
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
font-family: 'Segoe UI', sans-serif;
background: var(--background);
color: var(--text);
line-height: 1.6;
}
a
{
text-decoration: none;
color: var(--primary-color);
}
.btn
{
display: inline-block;
background: var(--primary-color);
color: white;
padding: 10px 20px;
margin-top: 10px;
border-radius: 5px;
transition: background 0.3s;
}
.btn:hover
{
background: #005fa3;
}
🔹 Layout & Section
Styles
css
header
{
background: #fff;
padding: 1em 2em;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.navbar
{
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links
{
display: flex;
list-style: none;
gap: 20px;
}
.hero
{
padding: 3em;
text-align: center;
background: linear-gradient(to right,
#0077cc, #0099ff);
color: white;
}
section
{
padding: 3em 2em;
}
.projects-grid
{
display: flex;
flex-wrap: wrap;
gap: 2em;
}
.project-card
{
flex: 1 1 45%;
background: white;
border: 1px solid #ddd;
padding: 1em;
border-radius: 5px;
}
form
{
display: flex;
flex-direction: column;
gap: 1em;
max-width: 500px;
margin: 0 auto;
}
input,
textarea {
padding: 0.75em;
border: 1px solid #ccc;
border-radius: 4px;
}
footer
{
text-align: center;
padding: 1em;
background: #eee;
}
📱 Step 4: Adding
Responsiveness
css
@media
(max-width: 768px) {
.navbar {
flex-direction: column;
gap: 1em;
}
.projects-grid {
flex-direction: column;
}
.project-card {
flex: 1 1 100%;
}
form {
width: 100%;
}
}
🔍 Step 5: Testing Your
Page
Test the page on:
- Chrome,
Firefox, Edge
- Desktop
vs mobile screen sizes
- Inspect
responsive behaviors and fix overlaps or scroll issues
✅ Checklist:
|
Task |
Done? |
|
All HTML tags are
semantic |
✅ |
|
CSS is modular and readable |
✅ |
|
Flexbox is used for
layout |
✅ |
|
Responsive behavior for mobile |
✅ |
|
Contact form and
footer complete |
✅ |
🧠 Bonus: Hosting Options
Once your page is complete, you can:
- Host
it on GitHub Pages (free)
- Use Netlify
for drag-and-drop hosting
- Deploy
with Vercel with live deployment links
🧾 Summary Table
|
Feature |
Tool Used |
|
Structure |
HTML5 |
|
Styling |
External CSS |
|
Layout |
Flexbox |
|
Responsiveness |
Media Queries |
|
Interactions |
CSS hover |
|
Hosting |
GitHub Pages
/ Netlify |
🧠 Chapter Summary
You’ve now:
- Built
a full web page from scratch
- Used
semantic tags, Flexbox, and media queries
- Styled
it professionally and made it mobile-friendly
- Learned
how to test, improve, and prepare it for the real world
FAQs
Q1: What is the difference between HTML and CSS?
A: HTML (HyperText Markup Language) is used to structure the content of a webpage—such as text, headings, links, and images. CSS (Cascading Style Sheets) is used to style that content—like setting colors, fonts, spacing, and layout.
Q2: Do I need to install any special software to write HTML and CSS?
A: No special software is required. You can use any text editor like Visual Studio Code, Sublime Text, or even Notepad. All modern browsers can render your HTML and CSS code.
Q3: Can I build a complete website with just HTML and CSS?
A: Yes, you can build a static website using only HTML and CSS. However, for interactive elements like animations or forms with validation, you'll eventually need JavaScript.
Q4: How do I view my HTML page in a browser?
A: After saving your file with a .html extension, simply double-click it or right-click and select “Open with” → your browser (e.g., Chrome, Firefox, Edge).
Q5: What is the best way to apply CSS to an HTML page?
A: The best practice is to use an external CSS file (linked with a <link> tag in the HTML <head>). This makes your code modular, clean, and easier to maintain.
Q6: Is it better to learn HTML and CSS before JavaScript?
A: Yes. HTML and CSS provide the structural and visual foundation of web development. Learning them first helps you understand how websites are built before adding interactivity with JavaScript.
Q7: How can I make my website responsive using HTML and CSS?
A: Use CSS media queries, flexbox, and relative units like percentages or em/rem to make your layout adapt to different screen sizes (e.g., desktop, tablet, mobile).
Q8: Can I host my HTML + CSS website online for free?
A: Yes! Platforms like GitHub Pages, Netlify, and Vercel allow you to host static sites (HTML/CSS/JS) for free with custom domains and version control.
Q9: What’s the difference between class and id in CSS?
A: An id targets a unique element using #idname, while a class can be reused across multiple elements using .classname. IDs should be unique per page; classes can apply styles to multiple elements.
Q10: Where can I find design inspiration and examples for HTML/CSS projects?
A: Websites like CodePen, Dribbble, Frontend Mentor, and CSS-Tricks offer great examples, templates, and challenges to inspire and improve your front-end design skills.
Explore Other Libraries
Please allow ads on our site
Please log in to access this content. You will be redirected to the login page shortly.
Login
Comments(0)