{"id":44,"date":"2026-09-28T19:23:25","date_gmt":"2026-09-29T02:23:25","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/?page_id=44"},"modified":"2026-09-28T20:11:34","modified_gmt":"2026-09-29T03:11:34","slug":"project-2","status":"publish","type":"page","link":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/project-2\/","title":{"rendered":"Project 2"},"content":{"rendered":"<h2>Twelve Things<\/h2>\n<p><em>Make sure you look at the readings about grid and transitions.<\/em><\/p>\n<h3>Brief<\/h3>\n<p>Landing pages are a fundamental feature of the web. They showcase all the available items for whatever the site is about (products, people, articles, etc). For this project you will create a responsive landing page for a collection of items.<\/p>\n<h3>The collection<\/h3>\n<p>Your collection must have 12 items that say something about you. Think of it as your personal <a href=\"https:\/\/en.wikipedia.org\/wiki\/Listicle\">listicle<\/a>.<\/p>\n<p>For example:<\/p>\n<ul>\n<li>12 things I wish didn\u2019t exist<\/li>\n<li>12 people who affected me deeply<\/li>\n<li>12 objects on my desk<\/li>\n<li>12 things I last bought on Amazon<\/li>\n<li>12 ugly animals I love<\/li>\n<li>12 things I left behind<\/li>\n<li>12 photos I took exactly at noon<\/li>\n<\/ul>\n<p>I think the weirder \/ more personal your collection, the better. Just make sure it&#8217;s easy for you to source images.<\/p>\n<h3>The page<\/h3>\n<p>You must use <code>CSS grid<\/code> to display your items. Each item should include an image and title.<\/p>\n<p>On a real website, each item would link to a detail page. We will <em>only <\/em>work on the landing page, but do include a link <code>&lt;a href=\"#\"&gt;<\/code> for each item.<\/p>\n<h3>Challenge 1: Radically different layouts<\/h3>\n<p>Usually, responsive design is used mainly to make sure that the page works well no matter what screen size.<\/p>\n<p>For this exercise, however, I&#8217;m asking you to use responsiveness in an experimental\/surprising way: make the page feel radically different based on the screen size.<\/p>\n<p>Create three distinctly different layouts for small, medium, and large screens. Don\u2019t simply change the number of columns. Use each screen size as an opportunity to reinterpret the collection through changes in scale, order, spacing, typography, or color.<\/p>\n<p>Does each layout interpret your collection differently?<\/p>\n<h3>Challenge 2: Meaningful Hovers<\/h3>\n<p>Each of the 12 items should get individual hover behaviors. This gives you the opportunity to make an additional point about each item&#8217;s role in your collection. Are some items sad while others are happy? Embarrassed or confident? Important or insignificant? And how could that difference be communicated through a hover effect?<\/p>\n<h2>Starter Kit<\/h2>\n<p>Please use these <a href=\"https:\/\/www.dropbox.com\/scl\/fo\/1j2xgljfsypa3g2l2jzml\/AIMbid1by8Vj1p18A5sbPeo?rlkey=yzpe9yqzcpa8nh0rtwdgy18ju&amp;dl=0\"><strong>starterkit files<\/strong><\/a> as the starting point for your project.<\/p>\n<h2>Learning Goals<\/h2>\n<ul>\n<li>Deepen your understanding of <code>@media<\/code> queries<\/li>\n<li>Deepen your understanding of <code>grid<\/code><\/li>\n<li>Explore <code>hover<\/code> states and the <code>transition<\/code> property<\/li>\n<li>Have fun, make something surprising, be creative<\/li>\n<\/ul>\n<h2>Due Next Class (Oct 6)<\/h2>\n<p>Delivery:<\/p>\n<ul>\n<li>Show your project in class (remember, we&#8217;ll meet on Zoom)<\/li>\n<li>Extra credit: publish your project to GitHub pages.<\/li>\n<li>Extra extra credit: Try setting up a custom domain <code>project2.coding.yourdomain.com<\/code> for your page<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Twelve Things Make sure you look at the readings about grid and transitions. Brief Landing pages are a fundamental feature of the web. They showcase all the available items for whatever the site is about (products, people, articles, etc). For this project you will create a responsive landing page for a collection of items. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-44","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/types\/page"}],"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=44"}],"version-history":[{"count":4,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/44\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/44\/revisions\/50"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/media?parent=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}