TechTicket | Session 10 - Final Project

🎯 Session Overview

Welcome to the Grand Finale! Over the past 9 sessions, you have gathered an amazing toolkit of CSS superpowers. Today, you will combine all of them to build a complete, professional, responsive personal website from scratch.

By the end of this session, you will be able to:

Combine HTML and CSS to build a complete multi-section website.
Create structured, modern layouts using Flexbox and Grid.
Design responsive layouts that adapt perfectly to mobile phones and desktops.
Apply smooth hover effects and animations to bring your site to life.
Organize and style your code like a professional front-end engineer.

⏪ The Ultimate Course Recap

Before we start building, let's look at the puzzle pieces we have collected:

Selectors & Specificity: Targeting elements accurately using classes (.box) and IDs (#header).
Typography & Colors: Making text readable and beautiful with Google Fonts, HEX codes, and RGBA.
The Box Model: Controlling space using Margin (outside) and Padding (inside).
Flexbox: Aligning items beautifully in rows (like Navigation bars).
Grid: Creating complex 2D layouts (like Image Galleries and Page Sections).
Responsive Design: Using @media queries to change the layout on mobile phones.
Animations: Using transition and @keyframes for smooth visual effects.

Real websites don't just use one of these features—they use all of them together.

📐 Layout Planning: The Blueprint

Before writing a single line of code, professional developers sketch out a wireframe. Our personal website will have 4 main sections:

The Strategy: We use Flexbox for 1-dimensional layouts (like spacing out the logo and nav links). We use CSS Grid for 2-dimensional layouts (like a grid of project cards).

🏗️ Step 1: The Semantic HTML Structure

We start by writing clean, semantic HTML to build the skeleton of our blueprint.

index.html

<body>
  <!-- HEADER SECTION -->
  <header>
    <h1 class="logo">Alex's Portfolio</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
    </nav>
  </header>

  <!-- MAIN CONTENT -->
  <main>
    <!-- About Section -->
    <section id="about" class="about-section">
      <div class="text">
        <h2>Hi, I'm Alex</h2>
        <p>I love coding, gaming, and design.</p>
      </div>
      <img src="avatar.png" alt="Alex">
    </section>

    <!-- Projects Gallery -->
    <section id="projects">
      <h2>My Projects</h2>
      <div class="grid-gallery">
        <div class="card">Project 1</div>
        <div class="card">Project 2</div>
        <div class="card">Project 3</div>
      </div>
    </section>
  </main>

  <!-- FOOTER -->
  <footer>
    <p>&copy; 2026 Alex.</p>
  </footer>
</body>

🎨 Step 2: Styling and Layout (Flexbox & Grid)

Now we apply CSS to position our elements. We will use Flexbox to push the Logo and Navigation apart, and Grid to arrange the project cards.

style.css

/* 1. Reset and Typography */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; background-color: #111; color: white; }

/* 2. Header Layout (Flexbox) */
header {
  display: flex;
  justify-content: space-between; /* Pushes logo left, nav right */
  align-items: center; /* Centers vertically */
  padding: 20px;
  background-color: #222;
}

/* 3. About Section (Flexbox) */
.about-section {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 50px;
}

/* 4. Projects Gallery (CSS Grid) */
.grid-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 20px;
  padding: 20px;
}

.card {
  background-color: #333;
  padding: 30px;
  border-radius: 8px;
}

Global Reset (*): We clear default browser margins and set box-sizing: border-box so padding doesn't break our layouts.

Header: Using display: flex combined with space-between automatically creates the classic navbar layout.

Gallery: Using display: grid with 1fr 1fr 1fr effortlessly divides the screen into 3 equal columns for our project cards.

📱 Step 3: Responsive Design (Media Queries)

Our layout looks great on a laptop, but on a mobile phone, the 3-column grid will be crushed! We need to use Media Queries to change the layout rules when the screen gets small.

Media Queries

/* When screen is smaller than 768px (Tablets & Phones) */
@media (max-width: 768px) {
  
  /* Make About section stack vertically */
  .about-section {
    flex-direction: column;
    text-align: center;
  }

  /* Change Gallery to 1 column */
  .grid-gallery {
    grid-template-columns: 1fr;
  }
}

🖥️ Interactive Demo: Responsive Preview

Click the buttons below to simulate resizing the browser window. Watch how the Flexbox Header and the Grid Gallery automatically adapt based on the Media Queries!

Logo

✨ Step 4: Adding Polish (Hover Effects & Animations)

Finally, we bring the site to life. Let's make the project cards lift up when the user hovers over them, making the site feel interactive.

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px); /* Lifts the card UP */
  box-shadow: 0 10px 20px rgba(0, 240, 255, 0.3); /* Adds cyan glow */
}

🏋️‍♂️ Practice Project Checklist

Open your code editor. Start building your final project! Make sure you complete these steps:

Step 1: The Structure

Create your index.html and link your style.css. Build the semantic HTML structure: Header, Main (About section, Projects section), Footer.

Refer back to Step 1: The Semantic HTML Structure above. You can copy that exact skeleton to start!

Step 2: The Layout

Apply Flexbox to your Header so the Logo and Links sit on opposite sides. Apply CSS Grid to your Projects section so the cards sit in a 3-column row.

Header: display: flex; justify-content: space-between;
Projects: display: grid; grid-template-columns: 1fr 1fr 1fr;

Step 3: Make it Responsive

Add a media query for max-width: 768px. Inside it, change your Projects grid to 1 column.

@media (max-width: 768px) { .grid-gallery { grid-template-columns: 1fr; } }

🔥 Mini Challenge: The Entrance Animation

Hover effects are cool, but let's make your website truly impressive.

Your Goal: Use @keyframes to create a "Fade In" animation. When the user opens your website, the Header should start completely invisible (opacity 0) and slowly fade into view (opacity 1) over 2 seconds.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

header {
  animation: fadeIn 2s ease;
}

🏆 Final Assignment: Launch It!

Your task is to finish your personal website, customize it, and get it ready for the world to see!

Add your own real text, hobbies, and images.
Customize the colors and typography to match your personality using Google Fonts.
Make sure it doesn't break when you shrink your browser window!
Bonus: Ask your instructor how to upload your code to GitHub Pages so you can share the link with your friends!

🎓 Course Completion Summary

Congratulations! You have completed the entire CSS Fundamentals course. You have evolved from writing plain text files to building fully structured, styled, responsive, and animated modern web applications.

Key takeaways for your developer journey:

Always use Semantic HTML (header, main, section, footer) for a clean structure.
Use Flexbox for 1D alignments (like Navbars).
Use CSS Grid for complex 2D layouts (like Galleries and Page grids).
Always design Responsively using @media queries so mobile users have a great experience.
Use Transitions and Transforms to make your site feel interactive and alive.