Page 1: Responsive Web Page Tutorial, HTML/CSS Only
Page 2: Page Structure using Flexbox and a Media Query
Page 3: Footer (nested flexboxes)
Page 4: Header (menu/search toggles, transition effects)
Page 5: Sticky Aside
Page 6: Make it Beautiful
Page 7: JavaScript Efficiencies, Breadcrumbs, Cats, Audio and More
Page 8: Embedded Note from Creator and Floating Hearts
Page 9: Move On To, Video Tutorial

Move On To, Video Tutorial

Move On To ...

At the end of each concept section, I remind users that they should practice, and point them to the next lesson in the sequence:

snapshot of embedded note from web creator
The down and right arrows are also links to the appropriate sections.

Here's the (right-truncated) HTML:

snapshot of embedded note from web creator
I don't like ‘widow words’ (a single word on a text line), so I use  white-space:nowrap;  to keep at least two ending words together.

Here's the CSS (in the external stylesheet):

snapshot of embedded note from web creator
snapshot of embedded note from web creator
The  toNextSectionDivider  is just a non-growing, non-shrinking, fixed-width flex-item with a desired background color and height.

Video Tutorial

My very first lesson (only!) has a video showing users how to use the exercises. It is accessed by clicking the question mark next to the ‘Practice’ title:

snapshot of embedded note from web creator

Here's the HTML:

snapshot of embedded note from web creator
The character code  ✕  is the ‘✕’ in the upper-right corner that users can click to close the video.

Here's the CSS. It does not go in the external stylesheet, since it's used only in my first lesson.

snapshot of embedded note from web creator
snapshot of embedded note from web creator
snapshot of embedded note from web creator

Here's the JavaScript to start and stop the video. This remains with the HTML (it is not moved to the auxiliary JavaScript file), since it's only used in my first lesson.

snapshot of embedded note from web creator

The Page So Far...

Go on to Page 10 of the Responsive Page Tutorial