HTML & CSS – Complete Web Development
Notes
Original educational reference document
Prepared for study and reference purposes
1. Web Development Basics
A website is commonly built from three layers: HTML provides structure, CSS controls presentation, and
JavaScript adds behavior. A browser requests resources from a web server and renders the resulting
page. Understanding the separation between structure and presentation makes websites easier to
maintain.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
2. HTML Document Structure
An HTML document normally contains a doctype declaration and an html element with head and body
sections. The head can contain metadata, the page title and links to stylesheets. The body contains
visible content such as headings, paragraphs, images, navigation and forms.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
3. Text and Links
Headings organize content into a hierarchy, while paragraphs contain normal text. Anchor elements
create links to other pages or resources. Good link text should describe the destination rather than
relying on vague phrases. Proper heading order also improves accessibility and document navigation.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
4. Images and Media
Images are embedded with the img element and should have meaningful alternative text when
appropriate. Width and height can help the browser reserve layout space. Audio and video elements
support multimedia content. Responsive media should adapt to different screen sizes without breaking
the page layout.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
5. Lists, Tables and Forms
Unordered and ordered lists represent groups of related items. Tables should be used for tabular data,
with clear headings. Forms collect information from users using controls such as text fields, email fields,
radio buttons, checkboxes and select menus. Labels make form controls easier to understand and use.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
6. CSS Selectors
CSS selectors determine which HTML elements receive styles. Common selectors include element
selectors, class selectors and ID selectors. Attribute, descendant and pseudo-class selectors provide
more control. Specificity determines which competing declarations take precedence, so styles should be
organized carefully.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
7. Box Model and Layout
The CSS box model consists of content, padding, border and margin. Modern layouts commonly use
Flexbox and CSS Grid. Flexbox is particularly useful for one-dimensional layouts, while Grid is suited to
two-dimensional page structures. Responsive designs combine flexible units, media queries and
adaptable components.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
8. Typography and Visual Design
Typography affects readability and visual hierarchy. Font size, line height, weight and spacing should be
selected consistently. Color contrast should be sufficient for comfortable reading. A simple design
system with repeated spacing, button styles and headings creates a more professional interface.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
9. Responsive Web Design
Responsive design allows a page to work across mobile phones, tablets and desktops. Media queries
can apply different styles at different viewport widths. Flexible containers, responsive images and
relative units help prevent horizontal scrolling. Mobile-first development often produces a cleaner
responsive structure.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
10. Accessibility and Best Practices
Accessible HTML uses semantic elements, labels, alternative text and logical heading structure.
Keyboard users should be able to reach interactive controls. Avoid using color alone to communicate
important information. Keep CSS organized and remove unnecessary duplication. Test pages at
multiple screen sizes before publishing.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
11. Mini Project
Build a personal portfolio page with a navigation bar, profile section, skills cards, education section,
project gallery and contact form. Use semantic HTML and responsive CSS. The project should
demonstrate layout, typography, spacing, forms and mobile responsiveness while keeping the content
easy to scan.
• Key idea: understand the concept first, then practice it with a small example.
• Practical tip: use clear names, consistent formatting and test your work with more than one input.
• Revision question: explain this topic in your own words and give one practical example.
Revision Checklist
Topic Completed Notes
Definitions and terminology ■ ________________________
Core syntax / commands ■ ________________________
Practical examples ■ ________________________
Common mistakes ■ ________________________
Mini project ■ ________________________
Self-test ■ ________________________
Practice Tasks
1. Write one short program/query/page/task related to this subject and explain what each major step
does.
2. Write one short program/query/page/task related to this subject and explain what each major step
does.
3. Write one short program/query/page/task related to this subject and explain what each major step
does.
4. Write one short program/query/page/task related to this subject and explain what each major step
does.
5. Write one short program/query/page/task related to this subject and explain what each major step
does.
6. Write one short program/query/page/task related to this subject and explain what each major step
does.
7. Write one short program/query/page/task related to this subject and explain what each major step
does.
8. Write one short program/query/page/task related to this subject and explain what each major step
does.