██FR█████ █INTELL███████████

Day 40/180 of Frontend Dev: Practice Styling a Personal Website


This content originally appeared on DEV Community and was authored by CodeWithDhanian

Challenge Title: Style a Simple Personal Website Using CSS

Welcome to Day 40 of our 180 Frontend Challenge. By now, you’ve worked through a solid foundation of HTML and CSS concepts. Today, we put that knowledge into practice by building and styling a clean, modern personal website.

This task is not about just writing code—it’s about understanding design systems, layout logic, spacing, visual hierarchy, and how to write reusable and organized CSS.

🔹 What You’ll Build

You’ll create a personal website that includes:

  • A header with your name and title
  • A short bio
  • A section for your projects
  • A contact section
  • A clean, modern responsive layout

🔹 Folder Structure

Organize your project files properly. Use this basic structure:

personal-website/
│
├── index.html
├── style.css
└── images/
    └── profile.jpg (your image)

🔹 Step 1: HTML Structure

Let’s build the semantic structure first:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Personal Website</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <div class="container">
      <h1>Dhanian Opore</h1>
      <p>Frontend Developer & Designer</p>
    </div>
  </header>

  <section class="about container">
    <h2>About Me</h2>
    <img src="images/profile.jpg" alt="Profile picture" />
    <p>Hello! I'm a passionate frontend developer who loves creating clean and interactive web interfaces. I enjoy working with HTML, CSS, and JavaScript to bring ideas to life on the web.</p>
  </section>

  <section class="projects container">
    <h2>Projects</h2>
    <ul>
      <li>Portfolio Website</li>
      <li>JavaScript Calculator</li>
      <li>Todo List App</li>
    </ul>
  </section>

  <section class="contact container">
    <h2>Contact</h2>
    <p>Email: dhanian@example.com</p>
    <p>GitHub: github.com/codewithdhanian</p>
  </section>

  <footer>
    <p>&copy; 2025 Dhanian Opore</p>
  </footer>
</body>
</html>

🔹 Step 2: CSS Styling

Create a clean and responsive look.

/* style.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  background-color: #f5f5f5;
  color: #333;
}

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 0;
}

header {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 2rem 0;
}

header h1 {
  font-size: 2.5rem;
}

header p {
  font-size: 1.2rem;
  color: #bbb;
}

.about img {
  max-width: 150px;
  border-radius: 100%;
  margin: 1rem 0;
  display: block;
}

h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #111;
}

.projects ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.contact p {
  margin-bottom: 0.5rem;
}

footer {
  text-align: center;
  background-color: #222;
  color: #fff;
  padding: 1rem;
  margin-top: 2rem;
}

🔹 Step 3: Responsive Touches

Add basic responsiveness:

@media (max-width: 768px) {
  .about img {
    margin: 0 auto;
  }

  header h1 {
    font-size: 2rem;
  }

  header p {
    font-size: 1rem;
  }
}

🔹 What You’ve Practiced

  • Semantic HTML5 structure
  • Styling with CSS layout and spacing
  • Reusable classes and responsiveness
  • Basic image usage and profile design
  • Visual hierarchy with heading levels and spacing

🔹 Bonus Tips for Styling a Personal Website

  • Keep colors simple and accessible
  • Use a maximum of 2 fonts
  • Space content generously for readability
  • Avoid overusing shadows or animations
  • Design mobile-first, then scale to desktop

🔹 Boost Your Frontend Skills Even Further

Styling a personal website is a foundational frontend project. But to truly master styling, components, layouts, responsiveness, and design patterns, I highly recommend grabbing my complete Frontend Mastery eBook.

Inside, you’ll learn:

  • CSS Grid and Flexbox in real projects
  • Building responsive layouts step-by-step
  • Advanced component-based design
  • UI principles and visual hierarchy
  • Mini projects and styled systems

👉 Get it now: https://codewithdhanian.gumroad.com/l/sxpyzb

🔹 Your Task Today

  1. Build the above website structure in your code editor.
  2. Style it step-by-step using the provided CSS.
  3. Add your own details, images, and style improvements.
  4. Push it to GitHub or host on Netlify and share your progress.

Let today be the day you see your frontend learning come to life in a real personal site!

If you need help or get stuck, read through your code slowly, and try to explain what each part does. That alone is one of the best debugging tools you’ll ever use.

See you tomorrow on Day 41. Keep building.


This content originally appeared on DEV Community and was authored by CodeWithDhanian