Task 7: Vibe-code a portfolio 2026

Introduction

This week you built a portfolio from a WordPress theme and let a chatbot critique your new site. Now you’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’t change anything in your own WordPress portfolio.)

💬 In your critique chat

1. Open the AI chat where you ran the advanced prompt in class. This chat should already have your screenshot and critique, so there’s nothing more to upload. (Missed class? See the FAQ.)
   🎗 As a reminder, you summarized the chatbot’s feedback on that screenshot in the Slack #ai-web-design channel.
   ⚠️  ChatGPT or Claude should give you a web page preview by default; with Google Gemini, you may need to select + > Canvas first.
2. In that same chat, type a prompt like this one, choosing two or three problems from the critique:
   📍Acting 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: [YOUR CHOICES]. Use the simplest possible code, adding comments where helpful. Use plain HTML and CSS inside a <style> element. Use CSS color names like “turquoise” instead of hex, HSL, or other color values. Put each CSS property-value pair on its own line.
3. Tell the chatbot any improvements you want (eg, “Make the colors more vibrant” or “Prevent the menu from overlapping the photo”). Keep asking for fixes until you’re satisfied with the results.
4. Screenshot this latest version of the web page made by AI.

📝 On this class WordPress site

5. Add a new post in the NMD 100 dashboard (not your portfolio dashboard) with a title like “Task 7: Mary Gonzalez,” making sure to add the Task 7 category.
6. Add the original screenshot you already uploaded to the chatbot—this is probably a capture of your hand-made WordPress home page.
7. Also add a screenshot of the version you made with AI (above).
8. Add the following text in paragraphs or bullets:
   • The improvements you asked the AI to make, and whether it made each one.
   • Which of the two screenshots you prefer and why.
9. Click the Update and/or Publish buttons to post your images and text.

🛑 Stop here if you don’t want extra credit.

✨Add these steps for Extra Credit✨

(Up to 60 additional points—see rubric in FAQ.)

🖊 In CodePen

10. In the original chat, find the latest web page that AI made, and type this prompt:
    📌 Display the HTML for that page in this chat.
11. Copy the code by itself to your clipboard.
12. Open codepen.io/pen; if necessary, log in with the account from Week 7’s exercise.
    ⚠️ If you see boilerplate code already in the CodePen editor panes, close the tab and open the correct link above 👆.
13. In the empty HTML pane, paste the chatbot’s code.
14. Still in the HTML pane, look for the starting <style> tag. Copy every line between that and the closing </style> tag. Paste that into the CSS pane.
    ⚠️ If you leave the <style> and </style> tags in the CSS pane, the styles will not apply!
15. In the HTML pane, look for the opening <body> tag. Delete every line above it, including the starting body tag itself.
16. In the HTML pane, look for the closing </body> tag. Delete every line below it, including the closing body tag itself.
17. Change one color by hand, working only in the CSS box:
    • Find a line that sets a color such as “white”, “lightblue”, or “lavender”.
    • Copy that line and paste the copy directly below it.
    • In the copy, swap in a new color from this list of CSS color names.
      ⚠️ Pick one of these official names rather than guessing at a color name that might not work.
    • Turn the original line into a comment by wrapping it in /* and */, so only the new color applies.

    For example:

    98   /* background-color: white; */
    99  background-color: lightyellow;

    💡 You may have to change a few different colors before you see a visible result in CodePen’s preview pane.

18. Take one final screenshot of the entire CodePen window including the preview (not just the code panes).
19. Save the Pen and copy its URL.

📝 Back in this class WordPress site

19. Find your Task 7 post and add heading at bottom called “Extra credit.”
20. Paste the URL for the Pen you just saved.
21. Paste the old and new line of CSS you changed in CodePen, eg:

    /* background-color: white; */
    background-color: lightyellow;

22. Add the last (third) screenshot so we can see how the actual color changed.
23. Update your Task 7 post for extra credit! (See rubric below for points awarded.)

FAQ