MP1 Final Showcase · Spotting the generic AI look

Today was the Mini Project 1 showcase. Twelve of you walked through the site you built for someone else, and we gave each other feedback. The one habit worth keeping: a submission is the start of a project, not the end, so show it to your client and get at least two rounds of feedback. The big lesson was learning to spot the generic AI look and push past it so your site looks like yours, not like every other AI-generated page. Before Wednesday, download the JavaScript demo page, read the code, and write down at least three things you do not understand.

Everyone who was here presented: a quick walkthrough of the site, the story of who the client is, what they asked for, what is built, and what is still in progress. The clients and goals were all over the map, which was great to see. What the showcase shows is the arc. You start from an idea, talk to a real client, and end up with a working site you can keep improving. Polish is not the point.

A submission is the start of the project, not the end. The first version is what you show your client so they can tell you what they actually want.

When everyone builds with AI, the same default look shows up everywhere. None of it is wrong, but once you can see it, you can decide whether you want it. Here is the checklist we built, using my own course website as the example since it had all of these too:

1. Everything in rectangular cards. AI loves to put every piece of content in a box. Ask yourself if a section really needs to be a card, or if it would read better as plain text or a list.
2. Large rounded corners on cards and buttons. A very round corner is a strong AI tell. If it does not fit your theme, ask AI to reduce or remove the radius.
3. Generic fonts. AI rarely picks an intentional font. Choose one from Google Fonts that fits the mood of your site, whether that is playful or formal, and tell AI to use it.
4. A yellowish or brownish "paper" background. Some tools reach for this by default. If you did not ask for a warm paper look, say so.
5. Inconsistent pages. When you build a multi-page site over many rounds, AI forgets what earlier pages looked like and the navigation, spacing, and styles drift apart. Fix this by planning your structure, categories, and page list up front, and by telling AI to keep everything consistent.

The takeaway: tell your AI specifically what you want. "Make it look nice" gives you the average. Naming the font, the colors, the corner style, and the structure is how you get something that looks like your site.

A lot of your projects ran into the same real-world questions. Here are the answers I shared in chat, all optional and beyond what the course requires, but handy:

• Contact forms. A form needs somewhere to send the message, and there is no free built-in inbox. Three easy paths: resend.com (an email API with a free tier), Cloudflare Email Routing (forwards you@yourdomain to your personal Gmail, if you own a domain), or the simplest one, link or embed a Google Form.
• Images you are allowed to use. For a class or hobby project, borrowed images are fine. For a site you will keep, use free-to-use photos from Unsplash or Pixabay, or your own pictures.
• Where to deploy. A plain HTML, CSS, and JavaScript site belongs on GitHub Pages: free, fast, and easy to connect to a domain. Anything with a real backend (logins, a shopping cart, a database) needs a host like Vercel, Railway, or Cloudflare. We will get to that later.
• Front end versus back end. A few of you built carts, admin logins, or checkout flows. Those need a backend and a database, which is past what a static site can do. A beginner-friendly option when you get there is Supabase, a free hosted database (it is what powers the class board). You can still prototype the idea now by faking the data with a JSON file to prove the workflow, then wire up a real backend later.
• The "grill me" prompt. A fun way to plan: ask AI to interview you relentlessly about every part of your site, work through each design decision, and recommend an answer for each. It surfaces choices you had not thought about before you build.

One of the dark-mode toggles in today's projects is a perfect preview of what JavaScript does. When you click the button, JavaScript adds or removes a CSS class on the page, and that class carries all the dark colors. Click once to add it, click again to remove it. That is the whole idea of making a page react to you, and it is where we are headed next.

1. Get the JavaScript demo into your repo. Download js-demo.html and put it in your oim3690 repo folder, then open it with Live Server and try each feature. Read the code and list at least three things you do not understand in logs/wk05.md. Most of this will be new, and that is the point. We will go through your questions together in class, so be ready to post them in chat.
2. Keep improving Mini Project 1. Take the feedback from today and from your client and make changes. The Class Favorite vote is Wednesday, and first place earns extra credit. If you updated or submitted your site late, email me so I can refresh the gallery.
3. Start thinking about Mini Project 2. It is posted now. The idea: a small interactive tool that fixes a real annoyance in your own week, something you would actually use. It runs entirely in the browser with plain JavaScript, so no API and no server (those come in MP3). Read the spec, create the new repo, and add a short PROPOSAL.md. The proposal is due Sunday 6/21.
4. Sign up for a Lightning Talk. This is a required participation item, worth 3 points: a two-minute talk on anything you find interesting. Sign up at the Lightning Talks board, ideally a couple of days before your slot.
5. Book your required 1:1 with me when you get a chance. The booking link is in the Class Information module on Canvas.

Wednesday we run the Class Favorite vote and officially start JavaScript.