Lectures
Project 2 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 article reiterating why it’s such a great framework. (You can stop reading at the section “CSS Names with JavaScript Hooks.”)
Midterm Quiz Study Guide
The midterm is two weeks from today. Here is the study guide so you can prepare.
Due Next Week
Project 2
- Last round of Washoe! 🥲
- After watching the 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, 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
Delivery: Publish on Github
- Make sure you created a local Git repository and committed all changes.
- On the GitHub website, create your remote repository. It should be called
project2.ixp2. - In VS Code, push all changes from your local repository to your remote repository on GitHub.
- Use GitHub Pages to host your repository. (See GitHub website > Settings > Pages.)
- Set up a custom domain for your GitHub Pages site. This is a two-step process:
- On the GitHub website (Settings > Pages), enter a custom domain. The domain should be
project2.ixp2.yourdomain.com. - Log in to your registrar (Hostinger or Namecheap) and create a CNAME record:
project2.ixp2points toyourusername.github.io.
- On the GitHub website (Settings > Pages), enter a custom domain. The domain should be
- When you visit
project2.ixp2.yourdomain.comin your browser, you should see your project 2.
(Note: in the instructions above, replace yourdomain.com with your actual domain name and yourusername with your GitHub username.)
Final Project
We’re going to start thinking about the final project. We won’t start on it for a few more weeks, but I want you to come up with ideas now.
- Read the Final Project Brief
- Come up with 3 strong ideas for your final project
- Pick something that you find super exciting
- Explain your ideas on three separate 17 x 11 pages, print and bring to the next class
Show & Tell
Alicia and Manasvi: Post your discovery of the week in the #show-and-tell Slack channel.