FlyRank AI Fluency · Intern Guide
Week 7 · Make it real · Checkpoint 1

Make It Real

Ugly and live was the right bar, and the wrong place to stop. This week is the short, unglamorous pass that lifts your site a whole tier: it works on a phone, it reads well, nothing is broken, and the proof actually lands. Then your first real review.

Phase: Build+ Estimated hours: 6 Checkpoint 1
This week is a real gate. You do not move on until your site works on every screen and a reviewer can tell what you do. Making a confusing site more powerful helps no one.
The idea this week
  • The distance between an amateur site and one people trust is not talent. It is a short list of boring fixes almost everyone skips.
  • Most people open your link on a phone first. If it is broken there, it does not matter how good it looks on your laptop. The phone is the main thing.
  • You cannot see your own site clearly after staring at it for weeks. A second pair of eyes finds the confusion you have gone blind to.
  • When someone says "this is confusing" or "I could not tell what you do," that is a gift, not an attack. You fix, you do not defend.

Why it matters

The jump from "amateur" to "trustworthy" is a short, boring checklist almost everyone skips. Do it and your portfolio moves up a whole tier without you becoming a designer. And you cannot see your own portfolio clearly after staring at it for weeks: a real second pair of eyes finds the confusion you have gone blind to, including the worst one, "I couldn't tell what you do." Taking that feedback well, without defending, is itself a professional skill, and it is the gate before you add power.

Brief

  1. Mobile first: open the portfolio on a real phone and fix everything broken there: text size, work images spilling out or going blurry, untappable buttons, broken layout. Then check tablet and desktop widths.
  2. Readability: comfortable text size and line spacing, color contrast checked, work captures crisp.
  3. Kill the obvious breaks: click every link (including demo and repo), compress oversized images, fix anything plainly wrong on any width. Use AI to audit a section: what is broken on mobile, what is the accessibility problem, why is this slow. Keep a short fix log of what was broken and what you changed.
  4. Submit your live portfolio for Checkpoint 1: Design Review (mentor or structured peer review), together with your proof statement from Week 1 so the reviewer can judge it against its actual job.
  5. Ask the reviewer two questions first: in ten seconds, what do I do, and would you believe I am good at it? Then collect the rest of the feedback without defending. Sort it into must-fix (confusing, broken, hurts the one action, the proof does not land) and nice-to-have.
  6. Fix the must-fixes on the live site and reply with what you changed.

Deliverable

The updated live URL and your fix log (before/after notes, ideally a phone screenshot before and after), plus the reviewer's feedback, your must-fix/nice-to-have sort, and evidence the must-fixes are addressed on the live site. Post it in your track thread. This checkpoint must pass before you move to Week 8.

Evaluation criteria (pass/revise)

  • The portfolio genuinely works on mobile, checked on a real phone, not just a resized browser.
  • Text is readable, contrast passes, work images are crisp, and all links work; nothing is obviously broken on any width.
  • The fix log shows real problems found and fixed.
  • The reviewer could state what you do and felt the work backed it up, or the gaps are now fixed.
  • Feedback is sorted honestly into must-fix versus nice-to-have, and the must-fixes are actually fixed on the live site, not just acknowledged.
  • You engaged with the feedback rather than defending the original.
The move this week

Audit with AI, then take the crit without defending

First, let AI hunt where your site breaks. Then run the proof test on yourself before a human does. Then submit for review and take the feedback the right way.

Hunt the breaks, run the ten-second test, then fix the hero. Swap each {highlighted} bit before you send it.

Prompt · Audit a section for problems
Audit this section of my live portfolio for problems. Here is the code: {paste_the_code} and the live URL: {your_live_url}. Check four things and list concrete fixes, most important first: mobile (what breaks or looks wrong on a narrow phone screen), readability (is text big enough, spacing comfortable, contrast strong enough), speed (anything heavy slowing it down), and breaks (any broken links, including my demo or repo). For each fix, tell me what to change and why, in plain language. Targeted fixes, not a rewrite.
Prompt · Run the ten-second proof test on yourself
You are a {your_one_person, e.g. recruiter at a small product team} seeing my portfolio for the first time, with ten seconds. Here is the live page: {your_live_url}. Answer honestly: in one sentence, what do I do? Do you believe I am good at it? What is the first thing that confused you or made you want to leave? Be blunt, I would rather hear it from you than lose the job.
Prompt · Rewrite the hero so the claim lands fast
My hero does not say what I do clearly enough. My proof statement: {paste_your_proof_statement}. My current hero text: {paste_your_current_hero}. Give me three hero versions (a headline plus one supporting line) that make a stranger understand what I do and who for within a few seconds, in my plain voice, no buzzwords. Tell me which you would pick and why. I will decide.
A worked example

Iris's site breaks on her phone, and the AI cannot tell what she does

AI assistant
Iris: It looks great on my laptop.
AI: On a 360px phone, your case images spill off the right edge and your nav buttons are too small to tap. Want the fixes?
Iris: Yes. And run the ten-second recruiter test.
AI: In ten seconds I see a nice photo and the word "Iris." I cannot tell what you do. Your hero never says it.
Iris: Ouch. That is the most important fix.
AI: It is. Put your one-line claim in the hero, fix the mobile spilling, and you have cleared the gate.

Iris did not argue with the feedback. She fixed the hero and the phone layout. Now a stranger lands and knows, in ten seconds, that she makes confusing things simple.

For your track. The proof test bites everyone. A reviewer of a machine-learning site wants the demo to actually run and the result to be legible. A marketing site needs the metric to be obvious. Bring your week 1 proof statement so the reviewer judges the right thing.

Watch out for

  • Defending your choices. If a real person was confused, the site is confusing. Fix it.
  • Fixing by adding. Usually the fix is less: more space, fewer words, clearer hierarchy.
  • Acknowledging instead of fixing. Must-fixes get fixed on the live site, this week.

What good looks like

  • A stranger on a phone can tell what you do in ten seconds.
  • Nothing is broken, blurry, or untappable.
  • You took hard feedback and your site got better for it.
Words you'll hear this week
  • Responsive / mobile-first. A site that looks right on a phone, not just a laptop.
  • Contrast. How easily text stands out from its background. Strong contrast is kindness.
  • Design review (crit). Someone tells you honestly what works and what is confusing.
  • Must-fix vs nice-to-have. Sorting feedback into what blocks you now and what can wait.
  • Checkpoint. A required stop with a clear "go" or "fix this first" before you continue.
Every term is in the Glossary.

Linked resources

Google · web.dev

Learn Responsive Design ↗

Make your site work on a phone first: flexible layouts, media queries, and text that stays legible at any width.

FreeCourse
 WebAIM

Intro to Web Accessibility ↗

The four principles (perceivable, operable, understandable, robust) in plain words. The basics that make your site usable by everyone.

FreeGuide
 Google · web.dev

Learn Accessibility ↗

A deeper, evergreen course: semantic HTML, when to reach for ARIA, and how to test with a keyboard and a screen reader.

FreeCourse
 Nielsen Norman Group

10 Usability Heuristics ↗

The classic checklist for spotting what confuses people. Run your own site against it before your first review.

FreeArticle
 Google

PageSpeed Insights ↗

Paste your live URL for a real report on speed, accessibility, and SEO, with concrete fixes ranked by impact.

FreeTool