We've launched a new free challenge: a gamer sign-up form. You'll build the sign-up screen for NEONCORE, a competitive-gaming network where players register as "operators" with a callsign. It's a junior-level project that helps you practice form validation, JavaScript-driven states, and accessible forms.
What you'll build
There's one form on the page, and every part of it has states to build:
- Four fields for a callsign, email, password, and password confirmation, plus a terms checkbox
- Validation messages that appear when a field loses focus, then update as the user fixes them
- Show and hide buttons for both password fields
- A password strength meter that updates from the first character
- A loading state on the submit button, followed by a success message that replaces the form
- A split layout on desktop that stacks on tablet and mobile
What's included
This is a free challenge, so the starter code gives you everything you need to build without a Figma file:
- Design screenshots for desktop and mobile, plus the error, filled, success, password strength, submitting, hover, and focus states
- A style guide with the colors, fonts, text presets, and spacing
- The fonts (Orbitron and JetBrains Mono), plus the logo and icons
- A starter HTML file with all the content written out, including every error message
- A README that explains how the form should behave between states, since a screenshot can't show that
What you'll practice
- Validating fields on blur and re-checking them as the user types
- Writing clear, specific error messages and connecting them to their fields
- Moving focus and announcing changes to screen reader users
- Scoring password strength from length and character types
- Handling loading and success states without a server
- Building a dark, high-contrast interface that still meets WCAG AA
How to start
Head to the challenge page, download the starter code, and read through the README. It lists the user stories, explains when each field gets checked, and gives the password strength rules. From there, it's over to you.
If AI tools are part of your workflow, lean on them to understand concepts and review your code, not to generate code. You'll learn far more by writing the validation logic yourself.
Some ideas to test yourself
Once you've matched the design, here are a few ways to push the project further:
- Build the Operator ID readout so it updates as each field passes or fails
- Shake the panel on an invalid submit, with reduced motion respected
- Animate the hex check on the success screen so it draws itself in
- Warn users when Caps Lock is on while they type a password
- Build a matching log-in form that reuses your styles
Join the community
Forms are a great project to get feedback on, because small accessibility details often slip past you when you test alone. Share your progress in our Discord community, ask for a review of your solution, and see how others handled the same states. We'd love to see what you build.
Take your skills further
When you're ready for more, our premium challenges add multi-page builds, real APIs, and full Figma design files to work from. Pro members also get the Figma file for this challenge, if you'd like to try building from a design file.
Happy coding!
