digital treehouse

┌┬┐┌─┐┌┬┐┌─┐┬ ┬  ┬ ┬┌─┐  ┬ ┬┬┬  ┬
 │ │ │ ││├─┤└┬┘  │││├┤   │││││  │
 ┴ └─┘─┴┘┴ ┴ ┴   └┴┘└─┘  └┴┘┴┴─┘┴─┘

Talk about the goals, principles and expectations for this class
Get acquainted with JSON and the text-generation tool Tracery.js
Start developing fun text-generation bots.

┬ ┬┌─┐┬ ┬┬─┐  ┌┐ ┌─┐┌┬┐┌─┐
└┬┘│ ││ │├┬┘  ├┴┐│ │ │ └─┐
 ┴ └─┘└─┘┴└─  └─┘└─┘ ┴ └─┘

┌┬┐┌─┐┌─┐┬  ┌┐ ┌─┐┐  ┌
 │ │ ││ ││  ├┴┐│ │└┐┌┘
 ┴ └─┘└─┘┴─┘└─┘└─┘┘  └

Cheap Bots Toot Sweet
Mastodon
Tracery Editor
Corpora (useful word collections)

┌─┐┐  ┌┌─┐┌┬┐┌─┐┬  ┌─┐┌─┐
├┤ ┌┘└┐├─┤│││├─┘│  ├┤ └─┐
└─┘┘  └┴ ┴┴ ┴┴  ┴─┘└─┘└─┘

poem.exe
the tiny gallery
the tiny gallery (source)
levels checker
Ethan Mars
The New Think Piece Bot
Happnin' in Hastings
autoflâneur
STF Bot

┌─┐┌─┐┬─┐  ┌┐┌┌─┐┐  ┌┌┬┐  ┌┬┐┬┌┬┐┌─┐┬
├┤ │ │├┬┘  │││├┤ └┐┌┘ │    │ ││││├┤ │
└  └─┘┴└─  ┘└┘└─┘┘  └ ┴    ┴ ┴┴ ┴└─┘o

there's nothing to do... just relax...

┌┬┐┌─┐┌┬┐┌─┐┬ ┬  ┬ ┬┌─┐  ┬ ┬┬┬  ┬
 │ │ │ ││├─┤└┬┘  │││├┤   │││││  │
 ┴ └─┘─┴┘┴ ┴ ┴   └┴┘└─┘  └┴┘┴┴─┘┴─┘

SESSION 1, 03.11.23

Get acquainted with code-writing flow and software
Get acquainted with the essential language of the internet: HTML
Start developing PURE HTML websites. The pitch is to go full nostalgic internet with it and create funny/obsessed/dramatic fan pages for whatever you want.

SESSION 2, 10.11.23

Continue working on the pure HTML fansites.
For this session, we focus on utilising as many tags as possible.
Your website should include:

ALL OF THESE TAGS:
div
p
h1+h2
img
audio
video
pre
title
button
footer
nav
select
details

AND MIN.1 OF THOSE:
dl
figure
form
iframe
map
picture
progress
table

┌┬┐┌─┐┌─┐┬  ┌┐ ┌─┐┐  ┌
 │ │ ││ ││  ├┴┐│ │└┐┌┘
 ┴ └─┘└─┘┴─┘└─┘└─┘┘  └

Brackets
Webzine01
HTML Element Reference (W3 Schools)
MDN Web Docs > HTML
Fansite entry on Fanlore
ASCII Art Library
ASCII Text Generator

┌─┐┐  ┌┌─┐┌┬┐┌─┐┬  ┌─┐┌─┐
├┤ ┌┘└┐├─┤│││├─┘│  ├┤ └─┐
└─┘┘  └┴ ┴┴ ┴┴  ┴─┘└─┘└─┘

The first website...
One morning, on my way to work,
i met a talking plant.
Fluffbucket
Dritties

┌─┐┌─┐┌┬┐┌─┐  ┬─┐┌─┐┌─┐┌┬┐┬┌┐┌┌─┐
└─┐│ ││││├┤   ├┬┘├┤ ├─┤ │││││││ ┬
└─┘└─┘┴ ┴└─┘  ┴└─└─┘┴ ┴─┴┘┴┘└┘└─┘

My website is a shifting house next to a river of knowledge. What could yours be?








       .--.                   .---.
   .---|__|           .-.     |~~~|
