Advanced website features

Slides

 Open slides in new window  Download PDF of slides

Exercises

Other common features

TipYour turn: URLs

1. Make your about.qmd page appear at about/

TipYour turn: Page layout

1. Change the page layout settings for one of your page

2. Bonus task! Try using the Bootstrap CSS Grid layout system with page-layout: custom.

   • See the documentation here
   • See an IRL example here (and code here)

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Advanced > Page Layout.

TipYour turn: Article layout

1. Add an image that spans across the whole page

2. Add some text to the margin

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Authoring > Article Layout.

Listings

TipYour turn: Listings

1. Edit research/index.qmd to be a listing page, showing all the pages in the research folder.
2. Experiment with changing the listing type to default, then table, then grid.

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Websites > Listing Pages.

TipYour turn: Metadata

1. Add metadata to your different research .qmd files, including images (find some at Unsplash). See how those are reflected in the listing page.

2. Bonus task! Modify how the listing page is sorted. Sort it by descending title.

   • See the documentation here

3. Bonus task! Change how the dates are shown in the listing page with the date-format option.

   • See the documentation here

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Websites > Document Listings.

TipYour turn: Categories

1. Add categories to your different research .qmd files. See how those are reflected in the listing page after rendering.

2. Bonus task! Change the category list on the listing page to appear as a word cloud.

   • See the documentation here

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Websites > Document Listings > Categories.

TipYour turn: Make a blog

Make a blog!

1. Create a new folder named blog with a file named index.qmd in it.
2. Make a few folders and files named blog/2025/10/16/thing/index.qmd, etc.
3. Add some fake content in the blog posts. Add images, titles, descriptions, etc.
4. Make the blog posts appear as a listing page at blog/index.qmd.
5. Add blog/index.qmd to your top navigation bar.

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Websites > Document Listings.

Extensions

TipYour turn

1. Install the Font Awesome extension in your website project.

2. Use Font Awesome shortcodes:

   • Include a Font Awesome icon in your navigation bar
   • Include a Font Awesome icon in the text of one of your pages

3. Install another Quarto extension and play around with it.

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at the Font Awesome extension page and Quarto.org > Extensions.

Start building a real website

TipYour turn

At some point today you’ve (hopefully!) thought “I could use these tools to make something really cool!” A new personal website with a portfolio and blog. A website for an upcoming event. A notebook to accompany a research project. A course website. Something!

 

Start building it!

1. Create a new website project skeleton
2. Start building your idea
   • Do this gradually! Remember the worflow: edit, save, preview, repeat
   • Pore over the Quarto documentation and these slides for tips and tricks
3. Ask for help.
   • We’ll work on it now and tomorrow (and maybe on your own tonight)