Day 10: Final Project

What You Will Learn Today

• How to bring together all 10 days of CSS knowledge into a real project
• CSS design best practices
• Practical styling techniques for a portfolio site

---

Project Overview

In this final chapter, you will apply every CSS concept you have learned to style a portfolio website. This is the same HTML structure from the Learn HTML in 10 Days book, now brought to life with CSS.

flowchart TB
    subgraph Pages["Pages to Style"]
        Home["index.html<br>Home Page"]
        About["about.html<br>About Me"]
        Works["works.html<br>Projects"]
        Contact["contact.html<br>Contact"]
        CSS["styles.css<br>Shared Styles"]
    end
    CSS --> Home
    CSS --> About
    CSS --> Works
    CSS --> Contact
    style CSS fill:#8b5cf6,color:#fff
    style Home fill:#3b82f6,color:#fff
    style About fill:#3b82f6,color:#fff
    style Works fill:#3b82f6,color:#fff
    style Contact fill:#3b82f6,color:#fff

---

CSS Design: Variables and Reset

/* ========================================
   CSS Variables & Reset
   ======================================== */

:root {
    /* Colors */
    --color-primary: #3b82f6;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #93c5fd;

    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-500: #64748b;
    --color-gray-700: #334155;
    --color-gray-900: #0f172a;

    /* Typography */
    --font-sans: "Inter", system-ui, sans-serif;
    --font-mono: "Fira Code", monospace;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Borders */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* Layout */
    --max-width: 1200px;
}

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

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-gray-900);
    background: var(--color-gray-50);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
}

ul, ol {
    list-style: none;
}

---

Navigation

/* ========================================
   Navigation
   ======================================== */

.navbar {
    background: white;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-md) var(--space-lg);
}

.navbar .logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.nav-links {
    display: flex;
    gap: var(--space-lg);
}

.nav-links a {
    color: var(--color-gray-500);
    font-weight: 500;
    padding: var(--space-xs) 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

@media (max-width: 767px) {
    .nav-links {
        gap: var(--space-md);
        font-size: 0.875rem;
    }
}

---

Hero Section

/* ========================================
   Hero Section
   ======================================== */

.hero {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
    color: white;
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.hero .subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    opacity: 0.9;
    margin-bottom: var(--space-xl);
}

.hero .cta-button {
    display: inline-block;
    background: white;
    color: var(--color-primary);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1.125rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    color: var(--color-primary-dark);
}

---

Skills Table

/* ========================================
   Skills Table
   ======================================== */

.section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-lg);
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-xl);
    text-align: center;
}

.skills-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.skills-table th,
.skills-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
}

.skills-table thead {
    background: var(--color-gray-900);
    color: white;
}

.skills-table tbody tr {
    border-bottom: 1px solid var(--color-gray-200);
    transition: background-color 0.2s ease;
}

.skills-table tbody tr:hover {
    background: var(--color-gray-50);
}

.skills-table tbody tr:last-child {
    border-bottom: none;
}

---

Card Grid

/* ========================================
   Card Grid
   ======================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: var(--space-lg);
}

.card-body h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.card-body p {
    color: var(--color-gray-500);
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
}

.card-tag {
    display: inline-block;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    margin-right: var(--space-xs);
}

---

Contact Form

/* ========================================
   Forms
   ======================================== */

.form {
    max-width: 640px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-gray-700);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-primary {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: var(--space-md) var(--space-xl);
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

---

Footer

/* ========================================
   Footer
   ======================================== */

.footer {
    background: var(--color-gray-900);
    color: var(--color-gray-500);
    padding: var(--space-2xl) var(--space-lg);
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.footer a {
    color: var(--color-gray-300);
}

.footer a:hover {
    color: white;
}

@media (max-width: 767px) {
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

---

Accessibility

/* ========================================
   Accessibility
   ======================================== */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

---

Review: What You Learned in 10 Days

flowchart TB
    subgraph Journey["Your 10-Day CSS Journey"]
        D1["Day 1<br>CSS Basics"]
        D2["Day 2<br>Selectors"]
        D3["Day 3<br>Box Model"]
        D4["Day 4<br>Typography"]
        D5["Day 5<br>Colors & BGs"]
        D6["Day 6<br>Flexbox"]
        D7["Day 7<br>Grid"]
        D8["Day 8<br>Responsive"]
        D9["Day 9<br>Animations"]
        D10["Day 10<br>Final Project"]
    end
    D1 --> D2 --> D3 --> D4 --> D5
    D5 --> D6 --> D7 --> D8 --> D9 --> D10
    style D1 fill:#3b82f6,color:#fff
    style D2 fill:#3b82f6,color:#fff
    style D3 fill:#8b5cf6,color:#fff
    style D4 fill:#8b5cf6,color:#fff
    style D5 fill:#22c55e,color:#fff
    style D6 fill:#22c55e,color:#fff
    style D7 fill:#f59e0b,color:#fff
    style D8 fill:#f59e0b,color:#fff
    style D9 fill:#ef4444,color:#fff
    style D10 fill:#ef4444,color:#fff

Day	Topic	Key Concepts
1	CSS Basics	Syntax, selectors, colors
2	Selectors & Cascade	Specificity, inheritance, pseudo-classes
3	Box Model	padding, margin, border, display
4	Typography	Fonts, rem units, Google Fonts
5	Colors & Backgrounds	Gradients, shadows, opacity
6	Flexbox	One-dimensional layout
7	CSS Grid	Two-dimensional layout
8	Responsive Design	Media queries, clamp()
9	Animations	transition, transform, @keyframes
10	Final Project	Portfolio site styling

---

Next Steps

1. JavaScript

Combine CSS with JavaScript to build interactive user interfaces.

2. CSS Frameworks

Speed up development with Tailwind CSS or Bootstrap.

3. CSS Preprocessors

Use Sass for advanced features like variables, mixins, and nesting.

4. CSS Architecture

Learn BEM or CSS Modules for managing styles in large-scale projects.

---

Summary

Key Takeaways

1. CSS custom properties establish a consistent design system
2. Flexbox + Grid together handle any layout challenge
3. Mobile-first design ensures responsiveness from the ground up
4. prefers-reduced-motion is essential for accessibility
5. CSS reaches its full potential when combined with HTML and JavaScript

---

Exercises

Exercise 1: Basics

Style your own portfolio site using the patterns from this chapter.

Exercise 2: Intermediate

Add dark mode support using prefers-color-scheme: dark.

Challenge

Build a complete portfolio that checks every box below:

• CSS custom properties for the color palette
• Responsive design (mobile, tablet, desktop)
• Hover animations on cards
• Focus styles with :focus-visible
• prefers-reduced-motion support
• Google Fonts integration
• Styled contact form

---

References

• MDN Web Docs - CSS
• CSS-Tricks
• web.dev - Learn CSS
• Can I use...

---

Congratulations! You have completed the 10-day CSS course. With HTML and CSS under your belt, you can now build both the structure and the visual design of any web page. The next step is learning JavaScript to add interactive behavior to your sites!