Quick Start Guide

This is the quickstart guide for the portfolio template. If you've never coded before, I would recommend you go through one of the following tutorials:

If you don't know the basics of HTML and CSS, you'll have a really hard time using this template. This Quick Start assumes that you know HTML basics like how to make links and put images in webpages. Luckily, these tutorials are pretty short. Just going through them will also give you ideas for how you want to customize your own website.

Content

  1. Text Editors
  2. Download the Template
  3. Updating the Header
  4. Updating the Footer
  5. Updating Page Titles
  6. Updating the About Page
  7. (and finally) Adding Your Art
  8. A Brief Word on CSS
  9. Publishing to Neocities

0. Text Editors

If you didn't follow the 'HTML for People' tutorial linked above and/or don't have a Text Editor on your computer (if you don't know what this is, you don't have one), please read and follow this page:

HTML for People- Intermission: Upgrade Your Text Editor

You can technically use the Neocities editor, but VS Code will make certain things (like linking your art) much easier.

1. Download the Template

2. Updating the Header

We're starting at the header because it's one of the more technical parts of the website and is one of only 2 parts the requires you to edit the JavaScript file. This template uses 'make_header_footer.js' in the 'script' folder to generate the header (the black part up top) and the footer (the name and year at the bottom).

Anytime we're editing your website, you'll want to see what your edits have done. To do this, open your index.html file in your web browser. You can do this by just dragging the file onto the browser. In VS Code, you can also right click the index.html, select 'copy path' and paste that into your address bar. Your URL bar will say something like "file:///home/name/etc/index.html"

When you make an edit to your code, save it in VS Code and then refresh the page. If you forget to save or you forget to refresh, you won't see your changes. (Keep this in mind for troubleshooting.)

To update the header, go to the 'make_header_footer.js' file and:

  1. Add your website's name to line 13 between the h1 tags
  2. Edit or put new links for your navigation, starting on line 16 (you can link to pages on the website or external sites, just look at the examples)
  3. Save the JavaScript file
  4. Refresh index.html and you should see your new links and title!

That's it!

How Does This Work?

Traditionally in an HTML only website, if you want to change the navigation links you would have to edit links on every html page you have. Right now this template only has a couple, but if you forgot to update a link on even one page- then you could be sending people to the wrong website. The JavaScript file allows us to edit the header and footer in one place, and then have it appear correctly on every html page.

This is how it works:

3. Updating the Footer

This is very similar to updating the header, but you'll be editing line 23 instead. Just add your name and the year!

You can see that this querySelector is looking for divs with the id 'footer' rather than 'header.'

4. Updating Page Titles

On each HTML page, there's a 'head' tag which provides metadata and other information. Edit the title tag (on line 6 of index.html) on each html page you have so it says the title of your website. This changes the name that appears in the tab on your browser.

5. Updating the About Page

Edit the 'about.html' page so it's about you and change the social media links so they go to your own social medias. Or, delete the social media links. It's your page after all.

6. (and finally) Adding Your Art

This is the best part! Finally! You get to add your art! Upload copies of your art to the 'images' file. You probably want to make sure these are smaller or lower quality images so people can't easily steal your very nice art. I personally like the convert my portfolio images to webp because it's a much smaller file, but you do whatever you feel is best.

On 'index.html' you'll see a div with the class 'gallery' and a bunch of images within it. Edit or add your own images to that div!

This is a place where VS Code is very helpful: it will autocomplete your image sources:

screenshot of VS Code showing the autocomplete

Make sure you add an alt description for each image- not only does this make your portfolio more accessible, but if for some reason an image doesn't load (or is taking a long time to load), viewers will see the description instead of just blank space.

A Brief Word on the Gallery class

The gallery I coded has extremely minimal CSS- it's only a div with 3 columns that auto-size the images so they fit on the screen (or 2 or 1 columns depending on the size of the screen). You may have to play around with the order of your art to make the most visually pleasing page. Also, because the CSS is really minimal- the tops of the columns will vary depending on screen size (and number of columns), so trying to make certain art pieces the top of the 2nd and 3rd columns can be tricky.

Ultimately, I wanted something with very minimal CSS so it's harder for you to accidentally break and easier for you to play with. If you want to see other things you can do with the gallery (like have labels), you can check out the page on alternate galleries.

7. A Brief Word on CSS

Most of the CSS in 'style.css' is functional. I tried commenting the CSS where it felt useful and if you delete something that breaks the site, just CTRL+Z until it's back.

If you want a Quick Start Guide to CSS, editing the following things is quick and easy:

This template uses Roboto from Google Fonts, but you can also do whatever you want with the font.

8. Publishing to Neocities

There are multiple techincal ways to publish your site on Neocities (like using the CLI or a GitHub action)- but I'm going to stick to the basics here:

  1. Delete the default 'neocities.png' and 'style.css' files
  2. Click the 'New Folder' button twice and create a folder named 'images' and a file named 'scripts' (if these aren't plural, some parts of your code don't work)
  3. Upload your images into the 'images' folder and upload make_header_footer.js into the 'scripts' folder. Neocities lets you rename folders if you mess it up. You're basically duplicating the file structure from your computer onto Neocities.
  4. You can't delete index.html- so you'll want to copy your whole file and paste it over the index.html file on Neocities (this is where you'll see the Neocities text editor)
  5. Upload your html pages and style.css
  6. You should now be able to see your website! (Neocities takes a little while to update the image preview you see- don't fret if that shows something old. As long as yourwebsite.neocities.org itself is up to date, then it is.

That's it! You'll have to copy code and upload images when you want to update your portfolio (the technical ways to upload to Neocities mentioned above make this a little easier).

🎉 Congrats on your new Portfolio! 🎉