{"id":54,"date":"2026-02-25T18:46:11","date_gmt":"2026-02-26T02:46:11","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/?page_id=54"},"modified":"2026-02-27T13:56:51","modified_gmt":"2026-02-27T21:56:51","slug":"project-3","status":"publish","type":"page","link":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/project-3\/","title":{"rendered":"Project 3"},"content":{"rendered":"<h2>Five Sentences, Five Buttons<\/h2>\n<p>In this project, you will tell a short story through language, typography, and button behavior.<\/p>\n<p>You will write a five-sentence story and design a small website consisting of five pages. Each page contains one sentence and one button. The button links to the next page, moving the reader through the story one sentence at a time.<\/p>\n<p>The story should be inspired by something that has happened in your life.<\/p>\n<h3>Structure<\/h3>\n<ul>\n<li>The website must consist of 5 pages. The first page must be called <code>index.html<\/code>.<\/li>\n<li>Each page must include exactly:\n<ul>\n<li><strong>One sentence<\/strong><\/li>\n<li><strong>One button<\/strong><\/li>\n<\/ul>\n<\/li>\n<li>Clicking the button moves to the next page<\/li>\n<\/ul>\n<h3>The Button<\/h3>\n<p>On each page, the button must <strong>repeat<\/strong> <strong>exactly one word<\/strong> from the sentence on that page. Think about which word deserves to be repeated.<\/p>\n<h3>Interaction &amp; Motion<\/h3>\n<p>On hover, the button should \u201cact\u201d in a way that feels appropriate to the story being told.<\/p>\n<p>Use motion and timing to reinforce meaning.<\/p>\n<p>Utilize the following CSS properties:<\/p>\n<ul>\n<li><code>transform<\/code><\/li>\n<li><code>transition<\/code><\/li>\n<li><code>animation<\/code><\/li>\n<\/ul>\n<h3>Typography<\/h3>\n<p>Typography is part of the storytelling.<\/p>\n<p>The sentences should all be in the same typeface across all pages.<\/p>\n<p>Each of the buttons, however, should have a different typeface. Choose typefaces that reinforce the tone of the repeated word. Be subtle rather than obvious.<\/p>\n<p>Use Google Fonts. Make sure to embed the fonts in your pages.<\/p>\n<h3>Layout<\/h3>\n<p>Keep it simple, but make it look refined. Make your pages look great on small and big screens. Code mobile first!<\/p>\n<h3>Delivery<\/h3>\n<p>Upload the project to GitHub pages:<br \/>\n<code>project3.ixp2.yourdomain.com<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Five Sentences, Five Buttons In this project, you will tell a short story through language, typography, and button behavior. You will write a five-sentence story and design a small website consisting of five pages. Each page contains one sentence and one button. The button links to the next page, moving the reader through the story [&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-54","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/types\/page"}],"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=54"}],"version-history":[{"count":5,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/54\/revisions\/62"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/media?parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}