17:00 Introduction to the world of indie web & Neocities by rg-mage 17:30 HTML / CSS tricks & tutorial by rg-mage 18:00 Sketch out your web lay-out on paper 18:30 Fresh soup 🥣 19:00 Let’s get coding diva 🕣
Why are we here?
Instagram bad, Indie web cool.
MTAA (1997), Simple Net Art Diagram
Geocities to Neocities
GeoCities was one of the first free web hosting services (1994 - 2009) Third most visited site worldwide in 1999 The user sites are well known for their distinct aesthetic. In an effort to revive this "self-made" internet, Neocities was founded in 2013 (initially to serve as an archive to GeoCities)
Indie Web Movement
Gaining traction since ±2020 Partially because of a broader trend (resurgence of early 2000s design aesthetic) But also as a voice against soulless social media and content platforms "Make the web fun again"
(You can even use a regular text editor like textEdit on Mac, but a code editor gives you some nifty shortcuts and error checking)
A local folder on your computer.
A sketch of your web layout on paper or in a design app
Newbie: What is a website? 1
A website is basically a folder with documents, the contents of the folder get loaded once you navigate to the website.
In a site folder, you’ll usually encounter:
An html file (such as index.html, about.html)
This is the content of your page. In this file, you specify scripts and files that need to be loaded, as well as the page's structure, content and images.
A css file (such as style.css)
Css stands for Cascading Style Sheet. In this file, you specify the styles of all your elements, such as the border color of your images, or the size of your menu.
Images and font files
Newbie: What is a website? 2
When you make a Neocities account, you’ll get a site folder with a basic setup. Other files you’ll see in there, are:
robots.txt : a text file in which one can indicate how search engine robots index your website. You can leave it alone for now.
not_found.html : This page is presented to the viewer when they navigate to a page on your site that doesn’t exist. This page can also be customized.
Download your current site (Go to dashboard, find a download button at the bottom) Copy the content of this zip folder to your specified local folder. You can doubleclick on index.html in your folder, and it will automatically open in your browser. You'll see that the url in the address bar isn't some https:// thing, but a path to your local file. It's best practice to first code your website locally, then upload to the web for others to see.
The html file called index.html will always be automatically considered the home page (when you navigate to your neocities url, this is the first page people will see)
A css file can be used for multiple html pages. Just refer to the same document in the < head > section of each html page.
Refrain from using spaces in your folders and file names. Use dashes or underscores instead, like so: cat-looking-out-of-window.jpg or ABC_MaxiRound.ttf
CSS Grid and Flexbox for your layout
Since 2005, css has gotten some upgrades (thank god).
Centering, aligning or distributing one element or an array of elements Place all your elements in a ‘flexbox’ (a div element with its css property ‘display’ set to ‘flex’).
Flex has many options. Find a great guide here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
For two-dimensional layouts (think rows and columns) Set a div to display:grid; . Even when your grid cells are differently shaped and sized. Look at my home page for example. My widgets are placed in a grid.
A guide to CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/ The CSS grid generator tool: https://cssgridgenerator.io/
I've built a webring. A webring is a social system of linked web sites.
The webring manager (in this case rg-mage) adds your website url to their webring database. Then, when you place the webring button on your site, you can click on 'previous' and 'next' to visit your webring neighbors.
