HTML5 & CSS3

Build beautiful, responsive web interfaces

4 Lessons Self-paced Free

Track Progress

Your journey through HTML5 & CSS3

0 / 4 lessons 0%

Beginner

HTML Structure

Semantic HTML and document structure

25 min

Code Example

<!-- Semantic HTML5 Structure -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
</head>
<body>
    <header>
        <nav>
            <a href="#home">Home</a>
            <a href="#about">About</a>
        </nav>
    </header>
    
    <main>
        <section id="hero">
            <h1>Welcome to Th7media</h1>
            <p>Developer. Designer. Educator.</p>
        </section>
        
        <article>
            <h2>Latest Project</h2>
            <p>Building amazing web experiences...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 Th7media</p>
    </footer>
</body>
</html>

Beginner

CSS Flexbox

Modern layout with Flexbox

40 min

Code Example

/* Flexbox Container */
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 2rem;
}

/* Flex Items */
.item {
    flex: 1;
    min-width: 200px;
}

.item-featured {
    flex: 2;
    order: -1;
}

/* Centering with Flexbox */
.center-everything {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Intermediate

CSS Grid

Two-dimensional layouts made easy

50 min

Code Example

/* CSS Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    padding: 2rem;
}

/* Named Grid Areas */
.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 250px 1fr 1fr;
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Intermediate

Animations & Transitions

Bring your designs to life

45 min

Code Example

/* Smooth Transitions */
.button {
    background: #333;
    color: white;
    padding: 12px 24px;
    transition: all 0.3s ease;
}

.button:hover {
    background: #555;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Keyframe Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animated-element {
    animation: slideIn 0.6s ease-out forwards;
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.pulse {
    animation: pulse 2s infinite;
}

Explore Other Tracks

🐍

Python Mastery

4 lessons

⚡

JavaScript Essentials

4 lessons