{"id":33,"date":"2026-02-05T07:55:16","date_gmt":"2026-02-05T15:55:16","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/?p=33"},"modified":"2026-02-04T18:39:36","modified_gmt":"2026-02-05T02:39:36","slug":"class-3","status":"publish","type":"post","link":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/class-3\/","title":{"rendered":"Class 3"},"content":{"rendered":"<h2>In Class<\/h2>\n<p>We will purchase a domain name for everyone.<\/p>\n<p>And I will give a few lectures. And I will show you how to push your code to a github repository.<\/p>\n<p>We will check in and look at project 2.<\/p>\n<h3>Lectures<\/h3>\n<p><a href=\"https:\/\/www.dropbox.com\/s\/10ltlmqp7v7p8wy\/HTML%20CSS%20JS%20Metaphors.pdf?dl=0\">HTML vs CSS vs JavaScript<\/a><\/p>\n<p><a href=\"https:\/\/www.dropbox.com\/scl\/fi\/4nkbv1k0i7klc36nhpqkm\/CSS-basics.pdf?rlkey=monmvvbhdf3a3lta9jj3m4l0l&amp;dl=0\">CSS Basics<\/a><\/p>\n<h3>Project 2 \u2013 Demo Videos<\/h3>\n<ol>\n<li><a href=\"https:\/\/youtu.be\/QuFl27V1TsM\">HTML<\/a> (33 min)<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=oQbThtjR0XU\">CSS Reset and Fonts<\/a> (11 min)<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=0ri2saBuns4\">Adding Classes<\/a> (8 min)<\/li>\n<\/ol>\n<h2>Due Next Week (Feb 12)<\/h2>\n<h3>Project 2<\/h3>\n<p><strong><a href=\"https:\/\/www.dropbox.com\/scl\/fo\/zademtdxh2msa03p79x3f\/AKE5fxRpu4aJT1ZCo4qhtaU?rlkey=qa10rgfyp0zc18ocuq842hqxk&amp;dl=0\">Download these files<\/a> <\/strong>(they include my html from the demo videos above).<\/p>\n<p>Then, write the CSS for small screens (mobile).<\/p>\n<p>Test browser widths between 320 and 500 pixels. (We will deal with the design for larger screens later.)<\/p>\n<p>Don&#8217;t worry about the mobile menu button behavior for now. This (hamburger) menu button will eventually show and hide the menu. For this round, the menu items should just be shown expanded as they appear in the mockup.<\/p>\n<p>If you feel ambitious, continue with the desktop style. But, again, you <strong>must start coding the mobile first.<\/strong><\/p>\n<h3>Show &amp; Tell<\/h3>\n<p>From now on, each week two students will share a web discovery in the <a href=\"https:\/\/artcenterixp2-fni5190.slack.com\/archives\/C0AA3JQJPGD\"><strong>#show-and-tell<\/strong><\/a> Slack channel and give a short presentation in the beginning of class. This could be an article, a tool, or a coding technique you just discovered, or an inspiring website.<\/p>\n<p>Next week: <strong>Sunwoo<\/strong> &amp; <strong>Selina\u00a0<\/strong><\/p>\n<p>Consider these resources:<\/p>\n<h4>Showcase Sites<\/h4>\n<ul>\n<li><a href=\"http:\/\/awwwards.com\">awwwards.com<\/a><\/li>\n<li><a href=\"http:\/\/siteinspire.com\">siteinspire.com<\/a><\/li>\n<li><a href=\"https:\/\/www.siteofsites.co\/\">siteofsites.co<\/a><\/li>\n<li><a href=\"http:\/\/onepagelove.com\">onepagelove.com<\/a><\/li>\n<li><a href=\"https:\/\/www.cssdesignawards.com\/\">cssdesignawards.com<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/\">smashingmagazine.com<\/a><\/li>\n<\/ul>\n<h4>Newsletters<\/h4>\n<ul>\n<li><a href=\"https:\/\/web-design-weekly.com\/\">web-design-weekly.com<\/a><\/li>\n<li><a href=\"https:\/\/newsletter.uxdesign.cc\/\">newsletter.uxdesign.cc\u00a0<\/a><\/li>\n<li><a href=\"https:\/\/tympanus.net\/codrops\/collective\/\" rel=\"noopener noreferrer\">tympanus.net\/codrops\/collective<\/a><\/li>\n<li><a href=\"https:\/\/figmalion.com\/\">figmalion.com<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In Class We will purchase a domain name for everyone. And I will give a few lectures. And I will show you how to push your code to a github repository. We will check in and look at project 2. Lectures HTML vs CSS vs JavaScript CSS Basics Project 2 \u2013 Demo Videos HTML (33 [&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-33","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/posts\/33","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=33"}],"version-history":[{"count":1,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/posts\/33\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}