1
Build a real web page from scratch
You write the HTML, CSS, and JavaScript for one file, predictor.html, a part at a time, and watch it come alive in a live preview as you type.
Explore
4.2 from 37 ratings
Frontend Engineering with Prediction Game
ProoV · Junior Front-End Engineer · Beginner
About this project
Kickstart your career as a web engineer and ship predictor.html before kickoff: a single-file HTML+CSS+JS prediction game you write line by line in our WebGame Lab, then deploy to a live https URL. Real 2026 fixtures, your own 5/2/0 scoring engine, a bot whose brain you compute from real historical results, a localStorage leaderboard. Graded on scoring, real-data modelling, completeness, and deployment. Not affiliated with FIFA, SAP, the DFB, or GOAL.
Ideal for entry-level careers in
Add this to your LinkedIn profile
Projects
inFrontend Engineering with Prediction Game
Just completed
Associated with ProoV
A graded ProoV project, completed step by step and marked against a published rubric.
❖html-css-js, front-end-engineering and more skills
What you'll do
1
Cold Open & Onboarding
Meet Leo, your guide. Tell him where you are starting from, meet the code workshop, and make the game title your own.
2
Act 1 - The Board
Show the real 2026 World Cup matches on the page, each with two boxes where a player types their predicted score.
3
Act 2 - The Scoring
Write the rule that hands out points: 5 for an exact score, 2 for the right winner, 0 for a wrong guess.
4
Act 3 - The Opponent
Compute attack strength from real past results, then build a simple computer player to beat.
5
Act 4 - The Scoreboard
Keep everyone's points and rank them, you vs the computer vs friends, so it survives a page reload.
What you'll learn
2
Turn real data into a prediction
You compute every team's attack strength from a public-domain results sample and use it to power a bot that predicts scorelines. The same shape of work data-driven product teams pay for.
3
Ship it and own the link
You put your finished game online for free and walk away with a live web address you can put on your CV and send to a recruiter or a friend.