Chapter 24 | Practical Project

HTML CSS Mini Project

Now it is time to combine everything you learned. In this chapter, you will build a complete responsive landing page using HTML structure, CSS styling, cards, buttons, sections and modern layout.

Start Project View Complete Code

Structure

Create header, hero, courses, benefits and contact sections.

Styling

Use colors, typography, spacing, cards and buttons.

Responsive

Make the layout mobile, tablet and desktop friendly.

Final Check

Review SEO, accessibility, design and code quality.

Learning Objectives

After This Chapter, You Will Be Able To

This chapter transforms your HTML and CSS knowledge into a working project.

Build Page

Create a complete landing page from scratch.

Use Sections

Arrange header, hero, cards and footer.

Make Responsive

Use Grid, Flexbox and media queries.

Review Quality

Check design, SEO and accessibility basics.

Mini Project

Project: Course Landing Page

You will create a professional course landing page for an online learning platform.

1 Project Goal

The goal is to design a clean and responsive landing page that promotes courses. The page should include a navigation bar, hero section, course cards, benefits section, contact call-to-action and footer.

Project Theme: AICPE Learning Hub - Skill Courses Landing Page

Learning Outcome: This project will help students understand how real webpages are planned and developed.

AICPE Hub Home Courses Contact

Learn Skills. Build Career.

Professional online course landing page.

HTML

CSS

Project

Project Planning

Development Flow

Professional developers plan the layout before writing full code.

1. Decide Goal

What page are we building and for whom?

2. Plan Sections

Header, hero, courses, benefits, contact and footer.

3. Write HTML

Create meaningful semantic structure.

4. Add CSS

Style layout, colors, cards and responsiveness.

Practice Task: Draw a rough sketch of your page on paper before writing code.

Folder Structure

Recommended Project Structure

Keeping files organized makes projects easier to maintain.

2 Simple Structure

course-landing-page/
├── index.html
├── css/
│ └── style.css
├── images/
│ └── banner.jpg
└── README.txt

3 Page Sections

Header: logo and navigation links
Hero: headline, description and button
Courses: course cards with details
Benefits: why students should join
CTA: contact/enquiry section
Footer: copyright and links

Section	HTML Tag	Purpose
Header	<header>	Logo and navigation
Hero	<section>	Main introduction area
Courses	<section>	Display course cards
Contact	<section>	Call-to-action for enquiry
Footer	<footer>	End information and copyright

Project Features

What This Project Will Include

This mini project uses the major concepts learned in previous chapters.

HTML Features

Semantic tags
Headings and paragraphs
Navigation links
Cards and sections
Contact CTA

CSS Features

CSS variables
Flexbox navigation
Grid course cards
Buttons and shadows
Responsive media query

Quality Features

Viewport meta tag
Readable typography
Mobile-friendly layout
Good contrast
Clean code comments

Complete Code

Build the Mini Project

Run this code and then customize the colors, text and course cards.

Complete HTML + CSS Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AICPE Learning Hub - Course Landing Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

body{
            font-family:Arial, Helvetica, sans-serif;
            background:#f5f9ff;
            color:var(--text);
            line-height:1.6;
        }

.container{
            width:min(90%, 1120px);
            margin:auto;
        }

header{
            background:var(--white);
            box-shadow:0 8px 25px rgba(15,23,42,.08);
            position:sticky;
            top:0;
            z-index:10;
        }

.navbar{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:20px;
            padding:16px 0;
        }

.logo{
            font-size:22px;
            font-weight:900;
            color:var(--primary);
        }

.menu{
            display:flex;
            gap:14px;
            flex-wrap:wrap;
        }

.menu a{
            color:var(--primary);
            text-decoration:none;
            font-weight:700;
        }

.hero{
            background:
                radial-gradient(circle at top right, rgba(214,165,73,.35), transparent 32%),
                linear-gradient(135deg,var(--primary),var(--secondary),var(--teal));
            color:var(--white);
            padding:80px 0;
        }

.hero-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:35px;
            align-items:center;
        }

.hero h1{
            font-size:clamp(36px, 6vw, 64px);
            line-height:1.05;
            margin-bottom:18px;
        }

.hero p{
            font-size:18px;
            color:#eaf4ff;
            margin-bottom:24px;
        }

.btn{
            display:inline-block;
            background:var(--accent);
            color:var(--primary);
            padding:13px 22px;
            border-radius:999px;
            text-decoration:none;
            font-weight:900;
            box-shadow:0 10px 25px rgba(214,165,73,.25);
            transition:all .3s ease;
        }

.btn:hover{
            transform:translateY(-4px);
            background:#f5c15d;
        }

.hero-card{
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.25);
            padding:28px;
            border-radius:var(--radius);
            backdrop-filter:blur(8px);
        }

.hero-card h2{
            margin-bottom:12px;
        }

section{
            padding:70px 0;
        }

.section-title{
            text-align:center;
            max-width:760px;
            margin:0 auto 36px;
        }

.section-title h2{
            color:var(--primary);
            font-size:36px;
            margin-bottom:10px;
        }

.courses{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
            gap:22px;
        }

.course-card{
            background:var(--white);
            padding:26px;
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            border-top:5px solid var(--accent);
            transition:all .3s ease;
        }

.course-card:hover{
            transform:translateY(-8px);
        }

.course-card h3{
            color:var(--primary);
            margin-bottom:10px;
        }

.benefits{
            background:var(--soft);
        }

.benefit-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:20px;
        }

.benefit{
            background:var(--white);
            padding:24px;
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }

.benefit strong{
            color:var(--primary);
            display:block;
            margin-bottom:8px;
        }

.cta{
            background:linear-gradient(135deg,var(--primary),#0f172a);
            color:var(--white);
            text-align:center;
            border-radius:30px;
            padding:50px 25px;
        }

.cta h2{
            font-size:36px;
            margin-bottom:12px;
        }

.cta p{
            color:#d9eaff;
            margin-bottom:22px;
        }

footer{
            background:#0f172a;
            color:#cbd5e1;
            text-align:center;
            padding:25px;
        }

@media(max-width:800px){
            .navbar{
                flex-direction:column;
                text-align:center;
            }

.hero-grid{
                grid-template-columns:1fr;
                text-align:center;
            }

.hero{
                padding:55px 0;
            }

.section-title h2{
                font-size:30px;
            }
        }
    </style>
</head>
<body>

<header>
    <div class="container navbar">
        <div class="logo">AICPE Learning Hub</div>

<nav class="menu">
            <a href="#courses">Courses</a>
            <a href="#benefits">Benefits</a>
            <a href="#contact">Contact</a>
        </nav>
    </div>
</header>

<section class="hero">
    <div class="container hero-grid">
        <div>
            <h1>Learn Skills. Build Your Career.</h1>
            <p>
                Explore practical courses in HTML, CSS, MS Office, Digital Skills and career-ready technologies.
            </p>
            <a href="#courses" class="btn">Explore Courses</a>
        </div>

<div class="hero-card">
            <h2>Why Start Today?</h2>
            <p>
                Skill-based learning helps students, job seekers and entrepreneurs create new opportunities.
            </p>
        </div>
    </div>
</section>

<section id="courses">
    <div class="container">
        <div class="section-title">
            <h2>Popular Skill Courses</h2>
            <p>Choose practical courses designed for learning, career growth and self-employment.</p>
        </div>

<div class="courses">
            <div class="course-card">
                <h3>HTML with CSS</h3>
                <p>Learn to create beautiful and responsive webpages from scratch.</p>
            </div>

<div class="course-card">
                <h3>MS Excel</h3>
                <p>Master data entry, formulas, charts and office productivity skills.</p>
            </div>

<div class="course-card">
                <h3>Digital Marketing</h3>
                <p>Understand online promotion, social media, SEO and business growth.</p>
            </div>
        </div>
    </div>
</section>

<section id="benefits" class="benefits">
    <div class="container">
        <div class="section-title">
            <h2>Student Benefits</h2>
            <p>Our learning approach focuses on practical knowledge and confidence building.</p>
        </div>

<div class="benefit-grid">
            <div class="benefit">
                <strong>Practical Learning</strong>
                Learn by doing real examples and projects.
            </div>

<div class="benefit">
                <strong>Career Focused</strong>
                Build skills useful for jobs, freelancing and business.
            </div>

<div class="benefit">
                <strong>Beginner Friendly</strong>
                Simple explanations for fresh learners.
            </div>
        </div>
    </div>
</section>

<section id="contact">
    <div class="container">
        <div class="cta">
            <h2>Ready to Start Learning?</h2>
            <p>Join AICPE Learning Hub and take your first step toward practical skill development.</p>
            <a href="#" class="btn">Contact Now</a>
        </div>
    </div>
</section>

</body>
</html>

Project Preview Browser result

Practice Task: Add two more course cards, change the brand colors, and add one more benefit card.

Final Checklist

Before You Submit the Project

Use this checklist to improve quality and confidence.

Code Checklist

HTML structure is clean
CSS is properly formatted
Sections have clear class names
No missing closing tags
Links are working

Design Checklist

Good color contrast
Readable font size
Consistent spacing
Cards are aligned
Buttons look clickable

Responsive Checklist

Works on mobile
Viewport meta tag added
Grid adjusts properly
Text does not overflow
Menu is readable on small screens

Next Improvement: After this project, add real images, enquiry form, animations and a separate CSS file.

Quick Revision

Remember These Points

Revise these before moving to Chapter 25.

Project Planning

Plan sections before writing code.

Semantic HTML

Use meaningful tags like header, section and footer.

CSS Variables

Use variables for consistent colors and design values.

Grid and Flexbox

Use Grid for cards and Flexbox for navigation alignment.

Responsive Design

Use media queries for mobile-friendly layouts.

Final Testing

Check design, links, text, responsiveness and readability.

Protected Learning Content

HTML CSS Mini Project

Structure

Styling

Responsive

Final Check

After This Chapter, You Will Be Able To

Build Page

Use Sections

Make Responsive

Review Quality

Project: Course Landing Page

1 Project Goal

Learn Skills. Build Career.

Development Flow

1. Decide Goal

2. Plan Sections

3. Write HTML

4. Add CSS

Recommended Project Structure

2 Simple Structure

3 Page Sections

What This Project Will Include

HTML Features

CSS Features

Quality Features

Build the Mini Project

Before You Submit the Project

Code Checklist

Design Checklist

Responsive Checklist

Project Understanding Check

1. Which section usually contains logo and navigation?

2. Which CSS layout is used for responsive course cards in this project?

3. Which tag is important for mobile responsiveness?

4. Which CSS feature stores reusable design values?

5. What should be checked before submitting a project?

Remember These Points

Project Planning

Semantic HTML

CSS Variables

Grid and Flexbox

Responsive Design

Final Testing