Class 2: Oh, the Internet.
The Plan
- Housekeeping - all good?
- Eduardo presents click-hole
Lecture: How the Internet works
- The Cable Map
- How it works (metaphor on the whiteboard)
- Difference between front-end and back-end
Keywords: servers, DNS, bandwidth, client, browser.
Code: Take a look at Welcome exercise
Code Review, Q & A, and demos.
Break
Lecture: What’s on a server?
- It’s just a computer!
- Absolute vs. relative file paths
- The command line
Keywords: Unix, LAMP, command line
Unix Commands: cd, ls, touch, mkdir
Together: Create site folder in command line.
Exercise: Start on Assignment 1.
If you missed class:
- Download the starter files.
- Go to Assignment 1 in Hackpad and duplicate it. Track your progress.
For Next Time
Readings:
This is a lot of reading - you don’t need to read every word of these, but familiarize yourself with the terms Progressive Enhancement, separation of concerns, and semantics. These topics have been around of a while, but in the age of JS web apps, they are very hot topics.
- Dao of Web Design - from 2000?! This article is a classic.
Next time we’ll be talking about semantics, or how to name make our HTML meaningful and reusable. There were a couple of Smashing articles a while ago that debated this, and caused a stir.
Look at these in order:
- Semantic code: What? Why? How? and Wikipedia Semtantic HTML
- Our Pointless Pursuit of Semantic Value - Divya Manian
- Pursuing Semantic Value - response to the above, Jeremy Keith
Progressive enhancement and the ‘separation of concerns’ come into play here as well:
- On Progressive Enhancement - by me!
- Understanding Progressive Enhancement
- Progressive Enhancement: It’s About the Content
- Websites vs. Webapps - CSS-Tricks
To do:
- Spend some time on Assignment 1. Bring questions for next time.