Learning intentions
- I can identify a specific audience for my portfolio.
- I can write a one-sentence statement of intent.
- I can draw a site map showing my portfolio's pages.
Success criteria
- My audience is specific (not 'everyone').
- My statement of intent fits in one clear sentence.
- My site map shows 3-5 pages and how they connect.
Do Now · 5 min
Think about someone you want to impress with your website. It might be:
- Your future self in 5 years
- A scholarship application panel
- A company where you want work experience
- Your grandparents who want to see what you're learning
Pick ONE. Write down who they are in one sentence.
I Do · ~10 min Teacher demonstration
Teacher models the planning for a fictional portfolio:
"A portfolio that shows Year 11 admissions panels that I am a curious, capable student with evidence of my creative projects."
Notice how specific it is. Not "a site about me." Not "everything I've ever done."
Teacher draws a site map on the board:
[ HOME ]
|
+------+------+------+
| | | |
[About] [Projects] [Contact]
|
[Project 1]
[Project 2]Arrows show navigation. Home connects to everything. Project pages drill down from Projects.
We Do · ~15 min Guided build
Together, draft a portfolio plan for a fictional Year 10 student who loves drawing:
- Audience: art teachers and local art competition judges
- Statement of intent: "A gallery of my drawings with stories behind each one, to help me apply for art scholarships."
- Pages: Home, Gallery, Process (how I draw), About, Contact
Class discussion: is "Process" needed? Is there a difference between Home and About? What stays and what cuts?
You Do · ~35 min Independent practice
Plan your own portfolio. On paper or in a Word doc:
- Audience: Who specifically? Write one sentence.
- Statement of intent: One sentence using the template: "A portfolio that shows [audience] that [goal] through [content]."
- Page list: 3-5 pages with page names
- Site map: Draw arrows showing how pages connect. Home links to everything.
- Content brainstorm: For each page, bullet 3-5 things that will go on it.
Submit photo of site map to Classroom before the end of the lesson.
Differentiation
Support
Provided template with labelled sections. Student fills in placeholders rather than starting blank.
Core
Plan independently.
Extension
Also draft a user journey for a first-time visitor: what page do they see first, what do they click, where do they end up, what action do you want them to take?
Exit Ticket · 5 min
Exit ticket
Upload a photo of your site map to Google Classroom.
Name one thing you're nervous about regarding this portfolio:
____________________________________________________
Resources for this lesson
📚 Deeper Reading
External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.
- UMich Capstone · Module 1: Wireframes (Planning)
Planning a multi-part portfolio site with checklist of requirements.