In Class
We will check in and look at project 1.
I will give a few lectures.
I will also talk to you individually about purchasing your domain and git.
Lectures
HTML vs CSS vs JavaScript (A Metaphorical Adventure)
Project 1 Demo
- Overview of the Process (40 min) (slides)
- HTML (33 min)
- CSS Reset and Fonts (11 min)
- Adding Classes (8 min)
- Mobile CSS (59 min)
Reading
Responsive Web Design by Ethan Marcotte (May 2010)
This piece represents important web history: it’s the blog post where the term ‘responsive design’ was coined. Read it for some historical context, but do not take any of the code examples at face-value. Most of them are outdated. In fact, you can stop reading before the section ‘Adapt, respond, and overcome.’
Specifics on CSS Specificity by Chris Coyier
I mention CSS specificity the ‘Overview of the Process’ lecture. It gets pretty esoteric, but if you want to get really good at CSS, read this article. It might save you hours of debugging in the future.
Due Next Week (Sep 22)
Project 1
- After watching all demo lectures, revise your mobile CSS code from scratch starting with these files.
- Also code the desktop view. Note that you’re jumping ahead here again. Next class, I will show how I would code the desktop view.You will need to employ media queries, like so:
@media screen and (min-width: 800px) {
/* desktop css here */
}
Show & Tell
Michael: Post your discoveries of the week in the #show-and-tell Slack channel and give a short presentation in the beginning of class.