Back to Part 2 Exercises
Advanced
★
Build a Complete Working Page from Start to Finish
Master the complete web development workflow
This comprehensive exercise will guide you through building a complete, professional webpage from scratch. You'll learn the entire development process: planning, HTML structure, CSS styling, responsive design, and testing. By the end, you'll have a fully functional website that showcases your skills!
Project Overview
We'll build a Personal Blog/Portfolio Website with the following features:
- Responsive navigation with mobile menu
- Hero section with call-to-action
- About section with personal information and profile icon
- Portfolio/Projects showcase with project icons
- Contact form
- Footer with social links
- Mobile-first responsive design
- Font Awesome icons instead of images for better performance
Step-by-Step Development Process
Phase 1: Planning & Setup (15 minutes)
- Create project folder: Create a new folder called "my-portfolio"
- Plan your content: Write down what you want to include (about you, projects, skills)
- Choose color scheme: Pick 3-4 colors for your design (primary, secondary, accent, neutral)
- Sketch layout: Draw a simple sketch of your page layout on paper
Phase 2: HTML Structure (30 minutes)
- Create index.html: Set up the basic HTML5 document structure
- Add semantic sections: Header, nav, main, sections, aside, footer
- Write content: Add your actual text content (not placeholder text)
- Structure navigation: Create navigation menu with proper links
- Add icons: Include Font Awesome icons for profile and projects
Phase 3: CSS Styling (45 minutes)
- Create styles.css: Set up CSS file with CSS variables for colors
- Reset & base styles: Add CSS reset and typography rules
- Layout structure: Use Flexbox and Grid for page layout
- Component styling: Style navigation, cards, buttons, forms
- Visual enhancements: Add shadows, borders, hover effects
Phase 4: Responsive Design (30 minutes)
- Mobile-first approach: Start with mobile styles as base
- Add media queries: Create breakpoints for tablet and desktop
- Test navigation: Ensure mobile menu works properly
- Adjust layouts: Modify grid/flexbox for different screen sizes
Phase 5: Testing & Polish (15 minutes)
- Cross-browser testing: Test in Chrome, Firefox, Safari
- Mobile testing: Test on mobile devices or browser dev tools
- Validate code: Use HTML and CSS validators
- Icon testing: Verify Font Awesome icons load correctly
Code Templates
Complete Project Structure
my-portfolio/
├── index.html # Main HTML file
├── styles/
│ └── main.css # Complete stylesheet with all styles
└── README.md # Project documentation
HTML Structure Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Personal portfolio and blog website">
<title>Your Name - Portfolio</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<header class="header">
<nav class="nav">
<div class="nav-brand">Your Name</div>
<input type="checkbox" id="nav-toggle" class="nav-checkbox">
<label for="nav-toggle" class="nav-toggle">
<i class="fas fa-bars"></i>
</label>
<ul class="nav-menu" id="navMenu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="hero">
<div class="hero-content">
<h1>Hi, I'm [Your Name]</h1>
<p>Web Developer & Designer</p>
<a href="#contact" class="btn btn-primary">Get In Touch</a>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2>About Me</h2>
<div class="about-content">
<div class="about-text">
<p>[Your story and background]</p>
<div class="skills">
<h3>Skills</h3>
<div class="skill-tags">
<span class="skill-tag">HTML5</span>
<span class="skill-tag">CSS3</span>
<span class="skill-tag">JavaScript</span>
<span class="skill-tag">React</span>
</div>
</div>
</div>
<div class="about-image">
<div class="profile-icon">
<i class="fas fa-user-circle"></i>
</div>
</div>
</div>
</div>
</section>
<section id="projects" class="projects">
<div class="container">
<h2>My Projects</h2>
<div class="projects-grid">
<article class="project-card">
<div class="project-icon">
<i class="fas fa-laptop-code"></i>
</div>
<div class="project-content">
<h3>Project Name</h3>
<p>Project description goes here</p>
<div class="project-links">
<a href="#" class="btn btn-secondary">Live Demo</a>
<a href="#" class="btn btn-outline">Source Code</a>
</div>
</div>
</article>
<!-- Add more project cards -->
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2>Get In Touch</h2>
<form class="contact-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Your Name</h3>
<p>Web Developer & Designer</p>
</div>
<div class="footer-section">
<h3>Connect</h3>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Your Name. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>
Complete CSS Stylesheet
Here's the complete CSS code you'll need for your portfolio website:
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Header & Navigation */
.header {
background: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.nav-brand {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.nav-checkbox {
display: none;
}
.nav-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-primary);
cursor: pointer;
padding: 0.5rem;
border-radius: var(--radius-md);
transition: var(--transition);
}
.nav-toggle:hover {
background: var(--bg-secondary);
color: var(--primary-color);
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
align-items: center;
}
.nav-menu a {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
transition: var(--transition);
}
.nav-menu a:hover {
background: var(--bg-secondary);
color: var(--primary-color);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 6rem 0;
text-align: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 0.9;
}
/* Buttons */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
text-decoration: none;
border-radius: var(--radius-md);
font-weight: 500;
text-align: center;
transition: var(--transition);
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background: white;
color: var(--primary-color);
}
.btn-primary:hover {
background: var(--bg-secondary);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--secondary-color);
color: white;
}
.btn-secondary:hover {
background: #7c3aed;
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-outline {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-outline:hover {
background: var(--primary-color);
color: white;
}
/* About Section */
.about {
padding: 5rem 0;
background: var(--bg-secondary);
}
.about h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--text-primary);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-text p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.8;
}
.skills h3 {
color: var(--text-primary);
margin-bottom: 1rem;
font-size: 1.3rem;
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.skill-tag {
background: var(--primary-color);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
font-weight: 500;
}
/* Profile Icon (replaces profile image) */
.profile-icon {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 400px;
height: 400px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.profile-icon i {
font-size: 8rem;
color: white;
opacity: 0.9;
}
/* Projects Section */
.projects {
padding: 5rem 0;
background: var(--bg-primary);
}
.projects h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--text-primary);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.project-card {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
/* Project Icons (replace project images) */
.project-icon {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
color: white;
}
.project-icon i {
font-size: 4rem;
opacity: 0.9;
}
.project-card:nth-child(2) .project-icon {
background: linear-gradient(135deg, var(--accent-color), var(--success-color));
}
.project-card:nth-child(3) .project-icon {
background: linear-gradient(135deg, var(--success-color), var(--warning-color));
}
.project-content {
padding: 1.5rem;
}
.project-content h3 {
color: var(--text-primary);
margin-bottom: 0.75rem;
font-size: 1.3rem;
}
.project-content p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.project-links {
display: flex;
gap: 0.75rem;
}
.project-links .btn {
flex: 1;
font-size: 0.9rem;
padding: 0.5rem 1rem;
}
/* Contact Section */
.contact {
padding: 5rem 0;
background: var(--bg-secondary);
}
.contact h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--text-primary);
}
.contact-form {
max-width: 600px;
margin: 0 auto;
background: var(--bg-primary);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-primary);
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 1rem;
transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.contact-form .btn {
width: 100%;
font-size: 1.1rem;
padding: 1rem;
}
/* Footer */
.footer {
background: var(--text-primary);
color: white;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
color: white;
margin-bottom: 1rem;
}
.footer-section p {
color: var(--text-light);
margin-bottom: 0.5rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
color: var(--text-light);
font-size: 1.5rem;
transition: var(--transition);
}
.social-links a:hover {
color: var(--primary-color);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #374151;
color: var(--text-light);
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-toggle {
display: block;
}
.nav-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-primary);
flex-direction: column;
padding: 1rem;
border-top: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
}
/* Show menu when checkbox is checked */
.nav-checkbox:checked ~ .nav-menu {
display: flex;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.2rem;
}
.about-content {
grid-template-columns: 1fr;
text-align: center;
}
.projects-grid {
grid-template-columns: 1fr;
}
.project-links {
flex-direction: column;
}
}
@media (max-width: 480px) {
.hero {
padding: 4rem 0;
}
.hero h1 {
font-size: 2rem;
}
.about h2,
.projects h2,
.contact h2 {
font-size: 2rem;
}
.contact-form {
padding: 1.5rem;
}
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
Responsive Design Checklist
- Mobile-first: Start with mobile styles, then enhance for larger screens
- Breakpoints: Use 768px (tablet) and 1024px (desktop)
- Navigation: Hamburger menu for mobile, horizontal for desktop
- Typography: Responsive font sizes using clamp() or viewport units
- Images: Responsive images with max-width: 100%
- Grid/Flexbox: Adjust column counts for different screen sizes
Testing & Submission
Success Criteria
Your project is complete when you have:
- ✅ A fully functional, responsive website
- ✅ Clean, semantic HTML5 code
- ✅ Well-organized CSS with variables
- ✅ Mobile-first responsive design
- ✅ Working navigation and smooth scrolling
- ✅ Professional-looking design with hover effects
- ✅ Contact form (styling only, no backend needed)
- ✅ Font Awesome icons properly displayed
- ✅ Cross-browser compatibility
- ✅ Valid HTML and CSS code
- ✅ Fast loading times (no heavy images)
See the Demo
Want to see what your final project should look like? Check out our demo page:
This demo shows exactly what you'll build following the step-by-step guide above!
Project Submission
When you're ready to submit:
- Test everything: Ensure all links work and forms are styled
- Test icons: Verify Font Awesome icons are displaying correctly
- Validate code: Fix any HTML/CSS validation errors
- Create README: Document your project and setup instructions
- Zip project: Create a zip file of your entire project folder
- Share screenshots: Include screenshots of different screen sizes