HTML and CSS Web Design Notes
Original 10-page beginner web development notes
This is an original student-friendly revision document prepared for learning, classroom discussion, and
quick review. The notes use simple explanations, examples, and summary points so that beginners can
revise important ideas without reading a full textbook.
Contents
Page Topic
2 HTML Introduction
3 Text Tags
4 Links and Images
5 Lists and Tables
6 Forms Basics
7 CSS Introduction
8 Selectors and Properties
9 Box Model
10 Flexbox Basics
11 Responsive Design
Page 1
1. HTML Introduction
HTML means HyperText Markup Language. It is used to create the structure of web pages. HTML uses
tags to describe headings, paragraphs, links, images, tables, and forms.
A basic HTML page usually contains doctype, html, head, title, and body sections. The body section
contains visible content shown in the browser.
Quick practice / recall: Create a file named [Link] and add one heading and one paragraph.
Page 2
2. Text Tags
Headings are written using h1 to h6 tags. Paragraphs use the p tag. Bold and important text can be
represented using strong, while emphasized text can be written using em.
Good web pages use headings in correct order. Do not use headings only for size; use them to show
structure.
Quick practice / recall: Write examples for h1, h2, p, strong, and em.
Page 3
3. Links and Images
The anchor tag creates links using the href attribute. Images are added using the img tag with src and alt
attributes. The alt text helps accessibility and explains the image when it cannot load.
Links can point to another page, another website, an email address, or a section on the same page.
Quick practice / recall: Add one link and one image with proper alt text.
Page 4
4. Lists and Tables
Ordered lists use ol and unordered lists use ul. Each item is written using li. Tables use table, tr, th, and td
tags to organize row and column data.
Tables should be used for tabular information, not for page layout. CSS should be used for visual layout.
Quick practice / recall: Create a list of three subjects and a two-column table.
Page 5
5. Forms Basics
Forms collect user input. Common form controls include text boxes, email inputs, radio buttons,
checkboxes, dropdowns, and buttons.
Important attributes include name, value, placeholder, required, and type. Form validation improves user
experience.
Quick practice / recall: Create a student form with name, email, and submit button.
Page 6
6. CSS Introduction
CSS means Cascading Style Sheets. It controls the appearance of web pages, including colors, spacing,
font size, borders, and layout.
CSS can be written inline, inside a style tag, or in an external .css file. External CSS is best for larger
projects.
Quick practice / recall: Connect an external [Link] file to [Link].
Page 7
7. Selectors and Properties
CSS selectors target HTML elements. Common selectors include element selectors, class selectors, and
id selectors. A class can be reused many times, but an id should be unique.
Common CSS properties include color, background-color, margin, padding, border, font-size, and
text-align.
Quick practice / recall: Write one example for class selector and id selector.
Page 8
8. Box Model
The CSS box model contains content, padding, border, and margin. Padding is space inside the border.
Margin is space outside the border.
Understanding the box model helps fix spacing problems and improve page layout.
Quick practice / recall: Draw the box model and label its four parts.
Page 9
9. Flexbox Basics
Flexbox is used to align items easily in one direction. The parent container uses display: flex. Useful
properties include justify-content, align-items, flex-direction, and gap.
Flexbox is helpful for navigation bars, cards, and simple responsive layouts.
Quick practice / recall: Create three cards in one row using display flex.
Page 10
10. Responsive Design
Responsive design makes a website look good on mobile, tablet, and desktop screens. It uses flexible
widths, media queries, and clean spacing.
A mobile-friendly website is important because many users access the internet using phones.
Quick practice / recall: Write the definition once, solve one small example, and revise the formula or
command again after a short break.
Page 11