FlyRank AI Fluency · Intern Guide
Week 5 · Ship the ugly version

Ship Ugly, Ship Live

This is the week your portfolio goes public, while it is still rough. You put your real work in, with AI as your build partner, and you send the link to one real person. Ugly and live beats beautiful and private, every time.

Phase: Build Estimated hours: 4
The idea this week
  • The first real thing your mentor ever shipped was a restaurant ordering tool held together with tape. It worked because real people used it. That moment, watching a stranger use the thing you made, is what no tutorial gives you.
  • You do not wait until you feel ready. You ship the ugly version: complete enough that a stranger can open it, see your work, and understand what you can do, even though you know ten things are still rough.
  • AI is your build partner now. You feed it your cases and your look, build page by page, read what it gives you, and adjust. You are directing a build, not memorizing code.
  • One firm rule: never paste in something you could not begin to explain. If a chunk is a mystery, have the AI teach it to you first.

Why it matters

A private portfolio helps no one and teaches you nothing. There is a specific fear this week, and it is real: it is your name and your work on this one, so publishing feels exposing. Do it anyway. The first time your real URL works and someone else opens it and sees your work, the project stops being a someday-thing and becomes real. That moment is worth more than another week of polishing; get to it now.

Two things to resist. Do not redesign while you build, the look was decided last week. And do not add projects you have not done. Build the real cases, framed well. Scope creep is just fear wearing a productive costume.

Brief

  1. Using AI as your build partner, assemble your cases, look, and images into the project, page by page from the pieces you already have. Understand each piece enough to explain it; if something is a mystery, have AI tutor you on it before it goes in.
  2. Get every page from your sitemap live and reachable on your public URL: the navigation works and every case opens. Complete enough to understand, not polished.
  3. Send the live link to one real person, ideally in your target field, and ask them to look. Note what they saw, what confused them, and whether the work landed.
  4. Write a short "still ugly" list: the things you already know are rough.

Deliverable

The live URL with all pages reachable, the note on the one real person's reaction, and the "still ugly" list. Post it in your track thread.

Evaluation criteria (pass/revise)

  • The portfolio is actually live and every sitemap page is reachable on a real URL.
  • The real work, cases, look, and images are in, not placeholder text or empty slots.
  • A real person opened it and their reaction is captured.
  • You can explain how your site is built: no unexplained mystery code.
  • An honest "still ugly" list is present.
The move this week

Build one section at a time, and understand each one

Never ask for "build my whole website." Go section by section, so you can read it, adjust it, and own it. When something looks wrong, describe it in plain words. You do not need the jargon.

Build with the first, fix with the second. Swap each {highlighted} bit.

Prompt · Build one section
We are building my portfolio now, one section at a time. My stack: {your_stack}. My identity: {your_fonts_and_palette_hex}. Start with the {which_section, e.g. hero}. Here is the content: {paste_your_content}. Write clean, simple code for just this section, matching my identity. After the code, explain the main parts in plain language so I could re-explain them. Keep it beginner-readable, no clever tricks. Then tell me where to paste it and how to see it.
Prompt · Fix one specific thing that looks wrong
Something looks off in this section and I will describe it in plain words, no jargon: {describe_it, e.g. the spacing is cramped and one image is too big}. Here is the code: {paste_the_section_code}. Make the smallest change that fixes just this, do not redesign the rest. Show me only what changed and explain why in one line, so I understand the fix and can do it myself next time.
A worked example

Iris ships rough, on purpose

AI assistant
Iris: My case section works but the spacing is ugly and one image is too big.
AI: That is fine for now. Get every page reachable first, then we tidy. Want me to fix just the oversized image so it loads fast on a phone?
Iris: Yes. Then I am publishing it even though it is not perfect.
AI: Good call. Here is how to deploy the current version so every page in your sitemap is live, and a five-point check to confirm it is really online.
Iris: It is live. I texted the link to a designer friend.
AI: That is the milestone. Note what confused her, that is your fix list, not your failure list.

Iris's site is rough and real and online. A real person has seen it. That is worth more than another week of polishing in private.

For your track. "Complete enough" means your evidence is visible, even if rough. Machine learning: the demo link works or the notebook renders. Marketing: the sample reads end to end. Dev: the repo link resolves and the tool runs. Ship with the proof in, polish later.

Watch out for

  • "Almost ready." That is stalling. Publish the ugly one today.
  • Mystery code. If the AI hands you a block you cannot follow, learn it before it goes in.
  • Redesigning or inventing projects. Both are fear in disguise. Assemble what is real.

What good looks like

  • A real URL, every page reachable, your work visible.
  • One honest reaction from a real person, captured.
  • Nothing shipped that you could not begin to explain.
Words you'll hear this week
  • Deploy / publish. Pushing your latest version live so the public URL shows it.
  • Public URL. The web address anyone can open. Always confirm it on a second device.
  • Build partner. Using AI to write code with you, section by section, while you assemble and understand it.
  • Scope creep. Quietly adding more than you planned, usually to avoid the scary thing (shipping).
  • Ship the ugly version. Going live while it is still rough, instead of polishing forever.
Search any of these in the Glossary.

Linked resources

freeCodeCamp

Responsive Web Design ↗

A free, project-based certification in HTML and CSS. Building real pages is the best way to understand what the AI writes for you.

FreeCourse
 Google · web.dev

Learn HTML ↗

The reference for the building blocks: structure, links, images, forms. Keep it open while you assemble your sections.

FreeCourse
To publish what you build, use a host from Week 4's resources: GitHub Pages or Netlify both go live in minutes.