Do you need a professional website to showcase your work? If you’ve used Quarto to produce a document, you’ve already got the technical skills to create a Quarto website. In this video series, taught by Charlotte Wickham and Emil Hvitfeldt , you’ll learn everything else you need to build a website and customize its appearance.

YouTube Playlist

Quarto Websites 1: Build your homepage#

In this video, you’ll get a running start by using a template we’ve designed to be functional and attractive, and that will serve as a foundation for the rest of the video series. You’ll customize the content of your homepage, and how it looks, and along the way learn about the two key files in a Quarto website index.qmd and _quarto.yml. Finally, you’ll learn one way to publish your website so other people can see it.

https://youtu.be/l7r24gTEkEY

Links: About pages | YAML appearance options

Code: Starter | Final

Quarto Websites 2: Add pages and navigation#

Now you’ve got a homepage, you’ll likely want to add some other pages. In this video, learn how to add pages to your website, and help people find them, by adding them to your website navigation.

https://youtu.be/k65E-8PXZmA

Links: Bootstrap icons | Navigation bar options | Quarto website navigation

Code: Starter | Final

Quarto Websites 3: Customize appearance with CSS/SCSS#

You now have a set of content you are happy with on your website, but how do you customize the look and feel of your site beyond options set in YAML? In this video, you’ll start by learning the basics of CSS and SCSS and how to make good design choices. Then, you’ll see how to apply these choices to your Quarto website.

https://youtu.be/pAN2Hiq0XGs

Links: Color contrast checker | Google fonts

Code: Starter | Final

Quarto Websites 4: Add lists of content with listings#

Adding a listing page to your website is a great way to showcase your projects, talks, publications or blog posts. In this video you’ll learn how to create a listing page in Quarto and see two ways to populate it with content: Quarto documents, or a yaml file.

https://www.youtube.com/watch?v=bv_Cw-3HI1Y

Links: Listings | Andrew Heiss’ teaching listing

Code: Starter | Final