Class 5

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):
  • 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-menu is 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.)

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.ixp2 points to yourusername.github.io.
  • When you visit project2.ixp2.yourdomain.com in 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.