Skill17

Learning journey

From first page to test project.

Six stages in order. Each lists the WSOS sections it trains and a set of goals. Tick a goal once you can do it without help; progress is saved in this browser.

Learning path provider · SkillDisplay Track and verify your skills SkillDisplay gives you clear learning paths built from skill definitions, shows what to learn next, and lets you request verification from your teachers, trainers or employers. Free access for learners; co-funded by EU Erasmus+. Open skilldisplay.eu →
Stage 01 Beginner

Structure and style

Semantic HTML and modern CSS layout. Everything else in the competition is built on this.

Trains WSOS
  • 3 Design implementation
  • 1 Work organization
Tools HTML, CSS, Flexbox, Grid, a code editor, browser dev tools
Start here

Goals

  • Build a multi-page site using semantic HTML elements
  • Lay out a page with CSS Grid and Flexbox
  • Make the layout responsive from 320px to wide screens
  • Validate HTML and CSS with zero errors
  • Track your work with git and push it to GitHub
Stage 02 Beginner

Design and accessibility

Read a brief, turn it into a design, and make it usable for everyone.

Trains WSOS
  • 3 Design implementation
  • 2 Communication
Tools A design tool (e.g. Figma or Penpot), WCAG, a screen reader
Start here

Goals

  • Draw a wireframe and a style guide from a short brief
  • Implement a design from a mockup, matching type and spacing
  • Meet WCAG AA contrast and full keyboard navigation
  • Optimise images and choose the right formats
  • Add a CSS animation that respects reduced motion
Stage 03 Intermediate

JavaScript

Plain JavaScript in the browser: the DOM, events, data and APIs, without a framework.

Trains WSOS
  • 4 Front end
Tools JavaScript (ES modules), Fetch API, localStorage, Canvas
Start here

Goals

  • Build an interactive to-do app that persists to localStorage
  • Fetch data from a public REST API and render it
  • Handle loading, empty and error states
  • Split code into reusable ES modules
  • Write unit tests for a small function
Stage 04 Intermediate

Back end and data

The highest-weighted section of the Standard. Server code, databases and APIs.

Trains WSOS
  • 5 Back end
Tools PHP and/or Node.js, MySQL/MariaDB, SQL, Postman or similar
Start here

Goals

  • Design a normalised database with keys and constraints
  • Build a REST API with token authentication
  • Validate input and return correct HTTP status codes
  • Protect against SQL injection, XSS and CSRF
  • Follow an API specification exactly
Stage 05 Advanced

Frameworks and deployment

A front-end framework and a back-end framework working together, deployed to a real server.

Trains WSOS
  • 4 Front end
  • 5 Back end
  • 1 Work organization
Tools Vue or React, Laravel or Express, Linux CLI, SSH, a web server
Start here

Goals

  • Build a single-page app with routing and state
  • Connect the app to your own API
  • Build a server-rendered admin interface with a framework
  • Deploy over SSH and configure the web server
  • Document the deployment steps
Stage 06 Competition

Competition practice

Work to the clock on full modules from past test projects, then review against a marking scheme.

Trains WSOS
  • 1 Work organization
  • 2 Communication
  • 3 Design implementation
  • 4 Front end
  • 5 Back end
Tools Past test projects, a timer, marking schemes
Start here

Goals

  • Solve a full speed test within its time limit
  • Plan a module from its brief before writing code
  • Complete a design module in one sitting
  • Complete a back-end and front-end module pair
  • Mark your own work against a marking scheme and log what to fix

Finished all six stages?

Keep solving past test projects under time, and contact your national WorldSkills member about selection for EuroSkills Düsseldorf 2027 and WorldSkills Aichi 2028. How to compete