Skip to content
Varnook
All courses
HTML and CSSBeginner

Web Foundations: HTML and CSS

Build your first web pages from scratch. Learn how HTML gives a page its structure and meaning, then use CSS to add colour, type and spacing.

Start courseView syllabus

Free to browse. You sign in at the first lesson so your progress is saved.

What you will be able to do

  • Write a complete HTML page with a doctype, head and body
  • Mark up text, links, images, lists and tables so everyone can use them
  • Build accessible forms with linked labels and the right input types
  • Style a page with CSS selectors, classes, colour, fonts and the box model
  • Build and style a personal profile page of your own

Syllabus

6 modules and 24 lessons. Each lesson is a short read followed by an exercise with tests.

Module 1

Your first web page

How a page is put together, from the doctype to headings, paragraphs and links.3 lessons, about 36 min
  1. 1The shape of a web pageEvery page shares the same outline, with a doctype, an html element, a head and a body.12 min
  2. 2Headings and paragraphsGive your content a clear outline with headings from h1 to h6, and paragraphs.12 min
  3. 3LinksConnect pages together with the a element and its href attribute.12 min
Module 2

Images, lists and tables

Add pictures with useful alt text, group items in lists and set out data in tables.3 lessons, about 39 min
  1. 4Images and alt textAdd pictures with the img element, and describe them for people who cannot see them.12 min
  2. 5ListsGroup related items with ul, ol and li.12 min
  3. 6Tables for dataSet out rows and columns of data with table, tr, th and td.15 min
Module 3

Page layout with meaning

Use header, nav, main, section, article and footer to show how a page is organised.3 lessons, about 34 min
  1. 7Header, main and footerDivide a page into its main regions with landmark elements.12 min
  2. 8Navigation with navMark up a site's main menu as a nav element containing a list of links.10 min
  3. 9Sections and articlesSplit the main content into themed sections and self-contained articles.12 min
Module 4

Accessible forms

Collect information with forms everyone can use, from labels and input types to choices and buttons.5 lessons, about 58 min
  1. 10Labels and text boxesAdd a text box with the input element, and link it to a label.12 min
  2. 11Choosing the right input typeUse email, tel, number and date inputs, and make fields required.12 min
  3. 12CheckboxesLet visitors tick any number of options with checkbox inputs.10 min
  4. 13Radio buttons and fieldsetsAsk a pick-one question with radio buttons, grouped under a fieldset and legend.12 min
  5. 14Buttons and sending a formAdd a submit button, and tell the form where and how to send its data.12 min
Module 5

CSS basics

Style your pages with CSS rules, selectors and classes, colour, fonts and the box model.6 lessons, about 1.5 hours
  1. 15Adding CSS to a pageWrite your first CSS rules inside a style element.12 min
  2. 16Classes and selectorsStyle some elements and not others with classes, and combine selectors.15 min
  3. 17ColourSet text and background colours with names, hex codes and rgb values.12 min
  4. 18Fonts and textChoose fonts and set size, weight, line height and alignment.15 min
  5. 19Padding and bordersEvery element is a box. Add space inside it with padding, and draw its edge with a border.15 min
  6. 20Margins and spacingSpace boxes apart with margin, and centre a column of content.15 min
Module 6

Putting it together

Build a personal profile page from scratch, using everything from the course, then take a first look at layout.4 lessons, about 1 hour
  1. 21Marking up a profile pagePlan a personal profile page, then build its HTML from plain text.20 min
  2. 22Styling the profile pageStyle a whole page in layers, from the body down to reusable classes.20 min
  3. 23A first look at flexboxLine up the navigation links in a row with display flex and gap.15 min
  4. 24A first look at gridSet the project cards out in two columns with display grid.15 min

After this course

Where to go next

This course builds on what you learn in Web Foundations: HTML and CSS.

  • HTML and CSSIntermediate

    CSS Layout and Responsive Design

    Lay out real pages with flexbox, grid and positioning, then make them work on any screen with media queries, fluid type and custom properties.

    Recommended first: Web Foundations: HTML and CSS

    • 22 lessons
    • About 4.5 hours