Sharing your art online

How to make a free & handmade portfolio site

What to bring

Workshop agenda (subject to change)

drawing of the workshop host at a computer, giving you a thumbs up!

Introduction

Hi. I have no qualifications, but I do have a homepage (where I sometimes share my art) and a lot of enthusiasm for website-making. Maybe you're attending this workshop offline and I'm speaking directly to you, or maybe you're reading this on your own. Either way, what I'm here to tell you is that you can make your own portfolio site without paying Squarespace $20/month.

Why make a website by hand?

Save money by not paying for stuff you don't own

Squarespace, Wix, Cargo, etc are all too expensive and you don't even own your site! They "own" their templates, so they prevent you from exporting your site and taking the files somewhere else. Most web hosting is not like that! When you make your site yourself, you can easily upload it to another host when whatever one you're using goes down or makes a policy decision you don't agree with. Squarespace et al. want you to believe that coding your own site is too hard, so you'll keep giving them money. Stop giving them money!

Enjoy total creative freedom

Your art is unique to you, so why shouldn't your website be? When you build it from scratch, you can make your site have any layout and any style you can dream of. Every time I've had an idea and wondered "can I make a webpage do this?", I could! It's not always easy, but so much is possible.

Learn something new (and fun?!)

Learning HTML and CSS is a great way to get more comfortable with code. It's not programming, but for a lot of people it's a first step towards learning to program. Even if you have no interest in coding, it's good to learn a new skill. My hope is that this workshop can help people feel more confident on the computer.

Also, I think it's fun. :)

What websites inspire you?

Getting started with code

Your website is going to start as files on your computer, then you'll put them online at the end of the workshop. Let's make some files!

Files and folders

Make a new folder on your computer where you can easily find it. This will become your website! You can name it whatever you want. If you're reading a guide online and it mentions the "root" or "root folder" or "top-level directory", this is the folder it's referring to.

Open your text editor, create a new document, and save it as index.html. This will become the first page people see when they visit your website.

Create another new document, and save it as style.css. This is where you'll change how index.html (and any other page you make) will look.

Create a new folder within the first one. Put the images you want to share on your site in this folder. This is optional, but it keeps things organized. The folder can have any name; some popular choices are "img", "assets", etc.

Note: Ideally, folder and file names should never include spaces. They get rendered as %20 in the address bar and I think it looks bad.

Tools

Before we start writing code, let's read some. Your web browser has tools to view the source code of any web page you visit. When you're on a site that's doing something you like and you're wondering how they did it, check out the code!

View source: Ctrl+U (Windows) or ⌘+U (Mac)

Like the name suggests, this will take you straight to the code of the HTML document you're currently viewing, as it was written. It can more or less useful depending on the site you're on. Pages written by hand are typically legible to other human beings, while code generated by a program can be pretty obscure.

View the source of the Google Doodle page.

View the source of this page. I tried to keep it nice and organized.

Inspect element: Ctrl+Shift+C (Windows) or ⌘+Option+I (Mac)

Even when the source code appears to be nonsense, the inspect tool can clear things up by displaying the page and the code side by side. Hovering over a piece of code (an HTML "element") will highlight the corresponding element on the page, and clicking on an element will show the CSS styling that's being added to it.

Inspect an element on the Google Doodle page.

Inspect an element on this page.

What you see here may not make sense to you now, but hopefully will become more clear after the following sections on HTML and CSS. Also, the inspector interface looks different across browsers, so you may need to look up a guide for your specific browser if you're getting lost.

