Class 3: Semantics and the S.O.C.
The Plan
Look at some links and current events.
Lecture: Review Readings
- Define Separation of Concerns and Progressive Enhancement
- Why/why not? Websites vs. Webapps
- Turn off JS on a few websites
- Talk about performance and how websites load/rendering the canvas
- What are semantics?
Together: Install Emmet
Pair: Profile page
- Write semantic markup for a profile page together, content first.
Break
Lecture: Naming Things is Hard
- Why is how you name things important? Creating reusable code.
- Talk about the debate
- A pattern for naming classes, other options:
- BEM
- OOCSS
- SMACSS
- A mix
- When to use IDs (hint: pretty much never)
- Presentational class names
Pair: Back to profile page
- Come up with some “modules” for the profile page and add classes to the elements
- We’ll discuss your choices
- Add some styles (if time)
For Next Time
Readings:
Get your head around Responsive Web Design:
- Responsive Web Design - the original article! Still relevant.
- Mobile First Responsive Web Design - how we approach RWD today.
- Responsive Strategy - The different options in creating a responsive website. Takeaway: You can’t really just “make a website responsive”.
Some key CSS concepts (seriously, it’s important to do these):
- CSS Positioning Tutorial
- CSS Positioning 101 - A List Apart
- All About Floats - CSS Tricks
- Responsive Web Design Tutorial
To do:
- Finish and email me a zip of Assignment 1
- Send one link to the email list