{"id":6426,"date":"2026-03-20T18:54:13","date_gmt":"2026-03-20T18:54:13","guid":{"rendered":"https:\/\/nmi.cool\/webdev\/?page_id=6426"},"modified":"2026-04-08T17:44:12","modified_gmt":"2026-04-08T17:44:12","slug":"final-project-26s","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/final-project-26s\/","title":{"rendered":"Final Project"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/11\/great-1024x682.jpg\" alt=\"\" class=\"wp-image-2493\" srcset=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/11\/great-1024x682.jpg 1024w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/11\/great-300x200.jpg 300w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/11\/great-768x512.jpg 768w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/11\/great-1536x1024.jpg 1536w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/11\/great.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Goals<\/h3>\n\n\n\n<p>Create a project on the web that<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>combines multiple skills and technologies we&#8217;ve learned this semester<\/li>\n\n\n\n<li>follows the best practices we&#8217;ve covered for those technologies<\/li>\n\n\n\n<li>stretches you 15-20% past what we&#8217;ve already covered \/ what you know you can accomplish for sure<\/li>\n\n\n\n<li>includes a brief (450-750 word) critical reflection on what you built and what you learned from building it<\/li>\n\n\n\n<li>you can&#8217;t wait to show off to others<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Dates<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Proposal due <strong>April 19 at 11:59 p.m<\/strong>.<\/li>\n\n\n\n<li>Final submission due <strong>May 4 at 11:59 p.m<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Project Menu<\/h3>\n\n\n\n<p>Choose one of the following for the final project:<\/p>\n\n\n\n<p><strong>Speculative Redesign<\/strong><\/p>\n\n\n\n<p>Choose a site you know well, and build it better.<\/p>\n\n\n\n<p>Reorganize the content, add new features, update the visual design, but above all else, make informed choices that actually (or at least arguably) improve the experience of using the site. You should be able to justify your choices based on web design and UX best practices that we\u2019ve discussed throughout the course.<\/p>\n\n\n\n<p><strong>Adventure with JavaScript<\/strong><\/p>\n\n\n\n<p>Dive into JavaScript and show off what you&#8217;ve created in a styled landing page. You might:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Complete five projects at <a href=\"http:\/\/javascript30.com\/\">javascript30.com<\/a> and modify them substantially to make them unique (if you choose this project, you\u2019ll have to make some meaningful changes to the JS itself and present it in a compelling way!)<\/li>\n\n\n\n<li>Build something cool with an API like <a href=\"https:\/\/developers.giphy.com\/docs\/\">GIPHY<\/a>\u2018s or <a href=\"https:\/\/openweathermap.org\/api\">OpenWeatherMap<\/a><\/li>\n\n\n\n<li>Combine a few <a href=\"https:\/\/tympanus.net\/codrops\/\">Codrops<\/a> tutorials to build something amazing<\/li>\n<\/ul>\n\n\n\n<p><strong>Agentic AI Exploration&nbsp;<\/strong><\/p>\n\n\n\n<p>This project asks: how well can you direct, evaluate, and refine AI as a creative and technical partner?<\/p>\n\n\n\n<p>For this option, you\u2019ll revisit your Project 1 site, but with a twist. Instead of hand-coding it, you\u2019ll use an agentic AI platform \u2013 such as Replit, Cursor, Claude, ChatGPT Codex (now free with student accounts) etc. \u2013 to recreate your project as closely as possible. The goal is to match the functionality, structure, style, and user experience of your original site as closely as you can. If your hand-coded version had a distinct layout or visual design, sticky navigation, interactive features, etc., your AI-built version should too.<\/p>\n\n\n\n<p><strong>This project is as much about process as it is about outcome.<\/strong> You are required to document your entire prompting workflow: your initial prompts, iterations, refinements, and any troubleshooting steps you took along the way. Think of this as a transparent record of how you collaborate with AI to build something real.<\/p>\n\n\n\n<p>Your final reflection should dig into that process. Compare your expectations going into the first prompt with the actual results you got. Where did the AI fall short? Where did it surprise you? What challenges did you run into while trying to get accurate or usable output? You should also reflect on what you learned about writing effective prompts, how your strategy evolved, and what external resources (documentation, forums, tutorials, etc.) helped you along the way.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Grading (25 points total)<\/h3>\n\n\n\n<p>Submit your Final Project + Dossier at this&nbsp;<strong><a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSegLSk4ZiaiL2qAPLv0gcA2hmE7giCuXUGddTO8q-Ds8M9P1w\/viewform\">Google Form.<\/a><\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Project proposal (0 points \/ -2 points)<\/strong><\/h4>\n\n\n\n<p>The project proposal will be submitted via this&nbsp;<a href=\"https:\/\/forms.gle\/6tgwmXn9AUmPGfqu7\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Google Form<\/strong><\/a>. If your proposal clearly defines the project you\u2019re considering, you earn 0 points. If your proposal fails to convey a sense of preparation and consideration, you will lose up to two points off your final grade.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Final project (20 points)<\/strong><\/h4>\n\n\n\n<p>The entire final project will be graded qualitatively with an eye specifically toward the project goals. The correct posture for this project is not \u201cWhat do I need to do?\u201d but rather \u201cHow awesome can I make it?\u201d<\/p>\n\n\n\n<p>Specifically, I\u2019ll be looking for thoughtful selection and use of the skills and technologies we\u2019ve learned, designs that follow best practices we\u2019ve covered, independent learnings integrated into the project, and a clear commitment to quality, polished work.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"reflection\"><strong>Critical Reflection (2.5 points)<\/strong><\/h4>\n\n\n\n<p>The reflection should be posted to your portfolio, either as a part of your Web Dev course page or as its own subpage. It may also be posted on your final project site itself in a subtle (but clearly discoverable) link in a menu or footer. You\u2019ll submit a link to wherever it lives on the form you use to turn in your final project (see below). It\u2019s also your best chance to guide me through your project make sure I see and understand the amazing work you\u2019ve done.<\/p>\n\n\n\n<p>In roughly 450 to 600 words, walk me through what you built, what you learned from doing so, the challenges you faced, and the things you\u2019re particularly proud of. Make liberal use of screen captures, code samples, and of course, quality, well-edited prose. As always, be as specific and detailed as possible. This is your opportunity to craft a well-supported argument for the grade you think you deserve.<\/p>\n\n\n\n<p>Note: Screenshots are important here, including \u201cwork in progress\u201d shots! For example, if you are doing a speculative redesign, show us the original site so we can see how you improved the site design. If you are proud of your custom CSS show us a before and after shot of what the website looked like before you customized it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Recorded&nbsp;<strong>Presentation<\/strong>s (2.5 points)<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Plan on approximately 2-3 minutes for your recorded presentation.<\/li>\n\n\n\n<li>The goal is not to give a comprehensive tour of every single part of your site. Instead, aim for the following breakdown:\n<ul class=\"wp-block-list\">\n<li>A brief (10-20 second) refresher on topic \/ goals of your site.<\/li>\n\n\n\n<li>60-120 seconds giving a guided tour of a few (2-4) highlights from your site. These could be design features you\u2019re ready to show off, tricky technical challenges you\u2019re working through, ways you served client needs, etc.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Submission<\/h4>\n\n\n\n<p>Submit your Final Project link to this&nbsp;<strong><a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSegLSk4ZiaiL2qAPLv0gcA2hmE7giCuXUGddTO8q-Ds8M9P1w\/viewform\">Google Form.<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Goals Create a project on the web that Dates Project Menu Choose one of the following for the final project: Speculative Redesign Choose a site you know well, and build it better. Reorganize the content, add new features, update the visual design, but above all else, make informed choices that actually (or at least arguably) [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6426","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=6426"}],"version-history":[{"count":6,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6426\/revisions"}],"predecessor-version":[{"id":6454,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6426\/revisions\/6454"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=6426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}