Skip to content

Latest commit

 

History

History
71 lines (45 loc) · 2.54 KB

ux_outline.md

File metadata and controls

71 lines (45 loc) · 2.54 KB
Raw

UX Workshop

  • A note about terminology

    Technologists are terrible when in comes to acronyms, nicknames, metaphors, and analogies. Unfortunately, the best way to describe something new or abstract is to anchor it to something you already know (see what I did there?). Sometimes we even call two different things by the same name or two alike things by different names. The modern state of the web was created by many people from many cultures and languages over the last several decades and it sometimes shows.

  • Preface of today's concepts

    We're going to be moving fast today and introducing a lot of new concepts, feel free to interrupt me if I gloss over something or if you need something explained again or explained in a different way.

    We also have coaches here to help you if you get stuck.

  • HTML Fundamentals

    • Explain the overarching goal of what HTML is and what the browser does with it.

    • Explain basic HTML structure and syntax. A hamburger or skeleton might be a good example of things that have specific orders.

    • Explain the importance of syntax. Opening tags need closing tags. Computers are stupid and need instructions. This might be a time to show Firefox's 3D rendering of a web page.

    • Demo an HTML page being written.

    • Show a slide with required parts of a page.

  • HTML Fundamental Exercise

    • Have students build a simple static web page in their text editors, save to the local filesystem like any other file.

  • HTML Lists

    • Show real world examples of ordered lists vs unordered lists. Ordered: Recipes (how something is made), assembly instructions, driving directions. Things that may be sorted for quicker reference. Unordered: Grocery shopping lists, todo lists, inventories.

    • Demo HTML lists.

  • HTML Images - Explain attributes of an HTML element.

    • The web is made of more than just text. How to images get onto a web page?

    • Demo tags

  • Other HTML elements - Headings, paragraphs, divs, spans.

    • Explain that each element has a general purpose.

    • HTML does very little to design the web page. It's mostly structure and function. A skyscraper's internal structure vs its external appearance.

    • Show slide with HTML elements for reference.

  • HTML Elements Exercise

    • Have students build a social network profile with the new tools at their disposal.

    • Make mistakes! You can't break anything, delete something you think is important and refresh the page.