Mini-Project - Build a Simple Webpage Layout

1. Welcome and Icebreaker:

Welcome! If you could build any simple webpage, what would it be about?

2. Outline the Session:

• Agenda:
  1. Choose a simple design (portfolio card, product card, blog post, etc.)
  2. Build the HTML structure
  3. Style with Flexbox/Grid and responsive techniques
  4. Focus on semantics and clean code
  5. Task: Complete the mini-project
• Learning Outcomes:
  • Apply everything learned to build a static webpage
  • Use modern layout and responsive design
• Expectations:
  • Focus on clean, semantic HTML and maintainable CSS

3. Concept Explanation:

A mini-project helps consolidate your learning. Pick a simple design and:

• Use Flexbox or Grid for layout
• Make it responsive with media queries
• Use semantic HTML elements (header, main, section, etc.)
• Refactor with variables and best practices

4. Live Coding Demonstration:

<main class="profile-card">
  <img src="avatar.jpg" alt="Profile Photo">
  <h2>Jane Doe</h2>
  <p>Web Developer</p>
  <a href="#">Contact</a>
</main>

.profile-card {
  max-width: 350px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.profile-card img {
  width: 100px;
  border-radius: 50%;
}
.profile-card a {
  background: #3498db;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
}
@media (max-width: 500px) {
  .profile-card {
    padding: 12px;
  }
}

5. Tasks

• Create the HTML structure and style it using Flexbox/Grid for layout, responsive design techniques, and good styling practices. Focus on semantics and clean code.