In-class
CSS selectors (23 min) (slides)
Other Lectures
Project 1 Demo – Desktop CSS (62 min)
Reading
CSS Naming Conventions that Will Save You Hours of Debugging by Emmanuel Ohans
I already introduced the BEM naming convention. Here’s a great little article reiterating why it’s such a great framework. (You can stop reading at the section “CSS Names with JavaScript Hooks.”)
Due Next Week
Project 1
- Last round of Washoe!
- 😢I know.
- 😢I know.
- After watching the Project 1 Demo lecture (see above):
- re-write your desktop CSS code from scratch starting with these files
- Some added creativity:
- Come up with your own color scheme for the page
- Add hover effects for all links
- Challenge:
- I included JavaScript code for the hamburger menu button. When the button is clicked, the class
show-menuis added to the<body>tag. When the button is clicked again, the class is removed. - Based on this setup, can you write CSS that shows and hides the mobile menu? (Tip: You’ll have to use a descendant selector.)
- I included JavaScript code for the hamburger menu button. When the button is clicked, the class
Show & Tell
Becca: Post your discovery of the week in the #show-and-tell Slack channel.