Final Website Presentation
& Portfolio Case Study
Present the finished experience. Explain the decisions. Reflect on what you learned.
01 / Learning Objectives
By the end of this lesson, you should be able to present a coherent website for a defined audience and goal, explain design decisions using process and testing evidence, and reflect on the development process.
Present the Work
Tell a clear story about the audience, purpose, and finished website.
Explain Decisions
Connect visual design, structure, responsive behavior, and interaction to the project goals.
Reflect & Revise
Identify what changed, what you learned, and what you would improve next.
02 / A Website Is More Than Its Final Screen
A strong final project connects audience, purpose, content, visual direction, interaction, and responsive behavior. Your presentation should make the design process visible—not simply show a collection of screenshots.
The Challenge
Who is the site for? What need, question, or goal does it address?
The Approach
How did research, content planning, wireframes, and visual choices shape the solution?
The Outcome
What does the finished site do, and how does it behave across screen sizes?
The Reflection
What changed after feedback or testing? What would you improve with more time?
Design principle: Show evidence for your decisions. Be clear about what you actually tested, what remains unfinished, and what you would improve next.
03 / Build a 5–7 Slide Presentation
01 — Audience & Goal
Introduce the project, intended audience, and the problem or opportunity.
02 — Process & Direction
Show a wireframe, research insight, or early design direction that influenced the outcome.
03 — Visual System
Explain typography, color, composition, image choices, and reusable components.
04 — Final Website
Show key pages and explain the main user journey or interaction.
05 — Responsive Checks
Compare desktop and mobile views; discuss accessibility, navigation, and testing.
06–07 — Reflection
Share a revision made after feedback, a challenge, and the next improvement you would make.
04 / Instructor Demonstration
Walk through the project like a designer. Open the site in a browser and demonstrate its primary user journey. Resize the browser to show how the layout adapts at different viewport widths. Open the project in your code editor and identify one meaningful HTML/CSS relationship. Describe one revision made after critique, testing, or troubleshooting.
Optional CodePen Demonstration
Add the public CodePen embed for this week once the Pen exists. In WordPress, paste CodePen’s official embed snippet into a Custom HTML block. Do not publish a placeholder embed.
05 / Quality Assurance Checklist
Function & Structure
- Navigation and links work across pages.
- HTML pages have meaningful, consistent structure.
- CSS and images load using correct paths.
- No obvious broken layouts or missing assets.
Responsive & Responsible
- Desktop and mobile widths have been checked.
- Text contrast and keyboard focus have been reviewed.
- Images and third-party assets are credited.
- Known limitations are documented honestly.
06 / Peer Critique
Give feedback that leads to a useful next step. Be specific about what you noticed, how it affects the experience, and what the designer could consider next.
Strength
What is the website’s clearest strength, and what makes it effective?
Audience
Where might the intended audience need more guidance?
Responsive Behavior
What changes when you view the site at a mobile width?
Next Improvement
What single improvement would have the greatest impact?
07 / Final Deliverables
- Website source: a clear project folder with HTML pages, CSS, and assets.
- At least three meaningful pages total: consistently navigable and connected to the project goal.
- README: project purpose, audience, page list, folder map, live URL if available, and known limitations.
- Credits: attribution for images, fonts, libraries, and other third-party assets as needed.
- Testing evidence: desktop/mobile screenshots and a short QA checklist.
- Final presentation: 5–7 slides covering the challenge, process, design, outcome, and reflection.
- Final reflection: 250–400 words describing a design decision, challenge, feedback-driven change, and future improvement.
Follow the instructor’s submission directions if they specify a different file structure or delivery method.
08 / In-Class Exercise
- Present your website and explain its audience, goal, and strongest design decision.
- Demonstrate one responsive behavior or important interaction.
- Identify one challenge and one change made after feedback or testing.
- Collect peer feedback and select one useful next step.
- Write your final reflection while the process is still fresh.
09 / Exit Ticket
Write down one change you made, one thing you learned from the result, and one question or improvement you would carry into your next web project.