A brief introduction to Quarto
Getting started
Figure 1
In order to work in a clean and organized environment, we will first
create a new working folder and choose to use it in Visual Studio Code.
In order to do so, we will first open the options in the upper left
corner of the window (depicted as three parallel horizontal lines).
There we will follow the path of File -> Open Folder. 
Here we can then create a new folder, which we call
“Art_distribution_paper”. Once selected, it
will open the folder in VSCode and select it as our new working
environment. All new documents, outputs and relevant data will be stored
in this folder.
Figure 2
After opening the new file, you should see the following: 
Figure 3
You can easily switch between the two editing modes by right clicking
on your screen and selecting “Edit in Visual/Source Mode”. This will
instantly switch you over. In this lesson we will continue to work with
Source Mode. 
Figure 4
To render your document and see its final look, you need to click the
“Preview” Button on the top right side of the screen: 
Alternatively you can use Ctrl+Shift+K.
Figure 5
This will have two effects: 1. It will create a new file in your
“Art_distribution_paper” folder, corresponding to your chosen format.
Figure 6
Markdown Basics
Figure 1
Figure 2
When we have now added our Table and Image to ourtext it Could look
something like this when rendered: 
An introduction to YAML headers
Figure 1
After this we have added all of our metadata as Key-Value pairs, lets
see how the renderes HRML version is in Quarto: 
Creating and implementing code for visualisations
Figure 1
Using this Code chuck in VSCode could look like the following
example: 
Figure 2
The resulting pie chart would look like this in your rendered paper:
Figure 3
Quarto for PDF and HTML
Figure 1
The following example uses the two styles shown above: 
Using the Bibliography
Figure 1
Footnotes offer an easy way to add useful information or literature
to your text. They can be implemented into your Quarto document by using
the Insert -> Footnotes option in the Visual Mode of Quarto. 
Figure 2
Let us now add a quick footnote to our paper on the MoMA. In order to
do so we just have to add the text for our footnote into the new textbox
on tghe lower part of the VSCode window: 
Figure 3
In a similar vein to footnotes, you can also directly add citations
to your document. This can be done through the Insert window of the
Visual Mode: 
Figure 4
Doing so will accomplish two things: It will open a new window called
“Insert citation”, and it will create a new file called “references.bib”
in your working folder. 
Figure 5
In our paper we want to reference Alan Wallachs scentific reviiew of
the book “Museums and American Intellectual Life, 1876–1926” by Steven
Conn. In order to do so we can simply search for Alan Wallachs name
using the Crossref database. 
Figure 6
We also want to add a refernce to the the article “Selling the
American Dream: MoMA, Industrial Design and Post-War France” by Gay
McDonald. As we are not able to find the article using the integrated
databanks, we have to add it manually. In order to do this, you need to
open your newly created references.bib file with a text editor of your
choice. This can also be done in Visual studio code. 
Figure 7
You can now simply add further objects to your list of references by
either manually typing in additional sources, or by copy and pasting the
relevant BibTex chunks from other websites. Many Websites used to
publish academic texts, such as Jstor, or libraries offer the download
oft txt files containing the relevant BibTex Chunks as part of their own
citation functions. Here is an example using Jstor: 
Figure 8
And here is how it looks when added to your reference.bib file: 
Figure 9
Once you have added the new code chunk to you refernces.bb file, you
can save (Ctrl+S) and return to your “Insert Citation” window. Here you
will now find your newly added reference as part of you bibliography:
Figure 10
Now you can simply click on the different references in order to
insert them into your work. In our case we want to add McDonalds article
as areference into our text. This will create a reference in the
following format: [[@63aecae8-5ed6-394e-883b-12026c168381]] in
source mode. The rendered Document will have the Authors name and the
publication date in brackets in its place. Using the reference feature
will also create a reference index at the bottom of your rendered
document. This index will contain a full bibliographical list of all
used refences, using the information contained in the reference.bib
file. The result could look something like this: 
Creating a simple website with Quarto
Figure 1
In our case we will give this page the title “mainpage” and start to
fill it with text and other media. The filling of our document follows
the same rules and steps that you have learned previously. You can
simply add a header by using # and hen add some text. When we do this
with our main page it could look like this: 
Figure 2
We now want to add a picture of the MoMA to our main page. In order
to do so we can use the same syntax we used to add pictures to our
previous documents. To make sure our pictures can always be accessed we
will add them to our folder as a ressource. This can be simple done by
copying the chosen file into our folder. But while this is the easiest
solution, it also can get disorganized and chaotic fast, if you choose
to add a lot of different images to your website. Because we want to try
to keep our folder structure neat and easy to navigate we will put our
images into a new folder calles “images” which we will put into our
“moma_website” fodler. Now we add our picture into this newly created
folder: 
Figure 3
It will look like this in VSCode: 
Figure 4
Now that we have added everything our “moma_website” o#folder should
look something like this: 
Figure 5
And our rendered result like this: 