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 Type

You can also filter challenges by the type of project:

• Free challenges
• Free+ challenges
• Premium challenges
• Challenges with specific tech requirements (JavaScript, API integration, etc.)

Tip: If you're just getting started, begin with a Newbie 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 will see download buttons for your starter code and design files. The page also shows the challenge brief, the included assets, and ideas for extending the project.

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

Downloading Design Files

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

Free Users: JPEG Designs

If you're using a free account, you'll receive these design files at a minimum:

• desktop-design.jpg - The desktop version of the design
• mobile-design.jpg - The mobile version of the design

Some projects will also include designs for interaction states (e.g., hover, focus). These JPEG files give you a visual reference for your build. You'll need to estimate measurements and extract colors manually (although we provide colors in the style-guide.md file).

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

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

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

The starter code includes everything you need to begin building, including:

• Pre-written content to save you time
• Optimized image assets
• A README with instructions
• A style guide with colors and fonts

Next Steps

After downloading your files:

1. Read the README - It contains important information about the challenge
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

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.