Supercharge your front-end skills by building in a real-life workflow

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional quality designs. Build designs and review code alongside thousands of developers.

Browse Challenges
Three people sitting round a table with their laptops laughing

How it works

  • Icon with arrow pointing down

    Choose your challenge

    Have a look through our collection of web designs. Pick one that you feel will be a nice challenge for you at this stage.

  • Icon of laptop with outlines of code on the screen</>

    Code the design

    Start the challenge and download all the starter files. We provide all the files you'll need to complete the challenge. Building it is up to you!

  • Icon for sharing with three connected nodes

    Submit your solution

    Post your solution on the platform for everyone to see and get feedback on your code from other developers in the community.

Latest Challenges

    • HTML
    • CSS

    Base Apparel coming soon page

    This layout looks simple enough, but there are some interesting details to it that will test your CSS skills. You'll also get to practice basic form validation.

    • HTML
    • CSS

    Project tracking intro component

    Some interesting layout and code challenges are baked into this design. Perfect if you're a beginner who is starting to get a bit more confident with your layouts.

    • HTML
    • CSS
    • JS

    Bookmark landing page

    This challenge will really test your layout skills. There are also areas that will require some JavaScript, such as the tabbed features section and the FAQ accordion.

    Intermediate
    View challenge

Latest Community Solutions

Slack logo

Join our Slack community

Join over 1,700 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!

Resources

Want some amazing front-end resources? Of course you do. Check out our curated list of (mostly) free resources for HTML, CSS, JavaScript and more.

    • CSS

    Flexbox Zombies

    A really fun way to learn Flexbox. Make your way through a zombie-infested world with nothing more than a crossbow and your trusty Flexbox skills.
    Visit website
    • GENERAL

    Heroku

    Heroku makes it easy to deploy apps with very little configuration required.
    Visit website
    • GENERAL

    SEOptimer

    Get detailed (and free!) insights on how your website stacks up for Search Engine Optimization.
    Visit website
View all resources