-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
147 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
# personal website workshop | ||
|
||
let's make a personal website | ||
|
||
this workshop can run in two (about equal) parts: | ||
|
||
1. a personal website safari, where we click around a few examples of personal sites, to see (a small slice into) the breadth of sites that people make | ||
2. building your own website, where we use ideas and themes from the safari or your mind to get a simple site on the Internet! | ||
|
||
## part 1 - safari | ||
|
||
here are 22 semi-random personal websites: | ||
|
||
- <https://www.tomforth.co.uk/> | ||
- <https://sometimes.digital/> | ||
- <https://brr.fyi/> | ||
- <https://www.timhunkin.com/> | ||
- <https://www.cameronsworld.net/> | ||
- <https://vlad.roam.garden/Vlad's-Dating-Profile> | ||
- <https://robinprice.net/> | ||
- <https://nutcroft.com/> | ||
- <http://tom7.org/> | ||
- <https://cuddlesomerats.com/> | ||
- <https://lobi.to/> | ||
- <https://alifeee.co.uk/> | ||
- <https://caolan.uk/> | ||
- <http://kaimac.org/> | ||
- <https://novalis.org/> | ||
- <http://clofont.free.fr/> | ||
- <https://cobyzaby.neocities.org/> | ||
- <https://maria.town/> | ||
- <https://erich-friedman.github.io/> | ||
- <https://sweetfish.site/> | ||
- <https://seif.world/> | ||
- <https://soha.lt/> | ||
activities include (whatever people feel like doing) | ||
- browse the sites and write an "observation card"/nature survey (write down things that you find) | ||
- categorise websites somehow (personal / blog / shrines / etc) | ||
- try to categorise these 22 websites into 6 or fewer groups of "similar" sites | ||
- treasure hunt (find X on specific site) | ||
- recipe for Potato Provencale (V) (GF) | ||
- fonts including "Hockey is Lif", "This Boring Party", "Boring Boron", "Tom's New Roman" | ||
- dream diary | ||
- Beauty and the Beast grotto | ||
- a shrine to trains | ||
- Central Florida Mini-Golf Reviews | ||
- match the website to the description | ||
- french fonts | ||
- dating profile | ||
- antarctica blog | ||
- open data blog | ||
- cat-looking site | ||
- site of a guy who makes amusement machines | ||
- massive gif collection (callback to geocities) | ||
- professional physicist art portfolio | ||
- blog mainly about politics in software | ||
- bald nerd does crazy stuff | ||
- instructions for embracing rodents | ||
- simple collection of personal notes | ||
- experimental website hosted on a microcontroller | ||
- crazy looking tree structure | ||
- an endlessly deep looking website with too many gifs | ||
- a very retro looking space-y site with eclectic mix of stuff | ||
- maths lover | ||
- dithered representation of a household | ||
- alifeee's personal website | ||
- collection of programming experiments in space | ||
- some simple lists of favourite things | ||
|
||
## part 2 - building a personal website | ||
|
||
for site hosting we'll use use: <https://neocities.org>... go and create an account! | ||
|
||
for inspiration, look at the above sites artistically, and also look at source code for the sites (using inspect element) | ||
|
||
either: | ||
|
||
- start from scratch (follow the neocities tutorial first) | ||
- use a template, e.g., <https://webmastering.neocities.org/layouts> or <https://goblin-heart.net/sadgrl/projects/layout-builder/> | ||
- find a drag and drop maker, e.g., <https://hotglue.me/> | ||
|
||
### guides | ||
|
||
- neocities built in tutorial (you should be shown this when you create an account) | ||
- <https://htmlforpeople.com/> | ||
- <https://goblin-heart.net/sadgrl/learn/articles/beginners-guide-neocities> | ||
- <https://webmastering.neocities.org/> | ||
- <https://jakechirak.com/howto/makeyourownwebsite/howtohome> | ||
|
||
### why should you care? | ||
|
||
personal websites are awesome :). consider the thoughts found in these links: | ||
|
||
- <https://indieweb.org/> | ||
- <https://birming.com/blog-painter/> | ||
|
||
### cheatsheets | ||
|
||
- how to steal from other websites (using inspect element) | ||
- HTML \<head\> template with all metadata | ||
- HTML, e.g., <https://htmlcheatsheet.com/>, <https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet> | ||
- CSS, e.g., <https://htmlcheatsheet.com/css/>, <https://devhints.io/css> | ||
|
||
### specific things you could want to do | ||
|
||
ask someone you know - or a search engine - how to do these | ||
|
||
- create an RSS feed -> <https://everest-pipkin.com/teaching/handmadeRSS> | ||
- use a custom font | ||
- set custom colours | ||
- place items anywhere on screen | ||
- make something bigger or smaller | ||
- custom mouse cursor | ||
- use animations like click spark | ||
- have a custom URL | ||
|
||
### non-exhaustive list of things you could put on your site | ||
|
||
- who are you? | ||
- what do you like? | ||
- who are your friends (links)? | ||
- what do you think? | ||
- information about where you live? | ||
- see more on <https://slashpages.net/> | ||
|
||
### key understandings | ||
|
||
- this is not for profit or productivity. this is for fun. | ||
- you can take HTML from other people's sites |