Workshop Syllabus

What we'll learn

• Philosophies of the personal web, why it's important, and why you should participate
• HTML & CSS basics
• Using Neocities
• How to add images and pictures to your site
• Workflows and process tips
• Ways to keep learning and keep being creative with code

What to bring

1. Your own laptop (NOT ipad or anything like that)
2. A name for your site (you can change this later technically but try to think of something permanent)
3. Some ideas of what you want to put on your personal site; any ideation / planning at all, even on some paper, is HUGE and will be key to making progress

What you'll build

• Your own website infrastructure on neocities.org
• An index.html - your website's home page!
• A second page to your website, based on anything you want
• A way to link one page of your site to another

Principles

1. It is not convenient, and that is the point. We will enjoy the process of creating, and allow ourselves to experiment, write, and create without the pressure of time optimization.
2. I will accept that I will never have a perfect end product; a website is always evolving. Our plan will change along the way, and it isn't just a pivot, it is a natural part of the web creation process. We will be limited by our knowledge.It just means we can iterate when we learn something new.
3. I will not worry about what my website looks like on phones. A desktop is a canvas and code is our paint. It is possible to code your site to be viewed differently on all screen sizes, but worrying about that now will only limit your creativity and build anxiety. It is difficult to do and ultimately unnecessary. It is valid to create your art intended for a specific way of viewing; a massive painting is intended to be viewed hung on a wall. One can still get value from it zooming in on a scan of it on a phone.

Our Toolkit

All the tools we'll be using are free, and have a lot of documentation out there to help you learn!

VSCode

VSCode (Visual Studio Code) is a text editor that is specifically used for coding. Technically, you can use any text editor like Notepad (Windows) or TextEdit (Mac) to write HTML and CSS files. But it would really suck.

VSCode has a ton of built in functionality that makes writing code a lot easier. We'll go over these features throughout the workshop.

Extensions to install

• Live Preview
• Prettier

Prettier (VSCode Formatter) Settings in your settings.json

            
// ---- Prettier default settings ----
"prettier.printWidth": 120,
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.proseWrap": "never",
"prettier.bracketSameLine": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.tabWidth": 2,
"prettier.semi": true,
"prettier.arrowParens": "always",

// Optional: ensure Prettier is used as the default formatter
"editor.defaultFormatter": "esbenp.prettier-vscode",

// Optional: format on save
"editor.formatOnSave": true
        
        

Neocities

Neocities is the platform we'll be using to host our site, follow other website creators we love, find inspiration, and more. It's a really great organization that is extremely committed to the personal web. You can read more about Neocities on their about page here.