{"id":30648,"date":"2026-08-07T20:35:09","date_gmt":"2026-08-08T00:35:09","guid":{"rendered":"https:\/\/umainenewmedia.net\/nmd100\/?p=30648"},"modified":"2026-10-27T13:52:09","modified_gmt":"2026-10-27T17:52:09","slug":"task-7-vibe-code-a-portfolio-2026","status":"publish","type":"post","link":"https:\/\/umainenewmedia.net\/nmd100\/task-7-vibe-code-a-portfolio-2026\/","title":{"rendered":"Task 7: Vibe-code a portfolio 2026"},"content":{"rendered":"<p>&nbsp;<\/p>\n<h2>Introduction<\/h2>\n<p>This week you built a portfolio from a WordPress theme and let a chatbot critique your new site. Now you&#8217;ll see if AI can code the page you made by hand with WordPress. For extra credit, you can adjust the code it generates to your liking<\/p>\n<p>(You won&#8217;t change anything in your own WordPress portfolio.)<\/p>\n<p><!-- TODO: hero image (alignright, like Task 5) --><\/p>\n<h4>\ud83d\udcac In your critique chat<\/h4>\n<ol>\n<li>Open the AI chat where you ran the <strong>advanced prompt<\/strong> in class. This chat should already have your screenshot and critique, so there&#8217;s nothing more to upload. (Missed class? See the FAQ.)<br \/>\n\ud83c\udf97 As a reminder, you summarized the chatbot&#8217;s feedback on that screenshot in the Slack <em>#ai-web-design<\/em> channel.<br \/>\n\u26a0\ufe0f\u00a0 <a href=\"https:\/\/chatgpt.com\"><span style=\"color: #800080;\">ChatGPT<\/span><\/a> or <a href=\"https:\/\/claude.ai\"><span style=\"color: #800080;\">Claude<\/span><\/a> should give you a web page preview by default; with Google Gemini, you may need to select + &gt; Canvas first.<\/li>\n<li>In that same chat, type a prompt like this one, choosing two or three problems from the critique:\n<div style=\"clear: both; background-color: azure; font-family: courier; font-size: .8em; color: darkslategray; margin-left: 2em; padding: .5em 1em; border-radius: .5em; border: aquamarine solid 1px; max-width: max-content;\">\ud83d\udccdActing as a web developer, build a single HTML file that recreates the web page shown in this screenshot; display a working preview in this chat that I can see and interact with. Keep my content and overall look, but fix these problems from your critique: <span style=\"color: #800080;\">[YOUR CHOICES]<\/span>. Use the simplest possible code, adding comments where helpful. Use plain HTML and CSS inside a &lt;style&gt; element. Use CSS color names like &#8220;turquoise&#8221; instead of hex, HSL, or other color values. Put each CSS property-value pair on its own line.<\/div>\n<\/li>\n<li>Tell the chatbot any improvements you want (eg, &#8220;Make the colors more vibrant&#8221; or &#8220;Prevent the menu from overlapping the photo&#8221;). Keep asking for fixes until you&#8217;re satisfied with the results.<\/li>\n<li>Screenshot this latest version of the web page made by AI.<\/li>\n<\/ol>\n<h4>\ud83d\udcdd On this class WordPress site<\/h4>\n<ol start=\"5\">\n<li>Add a new post in the <strong><em>NMD 100<\/em><\/strong>\u00a0dashboard (not your portfolio dashboard) with a title like \u201cTask 7: Mary Gonzalez,\u201d making sure to add the <strong>Task 7<\/strong> category.<\/li>\n<li>Add the original screenshot you already uploaded to the chatbot\u2014this is probably a capture of your hand-made WordPress home page.<\/li>\n<li>Also add a screenshot of the version you made with AI (above).<\/li>\n<li>Add the following text in paragraphs or bullets:\n<ul>\n<li>The improvements you asked the AI to make, and whether it made each one.<\/li>\n<li>Which of the two screenshots you prefer and why.<\/li>\n<\/ul>\n<\/li>\n<li>Click the <em>Update<\/em> and\/or <em>Publish<\/em> buttons to post your images and text.<\/li>\n<\/ol>\n<h5>\ud83d\uded1 <em>Stop here if you don&#8217;t want extra credit.<\/em><\/h5>\n<h3>\u2728Add these steps for Extra Credit\u2728<\/h3>\n<p>(Up to 60 additional points\u2014see rubric in FAQ.)<\/p>\n<h4>\ud83d\udd8a\u00a0In CodePen<\/h4>\n<ol start=\"10\">\n<li>In the original chat, find the latest web page that AI made, and type this prompt:\n<div style=\"clear: both; background-color: azure; font-family: courier; font-size: .8em; color: darkslategray; margin-left: 2em; padding: .5em 1em; border-radius: .5em; border: aquamarine solid 1px; max-width: max-content;\">\ud83d\udccc Display the HTML for that page in this chat.<\/div>\n<\/li>\n<li>Copy the code by itself to your clipboard.<\/li>\n<li>Open <a href=\"https:\/\/codepen.io\/pen\/\">codepen.io\/pen<\/a>; if necessary, log in with the account from Week 7&#8217;s exercise.<br \/>\n\u26a0\ufe0f If you see boilerplate code already in the CodePen editor panes, close the tab and open the correct link above \ud83d\udc46.<\/li>\n<li>In the empty HTML pane, paste the chatbot&#8217;s code.<\/li>\n<li>Still in the HTML pane, look for the starting <code>&lt;style&gt;<\/code> tag. Copy every line <em>between<\/em> that and the closing <code>&lt;\/style&gt;<\/code> tag. Paste that into the CSS pane.<br \/>\n\u26a0\ufe0f If you leave the <code>&lt;style&gt;<\/code> and <code>&lt;\/style&gt;<\/code> tags in the CSS pane, the styles will not apply!<\/li>\n<li>In the HTML pane, look for the opening <code>&lt;body&gt;<\/code> tag. Delete every line above it, including the starting body tag itself.<\/li>\n<li>In the HTML pane, look for the closing <code>&lt;\/body&gt;<\/code> tag. Delete every line below it, including the closing body tag itself.<\/li>\n<li>Change <strong>one color<\/strong> by hand, working only in the <strong>CSS<\/strong> box:\n<ul>\n<li>Find a line that sets a color such as &#8220;white&#8221;, &#8220;lightblue&#8221;, or &#8220;lavender&#8221;.<\/li>\n<li>Copy that line and paste the copy <strong>directly below<\/strong> it.<\/li>\n<li>In the copy, swap in a new color from this <a href=\"https:\/\/tutorials.nmdprojects.net\/css_color_names\/related_files\/css_color_palettes.html\">list of CSS color names<\/a>.<br \/>\n\u26a0\ufe0f Pick one of these official names rather than guessing at a color name that might not work.<\/li>\n<li>Turn the original line into a comment by wrapping it in <code>\/*<\/code> and <code>*\/<\/code>, so only the new color applies.<\/li>\n<\/ul>\n<p>For example:<\/p>\n<pre style=\"background-color: black; color: palegoldenrod; max-width: max-content; padding: 1em;\"><span style=\"color: silver;\">98   \/* background-color: white; *\/\r\n99<\/span>  background-color: lightyellow;<\/pre>\n<p>\ud83d\udca1 You may have to change a few different colors before you see a visible result in CodePen&#8217;s preview pane.<\/li>\n<li>Take one final screenshot of the entire CodePen window including the preview (not just the code panes).<\/li>\n<li><strong>Save<\/strong> the Pen and copy its URL.<\/li>\n<\/ol>\n<h4>\ud83d\udcdd Back in this class WordPress site<\/h4>\n<ol start=\"19\">\n<li>Find your Task 7 post and add heading at bottom called &#8220;Extra credit.&#8221;<\/li>\n<li>Paste the URL for the Pen you just saved.<\/li>\n<li>Paste the old and new line of CSS you changed in CodePen, eg:\n<pre><span style=\"color: #808000;\">\/* background-color: white; *\/\r\nbackground-color: lightyellow;<\/span><\/pre>\n<\/li>\n<li>Add the last (third) screenshot so we can see how the actual color changed.<\/li>\n<li><strong>Update<\/strong> your Task 7 post for extra credit! (See rubric below for points awarded.)<\/li>\n<\/ol>\n<h3>FAQ<\/h3>\n<details style=\"border: silver dotted 1px; margin: 0 0 1em 0; padding: 0 1em 0 1em; border-radius: 1em;\">\n<summary style=\"font-size: 1.25rem; color: #0c598e; font-weight: 300; line-height: 1.7;\">What&#8217;s the grading rubric?<\/summary>\n<table>\n<tbody>\n<tr>\n<td style=\"background-color: lightblue;\" colspan=\"2\">Required of everyone:<\/td>\n<\/tr>\n<tr>\n<td>You pasted the original screenshot.<\/td>\n<td>0\u201310<\/td>\n<\/tr>\n<tr>\n<td>You pasted a screenshot of the last version that you made with AI.<\/td>\n<td>0\u201310<\/td>\n<\/tr>\n<tr>\n<td>Your explained your attempt to improve the design with AI and whether that was successful.<\/td>\n<td>0\u201310<\/td>\n<\/tr>\n<tr>\n<td>You explained whether you prefer the original or AI-assisted version, and why.<\/td>\n<td>0\u201310<\/td>\n<\/tr>\n<tr>\n<td>You were thoughtful or imaginative.<\/td>\n<td>0\u201310+<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: lightblue;\" colspan=\"2\">Extra credit only:<\/td>\n<\/tr>\n<tr>\n<td>You included the link to your CodePen.<\/td>\n<td>0\u201310<\/td>\n<\/tr>\n<tr>\n<td>You changed one color by hand in CodePen, commenting out the original, and quoted both lines.<\/td>\n<td>0\u201310<\/td>\n<\/tr>\n<tr>\n<td>You include a third screenshot that clearly shows a change in color.<\/td>\n<td>0\u201310<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Your grade is the total of all points times 2, for a possible maximum of 100%.<\/p>\n<p>Tasks get downgraded 10 points for each week late.<\/p>\n<\/details>\n<details style=\"border: silver dotted 1px; margin: 0 0 1em 0; padding: 0 1em 0 1em; border-radius: 1em;\">\n<summary style=\"font-size: 1.25rem; color: #0c598e; font-weight: 300; line-height: 1.7;\">Which posts do I make here versus in my portfolio?<\/summary>\n<p>Only one post, here on the class site. You don&#8217;t change anything in your portfolio for this Task; your AI version stays in your AI chat (and in CodePen if you do the extra credit).<\/p>\n<\/details>\n<details style=\"border: silver dotted 1px; margin: 0 0 1em 0; padding: 0 1em 0 1em; border-radius: 1em;\">\n<summary style=\"font-size: 1.25rem; color: #0c598e; font-weight: 300; line-height: 1.7;\">I missed the critique, or I can&#8217;t find my chat. What now?<\/summary>\n<p>Start a new ChatGPT or Claude chat, upload a screenshot of your portfolio home page (<a href=\"https:\/\/nmdprojects.net\/teaching_resources\/ai_web_design.html#upload\">how to screenshot and upload<\/a>), and ask: &#8220;Critique the design of this portfolio home page and list three problems a beginner could fix.&#8221; Then continue from step 2.<\/p>\n<\/details>\n<details style=\"border: silver dotted 1px; margin: 0 0 1em 0; padding: 0 1em 0 1em; border-radius: 1em;\">\n<summary style=\"font-size: 1.25rem; color: #0c598e; font-weight: 300; line-height: 1.7;\">The chatbot gave me code but no preview. What do I do?<\/summary>\n<p>Ask it to &#8220;show a working preview in this chat.&#8221; In Gemini, select Canvas from the tools menu first. In ChatGPT, look for a <em>Preview<\/em> button on the code block.<\/p>\n<\/details>\n<details style=\"border: silver dotted 1px; margin: 0 0 1em 0; padding: 0 1em 0 1em; border-radius: 1em;\">\n<summary style=\"font-size: 1.25rem; color: #0c598e; font-weight: 300; line-height: 1.7;\">Can I get more help with prompting for code?<\/summary>\n<p>Sure: check out <a href=\"https:\/\/docs.google.com\/presentation\/d\/1X-DvhtV93lU_cc-tuKq8_WKTN63R0Ogm7K8fUcp1lt4\/edit?usp=sharing\">How to prompt AI: code 1<\/a>. You can also post questions to <em>#troubleshooting<\/em> on Slack.<\/p>\n<\/details>\n<details style=\"border: silver dotted 1px; margin: 0 0 1em 0; padding: 0 1em 0 1em; border-radius: 1em;\">\n<summary style=\"font-size: 1.25rem; color: #0c598e; font-weight: 300; line-height: 1.7;\">Can I see a model answer?<\/summary>\n<p>Not yet: this is a new Task. <!-- TODO: link an A+ submission after Fall 2026 --> Follow the rubric and you&#8217;ll be fine.<\/p>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Introduction This week you built a portfolio from a WordPress theme and let a chatbot critique your new site. Now you&#8217;ll see if AI can code the page you made by hand with WordPress. For extra credit, you can adjust the code it generates to your liking (You won&#8217;t change anything in your own [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,34,32],"tags":[63,35],"class_list":["post-30648","post","type-post","status-publish","format-standard","hentry","category-61","category-task-7","category-tasks","tag-63","tag-tasks"],"_links":{"self":[{"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/posts\/30648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/comments?post=30648"}],"version-history":[{"count":10,"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/posts\/30648\/revisions"}],"predecessor-version":[{"id":32916,"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/posts\/30648\/revisions\/32916"}],"wp:attachment":[{"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/media?parent=30648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/categories?post=30648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umainenewmedia.net\/nmd100\/wp-json\/wp\/v2\/tags?post=30648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}