Web development · Beginner

HTML & CSS for Beginners

Learn semantic HTML, links, images, forms, CSS selectors, typography, the box model, modern layouts and responsive design.

minutes · Self-paced

Course overview

Learn how a web page is built. Use HTML to structure headings, paragraphs, navigation, images, lists and forms, then CSS to control colour, typography, spacing and layout. Understand the box model, Flexbox, Grid, responsive breakpoints and accessibility basics. Create a small multi-section website and test it on different screen sizes.

What you will learn

  • Explain the roles of HTML, CSS and the browser
  • Create a valid HTML document with semantic elements
  • Add links, images, lists, tables and forms
  • Connect stylesheets and use CSS selectors
  • Style typography, colour, spacing and the box model
  • Arrange content with Flexbox and CSS Grid
  • Build responsive layouts
  • Improve accessibility and test a finished page

Skills covered

  • HTML structure
  • Semantic markup
  • CSS selectors
  • Typography and colour
  • Box model
  • Flexbox
  • CSS Grid
  • Responsive design

Prerequisites

No coding experience is required. A computer, text editor and modern web browser are recommended.

Course modules

Understand how a web page works

In this module: HTML describes structure and meaning, CSS controls presentation and the browser interprets both to display a page. Keep files organised and use a local browser preview so changes are visible.

min

Use headings, paragraphs and semantic elements

In this module: Semantic HTML communicates the role of content to browsers and assistive technologies. Use headings in a logical hierarchy, paragraphs for prose and landmarks such as header, nav, main and footer where appropriate.

min

Add links, images and lists

In this module: Links should describe their destination, informative images need useful alternative text and grouped items should be marked up as lists. Use correct file paths and check that every link opens the expected destination.

min

Create forms and structured content

In this module: Forms collect information through labels and input controls. Each field needs a clear label and suitable input type. Tables are for information with row and column relationships, not page positioning.

min

Connect CSS and use selectors

In this module: An external stylesheet separates presentation from content. Selectors determine which elements receive a rule. Use classes for reusable styling and avoid excessive specificity.

min

Style typography, colour and the box model

In this module: CSS typography sets font family, size, line height and weight. The box model includes content, padding, border and margin. Use consistent spacing and readable contrast.

min

Arrange content with Flexbox and Grid

In this module: Flexbox is useful for arranging items in one direction, while Grid is useful for two-dimensional rows and columns. Use alignment and gaps instead of positioning every item manually.

min

Make pages responsive and accessible

In this module: Responsive design uses flexible widths and media queries so pages remain usable on phones and desktops. Accessibility includes keyboard focus, sufficient contrast, labels and meaningful structure.

min

Test and prepare a small website

In this module: A finished page should load without broken assets, have working links and make sense at different widths. Keep CSS, images and pages organised. Test keyboard navigation and page titles before publishing.

min