HTML & CSS

Type real markup and style sheets: HTML5 elements, CSS selectors, colours, transforms and animations, then forms, flexbox, grid and responsive design.

19 lessons66 stepsPro

Start here

Lesson 1 · HTML document · step 1Doctype▷ 10 s intro

Start

AdvertisementRemove ads

The Typing Cat Pro: unlock all 23 courses. No ads, certificates, AI insights. See Pro.

All 23 courses, and none of these advertsPro opens the whole library and clears the page. $5.99 a month.See Pro

1DoctypeStart hereStart here▷ 10 sStart
2Body

The Typing Cat is rated 4.1 out of 5 from 97,343 ratings

1Lesson 1HTML documentThe doctype, head and the body of an HTML5 page.2 steps

2Lesson 2Sectioning elementssection, headings, article, nav, details and form.6 steps

3Lesson 3Embedded contentfigure, picture, audio and video.4 steps

4Lesson 4Text-level elementstime, mark and abbr inside a paragraph.3 steps

5Lesson 5CSS selectorsAttribute selectors, pseudo-classes, pseudo-elements and combinators.4 steps

6Lesson 6CSS colorsHex, rgb, rgba, hsl and hsla colour values.1 steps

7Lesson 7CSS units and calc()Length units and calc() expressions.2 steps

8Lesson 8CSS media queries@media rules for screen sizes and orientation.1 steps

9Lesson 9CSS transformstranslate, rotate, scale, 3D transforms and perspective.4 steps

10Lesson 10CSS transitionsThe transition shorthand with timing functions and delays.1 steps

11Lesson 11CSS animationsThe animation shorthand and @keyframes rules.3 steps

12Lesson 12HTML Boilerplate & HeadPractice typing the HTML document structure and head elements.4 steps

13Lesson 13Semantic ElementsType semantic HTML5 elements for accessible page structure.4 steps

14Lesson 14Forms & InputsPractice typing form elements with attributes and validation.5 steps

15Lesson 15CSS Selectors & PropertiesType CSS selectors, properties, and values.5 steps

16Lesson 16Flexbox LayoutPractice CSS Flexbox properties for one-dimensional layouts.4 steps

17Lesson 17Grid LayoutType CSS Grid properties for two-dimensional layouts.4 steps

18Lesson 18CSS Animations & TransitionsPractice CSS transitions, transforms, and keyframe animations.4 steps

19Lesson 19Responsive Design & Media QueriesType media queries and responsive design patterns.5 steps