In this tutorial we'll use some HTML with a bit of CSS, and some bootstrap for good measure. This will create a vertical scrolling timeline on your Canvas courses that looks great on any screen size, from large monitors to small smartphones.

Grab my code and give it a spin in your own Canvas sandbox:
https://www.howtocanvas.com/create-amazing-pages-in-canvas/timeline

Feel free to view the page used for this tutorial:
https://canvas.instructure.com/courses/2560052/pages/timeline


0:00 - Intro/should I comb my hair??
1:24 - What is a CSS timeline?
2:20 - Overview
4:45 - Gradients
7:45 - Resizing
9:54 - Walking through the code
11:18 - Bootstrap
13:41 - Styling the horizontal rule (hr)
14:11 - copy - paste - repeat
15:00 - Final considerations

Missed my InstructureCon session? No worries!
https://www.instructure.com/canvas/resources/instructurecon-2022/create-amazing-content-in-canvas

Please consider subscribing for more Canvas tips and tricks:
http://bit.ly/how2canvas​​​​​​​

Website: https://www.howtocanvas.com/
Twitter: https://twitter.com/howtocanvas
Instagram: https://www.instagram.com/howtocanvas/
Facebook: https://www.facebook.com/HowToCanvas