HTML & CSS Prep

Complete Certification Exam Reviewer (2025 Edition)

Course Curriculum

HTML Fundamentals & Structure The Box Model & Sizing

Semantic HTML & Elements Layout: Flexbox & Grid

HTML Forms & Multimedia Responsive Web Design

CSS Essentials & Syntax Best Practices & Accessibility

Module 01: HTML Fundamentals
Building the Document Skeleton
 What is HTML?

HTML (HyperText Markup Language) is the standard markup

language for documents designed to be displayed in a web
browser.
It defines the structure, not style. Internet vs. Web
Browsers "read" HTML to render UI. The Internet is the hardware; the Web is the protocol

Latest version: HTML5. (HTTP) that delivers HTML documents across it.
 Anatomy of an Element

An HTML element is defined by a Start Tag, content, and an End

Tag.
Tags: and .

Content: "Hello World".

Nested Elements: Tags can contain other tags.

The HTML Boilerplate

Key Components

DOCTYPE: Tells browser it's HTML5.

html lang: Crucial for accessibility.

head: Metadata (Title, CSS links).

body: Visible content.

Metadata: The Tag

SEO Charset Viewport

The </div> and are vital for search UTF-8 is the standard character Ensures scaling works correctly on
rankings. encoding to support all languages. mobile devices.
 Hierarchy of Headings

HTML offers six levels of headings to indicate section

importance.
Heading 1
H1: Main Page Heading (Limit to 1).
Heading 2
H2-H3: Sub-sections.
Heading 3
H4-H6: Minor details.
Heading usage follows a rigid hierarchy for accessibility/screen
readers.
Lists: Ordered vs Unordered

Unordered Ordered

• Bullet Points 1. Recipe Steps

• Navigation 2. Ranked
• Gallery
Links Items 3. Top Ten Lists
Rankings

Both use the (List Item) tag to wrap children.

 The Power of Attributes

Attribute Element Purpose

href Target URL for a hyperlink.

src Path to the image source.

alt Accessibility text for blind users.

id Any Unique identifier for CSS/JS.

class Any Reusable styling group identifier.

 Anchor Tags & Linking

Links are created using the tag. It is an inline element by

default.
Absolute: [Link]

Relative: ./pages/[Link]
Internal Fragments
target="_blank": Opens in new tab. Use href="#contact" to jump to an element with
id="contact" on the same page.
 Images & Visual Media

The tag is a void element (self-closing).

Requires src and alt.

Responsive: Use width="100%".

Crucial: Always provide descriptive alt text for ADA

compliance.
 Tables: Tabular Data

Tag Meaning

Table Row

Table Header

Table Data
Multimedia: Video & Audio

Video Tag Audio Tag

Supports MP4, WebM, Ogg. Use the controls attribute to Integrates sound files with playback UI. Supports MP3,
show play/pause. WAV, Ogg.

Use multiple tags for fallback browser compatibility.

Block vs Inline Elements

Block Elements Inline Elements

Starts on new line. Takes 100% Fits inside flow. Only takes needed
width. width.
 The Semantic HTML Revolution

Semantic tags describe the purpose of the content, making it

easier for machines and assistive tech to read.
Better Accessibility.

Improved SEO.

Cleaner, more maintainable code.

Essential Semantic Elements

Introductory content, logos, Major navigation link The core content of the
nav. blocks. page.

Thematic grouping of Self-contained Post/News Copyright, sitemap, contact

content. items. info.
 HTML Forms: User Input

Forms bridge the gap between user and server.

Input
action: URL where data goes.
Types:
method: GET or POST.

label: Clickable text for inputs.

Advanced Form Inputs

Date Color Checkbox Radio

Native date Integrated color Select many Select one
picker. wheel. options. option.
 The & <select></div>

Textarea Select & Option

For multi-line text input (comments, bios). Attributes: rows, cols. Drop-down menus. Users pick one or more (with multiple
attribute) from a list.
Form Validation (Built-in)

required minlength pattern

Prevents submission if Minimum character RegEx for complex
empty. count. validation.
 Section Summary: HTML5

Recap
You have learned the skeletal structure of the web. HTML5 focuses on semantics and accessibility. Before moving to CSS, ensure you
understand how tags define content relationships.
Module 02: CSS Essentials
Styling & Visual Design
 What is CSS?

CSS (Cascading Style Sheets) is used to style and layout web

pages.

Separates design from content.

Speeds up site maintenance.

The Cascade
Rules are applied from Top to Bottom, but Specificity can
Allows for responsive layouts.
override the order.
CSS Syntax & Rule Sets

h1 { color: blue; font-size: 12px; }

Selector: h1 (Targets the element) Declaration Block: Contains properties and values.
Three Ways to Apply CSS

Inline Internal External

Used inside tags. High priority, bad Inside </div> tag in . Single page Separate .css file. Best for
practice for large sites. only. consistency and caching.
 The Basic Selectors

