{"id":39,"date":"2026-02-19T07:55:40","date_gmt":"2026-02-19T15:55:40","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/?p=39"},"modified":"2026-02-19T11:13:14","modified_gmt":"2026-02-19T19:13:14","slug":"class-5","status":"publish","type":"post","link":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/class-5\/","title":{"rendered":"Class 5"},"content":{"rendered":"<h2>Lectures<\/h2>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u5W1FrJrsvA\">Project 2 Demo \u2013 Desktop CSS <\/a>(62 min)<\/p>\n<h2>Reading<\/h2>\n<p><a href=\"https:\/\/www.freecodecamp.org\/news\/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849\/\">CSS Naming Conventions that Will Save You Hours of Debugging<\/a> by Emmanuel Ohans<\/p>\n<p>I already introduced the <strong>BEM<\/strong> naming convention. Here&#8217;s a great article reiterating why it&#8217;s such a great framework. (You can stop reading at the section &#8220;CSS Names with JavaScript Hooks.&#8221;)<\/p>\n<h2>Midterm Quiz Study Guide<\/h2>\n<p>The midterm is two weeks from today. Here is the <a href=\"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/midterm-study-guide\/\">study guide<\/a> so you can prepare.<\/p>\n<h2>Due Next Week<\/h2>\n<h3>Project 2<\/h3>\n<ul>\n<li>Last round of Washoe! \ud83e\udd72<\/li>\n<li>After watching the demo lecture (see above):\n<ul>\n<li>Re-write your desktop CSS code <em>from scratch <\/em><a href=\"https:\/\/www.dropbox.com\/scl\/fo\/q5qw76mb5fzv5jkw6fc4z\/AEDQUjQfketJaGbpzbJW8_U?rlkey=vlzb2z4c3r3vwhf876kw8ejyw&amp;dl=0\"><strong>starting with these files<\/strong><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Some added creativity:\n<ul>\n<li>Come up with your own color scheme for the page<\/li>\n<li>Add hover effects for all links<\/li>\n<\/ul>\n<\/li>\n<li>Challenge:\n<ul>\n<li>I included JavaScript code for the hamburger menu button. When the button is clicked, the class <code>show-menu<\/code> is added to the <code>&lt;body&gt;<\/code> tag. When the button is clicked again, the class is removed.<\/li>\n<li>Based on this setup, write CSS that shows and hides the mobile menu! (Tip: You&#8217;ll have to use a descendant selector.)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Delivery: Publish on Github<\/h4>\n<ul>\n<li>Make sure you created a <strong>local Git repository<\/strong> and committed all changes.<\/li>\n<li>On the <strong>GitHub<\/strong> website, create your <strong>remote repository<\/strong>. It should be called <code>project2.ixp2<\/code>.<\/li>\n<li>In VS Code, <strong>push all changes<\/strong> from your local repository to your remote repository on GitHub.<\/li>\n<li>Use <strong>GitHub Pages<\/strong> to host your repository. (See GitHub website &gt; Settings &gt; Pages.)<\/li>\n<li>Set up a <strong>custom domain<\/strong> for your GitHub Pages site. This is a two-step process:\n<ul>\n<li>On the GitHub website (Settings &gt; Pages),\u00a0 enter a custom domain. The domain should be\u00a0 <code>project2.ixp2.yourdomain.com<\/code>.<\/li>\n<li>Log in to your registrar (Hostinger or Namecheap) and create a <strong>CNAME record<\/strong>: <code>project2.ixp2<\/code> points to <code>yourusername.github.io<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li>When you visit <code>project2.ixp2.yourdomain.com<\/code> in your browser, you should see your project 2.<\/li>\n<\/ul>\n<p>(Note: in the instructions above, replace <code>yourdomain.com<\/code> with your actual domain name and <code>yourusername<\/code> with your GitHub username.)<\/p>\n<h3>Final Project<\/h3>\n<p>We&#8217;re going to start thinking about the final project. We won&#8217;t start on it for a few more weeks, but I want you to come up with ideas now.<\/p>\n<ul>\n<li>Read the <a href=\"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/final-project\/\"><strong>Final Project Brief<\/strong><\/a><\/li>\n<li>Come up with 3 <em>strong <\/em>ideas for your final project\n<ul>\n<li>Pick something that you find super exciting<\/li>\n<\/ul>\n<\/li>\n<li>Explain your ideas on three separate 17 x 11 pages, print and bring to the next class<\/li>\n<\/ul>\n<h3>Show &amp; Tell<\/h3>\n<p><strong>Alicia<\/strong> and <strong>Manasvi<\/strong>: Post your <em>discovery of the week <\/em>in the #show-and-tell Slack channel.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lectures Project 2 Demo \u2013 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&#8217;s a great article reiterating why it&#8217;s such a great framework. (You can stop reading at the section &#8220;CSS Names with JavaScript Hooks.&#8221;) Midterm Quiz [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":5,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/posts\/39\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}