Building a Basic Webpage

· CSS3 Module

A webpage is like building a small digital house.
HTML creates the structure of the house.
CSS paints the walls, arranges the furniture, adjusts the lighting, and makes the house beautiful and responsive.

In this project, students will use the most important beginner CSS concepts together in one real webpage.

Project Goal

We will build a simple responsive webpage containing:

  • Header
  • Navigation Menu
  • Hero Section
  • About Section
  • Services Cards
  • Footer

While building it, students will learn:

  • Colors
  • Typography
  • Box Model
  • Layouts
  • Responsive Styling

Final Output Idea

The webpage will look like this:

--------------------------------
LOGO      Home About Contact
--------------------------------

Welcome to My Website
Simple and Beautiful Design
[ Learn More ]

--------------------------------
About Us
Some information here...
--------------------------------

Service Cards
[Card] [Card] [Card]

--------------------------------
Footer
--------------------------------

Step 1 – Create HTML Structure

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Basic Webpage Project</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <!-- Header -->
    <header>
        <h1>My Website</h1>

        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <h2>Welcome to My Website</h2>
        <p>Learning CSS step by step with real projects.</p>

        <button>Learn More</button>
    </section>

    <!-- About Section -->
    <section class="about">
        <h2>About Us</h2>

        <p>
            We create modern and responsive websites
            using HTML and CSS.
        </p>
    </section>

    <!-- Services -->
    <section class="services">

        <div class="card">
            <h3>Web Design</h3>
            <p>Beautiful website designs.</p>
        </div>

        <div class="card">
            <h3>Development</h3>
            <p>Responsive web development.</p>
        </div>

        <div class="card">
            <h3>SEO</h3>
            <p>Improve website ranking.</p>
        </div>

    </section>

    <!-- Footer -->
    <footer>
        <p>© 2026 My Website</p>
    </footer>

</body>
</html>

Logic of HTML Structure

HTML is the skeleton of the webpage.

Each section has a purpose:

Tag Purpose
<header> Top area
<nav> Navigation links
<section> Different webpage parts
<div> Container
<footer> Bottom area

Step 2 – Add CSS Styling

1. Colors

Colors create mood and identity.

Real Life Logic

Imagine:

  • White walls → clean feeling
  • Dark colors → professional feeling
  • Bright colors → energetic feeling

Websites also use colors to create emotion.

CSS Code

body{
    background-color: #f4f4f4;
    color: #333;
}

Explanation

Property Meaning
background-color Page background
color Text color

Hero Section Colors

.hero{
    background-color: #0077ff;
    color: white;
}

Logic

Blue is commonly used because it represents:

  • Trust
  • Technology
  • Professionalism

That is why many companies use blue colors.

Examples:

  • Facebook
  • LinkedIn
  • PayPal

2. Typography

Typography means styling text.

Good typography improves readability.

Font Family

body{
    font-family: Arial, sans-serif;
}

Logic

Different fonts create different feelings.

Font Type Feeling
Serif Traditional
Sans-serif Modern
Cursive Decorative

Font Size

h1{
    font-size: 40px;
}

Logic

Large text grabs attention.

Hierarchy helps users understand importance.

Example:

  • Big heading = Important
  • Small paragraph = Supporting text

Line Height

p{
    line-height: 1.6;
}

Logic

More spacing between lines improves reading comfort.

Like Quran pages with proper spacing are easier to read beautifully and calmly.

3. Box Model

Every HTML element is a box.

This is one of the most important CSS concepts.

Box Model Structure

-----------------
|   Margin      |
|  ------------ |
|  | Border   | |
|  | Padding  | |
|  | Content  | |
|  ------------ |
-----------------

Card Styling

.card{
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 10px;
}

Explanation

Property Purpose
padding Space inside
border Box outline
margin Space outside

Real Life Example

Think about a gift box:

Part Example
Content Gift
Padding Bubble wrap
Border Box
Margin Space between boxes

4. Layouts

Layouts arrange elements on the page.

Without layouts, everything appears messy.

Flexbox Layout

.services{
    display: flex;
    gap: 20px;
}

Logic

Flexbox arranges items in rows or columns.

Like students sitting in a classroom row.

Gap Property

gap: 20px;

Adds spacing between cards.

Without gap:

[Card][Card][Card]

With gap:

[Card]   [Card]   [Card]

Cleaner and more professional.

Header Layout

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Explanation

Property Purpose
justify-content Horizontal spacing
align-items Vertical alignment

Real Example

Like arranging:

  • Logo on left
  • Menu on right

Used in almost every modern website.

Examples:

  • Amazon
  • Apple
  • Netflix

5. Responsive Styling

Responsive design means:

Website adjusts for all screen sizes.

  • Mobile
  • Tablet
  • Laptop
  • Desktop

Problem Without Responsive Design

Desktop:

[Card] [Card] [Card]

Mobile:

[Card][Card][Card]

Everything becomes squeezed.

Solution Using Media Query

@media(max-width: 768px){

    .services{
        flex-direction: column;
    }

    header{
        flex-direction: column;
    }

}

Logic

When screen width becomes smaller than 768px:

  • Cards move vertically
  • Header stacks properly

Real Life Example

Like folding a dining table to fit a small room.

Responsive websites adapt intelligently.

Complete CSS Code

/* Body */

body{
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

/* Header */

header{
    background-color: white;
    padding: 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a{
    text-decoration: none;
    margin-left: 15px;
    color: black;
}

/* Hero */

.hero{
    background-color: #0077ff;
    color: white;
    text-align: center;
    padding: 60px 20px;
}

button{
    padding: 10px 20px;
    border: none;
    background-color: white;
    color: #0077ff;
    cursor: pointer;
}

/* About */

.about{
    padding: 40px 20px;
}

/* Services */

.services{
    display: flex;
    gap: 20px;
    padding: 20px;
}

.card{
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    flex: 1;
}

/* Footer */

footer{
    background-color: black;
    color: white;
    text-align: center;
    padding: 15px;
}

/* Responsive */

@media(max-width:768px){

    header{
        flex-direction: column;
    }

    .services{
        flex-direction: column;
    }

}

What Students Learn from This Project

Concept Skills Learned
Colors Professional design styling
Typography Better readability
Box Model Proper spacing
Layouts Organizing webpage sections
Responsive Design Mobile-friendly websites

Real Industry Importance

Every real website uses these concepts.

Examples:

Website Feature CSS Concept
Navigation Bar Flexbox
Product Cards Box Model
Mobile Design Media Queries
Buttons Colors + Typography
Website Structure Layouts

Common Beginner Mistakes

Mistake Solution
No spacing Use padding and margin
Too many colors Use 2–3 main colors
Small text Increase font-size
Broken mobile layout Use media queries
Crowded design Use gap property

Best Practices

1. Keep Design Simple

Simple websites look more professional.

2. Use Consistent Colors

Choose:

  • Primary color
  • Secondary color
  • Neutral background

3. Maintain Spacing

Whitespace improves beauty and readability.

4. Make Mobile Friendly

Today most users browse from phones.

Responsive design is no longer optional.

Learning Outcome

After completing this project, students will be able to:

  • Build a complete basic webpage
  • Apply CSS styling professionally
  • Use layouts effectively
  • Create responsive designs
  • Understand real-world frontend structure
  • Combine multiple CSS concepts into one project

Final Thought

CSS is not just decoration.
It is the art of structure, balance, rhythm, and usability.

A good webpage speaks silently:

  • clean spacing,
  • calm colors,
  • readable typography,
  • graceful responsiveness.

That quiet elegance is the signature of a skilled web designer.

List of Modules

Anas Khan
Written by