Introduction to
Creative Coding

One of the most frustrating things when you're learning to code can be the lack of information on how to set up a website and put your code online. To make things more confusing, there are loads of variations on how you can do this. With a basic understanding of how websites live online (not complicated, I promise!) all of the options for putting your website *live* become a bit easier to navigate.

Domain

This is the bit that you probably know about already. Your domain, web address or URL is the part that tells the browser where to go. It's basically like having a home address so that people know where to go to get to your house.

Just having a domain is like having an address but no house. Imagine you walk to your new home but when you get there, all you can see is a tiny, empty plot of land owned by GoDaddy (or whoever you bought the address from) with a fence around it and a sign that reads 'FUTURE HOME OF SOMETHING QUITE COOL' or something similarly patronising.

Hosting

This is where hosting comes in! Hosting is basically the storage for your site. It basically works like a hard drive, and contains folders, files (and maybe even the odd database). If we're going to carry on with the house analogy, hosting is your own plot of land! And I guess your website's folder system is your house.

Some hosting packages only let you build one website, while others enable you to put multiple websites in the same plot of land. Multiple website hosting is usually a bit more expensive, but is usually worth it unless you just plan on having one portfolio website.

Build-your-own template website sites such as Squarespace and Cargo Collective act in the same way as hosting, but with another layer of organisation for your content, so you don't have to deal firsthand with hosting management.

How your browser knows where to go

Some providers automatically connect domains with hosting. I find GoDaddy makes the process fairly easy, if you buy both your hosting and your domain through them.

If you're using a domain and hosting from different accounts or providers, you will need to use nameservers and DNS records (Domain Name System). Hopefully you won't have to do this at this stage, but just in case, here's a helpful video explaining how it works.

Once your domain and hosting is connected, you're ready to upload your website!

Step 1

If you're using your code straight from the P5 editor, download your code!

If you want the sketch to fill the entire window, change the values in createCanvas to windowWidth and windowHeight, so that it looks like this...

createCanvas(windowWidth, windowHeight);

Once you have the folder downloaded, have a look inside. You may have already opened the folder system in the P5 editor, but if not, here's what it looks like!

?P5 bug to look out for?

At the time of writing this, the P5 editor's download function is downloading a bunch of files with the correct filenames, but no content! It's super annoying, but to fix this, follow these steps:

• Unzip the archive
• Drag the folder into Sublime Text (download here free if you don't have it installed)
• Click on the grey > button underneath the play button in the P5 Editor (shown below) to open the file system

• Copy the contents of each file into the one with the same name in Sublime Text
• Save everything!

How it works

If you care how it works, read on! If you just want to put your site online, skip to the next step!

Your P5 code is stored in the file sketch.js, all of your styles and layout are in style.css, and everything that's necessary for the browser to read the webpage is in index.html.

index.html is the file your browser will recognise as your homepage. It stores all of the content of your site, or links out to it so the browser knows where to look for the content it needs to display. Although you've been using P5 and JavaScript, you've also inadvertently been using HTML!

Line 4 is important for us because it pulls the P5 library (word for the block of code which helps the browser to read your code written in P5) into the website, and enables it to understand your sketch.

Putting it online!

Head to https://www.netlify.com/

Sign up (if you haven't already)

You will see this page

Press 'Add new site' on the right hand side of the 'Sites' block and select 'deploy manually' from the dropdown

Go to your finder window, and drag and drop your folder onto the circle on the screen!

Voila, your site is live ✨

You should then see a screen like the one above

To change your site's domain, you can navigate to 'site settings' (which gives you a your-site-name.netlify.app domain for free)

You can also add a custom domain by navigating to 'domain settings' then 'Add custom domain' and following the instructions (you have to pay a yearly subscription of usually ~$12 if you want to buy a domain or if you already own a domain through another provider, you can link it up for free!)