Starting a Challenge

Finding a Challenge

Frontend Mentor offers a wide variety of challenges designed for different skill levels and learning goals. Here's how to find the right one for you:

Browse the Challenge Library

1. Navigate to the Challenges page on Frontend Mentor
2. You'll see a grid of available challenges, each with a preview image and difficulty indicator

Filter by Difficulty

Challenges are categorized into five difficulty levels:

• Newbie - Perfect for beginners learning HTML and CSS basics
• Junior - Introduces more complex layouts and basic JavaScript
• Intermediate - Requires solid CSS skills and JavaScript functionality
• Advanced - Complex applications with state management and APIs
• Guru - The most challenging projects for skilled developers

Filter by Format

You can filter challenges by format:

• Design - Build from professional design files (JPEG or Figma). Available at all difficulty levels.
• Product - Build from product specifications. You make your own design decisions. Available at Intermediate and above.

Filter by Type

You can also filter challenges by their access tier:

• Free challenges
• Free+ challenges
• Premium challenges

Tip

If you're just getting started, begin with a Newbie Design Challenge to familiarize yourself with the Frontend Mentor workflow before moving to more complex projects.

Clicking "Start Challenge"

Once you've found a challenge you want to work on:

1. Click on the challenge card to view its details page
2. Review the challenge description, difficulty level, and requirements
3. Click the "Start Challenge" button

This action "unlocks" the challenge and adds it to your account.

What Does "Unlocking" Mean?

When you unlock a challenge:

• The challenge is added to your In-Progress Challenges list on the Home dashboard
• You can download all the necessary files to begin working
• The challenge remains in your account indefinitely - there's no time limit to complete it

Note

Unlocking a challenge is free for all Free and Free+ challenges. Premium challenges require a Pro subscription to unlock.

The Challenge Page

Each challenge page guides you through a 4-step workflow:

1. Step 1: Start challenge - Download your files and review the brief
2. Step 2: Submit solution - Submit your completed project
3. Step 3: Improve solution - Review your solution report
4. Step 4: Review solutions - Learn from how others approached the challenge

After clicking "Start Challenge," you'll see download buttons for your starter code and, for Design Challenges, your design files. The page also shows the challenge brief, what assets are included, and ideas for extending the project.

You can return to this page anytime by finding the challenge in your "In-Progress" section on the Home dashboard.

Downloading Your Files

What you receive depends on the challenge format.

Design Challenges

The challenge page provides access to design files that show exactly what you need to build.

Free Users: JPEG Designs

• desktop-design.jpg - The desktop version of the design
• mobile-design.jpg - The mobile version of the design
• desktop-preview.jpg - A preview image of the completed project

These JPEG files give you a visual reference for your build. You'll need to estimate measurements and extract colors manually.

Pro Users: Figma Files

With a Pro subscription, you get access to:

• Original Figma design files with precise measurements
• Ability to inspect exact spacing, font sizes, and colors
• Option to export individual assets directly from Figma

Tip

If you're serious about improving your coding skills, the Figma files are invaluable for learning how to translate designs to code accurately.

Starter code for Design Challenges includes pre-written HTML content, optimized image assets, a README with instructions, and a style guide with colors and fonts.

Product Challenges

Product Challenges don't include design files. Instead, you download a starter package containing:

• Product specification (spec/ folder) - Detailed requirements, product definition, design challenges, technical requirements, and differentiators
• Guidance (guidance/ folder) - Brand kit with colors, typography, and spacing; UI/UX patterns; and an accessibility checklist
• Sample data (data/ folder) - Real-world data with edge cases for your implementation
• Starter CSS (starter/ folder) - CSS custom properties and optional Tailwind configuration based on the brand kit
• AI context files - AGENTS.md and CLAUDE.md for AI coding tool collaboration

There's no index.html, design/ folder, or assets/ folder. You choose your own tech stack and build the project from scratch based on the spec.

Downloading Starter Code

Every challenge comes with a starter code package. To download it:

1. On the challenge page, click the "Download starter code" button
2. A ZIP file will download containing all starter files
3. Extract the ZIP to your preferred project directory

Next Steps

After downloading your files, the workflow depends on your challenge format.

For Design Challenges:

1. Read the README - It contains user stories and important requirements
2. Review the designs - Familiarize yourself with what you're building
3. Check the style guide - Note the colors, fonts, and sizes you'll need
4. Set up your development environment - Open the project in your code editor
5. Start building - Begin with the HTML structure, then add CSS and JavaScript

For Product Challenges:

1. Read the README - It provides an overview and getting started workflow
2. Study the product spec - Start with the product definition, then review core requirements
3. Review the brand kit - Get familiar with the colors, typography, and spacing tokens
4. Choose your tech stack - Pick your framework, database, and hosting approach
5. Start building - Begin with the foundation (authentication, database), then layer in features. If you'd prefer to skip backend work, each Product Challenge includes a frontend-only alternative

Tips for Success

• Don't rush the planning phase - Take time to analyze the design before writing code
• Work mobile-first - Start with the mobile design and scale up to desktop
• Commit often - Use Git to track your progress and make it easy to undo mistakes
• Ask for help - The Frontend Mentor community is supportive and helpful
• Have fun - These challenges are meant to help you learn and grow as a developer

---

Now that you know how to start a challenge, check out the next guide to learn about the starter files you've downloaded.