2d:null 2e:["$","title",null,{"children":"Styled Mini Cyberbiography | Nabil Kashyap | Observable"}] 33:T6f6,html`

I remember the Casio SK-1, which I weirdly got for Christmas even though I showed no musical aptitude or proclivity. But how was I to return this, Santa? Luckily my mother somehow intuited that Santa had erred, whisked the box away from me and handed it to my brother, who was, in fact, musical.

Interesting thing is--skip a decade--and I ended up inheriting the SK-1 after all. Amazing friends and hypnotizing myself with its built in 1 second, 8Kb lo-fi sampler. I hooked it up to my record player, my family desktop, to anything with an audio out. Years later, my peculiar obsession was vindicated when I learned a particular brand of lo-fi electronic musician idolized the SK-1. Case in point the Mount Eerie album recorded with no other instrument.

The SK-1, for me, is a gentle, dreamy reminder of how use and technology are mutually constitutive. On the one hand, the specific affordances and limitations of this one machine dictated a certain relationship with the keyboard as I tried to make music. On the other, I came to learn something about myself through creatively pushing against the machine's constraints and an ability to imagine other possibilities. Only to learn a sizable group of synth nerds did the same and continue to do so.

`34:T51a,md` ## Step 2 Great, so you have a beautiful mini cyberbiography. Now let's style it! This is a way getting to encounter the basic building blocks of web (at least the HTTP part): HTML/CSS. First some brief fundamentals with the help of [this guide by Tania Rascia](https://www.taniarascia.com/overview-of-css-concepts/#html-fundamentals). Second, let's very quickly (4 minutes!) learn to think about the basics of web design, [through this amazing demo by Jeremy Thomas](https://jgthms.com/web-design-in-4-minutes). ## Further Resources The internet is rife with tutorials and demos about, well, the internet. Not all are awesome, beware! When in doubt, MDN (Mozilla Developers Network) is always a good source. Included below are two other suggestions. - [HTML Basics by MDN](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) - [CSS Basics by MDN](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) - [Intro to HTML, CSS, and Javascript by Jay Dev](https://observablehq.com/@jdev42092/week-1a-introduction-to-html-css-and-javascript) which is great because it's Observable oriented but more in-depth than we need right now. - [The LO-FI Manifesto by Karl Stolley](http://kairos.technorhetoric.net/20.2/inventio/stolley) `35:T58b,md` ## Step 3 For next week, let's apply some markup and style to our biography using HTML/CSS rather than markdown. Place any CSS in its own block. See below for an example. A scavenger hunt, kind of. 1. Use each of the HTML elements below in styling and otherwise considering form in relation to the content of your reflection. 2. Where do you see the following element "attributes" come into play? 3. Apply at least **five** of the following styles to your HTML elements. ### Elements - Header - Paragraph - Unordered list - Image (using a URL) - Anchor (i.e., link) - Horizontal rule - Strong text - Italic text ### Attributes - src - href - alt ### CSS Styles - Change the font color for some text - Change the font family for some text - Change the font size - Change the distance between lines of text - Add some space around an image - Change the background color for some element - Decorate links with a dotted underline - Make something invisible unless a mouse hovers over it - Use a linear gradient for the background of an element - Change the background color on mouse hover over an element - Change the duration of how long it takes for the background color to change on mouse hover - Prepend an emoji to the beginning of every numbered item in a list - Prepend different emojis to the beginning of every odd and even numbered item in a list - Animate a shape and make it move on mouse hover `36:[] 31:{"id":"deebdc24f9e9d00a","slug":"mini-cyberbiography","title":"Styled Mini Cyberbiography","thumbnail":"7f3eb2b805910076bbbcc7cfaaf645301d320158e50ea1a17767a766010df59f","access_level":"public","create_time":"$D2020-09-16T16:05:55.222Z","update_time":"$D2020-09-30T19:26:59.004Z","view_time":null,"first_public_time":"$D2020-09-16T16:15:15.740Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":"starter_2024"},"version":447,"publish_version":447,"role":null,"authored":false,"authors":[{"type":"individual","id":"72aca3ddc200afbc","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":null}],"members":[{"type":"individual","id":"72aca3ddc200afbc","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":{"id":"0e85d4f59338dd86","slug":"lib-lab-2020","title":"Lib/Lab 2020","owner":{"id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap"}},"type":"notebook","body":{"title":"Styled Mini Cyberbiography","cells":[{"id":0,"value":"md`# *Styled* ~~Mini~~ Cyberbiography`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`[![1569 copper engraving title Humani Victus Instrumenta](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Unknown_engraver_-_Humani_Victus_Instrumenta_-_Ars_Coquinaria_-_WGA23954.jpg/186px-Unknown_engraver_-_Humani_Victus_Instrumenta_-_Ars_Coquinaria_-_WGA23954.jpg)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`\n## Step 1\n\nIn light of our conversation around \"mapping the terrain,\" please reflect on where you fit. Reflect on your own personal history with technology.\n\n- Describe one or two emotional or affective memories you have of a particular technology. When did something technologically mediated give you pleasure or delight? What about discomfort, embarrassment, maybe pain?\n- What discourse or topos on our Tech Discourse Map do you feel like you belong or are otherwise interested in exploring? Why?\n- What discourse or topos on our map is least familiar or new to you?\n- In a sentence or two, how would you describe your current relationship digital networked technologies? It may be easier to imagine a particular application (whether Moodle, Facebook, or Zoom) or piece of hardware (whether phone, laptop, or gaming console). Excited, worried, or indifferent? Empowered or frustrated?\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`\n\n

Applying styles is as easy as:

\n\n1. (unambiguously) identifying an HTML element selector \n\\`

\\`**?** \\`p.easy {}\\`***!***\n2. [looking up the syntax for the style rule](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)\n3. associating the rule with your selector \n\\`p.easy { font-size: 5rem; }\\`\n4. testing, adjusting, iterating ...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"html`\n

Example CSS Style Block

\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n## Stuck?\n- [Getting Started with Observable](https://observablehq.com/@observablehq/user-manual?collection=@observablehq/introduction)\n- [Markdown summary](https://observablehq.com/@jaynel/markdown-summary)`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"