NO HOMEWORK IS DUE THIS WEEK.
Take this quiz
Web-Building & UX
You’ll learn enough HTML and CSS to hand-code your own website, and we’ll take a peek at the fields of UX and UI.
Read, view, and listen
- A Nostalgic Journey through the History of Web Design (article, 4 min.)
- “User Experience Basics” and “User Research Basics”
- “Dark Patterns” (explore the website and list of dark patterns)
- “Design Values: Hard-Coding Liberation?”
Install
(If you already have a code editor you like, you can skip this. If you don’t know what a code editor is, download VS Code!)
Create an account
This is so that you’ll be able to publish your website via Github Pages. If you prefer not to sign up for Github, you can skip this; just know we may not be able to publish your site during classtime. If you already have a Github account, you can use that.
In-Class Activities
HTML & CSS
HTML and CSS reference handouts
We’ll walk through the following tutorials today. (You almost certainly won’t make it through all of them, and that’s OK! Feel free to continue on your own time if you’d like.)
- Create your first website with HTML
- Paint that page with CSS
- More advanced CSS
- Publish your site with Github Pages
Make a fancy site with MuralAnnoyingly, since I wrote this tutorial, Mural has gone out of business. (Sigh.) If you’d like to use a drag-and-drop editor to build and publish a fancy website, I suggest using Publii, a free application that integrates with Github Pages. Here are instructions for creating a website, and here are instructions for uploading it to Github.
Do you find it easier to follow videos? Watch me walk through these tutorials on video:
- Create your first website with HTML
- Paint that page with CSS
- More advanced CSS
Do you already know HTML & CSS?
That’s great! First of all, take a look around you and make sure none of your classmates needs help.
Next, consider using the next hour or so to investigate some frameworks and technologies with which you’re unfamiliar. I suggest:
D3 (a JavaScript library for data visualization; I suggest beginning with Scott Murray’s book)
Hugo or Jekyll (static-site generators that can be used with GitHub Pages; here is a helpful Jekyll tutorial)
Bootstrap (a modern, grid-based web framework in very wide use for front-end web design)