Blog post for websites video series (#1474) (#1503)

* Add post

* Fix date

(cherry picked from commit 796a255)

Co-authored-by: Charlotte Wickham <[email protected]>

docs/blog/posts/2024-12-04-websites-workshop/index.qmd

@@ -0,0 +1,59 @@
+---
+title: Quarto website video series
+description: |
+  Build a personal website with Quarto by following this four-part video series on YouTube.
+categories:
+  - Learn
+  - Workshop
+author: 
+  - Charlotte Wickham
+  - Mine Çetinkaya-Rundel
+date: "12/04/2024"
+image: "quarto-websites.jpg"
+image-alt: "Quarto Websites Workshop"
+---
+
+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](https://www.cwick.co.nz/) and [Emil Hvitfeldt](https://emilhvitfeldt.com/), you’ll learn everything else you need to build a website and customize its appearance.
+
+[YouTube Playlist](https://www.youtube.com/playlist?list=PLitrm9Undxcu7eExaTg9Y-JYLv9O6uxGu) 
+
+## 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.
+
+{{< video https://youtu.be/l7r24gTEkEY >}}
+
+Links: [About pages](/docs/websites/website-about.qmd) | [YAML appearance options](/docs/output-formats/html-themes.qmd#basic-options) 
+
+Code: [Starter](https://github.com/EmilHvitfeldt/website-template ) | [Final](https://github.com/cwickham/quarto-website-video/tree/v0.1)
+
+## 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.
+
+{{< video https://youtu.be/k65E-8PXZmA >}}
+
+Links: [Bootstrap icons](https://icons.getbootstrap.com/) | [Navigation bar options](/docs/websites/website-navigation.qmd#top-navigation) |  [Quarto website navigation](/docs/websites/website-navigation.qmd)
+
+Code: [Starter](Starter source code: https://github.com/cwickham/quarto-website-video/tree/v0.1) |  [Final](https://github.com/cwickham/quarto-website-video/tree/v0.2)
+
+
+## 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.
+
+{{< video https://youtu.be/pAN2Hiq0XGs >}}
+
+Links: [Color contrast checker](https://colourcontrast.cc/) | [Google fonts](https://fonts.google.com/)
+
+Code: [Starter](https://github.com/cwickham/quarto-website-video/tree/v0.2) | [Final](https://github.com/cwickham/quarto-website-video/tree/v0.3)
+
+## 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.
+
+{{< video https://www.youtube.com/watch?v=bv_Cw-3HI1Y >}}
+
+Links: [Listings](/docs/websites/website-listings.qmd) | [Andrew Heiss’ teaching listing](https://www.andrewheiss.com/teaching/ ) 
+
+Code: [Starter](https://github.com/cwickham/quarto-website-video/tree/v0.3) | [Final](https://github.com/cwickham/quarto-website-video/tree/v0.4)