📚 Advanced CSS: Flexbox & Grid Lab

Intro

Time for some practice laying out elements using Flexbox and CSS Grid!

Choose either the vertical or horizontal "profile card" above to reproduce using HTML and CSS.
Use a combination of Flexbox and CSS Grid to layout the individual elements as close as possible - it does not have to be perfect!

Lesson Overview

Now that we've learned how to interact with APIs using JavaScript and manipulate the DOM, it's time to focus on styling and layout using CSS Flexbox and Grid.

In this lesson, we will:

Understand the differences between Flexbox and CSS Grid
Use Flexbox for one-dimensional layouts (rows or columns)
Use CSS Grid for two-dimensional layouts (rows AND columns)
Apply these techniques to build a profile card layout
Enhance styling with best practices, including box-sizing, border-radius, and responsive design

By the end of this lesson, you will: ✅ Know when to use Flexbox vs. Grid
✅ Be able to build a structured, responsive layout
✅ Understand how to style components dynamically

📌 Step 1: Setting Up the Project

Before we start coding, let's set up our project.

📁 Project Folder Structure:

flexbox-grid-lab/
│── index.html
│── style.css

1️⃣ Create a Project Folder

Open VS Code (or any text editor).

Open your terminal and run:

mkdir flexbox-grid-lab
cd flexbox-grid-lab

Inside flexbox-grid-lab, create the two necessary files:
```
touch index.html style.css
```

📌 Step 2: Writing the HTML Structure

Our goal is to recreate a profile card layout similar to the example.

📜 Code: `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card - Flexbox & Grid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="profile-card">
        <!-- Profile Image -->
        <img class="profile-pic" src="https://i.imgur.com/Y8r06hG.jpeg" alt="Profile Picture">

        <!-- User Information -->
        <div class="profile-info">
            <h2>John Doe</h2>
            <p>Front-End Developer</p>
            <div class="stars">
                <img src="https://i.imgur.com/iUpkmhs.png" alt="Rating Stars">
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="profile-actions">
            <button class="message-btn">Message</button>
            <button class="connect-btn">Connect</button>
        </div>
    </div>

</body>
</html>

Explanation

The container for the card is <div class="profile-card">.
Inside, we have:
- A profile image (<img class="profile-pic">).
- A section for user info (<div class="profile-info">) with:
- The name (<h2>).
- Job title (<p>).
- Star rating (<div class="stars">).
- A button section (<div class="profile-actions">) for actions.

📌 Step 3: Applying CSS

We will now style the profile card using Flexbox & CSS Grid.

📜 Code: `style.css`

/* Reset default styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Profile Card Styling */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

/* Profile Picture */
.profile-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #007bff;
}

/* Profile Information */
.profile-info h2 {
    margin: 10px 0 5px;
    color: #333;
}

.profile-info p {
    color: #666;
    font-size: 14px;
    margin: 5px 0;
}

/* Star Rating */
.stars img {
    width: 100px;
    margin-top: 5px;
}

/* Button Actions - Flexbox */
.profile-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}

.profile-actions button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.message-btn {
    background: #28a745;
    color: white;
}

.connect-btn {
    background: #007bff;
    color: white;
}

.profile-actions button:hover {
    opacity: 0.8;
}

📌 Step 4: Understanding Flexbox & Grid

Now, let's break down how Flexbox and Grid were used in our design.

🔹 Where We Used Flexbox

.profile-card → Uses flex-direction: column; to stack elements vertically.
.profile-actions → Uses display: flex; to make buttons spread out evenly.

🔹 Where We Used CSS Grid

While we mainly used Flexbox, we can enhance the layout with Grid.

📜 Alternative: Grid-Based Layout

.profile-card {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 15px;
    text-align: center;
}

This would:

Create three rows (auto auto auto).
Apply equal spacing between elements.

📌 Step 5: Bonus Challenge

Want to go further? Try: ✅ Recreating the horizontal profile card
✅ Making the card responsive using @media queries
✅ Adding animations for hover effects

📌 Step 6: Summary

Key Takeaways

✅ Use Flexbox for row/column layouts
✅ Use Grid for two-dimensional layouts
✅ Combine both for a fully responsive UI

🚀 Next Steps

Now that you've mastered Flexbox & Grid, you're ready to apply this knowledge to more complex layouts like full web pages and responsive dashboards!

💡 Try modifying the layout using different techniques and share your results! 🚀