Mini Project: Build a Simple Web Page Using CSS

by

Now that you have learned the fundamentals of CSS, let’s put it all together in a mini project. We will build a simple, responsive personal profile webpage using HTML and CSS.

This project will help you practice:

  • CSS selectors
  • Box model
  • Fonts and colors
  • Flexbox for layout
  • Media queries for responsiveness

Project Overview

We will create a webpage that includes:

  • A header with a profile name.
  • A profile image and short bio.
  • A list of hobbies.
  • A footer with contact info.

Let’s get started!

HTML Structure

Here is the basic HTML setup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Profile</title>
  <link rel="stylesheet" href="style.css"> <!-- External CSS -->
</head>
<body>
  <header>
    <h1>Welcome to My Profile</h1>
  </header>

  <main>
    <section class="profile">
      <img src="profile.jpg" alt="Profile picture of user">
      <p>Hello! I am a web development learner. I love coding, reading, and music.</p>
    </section>

    <section class="hobbies">
      <h2>My Hobbies</h2>
      <ul>
        <li>Coding</li>
        <li>Photography</li>
        <li>Traveling</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>Contact me: example@email.com</p>
  </footer>
</body>
</html>

CSS Styling

Create a external stylesheet with a file name style.css.

/* Reset default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f9f9f9;
  color: #333;
}

/* Header */
header {
  background: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px 0;
}

/* Profile section */
.profile {
  text-align: center;
  margin: 20px;
}

.profile img {
  width: 150px;
  border-radius: 50%; /* Makes image circular */
  margin-bottom: 15px;
}

/* Hobbies section */
.hobbies {
  background: #fff;
  padding: 20px;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.hobbies h2 {
  margin-bottom: 10px;
}

.hobbies ul {
  list-style: square inside;
}

.hobbies li {
  margin: 5px 0;
}

/* Footer */
footer {
  text-align: center;
  padding: 15px;
  background: #333;
  color: white;
}

/* Responsive design */
@media (max-width: 600px) {
  .profile img {
    width: 100px; /* Smaller profile picture on small screens */
  }

  .hobbies {
    margin: 10px;
  }
}

Features We Used

  • External CSS → Keeps code clean.
  • Box model → Padding, margins, borders for layout.
  • Flexibility → Used border-radius, box-shadow for design.
  • Responsive design → Media query to resize elements on small screens.

Quick Reference Summary

FeatureWhere UsedPurpose
Reset styles* { margin:0; }Normalize default browser styles
External CSS<link rel="stylesheet">Separate design from content
Border radius.profile imgRound profile picture
Box shadow.hobbiesCard-like design
Media query@media (max-width:600px)Mobile-friendly layout

Practice Challenge

  1. Add a navigation bar above the header with links like Home, About, Contact.
  2. Style the navigation using flexbox for horizontal alignment.
  3. Add a new section for “Skills” with a styled list.
  4. Make the entire layout responsive with breakpoints at 600px and 900px.

Conclusion

Congratulations 🎉! You have built your first CSS project. This small profile webpage included essential CSS features like the box model, typography, colors, responsive design, and layout styling. Keep experimenting by adding new sections and styling tricks to strengthen your CSS skills.

👉 This completes the CSS Tutorial Series. Next, you can dive into JavaScript basics to make your webpages interactive.

Sharing Is Caring: