Chapter 25 | Final Revision

Course Revision & Final Practice

This chapter revises the complete HTML with CSS course and gives you final practice tasks, interview-style questions, project review points and a final confidence check.

Start Revision Final Practice

HTML Revision

Revise structure, tags, forms, media and semantic HTML.

CSS Revision

Revise styling, box model, typography, colors and effects.

Layout Revision

Revise Flexbox, Grid and responsive web design.

Final Practice

Practice with one complete responsive page task.

Revision Map

Complete Course Revision Path

Use this map to revise the full course in a structured manner.

Step 1

Revise HTML structure, tags, forms and semantic elements.

Step 2

Revise CSS selectors, colors, typography and box model.

Step 3

Revise Flexbox, Grid and responsive design.

Step 4

Build, test and improve one complete webpage project.

Revision Tip: Do not only read the notes. Rebuild small examples by typing the code yourself.

HTML Revision

Important HTML Concepts

HTML creates the structure and meaning of the webpage.

Concept	Purpose	Important Examples
Document Structure	Creates the basic page skeleton	DOCTYPE, html, head, body
Text Tags	Displays readable content	h1-h6, p, strong, em
Links and Images	Adds navigation and visuals	a, img, href, src, alt
Lists and Tables	Organizes information	ul, ol, li, table, tr, td
Forms	Collects user input	form, input, label, textarea, select
Semantic Tags	Improves meaning and SEO	header, nav, section, article, footer

Must Remember Tags

Accessibility Basics

Use alt text for images
Use labels with form inputs
Use proper heading order
Use meaningful link text

SEO Basics

Use title and meta description
Use one clear H1
Use semantic sections
Keep page content readable

CSS Revision

Important CSS Concepts

CSS controls design, spacing, colors, typography and visual experience.

1 CSS Rule Format

selector {
property: value;
}

The selector chooses the element. The property decides what to change. The value decides how it changes.

2 CSS Box Model

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #0d6efd;
  margin: 20px;
  box-sizing: border-box;
}

CSS Area	Properties	Use
Colors	color, background, border-color	Branding and readability
Typography	font-family, font-size, line-height	Readable text design
Spacing	margin, padding, gap	Clean layout breathing space
Borders	border, border-radius	Cards, buttons and boxes
Effects	box-shadow, transition, transform	Premium visual experience
Variables	:root, --variable, var()	Reusable design system

Layout Revision

Flexbox, Grid and Responsive Design

Modern webpages need flexible and responsive layouts.

Flexbox

Best for one-dimensional layouts like menu, button row and aligned items.

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

CSS Grid

Best for two-dimensional layouts like galleries, cards and page structures.

.cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

Responsive Design

Best for making pages mobile, tablet and desktop friendly.

@media(max-width:768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Simple Decision: Use Flexbox for alignment in one direction. Use Grid for full section layouts with rows and columns.

Final Practice

Build One Complete Practice Page

Use this final practice task to test your understanding.

Final Practice Starter Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Final HTML CSS Practice 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.7;
        }

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

header{
            background:var(--white);
            box-shadow:var(--shadow);
            position:sticky;
            top:0;
            z-index:10;
        }

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

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

.nav a{
            color:var(--primary);
            text-decoration:none;
            margin-left:14px;
            font-weight:bold;
        }

.hero{
            padding:70px 0;
            background:linear-gradient(135deg,var(--primary),#0d6efd);
            color:white;
            text-align:center;
        }

.hero h1{
            font-size:clamp(34px,6vw,60px);
            margin-bottom:14px;
        }

.hero p{
            max-width:720px;
            margin:0 auto 24px;
            color:#d9eaff;
        }

.btn{
            display:inline-block;
            background:var(--accent);
            color:var(--primary);
            padding:12px 20px;
            border-radius:999px;
            text-decoration:none;
            font-weight:900;
            transition:.3s;
        }

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

section{
            padding:60px 0;
        }

.section-title{
            text-align:center;
            margin-bottom:32px;
        }

.section-title h2{
            color:var(--primary);
            font-size:34px;
        }

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

.card{
            background:var(--white);
            padding:24px;
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            border-top:5px solid var(--accent);
        }

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

.contact-box{
            background:var(--primary);
            color:white;
            border-radius:26px;
            padding:40px;
            text-align:center;
        }

.contact-box p{
            color:#d9eaff;
            margin-bottom:18px;
        }

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

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

.nav a{
                display:inline-block;
                margin:5px;
            }

.hero{
                padding:50px 0;
            }
        }
    </style>
