Quarto website video series

Build a personal website with Quarto by following this four-part video series on YouTube.

Learn
Workshop
Authors

Charlotte Wickham

Mine Çetinkaya-Rundel

Published

December 4, 2024

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.

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.

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.

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.

Links: Listings | Andrew Heiss’ teaching listing

Code: Starter | Final

Subscribe

Enjoy this blog? Get notified of new posts by email: