Keep
Identify one strength that should survive your changes.
Grade 9 · Portfolio design
Portfolio V2: one coherent design
Refine your portfolio’s design rules, hierarchy and navigation, then test it with a user.
Your current project · Portfolio V2
Make every page feel like one website
Continue improving the portfolio you already built. Keep its working journey, make the important content stand out, and remove distractions. You make the design decisions; AI applies them to your HTML.
Keep your existing contentImprove the designNo new features
Keep this journey working
- 01Home
- 02Projects
- 03Project
- 04Return
Check every page and every link after each set of changes.
Where your assessed work goes
Submit both parts in the specific assignment
For each project assignment in Toddle, submit your completed handout AND the matching new version of your website. Your Portfolio V2 work belongs in “Assignment 3. Portfolio V2”.
The general “Website upload” area is for practice and experiments only. Uploading there does not count toward project assessment.
See the final submission checklist ↓Start with your existing portfolio
Make a V2 copy and review the journey
- Keep V1 unchanged. Make a separate working copy for V2, including its linked files.
- Open Home → Projects → Project → Return. Check the page styles, navigation, buttons and main focus.
- Ask yourself: do these pages feel like one website, or like different designs joined together?
- Capture a V1 Home screenshot now. You will compare it with V2 at the end.
Record your decisions in the handout
KEEP 1 / FIX 3 / KILL 1
Name the page and the specific thing you want to keep, fix or remove. For example: “Project Detail uses a different heading font.”
Fix
Write three clear problems. Say where each problem appears.
Kill
Choose one distraction to remove. It can count toward the three deletions in stage 6.
Choose before you prompt
Write five rules for the whole site
Use your strongest existing style as the starting point. Write your choices in the handout. Aim for a small color palette, one or two fonts, and matching styles for elements with the same job.
- 1
Background
Choose one background color or style for the whole site.
- 2
Colors
Choose your text color and accent color. Make sure the text is easy to read against its background.
- 3
Headings
Choose the font and sizes for page titles and section titles. Headings with the same role should match.
- 4
Buttons and cards
Decide their shape, border and padding. Padding is the space between the content and its edge.
- 5
Navigation
Decide where navigation appears, what its labels say and how visitors return to the previous page.
Ask AI to apply your choices
Give AI your current HTML and any linked style files. Copy this prompt, then replace every bracketed section with your own rules and decisions.
Your editing prompt
Review my existing portfolio. Do not redesign it from scratch or add features. Apply these rules to Home, Projects and Project Detail: [paste my five rules]. Keep my content, working Home → Projects → Project → Return journey, and useful interaction. Use consistent spacing. Fix these three problems: [paste FIX 3]. Preserve this strength: [paste KEEP 1]. Explain what you changed so I can check it.
Replace the bracketed text before sending the prompt.
Check what AI actually changed
Make a consistency pass
Preview every updated page. Compare the same elements across Home, Projects and Project Detail, using this checklist.
- Navigation
Same position, labels and behavior. Every return link works.
- Typography
Same fonts and heading sizes for the same roles.
- Color
Same palette and accent meaning. Text remains easy to read.
- Components
Buttons and cards with the same job look and behave alike.
- Spacing
Repeat margins, section gaps and padding. Remove random gaps.
Send at least one follow-up AI prompt to correct its first attempt. Check the result yourself and record your follow-up fix in the handout.
“Cards now match, but Project Detail has much larger gaps. Match its section spacing to Projects while keeping the text readable.”
Help a visitor know where to look
Make the important content stand out
Visual hierarchy means what the viewer notices first, second and third. Use size, position, contrast and space to guide attention.
Who you are and what you make
Make the route to your projects easy to find.
Your project work and clear titles
Make it easy to choose a project to open.
The project title and strongest outcome
Help visitors understand your role and process, then return.
Identify the main focus on each page. If decoration or secondary text attracts more attention, adjust the page until the intended content stands out.
Make room for what matters
Delete three distractions
Remove three things that do not help the visitor: repeated text, generic AI copy, extra icons, effects, empty sections or pointless buttons. Your KILL 1 can count toward these three.
Record all three deletions in the handout. After each one, ask: “Is the page clearer now?” Keep essential content, navigation and the useful interaction working.
Find out what a visitor understands
Run the five-second partner test
Write your intended first focus and your partner’s name in the handout. Show only Home for five seconds, then hide it.
Do not explain the design first. Ask these questions and record your partner’s own words in short phrases. Then swap roles.
- What was the site about?
- What did you notice first?
- What do you remember?
- What kind of person or designer is this?
- Where would you click next?
Use the evidence to choose your final edit
Improve, retest and compare
- Find one mismatch between what you intended and what your partner understood. If they understood the page, use what they remembered to strengthen that focus.
- Record the partner evidence and your final change. Ask AI for a targeted edit, then check its result.
- Retest Home → Projects → Project → Return and the useful interaction. Check that your edits have not broken them.
- Save the website and all its linked files as Portfolio_V2. Keep V1.
“My partner noticed the animation before my work, so I removed it and made the project preview more prominent.”
Make your before and after comparison fair
Put a V1 screenshot and a V2 screenshot into the handout. Show the same Home view at the same window size and scroll position. Resize the images to fit.
Finish the explanation: “V2 is stronger because…” Point to a visible change and explain how it helps the visitor.
Before you submit
Handout + matching website version
Open “Assignment 3. Portfolio V2” in Toddle and attach both parts.
- 1
Your completed Portfolio V2 handout
Include KEEP 1 / FIX 3 / KILL 1, five design rules, your follow-up fix, three deletions, partner responses, final change, comparable V1 and V2 screenshots, and your explanation.
- 2
The matching Portfolio_V2 website
Include all HTML, CSS, images and other linked files the website needs. Submit the version shown in your V2 screenshot. Open it once more and check the full journey.
This applies to every specific project assignment: submit its completed handout and its matching new website version together. The general “Website upload” area is only for practice and experiments and does not count toward project assessment.
Open Toddle to submit both parts →For this lesson
Related assignments
- Assignment 3. Portfolio V2
Make sure to turn in the handout and the latest version of your portfolio site
Assignment on the calendar →
Submit in Toddle. The assignment instructions above specify what to hand in.
Read the handout text online
Portfolio V2
Make it feel like one product
Your V1 journey works. Now make every page feel related, make the important content stand out, and remove distractions. You make the design decisions; AI applies them to your HTML.
50 MINUTES • Use your existing portfolio • No new features today
Name ____________________________ Class __________ Date ______________
0–5 min Frankenstein Test
Open Home → Projects → Project → Return. Does it feel like one website, or different AI ideas glued together? Check page styles, navigation, buttons and the main focus.
Keep V1 unchanged. Make a working copy for V2. Capture a V1 Home screenshot now for page 3.
5–10 min KEEP 1 / FIX 3 / KILL 1
Name the page and the problem. Example: “Project Detail uses a different heading font.”
KEEP 1 _________________________________________________________________
FIX 1 _________________________________________________________________
FIX 2 _________________________________________________________________
FIX 3 _________________________________________________________________
KILL 1 _________________________________________________________________
10–18 min Set your design rules
Use your strongest existing style as the starting point. Write short rules, then apply them with AI using the prompt on page 2.
| Rule | My rule across the whole site |
| Background | One background style or color: __________________________ |
| Colors | Text: __________ Accent: __________ Use readable contrast. |
| Headings | Font: __________ Page title: ____ Section title: ____ |
| Buttons and cards | Shape, border and padding: ___________________________ |
| Navigation | Location, labels and return behavior: ___________________ |
Aim for a small palette, 1–2 fonts, and the same style for elements with the same job.
Apply your rules
Copy this prompt and replace the brackets with your rules. Give AI your current HTML and any linked style files.
Review my existing portfolio. Do not redesign it from scratch or add features. Apply these rules to Home, Projects and Project Detail: [paste my five rules]. Keep my content, working Home → Projects → Project → Return journey, and useful interaction. Use consistent spacing. Fix these three problems: [paste FIX 3]. Preserve this strength: [paste KEEP 1]. Explain what you changed so I can check it.
18–28 min Consistency pass
Preview the updated site. Check every page, then send at least one follow-up prompt to correct AI’s first attempt.
| Check | What should match |
| □ Navigation | Same position, labels and behavior. Return links work. |
| □ Typography | Same fonts and heading sizes for the same roles. |
| □ Color | Same palette and accent meaning. Text is easy to read. |
| □ Components | Buttons and cards with the same job look and behave alike. |
| □ Spacing | Repeat margins, section gaps and padding. Avoid random gaps. |
Follow-up example: “Cards now match, but Project Detail has much larger gaps. Match its section spacing to Projects while keeping the text readable.”
My follow-up fix _________________________________________________________________
28–35 min Hierarchy pass
Hierarchy means what the viewer notices first, second and third. Use size, position, contrast and space to guide attention.
| Page | Make this clear first | Then make this easy |
| Home | Who you are and what you make | Find the route to your projects. |
| Projects | Your project work and clear titles | Choose a project to open. |
| Project Detail | Project title and strongest outcome | Understand your role and process; return. |
On each page, identify the main focus. If decoration or secondary text wins, adjust the page until the intended content stands out.
35–40 min Delete three things
Remove three distractions: repeated text, generic AI copy, extra icons, effects, empty sections or pointless buttons. Your KILL 1 can count toward the three. Keep essential content, navigation and the useful interaction working.
Deleted 1 __________________ 2 __________________ 3 __________________
For each deletion, ask: “Is the page clearer now?”
40–46 min Five second partner test
Take turns. Show only Home for five seconds, then hide it. Do not explain the design first. Ask the questions and record your partner’s words in short phrases.
Partner ____________________ My intended first focus ____________________
What was the site about? _________________________________________________________________
What did you notice first? _________________________________________________________________
What do you remember? _________________________________________________________________
What kind of person or designer is this? ______________________________________________________
Where would you click next? _________________________________________________________________
46–50 min Revise and save
Use one mismatch between your intention and your partner’s response to choose one final change. If they understood the page, use what they remembered to strengthen that focus. Ask AI for a targeted edit, then check the result.
Partner evidence _________________________________________________________________
My final change _________________________________________________________________
Example: “My partner noticed the animation before my work, so I removed it and made the project preview more prominent.”
□ Retest Home → Projects → Project → Return and the useful interaction.□ Save the site and its linked files as Portfolio_V2. Keep V1.□ Add the V2 screenshot below. Submit V2 and this completed handout.
V1 and V2 evidence
Paste the same Home view at the same window size and scroll position. Resize images to fit.
| V1 before | V2 after |
| Paste V1 screenshot here | Paste V2 screenshot here |
V2 is stronger because... __________________________________________________
________________________________________________________________________