</head>
<body>

<header>
    <div class="container nav">
        <div class="logo">My Skill Page</div>
        <nav>
            <a href="#skills">Skills</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </div>
</header>

<section class="hero">
    <div class="container">
        <h1>HTML CSS Final Practice</h1>
        <p>Create a clean, responsive and professional webpage using everything you learned.</p>
        <a href="#skills" class="btn">Start Exploring</a>
    </div>
</section>

<section id="skills">
    <div class="container">
        <div class="section-title">
            <h2>Skills Learned</h2>
            <p>Important web design skills covered in this course.</p>
        </div>

<div class="cards">
            <div class="card">
                <h3>HTML Structure</h3>
                <p>Headings, paragraphs, images, links, forms and semantic tags.</p>
            </div>

<div class="card">
                <h3>CSS Design</h3>
                <p>Colors, spacing, typography, borders, shadows and effects.</p>
            </div>

<div class="card">
                <h3>Responsive Layout</h3>
                <p>Flexbox, Grid, media queries and mobile-friendly design.</p>
            </div>
        </div>
    </div>
</section>

<section id="projects">
    <div class="container">
        <div class="section-title">
            <h2>Practice Projects</h2>
            <p>Build projects to improve your confidence.</p>
        </div>

<div class="cards">
            <div class="card">
                <h3>Landing Page</h3>
                <p>Create a course or business landing page.</p>
            </div>

<div class="card">
                <h3>Portfolio Page</h3>
                <p>Create your personal portfolio page.</p>
            </div>

<div class="card">
                <h3>Contact Page</h3>
                <p>Create a modern contact section with form design.</p>
            </div>
        </div>
    </div>
</section>

<section id="contact">
    <div class="container">
        <div class="contact-box">
            <h2>Ready for Next Project?</h2>
            <p>Improve this page by adding images, icons, animations and a working form.</p>
            <a href="#" class="btn">Continue Practice</a>
        </div>
    </div>
</section>

</body>
</html>

Final Practice Preview Browser result

Final Task: Add your own course name, add 3 new cards, change the theme colors, add a form, and test the page on mobile view.

Interview Style Questions

Practice These Questions

These questions help students prepare for basic web design discussions and viva.

HTML Questions

What is HTML and why is it used?
What is the difference between head and body?
Why is alt text important for images?
What are semantic tags?
What is the use of form, input and label?
Why should we use one H1 on a page?

CSS Questions

What is CSS and why is it used?
What is the CSS box model?
What is the difference between class and ID?
What is Flexbox used for?
What is CSS Grid used for?
What are media queries?

Final Project Checklist

Before Completing This Course

Use this checklist to check your readiness.

HTML Readiness

I can create a proper HTML document
I can use headings, paragraphs and links
I can add images with alt text
I can create tables and forms
I can use semantic tags

CSS Readiness

I can use selectors
I understand margin and padding
I can style text, colors and backgrounds
I can create cards and buttons
I can use transitions and variables

Project Readiness

I can build a landing page
I can use Flexbox and Grid
I can make a page responsive
I can test mobile layout
I can improve design step-by-step

Congratulations!

You have completed the main learning journey of HTML with CSS. Continue practicing by building portfolio pages, landing pages, forms, dashboards and real website sections.

HTML CSS Flexbox Grid Responsive Design Mini Project

Protected Learning Content

Course Revision & Final Practice

HTML Revision

CSS Revision

Layout Revision

Final Practice

Complete Course Revision Path

Step 1

Step 2

Step 3

Step 4

Important HTML Concepts

Must Remember Tags

Accessibility Basics

SEO Basics

Important CSS Concepts

1 CSS Rule Format

2 CSS Box Model

Flexbox, Grid and Responsive Design

Flexbox

CSS Grid

Responsive Design

Build One Complete Practice Page

Practice These Questions

HTML Questions

CSS Questions

Before Completing This Course

HTML Readiness

CSS Readiness

Project Readiness

Course Completion Quiz

1. HTML is mainly used for:

2. CSS is mainly used for:

3. Which CSS layout is best for one-dimensional alignment?

4. Which CSS layout is best for rows and columns?

5. Which rule helps apply CSS for smaller screens?

6. Which CSS property creates rounded corners?

7. CSS variables are accessed using:

8. Which attribute improves image accessibility?

Congratulations!