CSS Introduction & The Box Model

Transform plain HTML into styled, beautiful pages

Learning Objectives

Apply CSS to HTML documents
Use proper selectors
Master the box model
Control spacing with padding and margin
Style typography effectively

Topics Covered

1
CSS Syntax and Inclusion Methods
2
Selectors (Element, Class, ID, Universal)
3
Naming Conventions and BEM
4
Colors (Hex, RGB, RGBA, HSL)
5
Backgrounds (color, image, position, size)
6
Typography (font-family, size, weight, line-height)
7
The Box Model (Content, Padding, Border, Margin)
8
Box-sizing Property
9
Display Property (block, inline, inline-block, none)

Assignment

Redesigned About Me Page

Redesign your Week 1 'About Me' page with CSS. Add Google Fonts, proper box model spacing, colors, and make it look professional.

Resources

• Google Fonts
• Box Model Interactive Guide

View All Assignments

Session's Best Member

Ahmed Mohamed

Grade: 92/100✓ Attended

Recognition:

Creative design with excellent typography and spacing

View Full Leaderboard

Session Code & Examples

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ahmed Mohamed - Web Developer</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1 class="header__title">Ahmed Mohamed</h1>
            <nav class="header__nav">
                <a href="#about" class="nav-link">About</a>
                <a href="#skills" class="nav-link">Skills</a>
                <a href="#contact" class="nav-link">Contact</a>
            </nav>
        </div>
    </header>

    <main class="main">
        <section id="about" class="section">
            <div class="container">
                <h2 class="section__title">About Me</h2>
                <div class="about-content">
                    <p class="about-text">Hello! I'm a passionate web developer learning to build amazing, responsive websites.</p>
                    <p class="about-text">I enjoy coding, problem-solving, and creating beautiful user experiences.</p>
                </div>
            </div>
        </section>

        <section id="skills" class="section section--alt">
            <div class="container">
                <h2 class="section__title">My Skills</h2>
                <ul class="skills-list">
                    <li class="skill-item">HTML5 & Semantic Markup</li>
                    <li class="skill-item">CSS3 & Box Model</li>
                    <li class="skill-item">Responsive Design</li>
                    <li class="skill-item">Problem Solving</li>
                </ul>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Ahmed Mohamed. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

Live Preview: CSS Introduction & The Box Model

desktop viewInteractive preview of the final result

Loading preview...

What you'll see:

Modern gradient header design

Google Fonts integration

CSS Grid for skills layout

Box model mastery with proper spacing

Hover effects and transitions

Responsive design principles

A beautifully styled personal website with modern CSS, featuring gradients, shadows, typography, and responsive design using the box model.

Try different device sizes using the buttons above. Click maximize for full-screen preview.

Share & Explore

LinkedIn Post GitHub Repo

Pro tip: Copy the code above and practice building it yourself! Check out the GitHub repo for the complete project files and additional resources.

Previous Session Next Session

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ahmed Mohamed - Web Developer</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> </head> <body> <header class="header"> <div class="container"> <h1 class="header__title">Ahmed Mohamed</h1> <nav class="header__nav"> <a href="#about" class="nav-link">About</a> <a href="#skills" class="nav-link">Skills</a> <a href="#contact" class="nav-link">Contact</a> </nav> </div> </header> <main class="main"> <section id="about" class="section"> <div class="container"> <h2 class="section__title">About Me</h2> <div class="about-content"> <p class="about-text">Hello! I'm a passionate web developer learning to build amazing, responsive websites.</p> <p class="about-text">I enjoy coding, problem-solving, and creating beautiful user experiences.</p> </div> </div> </section> <section id="skills" class="section section--alt"> <div class="container"> <h2 class="section__title">My Skills</h2> <ul class="skills-list"> <li class="skill-item">HTML5 & Semantic Markup</li> <li class="skill-item">CSS3 & Box Model</li> <li class="skill-item">Responsive Design</li> <li class="skill-item">Problem Solving</li> </ul> </div> </section> </main> <footer class="footer"> <div class="container"> <p>© 2024 Ahmed Mohamed. All rights reserved.</p> </div> </footer> </body> </html>