Note: You can also access view source and inspect element by right clicking (Windows) or control clicking (Mac). Another way to access the source code is by typing "view-source:" into the address bar before the "https://" (I've even done this on my phone, when I really wanted to see).

HTML = hypertext markup language

HTML is the structure and content of every webpage. It's made up of "elements", the things you inspected in the last section. Elements are defined by tags, which are enclosed in angled brackets, < and >.

An HTML element:
<p>This is a paragraph.</p>
start tag                 end tag

Most elements require both a start and an end tag (which includes a forward slash /). A notable exception is the <img> tag, which can stand alone. Your page may behave in unexpected ways if you forget to close a tag, but it's usually easy to spot and fix.

To add things to a page, add an element! This page is mostly made up of headings <h1>–<h6>, paragraphs <p>, and unordered lists <ul>. HTML elements can be nested within other elements, but take care to close the inner element before closing the outer element. For example:

<p>I <b>love</b> HTML.</p> is valid, but

<p>I <b>love HTML.</p></b> is not.

A minimal webpage

Copy the following code and paste it into your index.html file.

<!DOCTYPE html> tells the browser to expect an html document.

<html> is the container for the entire page. lang="en" specifies that the page is written in English. You should change it to a different two letter language code if your site in another language.

<head> contains the site's metadata. Some sites will have a LOT of metadata, but this is all you need to get started.

<title> is the text that will display in a browser tab with your site open.

Change the text in the <title> tag to the name of your site.

<meta charset="UTF-8"> sets the character encoding. UTF-8 covers every Unicode character.

<meta name="viewport" content="width=device-width,initial-scale=1"> makes it so your page doesn't look really tiny on phone screens. You can remove it, but I recommend keeping it in.

<link href="style.css" rel="stylesheet" type="text/css" media="all"> connects your page to the stylesheet file that you created in the previous section.

<body> contains everything that actually displays on the page when you view it.

<h1> is the highest level section heading. On a site's index page, this usually contains the site title, while on other pages, it will contain the name of that page.

Change the text in the <h1> tag to the name of your site.

Save your changes, then open your index.html file in the browser.

Important tags

We're here to share art, so arguably the most important tag is the <img> tag. The whole tag will look something like <img src="example.png">, where the value in the src attribute is the path to the image file you want to display. If the file is in the same folder as the HTML file you're writing, the path is simply the name of the image file. If you set up your site like I recommended earlier, with all of your images in a folder, the file path will include the name of that folder and look something more like <img src="assets/example.png">.

Add an image (or several) to index.html and view the page.

(Optional) If you want to add captions, there's an HTML element for that!

Another critically important tag is the link, or anchor element:

<a href="https://example.com">Example</a>

a stands for anchor and href stands for hyperlink reference, which is the destination of the link. The text between the start and end tags is what will display on the page. There are two types of links:

Add a link to index.html and test that it works. Your site doesn't have any other pages yet, so it should be an absolute link.

Images, links, headings, and paragraphs are all you really need to build a satisfying portfolio site, but here's a list of every HTML element for your reference.

CSS = cascading style sheets

CSS changes the appearance of the page. Color, font, size, margins, and more can be changed for every HTML element. A CSS declatarion is formatted like this:

selector {
  property: value;
}

where the selector is the HTML element you're adding style to, the property is what you want to change (color, font, size, margins, etc), and the value is how you want to change it (which depends on the property). For example,

p {
  background: black;
  color: white;
  font-size: 50px;
}

will change the background color to black, the text color to white, and increase the font size for all of the text within any paragraph tag.

Copy the following code and paste it into your style.css file.

Change the text and background colors.

Note: For color, you can use HEX codes, RGB values, or named colors.

There are too many CSS properties to list them all here. I've been doing this for a year and a half and I'm still learning new things about CSS all the time. This is the point where using the inspect tool to look at the style of webpages you like becomes very useful for learning about what's possible.

Classes

If you only want to apply a style a specific element, and not every element of the same type, you can assign that specific element a "class" in the HTML. Using an example from the top of this page,

<p class="banner">11AM - 1PM on June 30th at Volume Two</p>

is styled with

.banner { 
  font-size: 1.75rem;
  text-align: center;
  margin: 2.5rem 1rem;
  padding: 15px 10px 10px 10px;
  background-color: blue;
  color: white;
}

The period specifies that the CSS declaration is meant to be applied to a class. You can name the class whatever you want, as long as there are no spaces. Something short and descriptive works best.

Centering

Units

Images on the web

Resizing and compression

It's a bad idea to put high-resolution images on your website for two reasons:

  1. You will run out of space on free web hosts very quickly.
  2. Your pages will load very slowly.

Even after resizing your images, more can be done to reduce the file size.

Alt Text

Alternative, or "alt", text is a written description of an image, which is read aloud by screen readers and displayed on the page if the image cannot load. Alt text is included within the <img> tag, as follows:

For decorative images, alt text should be blank. Not absent; include alt="".

For images that used for navigation, the alt text should descibe the link destination instead of what the image looks like.

Responsive webpages

One of the most common reasons a site will appear "broken" is that images are oveflowing their parent element, or even the entire screen (especially on phones). Luckily, there's an easy fix:

Creating gallery layouts

Sketching rectangles

Visit a portfolio site you admire, or one of the sites shared be in the introduction. Open the inpector tool. Add the CSS declatation * { border:solid; } to put a border around every single HTML element.

With a pen and paper, sketch out a layout for your site using only rectangles.

Flexbox and grid

Guide to Flexbox

CSS Grid Generator

Putting your site online

Free web hosts

Neocities

My homepage is hosted on Neocities! It's a unique as a web host, becaue

full list of what you get https://neocities.org/supporter

Github Pages

This site is hosted on Github Pages!

https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#usage-limits

Other options

Web host list for hobbyists

(optional) Getting a custom domain

This part isn't free, unfortunately, but it's less expensive than you might have realized. You can get a .com, .net or a .org domain for about $10-$12 per year, less than a single month of Squarespace's least expensive plan. (When they offer you one year of free domain registration like it's a great deal, they're ripping you off!)

I buy my domains from Porkbun, and I have no complaints. I hear good things about Namecheap, but I've never used it.

Learning more

"Homework" AKA Things You Might Want to Add to Your Site but I Didn't Have Time to Go Over

Resources and Communities