We’ll build a simple portfolio webpage that includes:
- A header with a navigation bar.
- A hero section with a main message.
- A portfolio section showcasing project cards.
- A footer with contact information.
This project will give you plenty of opportunities to practice Flexbox and the Box Model, along with some additional tasks to challenge yourself.
Step 1: Project Structure
First, create the following files and directories:
portfolio-project/
│
├── index.html
├── styles.css
└── images/ (optional, for any images you may want to use)
Step 2: HTML Structure
Here’s the basic HTML structure for the project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Practice Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section with Navigation -->
<header class="header">
<div class="container">
<div class="logo">
<h1>My Portfolio</h1>
</div>
<nav class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h2>Welcome to My Portfolio</h2>
<p>Discover my projects and skills. I'm passionate about web development and design.</p>
</div>
</section>
<!-- Portfolio Section -->
<section class="portfolio">
<div class="container">
<h2>My Projects</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<h3>Project 1</h3>
<p>Project description goes here.</p>
</div>
<div class="portfolio-item">
<h3>Project 2</h3>
<p>Project description goes here.</p>
</div>
<div class="portfolio-item">
<h3>Project 3</h3>
<p>Project description goes here.</p>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="footer">
<div class="container">
<p>© 2024 My Portfolio</p>
</div>
</footer>
</body>
</html>
Step 3: CSS Styling
Let’s style the webpage using the Box Model and Flexbox concepts.
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Ensures padding and border are included in the element's width and height */
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
/* Container */
.container {
width: 85%;
max-width: 1200px;
margin: 0 auto;
}
/* Header Styles */
.header {
background-color: #333;
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header .logo h1 {
margin: 0;
}
.header .nav ul {
list-style: none;
display: flex;
gap: 20px;
}
.header .nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
/* Hero Section */
.hero {
background-color: #e9ecef;
padding: 60px 0;
text-align: center;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.hero p {
font-size: 1.2rem;
}
/* Portfolio Section */
.portfolio {
padding: 40px 0;
background-color: #fff;
}
.portfolio h2 {
text-align: center;
margin-bottom: 40px;
}
.portfolio-grid {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.portfolio-item {
background-color: #f8f9fa;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
flex: 1 1 calc(33.333% - 40px); /* Flex-grow, flex-shrink, flex-basis */
min-width: 250px;
}
/* Footer Styles */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 20px;
}
Step 4: Viewing the Project
- Save the
index.htmlandstyles.cssfiles in the project directory. - Open the
index.htmlfile in a web browser to see your layout in action.
Explanation of Concepts:
Box Model:
- Use padding, margin, and borders to control the spacing and layout of elements. For example, the
.portfolio-itemhas padding inside the card and margin between the cards. - The
box-sizing: border-box;rule is used to make sure that padding and border are included in the width and height calculations of elements.
- Use padding, margin, and borders to control the spacing and layout of elements. For example, the
Flexbox:
- Flexbox is used in the
.headerto align the logo and navigation links horizontally and in the.portfolio-gridto create a responsive grid layout for the portfolio items. - The
.portfolio-itemusesflex: 1 1 calc(33.333% - 40px);to define a flexible width that adjusts based on the container size, with space between the items.
- Flexbox is used in the
Responsive Design:
- By using percentage-based widths and Flexbox properties like
flex-wrap, the layout adjusts to different screen sizes. - Media queries allow you to customize the layout further for smaller screens, ensuring the site is mobile-friendly.
- By using percentage-based widths and Flexbox properties like
This project provides a structured way to practice and understand the Box Model and Flexbox concepts in CSS. By completing the tasks, you’ll deepen your understanding and be better equipped to use these techniques in your own projects.
