{"id":21,"date":"2026-01-28T16:07:52","date_gmt":"2026-01-29T00:07:52","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/?page_id=21"},"modified":"2026-01-28T16:07:52","modified_gmt":"2026-01-29T00:07:52","slug":"project-2","status":"publish","type":"page","link":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/project-2\/","title":{"rendered":"Project 2"},"content":{"rendered":"<h2>Washoe: From Visual Mockup to Styled Page<\/h2>\n<h3>Brief<\/h3>\n<p>Code the HTML and CSS for the design given. Implement the design as closely as possible.<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26\" src=\"http:\/\/teaching.romanjaster.net\/artcenterfall2024\/wp-content\/uploads\/sites\/26\/2024\/09\/2024-09-08_12h13_13.png\" alt=\"\" width=\"2215\" height=\"1286\" \/><\/h3>\n<h3>Assets<\/h3>\n<p>You can access the design using this <a href=\"https:\/\/www.figma.com\/design\/ZsiuPU3BCGOaiZGZrOxv7y\/Washoe-Project-(Spring-2025)\/duplicate\"><strong>Figma link<\/strong><\/a>.<\/p>\n<p>Also, <a href=\"https:\/\/www.dropbox.com\/scl\/fo\/m773b2x9jyuh4ag6sp03j\/ANQ-jGNua6LkEk9jBdf8SlA?rlkey=rnhk2yrnokmr7sg4glmg3liq4&amp;dl=1\"><strong>download these files as a starting point<\/strong><\/a>.<\/p>\n<p>The fonts used in the design are PT Sans and Changa One. All three are available on <strong><a href=\"https:\/\/fonts.google.com\/\">Google fonts<\/a><\/strong>. Implementing them is <a href=\"https:\/\/developers.google.com\/fonts\/docs\/getting_started\">pretty easy<\/a>.<\/p>\n<h3>Learning Goals<\/h3>\n<p>The main point for this project is for us to thoroughly review the best practices for coding HTML and CSS. Along the way, you will:<\/p>\n<ul>\n<li>Use Figma<\/li>\n<li>Learn HTML\/CSS best practices<\/li>\n<li>Write semantic HTML<\/li>\n<li>Code a responsive and mobile-first page from scratch<\/li>\n<li>Use browser&#8217;s dev tools (aka inspector)<\/li>\n<li>Validate code<\/li>\n<li>Employ a CSS reset<\/li>\n<li>Use webfonts<\/li>\n<li>Use CSS Variables<\/li>\n<li>Learn about <code>flexbox<\/code> and <code>grid<\/code><\/li>\n<li>Use SVG images<\/li>\n<li>Code a mobile menu using javascript<\/li>\n<\/ul>\n<h3>HTML tags<\/h3>\n<p>You will need to utilize (and understand) the following HTML tags. <a href=\"https:\/\/www.w3schools.com\/tags\/\">Look them up<\/a> if you are unfamiliar with any.<\/p>\n<ul>\n<li><code>&lt;!DOCTYPE&gt;<\/code><\/li>\n<li><code>&lt;html&gt;<\/code><\/li>\n<li><code>&lt;head&gt;<\/code><\/li>\n<li><code>&lt;meta&gt;<\/code><\/li>\n<li><code>&lt;title&gt;<\/code><\/li>\n<li><code>&lt;link&gt;<\/code><\/li>\n<li><code>&lt;body&gt;<\/code><\/li>\n<li><code>&lt;header&gt;<\/code><\/li>\n<li><code>&lt;main&gt;<\/code><\/li>\n<li><code>&lt;footer&gt;<\/code><\/li>\n<li><code>&lt;nav&gt;<\/code><\/li>\n<li><code>&lt;button&gt;<\/code><\/li>\n<li><code>&lt;h1&gt;<\/code><\/li>\n<li><code>&lt;h2&gt;<\/code><\/li>\n<li><code>&lt;h3&gt;<\/code><\/li>\n<li><code>&lt;p&gt;<\/code><\/li>\n<li><code>&lt;blockquote&gt;<\/code><\/li>\n<li><code>&lt;img&gt;<\/code><\/li>\n<li><code>&lt;svg&gt;<\/code><\/li>\n<li><code>&lt;ul&gt;<\/code><\/li>\n<li><code>&lt;li&gt;<\/code><\/li>\n<li><code>&lt;a&gt;<\/code><\/li>\n<li><code>&lt;em&gt;<\/code><\/li>\n<\/ul>\n<h3>CSS Properties<\/h3>\n<p>You will need to utilize (and understand) the following CSS properties. <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/\">Look them up<\/a> if you are unfamiliar with any.<\/p>\n<ul>\n<li><code>display<\/code><\/li>\n<li><code>margin<\/code><\/li>\n<li><code>padding<\/code><\/li>\n<li><code>gap<\/code><\/li>\n<li><code>border<\/code><\/li>\n<li><code>width<\/code><\/li>\n<li><code>height<\/code><\/li>\n<li><code>max-width<\/code><\/li>\n<li><code>color<\/code><\/li>\n<li><code>background<\/code><\/li>\n<li><code>border-radius<\/code><\/li>\n<li><code>box-shadow<\/code><\/li>\n<li><code>text-align<\/code><\/li>\n<li><code>text-transform<\/code><\/li>\n<li><code>text-decoration<\/code><\/li>\n<li><code>font-family<\/code><\/li>\n<li><code>font-size<\/code><\/li>\n<li><code>font-weight<\/code><\/li>\n<li><code>line-height<\/code><\/li>\n<li><code>letter-spacing<\/code><\/li>\n<li><code>mix-blend-mode<\/code><\/li>\n<li><code>position<\/code><\/li>\n<li><code>top<\/code><\/li>\n<li><code>right<\/code><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Washoe: From Visual Mockup to Styled Page Brief Code the HTML and CSS for the design given. Implement the design as closely as possible. Assets You can access the design using this Figma link. Also, download these files as a starting point. The fonts used in the design are PT Sans and Changa One. All [&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-21","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/21","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=21"}],"version-history":[{"count":1,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/21\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}