{"id":38,"date":"2026-09-22T08:30:07","date_gmt":"2026-09-22T15:30:07","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/?p=38"},"modified":"2026-09-21T18:45:03","modified_gmt":"2026-09-22T01:45:03","slug":"class-3","status":"publish","type":"post","link":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/class-3\/","title":{"rendered":"Class 3"},"content":{"rendered":"<h2>In-class<\/h2>\n<p><a href=\"https:\/\/youtu.be\/OHRXLRCNg0I\">CSS selectors<\/a> (23 min) (<a href=\"https:\/\/www.dropbox.com\/scl\/fi\/rnidzm073yh306f50v96z\/CSS-Selectors.pdf?rlkey=q9u6a9e4kjh97zg51302jxprz&amp;dl=0\">slides<\/a>)<\/p>\n<h2>Other Lectures<\/h2>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u5W1FrJrsvA\">Project 1 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 little 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>Due Next Week<\/h2>\n<h3>Project 1<\/h3>\n<ul>\n<li>Last round of Washoe!\n<ul>\n<li>\ud83d\ude22I know.<em><br \/>\n<\/em><\/li>\n<\/ul>\n<\/li>\n<li>After watching the Project 1 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, can you 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<h3>Show &amp; Tell<\/h3>\n<p>Becca: Post your <em>discovery of the week <\/em>in the #show-and-tell Slack channel.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In-class CSS selectors (23 min) (slides) Other Lectures Project 1 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 little article reiterating why it&#8217;s such a great framework. (You can stop reading at the [&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-38","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/posts\/38\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}