Selector Syntax Targets

Element p { ... } Every paragraph tag.

Class .btn { ... } Every element with class="btn".

ID #nav { ... } The unique element with id="nav".

Universal * { ... } Every single element on the page.

 The CSS Box Model

Every element is a rectangular box consisting of four layers.

Content: Text/Image.

Padding: Space around content inside border.

Border: Line around padding.

Margin: Space outside the border.

box-sizing: border-box

Content-Box (Default) Border-Box (Standard)

Width = Content only. Width = Content + Padding +
Padding/Border increase total Border.
size. Size remains consistent.

Industry Standard: * { box-sizing: border-box; }

 Specificity Weights

Browsers use a calculation to determine which rule "wins" a

conflict.
Inline: 1000 points.

ID: 100 points.

Class: 10 points.

Element: 1 point.
Pseudo-classes: Hover & State

:hover :active :focus :visited

Mouse enters element Moment the user When input or link is Link already clicked by
area. clicks. selected. user.
Working with Colors

HEX Code RGB(A)

#FF5733 rgba(255, 87, 51, 0.5)
Base 16 (0-F). Most Red, Green, Blue + Alpha
common. (Transparency).

HSL
hsl(11, 100%, 60%)
Hue, Saturation, Lightness.
Intuitive.
Typography Essentials

font-family: Set font faces (e.g., Serif, Sans-Serif).

line-height: Vertically center text or improve readability.

font-weight: Normal, Bold, or Numeric (100-900).

font-style: Normal, Italic, Oblique.

Units: px vs em vs rem

PX EM REM
Fixed Pixels. Hard to Relative to Parent Font Relative to Root () size. Best for
scale. Size. Accessibility.
Background Properties

background-image: url('[Link]').

background-size: cover or contain.

background-repeat: no-repeat. Linear Gradients

background: linear-gradient(to right, #red, #blue);
background-position: center center.
Module 03: Layout & Flow
Mastering Modern Alignment
The Display Property

block inline inline-block none

New line, full No width/height Inline flow + Removes element from
width. support. Flow text. Width/Height control. document flow.
 Positioning Basics

Value Definition

static Default. Elements flow one after another.

relative Offset from normal position without affecting siblings.

absolute Placed relative to nearest positioned ancestor.

fixed Stuck to the viewport (doesn't scroll).

sticky Toggles between relative and fixed during scroll.

 Z-index & Stacking Context

Controls the vertical order (depth) of elements.

Higher Z-index = On top.

Only works on positioned elements (relative, absolute,

Opacity
fixed).
Can also trigger new stacking contexts, making z-index
tricky.
 Introduction to Flexbox

Flexbox is a one-dimensional layout method for arranging items

in rows or columns.
justify-content: Main Axis alignment.

align-items: Cross Axis alignment.

flex-grow: How much space items take.

Flexbox: Justify Content

flex-start center space-between space-evenly

Align to start of Perfectly centered Maximum space Equal gaps
container. horizontally. between items. everywhere.
 Introduction to CSS Grid

Grid is a two-dimensional system (Rows AND Columns).

grid-template-columns: 1fr 1fr;

gap: 20px; for consistent gutters.

Flexible Units (FR)
grid-area for complex magazine layouts.
The fr unit represents a fraction of the available space in
the grid container.
Flexbox vs Grid: Which to use?

Flexbox Grid
1D: Row OR 2D: Row AND
Column.
Best for: Navbars, aligned lists, small Column.
Best for: Page layouts, photo galleries, complex
components. dashboards.
 Media Queries: Responsive Design

Apply styles only when specific conditions are met.

Mobile First Design.

Breakpoints.

Progressive Enhancement.
 Transitions & Interactivity

Animate changes in CSS properties smoothly.

Hover Effects
Combine :hover with transform: scale(1.1) for a reactive
UI.
Debugging CSS

Inspect Element Outline Trick Validators

Chrome/Firefox DevTools * { outline: 1px solid red; } W3C CSS Validation
(F12). Service.
Best Practices for Exams

Always prefer external stylesheets for performance.

Keep Specificity as low as possible (avoid !important).

Use Semantic HTML over generic divs.

Test accessibility (Color contrast, alt text).

Common Exam "Gotchas"

Margin Collapse Inheritance

Vertical margins of adjacent elements sometimes Fonts/Colors inherit from body, but Borders/Margins do
merge. not.
Final Check: Exam Strategy

Read the DOCTYPE Check Attributes Verify Selectors

Validating modern code starts Small typos in href or src. IDs are #, Classes are
there. .
 Good Luck!
You are ready for the HTML & CSS Certification.

Review complete. Go build something great.

Image Sources
[Link]

Source: [Link]

[Link]
[Link]
Source: [Link]

[Link]

Source: [Link]

[Link]

Source: [Link]

[Link]

Source: [Link]

[Link]

Source: [Link]
Image Sources

[Link]

Source: [Link]