Module 1 · Group project
First Website
Testing the water: design it in Figma, build it in HTML and CSS, and put it online — as a team.
- 1
- week
- 20
- minute presentation
- 28 Aug
- presentation day
- 9
- graded criteria
The mission
Your first website, made the way professionals make them: together, designed first, and published for real.
The group creates a website prototype with Figma, HTML and CSS — JavaScript is optional — and publishes it online. The suggested platform is GitHub Pages.
The theme can be fictitious or real. Use your imagination and your network to find an idea worth building.
Work as a team
An MVP, a backlog, a sprint plan and status meetings — and Git to hold it together.
Design before you build
Moodboard, sketches and a UI design in Figma.
Clean, semantic code
Semantic HTML, clean CSS, comments, and a layout that works on every screen.
Publish it
A static site, live on GitHub Pages.
Requirements
- Team building and a product definition (MVP).
- A backlog and sprint planning.
- Status meetings and pair programming.
- Git for everything.
- A moodboard.
- Sketches, and a wireframe if you like.
- A UI design in Figma.
- Semantic HTML.
- Clean code with comments.
- Responsive: it works on phones as well as laptops.
- JavaScript is optional.
- A static site on GitHub Pages.
What you hand in
Ideas
A town festival
Everything a visitor needs: what, where, when — and why come.
An artist's portfolio
Let the work speak, and make it easy to get in touch.
A company page, redesigned
Find a local business whose website lets it down, and do better.
A shared interest
Something the whole group cares about.
Timeline
Team & idea
Get to know each other, pick the idea and agree on the MVP.
- Choose the idea
- Define the MVP
- Write the backlog
- Set up the Git repository
- Kick-off
- Mon 24 Aug
- Presentations
- Fri 28 Aug
- Ends
- Fri 28 Aug
Presentation
Introduction · 5 min — The group, the project and a demo of the product.
Scored here: 1 of the 9 criteria.
How it's graded
Teachers, invited industry judges and the other students score your team from 0 to 10 on each criterion. Every criterion counts the same, so an area with more criteria carries more of the grade. Drag the sliders and watch the result.
The mean of all 9 criteria. The bar above shows how much of it each area carries.
Each criterion's score blends two juries. The panel — your teachers and the invited industry judges — carries 80%; the student audience carries the other 20%. Try one criterion:
A judge invited for design or for code only counts on that area and the presentation criteria. If only one jury scored a criterion, that jury's score is used on its own.
80% × 8.0 + 20% × 6.0
After the presentations you rate each teammate on contribution and teamwork, from −2 to +2. Your teachers read the ratings and confirm your figures, and those turn the team result into your grade. Pick a square:
Across: contribution. Down: teamwork. Each square is the change to the team result.
⚖️ Contribution 0 — Average
🤝 Teamwork 0 — Average(0 + 2) × (0 + 2) − 4 = 0 → ×1 (±0%)
The two figures multiply rather than average. Doing all the work while shutting the team out (+2, −2) is not “average”: it keeps 30% of the grade. The most a grade can rise is +30%; it can fall by as much as −70%.
Team result 7.0 × ±0%
Questions
Do we need JavaScript?
No. Figma, HTML and CSS are the requirement; JavaScript is optional.
Does the theme have to be real?
No — it can be fictitious or real. Use your imagination and your network.
Where do we publish it?
GitHub Pages is the suggested platform: free, and it deploys straight from your repository.
How is my own grade worked out?
From your team's result and how your teammates rate your contribution and teamwork. Try it in the grading section above.