Everyone should make a website!

Anyone can make their own website. Social media websites let you make accounts, but it’s still their website. You can make a spot on the web that’s entirely yours, and it doesn’t need to cost you any money.

Why?

Prerequisites

This workshop is intended for people with no or little experience with HTML, CSS, or Javascript.

You will need a web browser, like Chrome, Firefox, or Microsoft Edge. Using a desktop will be easier, but if you only have mobile you can still participate.

This is not necessary, but I would strongly recommend bringing an idea for your website, especially your first webpage. Some examples:

We can't promise that we'll be able to accomplish your goal in our time, but we want to be able to set you on the right track to execute your idea to the fullest extent possible.

Agenda

Part I

Website Intros

Everyone will be able to share their ideas for their website so that everyone knows what their goal is for the workshop. We'd highly encourage people to be inspired by other peoples' ideas as well.

Getting Started with Neocities

We’ll go through the basics of using Neocities as a tool for finding other websites, a means of social engagement, and a place to edit and store our website files.

Part II

HTML 101

HTML is a way of structuring content. We’ll cover common elements and best practices while we make the backbone of our sites.

CSS 101

CSS tells your browser how to display the HTML. We’ll add colors, fonts, borders, and more to make our sites look how we want them to, with an emphasis on accessibility and mobile-friendliness.

Resources

There are many resources for making your own website, and we’ll offer the ones we use the most.

(Optional) Part III

Using Visual Studio Code

You can 100% write all of your code on Neocities directly; however, there are applications that can make your life much easier. Visual Studio Code (VS Code) is one of the most popular applications to code on, so learning the basics of this program can help in other areas as well.

App Preferences

Picking settings, including line-wrapping to LGBTQ+ color schemes for your editor.

Live Preview

Lets you see a preview of your page inside VS Code instead of a separate browser window.

Prettier

Formats your code for you so it’s readable and structured correctly.

Accessibility Linter

Alerts you of best practices for web accessibility.

Emmet Abbreviations

Will change your life. If you looked at this and went “I’m too advanced for this and I already use VS Code,” look up Emmet abbreviations.