{"id":8,"date":"2026-01-22T00:01:15","date_gmt":"2026-01-22T00:01:15","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/?page_id=8"},"modified":"2026-01-22T00:01:15","modified_gmt":"2026-01-22T00:01:15","slug":"project-1","status":"publish","type":"page","link":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/project-1\/","title":{"rendered":"Project 1"},"content":{"rendered":"<h2>Timeline Portrait<\/h2>\n<h3>Brief<\/h3>\n<p>You will be paired up with one of your classmates. Schedule a time to chat and get to know each other.<\/p>\n<p>Then, create a multi-page HTML website that showcases your classmate\u2019s life as a timeline of key ages.<\/p>\n<p>This is an HTML-focused project with minimal CSS styling. The design of this project comes from your structure, sequencing, links, headings, and content choices.<\/p>\n<h3>Process<\/h3>\n<h4>Interview Your Partner<\/h4>\n<p>Schedule a conversation with your partner.\u00a0Spend at least 20\u201330 minutes talking.<\/p>\n<p>Ask about specific ages. Use these ages as a starting point (you can add more if you want): 1, 4, 7, 12, 16, 18<\/p>\n<p>For each age, ask questions like:<\/p>\n<ul>\n<li>Where were you living then?<\/li>\n<li>What is one vivid memory from that age?<\/li>\n<li>Was there an object, person, or place that really mattered to you then?<\/li>\n<li>What were you worried about or excited about?<\/li>\n<li>Ask about anything you are curious about.<\/li>\n<\/ul>\n<p>Take real notes (on paper or in a doc). You will turn these in.<\/p>\n<h4>Concept and Structure<\/h4>\n<p>Your site is a portrait made of moments in time. Pick <em>specific details <\/em>from each age and turn them into a chain of pages the user can walk through, like chapters in a story. You can be abstract and poetic. Make it a little weird and surprising. (Stay away from being generic.)<\/p>\n<p>Your site must have at least 7 pages (add more ages if you wish):<\/p>\n<ul>\n<li>Home page<\/li>\n<li>Age 1<\/li>\n<li>Age 4<\/li>\n<li>Age 7<\/li>\n<li>Age 12<\/li>\n<li>Age 16<\/li>\n<li>Age 18<\/li>\n<\/ul>\n<p>Create a linking structure that allows the user to navigate through the site. The experience should feel mostly linear, as if the viewer is walking forward (or backward) through a life.<\/p>\n<h4>HTML Requirements<\/h4>\n<p>Across your whole site you must use:<\/p>\n<ul>\n<li>Anchor links to link from page to page (<code>&lt;a&gt;<\/code>)<\/li>\n<li>Headings (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, etc.)<\/li>\n<li>Paragraphs (<code>&lt;p&gt;<\/code>)<\/li>\n<li>Images (<code>&lt;img&gt;<\/code>)<\/li>\n<li>One unordered list (<code>&lt;ul&gt;<\/code>)<\/li>\n<li>One ordered list (<code>&lt;ol&gt;<\/code>)<\/li>\n<li>One <code>&lt;blockquote&gt;<\/code> with a direct quote from your partner<\/li>\n<li>One <code>&lt;details&gt;<\/code> + <code>&lt;summary&gt;<\/code> pair to reveal additional information or a hidden story<\/li>\n<li>Optional: include an audio snippet (<code>&lt;audio&gt;<\/code>) or a video clip (<code>&lt;video&gt;<\/code>)<\/li>\n<\/ul>\n<p>You should also:<\/p>\n<ul>\n<li>Give each page a meaningful title in the <code>&lt;title&gt;<\/code> tag<\/li>\n<li>Keep your files organized with meaningful names (e.g., <code>index.html<\/code>, <code>age-1.html<\/code>, <code>age-4.html<\/code>, etc.)<\/li>\n<\/ul>\n<h4>Minimal CSS Styling<\/h4>\n<p>This is primarily an HTML project. However, you may use a small amount of CSS to make things clearer and less drab.<\/p>\n<p>You may:<\/p>\n<ul>\n<li>Change font sizes, background colors, or text colors.<\/li>\n<li>Adjust margins\/padding or text alignment.<\/li>\n<\/ul>\n<p>Do not not use any CSS frameworks or templates.<\/p>\n<h4>No AI<\/h4>\n<p>This project must be created by you, not by an AI tool.<\/p>\n<p>That means:<\/p>\n<ul>\n<li>No AI-generated HTML, CSS, or JavaScript.<\/li>\n<li>No AI-written text content for the pages.<\/li>\n<li>No AI image generation for the main content.<\/li>\n<\/ul>\n<p>It\u2019s fine (and encouraged) to look up syntax or examples on Google, MDN, W3Schools, etc.<\/p>\n<h4>Deliverables<\/h4>\n<ul>\n<li>Bring your websites files to class on your laptop.<\/li>\n<li>Process PDF\n<ul>\n<li>A photo of your interview notes.<\/li>\n<li>A simple sketch showing your planned pages and links<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Due<\/h3>\n<p>Thursday, January 29 at the beginning of class. (This is a very fast project to kick things off.)<\/p>\n<h3>If you are lost<\/h3>\n<p>If you are completely new to HTML, that\u2019s totally fine!<\/p>\n<p>I recommend go through these two HTML tutorials on the Codecademy website:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.codecademy.com\/courses\/learn-html\/lessons\/intro-to-html\/exercises\/intro\">Introduction to HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.codecademy.com\/courses\/learn-html\/lessons\/semantic-html\/exercises\/introduction-to-semantic-html\">Introduction to Semantic HTML<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Timeline Portrait Brief You will be paired up with one of your classmates. Schedule a time to chat and get to know each other. Then, create a multi-page HTML website that showcases your classmate\u2019s life as a timeline of key ages. This is an HTML-focused project with minimal CSS styling. The design of this project [&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-8","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/8","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=8"}],"version-history":[{"count":3,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/8\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}