Supercharge your front-end skills by building real projects

Improve your HTML, CSS and JavaScript while using a real-world workflow. Our challenges provide designs, starter code, project brief and a front-end style guide. The rest is up to you!

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

How it works

  • Icon with arrow pointing down

    Download starter

    Each starter code has everything you need to get up and running. Designs, colors, fonts, it’s all there. There’s also a readme to help get you started.

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

    Code the designs

    Now it’s time to build! Use any text editor you like and code it any way you want. You can also join our Slack community to get support from others.

  • Icon for sharing with three connected nodes

    Share your solution

    Now that you’ve built your site, it’s time to share it! We can all learn from each other, so share in our community and start the conversation.

Challenges

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.

    • general

    Awwwards

    Awwwards has an incredible gallery of websites to look around. The sites on here are pushing the boundaries of what's possible on the web. So it's a great place to get ideas.
    Visit website
    • HTML,
    • CSS,
    • JS,
    • general

    Frontend Developers Slack

    The Frontend Developers Slack community is another large Slack community. It has channels dedicated to topics such as HTML, CSS, JavaScript, React, Vue and Accessibility. A perfect place for all FEDs to hang out!
    Visit website
    • HTML,
    • CSS,
    • JS,
    • general

    SitePoint

    SitePoint offers some great articles for improving your web development knowledge. The topics are often really varied and can go into good depth, so definitely worth a follow.
    Visit website
View all resources

Subscribe to the Frontend Mentor newsletter

Stay up-to-date with new challenges, blog posts and general front-end goodness.

Illustration of desk with a computer on top and sticky notes on the wall

FAQs

Slack logo

Join our Slack community

Talk to others taking the challenges, get help with your code, discuss features. Chat about everything front-end!