.--|===|--|_          |_|     |~~~|--.
|  |===|  |'\     .---!~|  .--|   |--|
|%%|   |  |.'\    |===| |--|%%|   |  |
|%%|   |  |\.'\   |   | |__|  |   |  |
|  |   |  | \  \  |===| |==|  |   |  |
|  |   |__|  \.'\ |   |_|__|  |~~~|__|
|  |===|--|   \.'\|===|~|--|%%|~~~|--|
^--^---'--^    `-'`---^-^--^--^---'--'

┌┬┐┌─┐┌┬┐┌─┐┬ ┬  ┬ ┬┌─┐  ┬ ┬┬┬  ┬
 │ │ │ ││├─┤└┬┘  │││├┤   │││││  │
 ┴ └─┘─┴┘┴ ┴ ┴   └┴┘└─┘  └┴┘┴┴─┘┴─┘

SESSION 1, 16.11.23

Get acquainted with online hosting by uploading your fresh html websites to GitHub.
Get acquainted with the styling language of the internet: CSS

SESSION 2, 24.11.23

Prepare for a little friendly neighbourhood hacking...
1. Clean up your code (15min). Think of: opening up compartments, adding indents, correcting any red mistakes, considering ledgibility, adding structuring tags like 'html', 'body', 'head' etc if not yet done...
2. Add a little note somewhere for your future hacker starting with  (5min)
3. Upload your modified code using Github Desktop (Pull/Commit/Push).
4. Write down the address of your repository on the little cards, to share.

Do a little friendly neighbourhood hacking...
1. Open the repository you were gifted, download the code, open it up in Brackets, and take a good look at it. Do you understand everything? If not, ask questions. (15min)
2. Make a bit of a plan: what do you want to do? How should the page be transformed? What do you want to experiment with? Think about the things you wanted to do in HTML that you couldn't! Where can you try them out now on this new page?
  Remember: we're hacking. We're trying to subvert. Don't be too respectful of the original material.(20min)
3. Now is your time to shine. Create your CSS file, link it in the HTML, and get to styling. Don't forget to add IDs anc classes to your HTML, so your styles can be as precise as possible.

SESSION 3, 8.12.23

Upload CSS-hacked websites on GitHub.
Present the new websites.
Learn about the basic layout properties: DISPLAY and POSITION.
Do some exercises.

SESSION 4, 14.12.23

Learn about the basic font and text properties:

Font

font-family

font-size

font-style

font-weight

Text

text-align

letter-spacing

text-indent

text-transform

word-spacing

Text decoration

text-decoration

text-orientation

text-shadow
Learn how to use custom fonts in CSS.
Do some exercises.
Get started on our layouting project:
- Choose an interview by an artist, person or entity that you like, admire or is important to you. Download or copy all the content
- Start by organising all of your HTML structure. What's the most useful or logical tag for each type of content? How do you structure quotes, sources, titles, sub-titles, or captions? You can choose to keep the pictures from the interview or to add new ones.
- Once that's done, move on to your CSS. How do your images exist in the layout? How do you highlight certains types of content? Focus on hierarchy and how your content exists in relationship to the space of the page.

SESSION 5, 19.12.23

Have a look at the finished interview websites!
Train some CSS illustration skills through short exercises.
Do a Coding from Life drawing session using a CodePen!

┌┬┐┌─┐┌─┐┬  ┌┐ ┌─┐┐  ┌
 │ │ ││ ││  ├┴┐│ │└┐┌┘
 ┴ └─┘└─┘┴─┘└─┘└─┘┘  └

Github and Github Desktop
Common CSS Concepts and properties
MDN Web Docs > CSS building blocks
CSS Basics Slideshow
Adding CSS to your document
CSSreference.io
CSS properties for backgrounds
CSS properties for typography
CSS reminder for box-model
CSS properties for box-model

CSS Matic (gradient, shadow, border-radius generators)
Shapes of CSS
CSS 2D Transforms
CSS Transform Visualized

Positioning property


┌─┐┐  ┌┌─┐┌┬┐┌─┐┬  ┌─┐┌─┐
├┤ ┌┘└┐├─┤│││├─┘│  ├┤ └─┐
└─┘┘  └┴ ┴┴ ┴┴  ┴─┘└─┘└─┘

Coding from Life Archive 1
Coding from Life Archive 2
Coding from Life Archive (Mindy Seu)
Coding from Life Archive (Nika Fisher)






    (\
     \ \
 __    \/ ___,.-------..__        __
//\\ _,-'\\               `'--._ //\\
\\ ;'      \\                   `: //
 `(          \\                   )'
   :.          \\,----,         ,;
    `.`--.___   (    /  ___.--','
      `.     ``-----'-''     ,'
         -.               ,-
            `-._______.-'

You have a right and a responsability to use open and honest communication. This includes:
- You have a right to communicate how you want to be adressed (name, pronouns, language.s, etc) at any point in time. You are expected to respect the demands of others as much as possible.
- You are encouraged to communicate what you need or request accomodations when necessary.
It is your responsability to save and store ALL of your work, on- and offline, no exceptions.
You are always encouraged to take a break, for whatever reason, at any point and for however long. However, please let Nina know where you are at all times and catch up on what you missed.
You can always ask questions.

┌┐┌┌─┐┌┬┐┌─┐┌─┐  ┌─┐┌┐┌  ┌─┐┬─┐┌─┐┌─┐┌─┐┌┐┌┌┬┐┌─┐┌┬┐┬┌─┐┌┐┌┌─┐
││││ │ │ ├┤ └─┐  │ ││││  ├─┘├┬┘├┤ └─┐├┤ │││ │ ├─┤ │ ││ ││││└─┐
┘└┘└─┘ ┴ └─┘└─┘  └─┘┘└┘  ┴  ┴└─└─┘└─┘└─┘┘└┘ ┴ ┴ ┴ ┴ ┴└─┘┘└┘└─┘

Talk about your process. Think about nuggets of informations to give your classmates: a trick to solve a problem encountered, something unexpected that happened, a ressource stumbled upon doing reseach, a tag we didn’t mention in class, a way to cheat your way out of a problem...
Talk about next development steps.
Ask questions, ask for advice, ask for help.

    
    
    
    
    
    
    
    
    
    
    
                          _
                    .(o)`---.--...__.-.__
                  .'.' '-.-..--._.--._.(o)`---...-.____
                .'.' | |   .:'     .:'| |'--._..--'-.(o)---...._____
              .'.' .'| |.:'     .:'   |.| | | |  |`---.`--..--._.-.(o)
            .'.' .' ||.|-._.-.:'_.-_-.| | | | |  ||.:'    .:'|| | |-|
          .'.' .'   || |  '     '     | | . | |  ||-._.--'._.|| | | |
        .'.'|.''    || |  '     '     | | | | |  ||  '   '   || | | |
       '.'_||| '    || |  '     '     | | | | |  ||  '   '   || | | |
           ||| '    || | _ _ _ _ _ _  | | | / |  ||  '       || | | |
           ||| '    .| || | | | | | | | |  .  '  '-----....._|' | | |
           |||    .' | || | | | | | | |.|''  ----....   ____    ' | |
           |||  .'   |x][x| | | | | | | |---  ..    --  ...   --  | |
           |||.'    .|.|| | | | | | | | |-..__    _          __ ..| |
           ||    .'  | || | | | | | | | |          '''-----. _ -- | |
           ||.'      | || | | | | | | ||| ..  -  -...          .. | |
           ||     .' | || | | | | | | | |--..____  ... ''''''''-  | |
           ||  .'    |x][x| | | | | | | |              --  __ ....| |
           ||'    .' | || | | | | | | | |---  .  .....__  ..      | |
           || .' ' .'| ||_|_|_|_|_|_| | |. ___            .-. '-' | |
           ||   .'   | |_____________/(o)__  ....  ''''  /(o) ... | |
           ||.'   .' (o)=====]======[ //(o)=============/ //==(o)='=|
           ||  .'  .'        |      |//      |   |     / //   // /.'
           ||(o)\'     \     |      |/       /  /     / //   //`/
     _     || \\ \     |    =|======|=       | /     /`//   // /
      `-._.||==\\.\=====\    |      |   .'   | |====/ //===// /
          `-.   \\ \    |`-. |      |      | / /   / //   //`/ 
-._   `-.    `-. \\ \   |   =|======|=     || |   / //   //./       _.--
   `-..         `.\\`\  \    |      |     . './  /`//   .\ /  .. --'
       `..   `-.  `\\ \ |`.  |      |  .' '  |  / //   //\\-`'
          `-.       \\`\|   =|======|=       \ / // .-'   \\  .-`   .`
             `.  `.  \\/. -' |      |         / //-'    .` \\       _.-'
              `.      // \   |      |  .'  ' /`// `         \\ _..-'
                \    //.\/. =|======|=      / //       `   _.``
                 `. //  // \ |      |      / //  .-`   _.'
                   '/  // \  |      |  .' / //      _.'
                    `.//    =|======|=   / //   .-'
                     '/  `.  |      |   /.//  .'
                      `. .   |      |  /-// .'
                        `.  =|======|=/ // /
                          \  |      |/ //  |
                          |  |      |`//  /
                          \ =|======|=/ .'
                           | |    / |/  .|
                           \ |   / /|  .'\
                           |=|======|= | |
                           | |      |  | |
                           |           | |