Choosing Your First Challenge

Browsing the Challenge Library

The Challenges page is where you will find all available projects. Each challenge card displays key information at a glance:

• Preview image - Shows what the finished project should look like
• Challenge name - The title of the project
• Difficulty level - Newbie, Junior, Intermediate, Advanced, or Guru
• Type - Free, Free+, or Premium
• Required skills - Technologies needed to complete the challenge

Take your time browsing. Click on challenges that interest you to read the full description and requirements before committing.

Filtering Options

Frontend Mentor provides several filters to help you find the right challenge quickly.

Filter by Difficulty

The difficulty filter is often the most important for choosing your first challenge.

| Level | Best For | | --- | --- | | Newbie | Complete beginners, those new to HTML/CSS | | Junior | Developers with basic skills looking for more practice | | Intermediate | Comfortable developers ready for complex layouts | | Advanced | Experienced developers wanting significant challenges | | Guru | Expert developers seeking full-stack projects |

Recommendation: If this is your first Frontend Mentor challenge, start with a Newbie-level project regardless of your experience. This helps you understand how the platform works before tackling more complex builds.

Filter by Type

Challenges are categorized into three types based on accessibility:

Free

• Available to all users
• Includes JPEG design files
• Perfect for getting started

Free+

• Free challenges with enhanced assets
• Pro members get access to Figma design files
• Same challenges, better resources

Premium

• Exclusive to Pro subscribers
• Includes Figma design files
• More complex and unique projects

For your first challenge, we recommend choosing a Free challenge. This lets you experience the full workflow without any subscription requirements.

Filter by Skills

You can filter challenges by the skills required to complete them:

HTML & CSS

• Static layouts and components
• No JavaScript required
• Focus on structure and styling

JavaScript

• Interactive elements
• DOM manipulation
• Client-side functionality

API

• Fetching data from external sources
• Working with JSON
• Asynchronous JavaScript

Full-Stack

• Frontend and backend integration
• Database interactions
• Authentication and more

For beginners, start with HTML & CSS challenges. Add JavaScript challenges once you are comfortable with layouts, then progress to API and full-stack projects.

Reading Challenge Details

Before starting any challenge, click through to the full challenge page. Here you will find:

The Brief

A detailed description of what you need to build, including:

• Project overview and context
• User stories (what the user should be able to do)
• Specific requirements and features

Design Preview

Multiple preview images showing:

• Desktop design
• Mobile design
• Active states (hover, focus, etc.)
• Any interactive elements

What is Included

A list of assets provided:

• Design files (JPEG or Figma)
• Images and icons
• Style guide with colors and fonts
• Starter files (optional)

Suggested Technologies

While you can use any technologies you prefer, Frontend Mentor often suggests appropriate tools for each challenge.

Tips for Beginners

Starting your Frontend Mentor journey on the right foot makes all the difference. Here are our top recommendations:

1. Start with Newbie Challenges

Even if you have some experience, Newbie challenges help you understand the Frontend Mentor workflow:

• How to interpret design files
• The submission process
• How feedback works
• Platform conventions

2. Choose Something That Interests You

You will be more motivated to complete a challenge if the project genuinely interests you. Browse the Newbie challenges and pick one that excites you.

3. Read the Entire Brief First

Before writing any code, read through all the requirements. Understanding the full scope prevents surprises midway through your build.

4. Do Not Overthink It

Your first challenge does not need to be perfect. The goal is to:

• Complete a project
• Submit a solution
• Learn from feedback
• Build momentum

5. Set Realistic Expectations

Even Newbie challenges take time. Do not expect to finish in 30 minutes. Give yourself space to:

• Study the design carefully
• Write clean, semantic HTML
• Style methodically
• Test across browsers

6. Use Technologies You Know

Your first challenge is not the time to learn a new framework. Use technologies you are already comfortable with so you can focus on the build itself.

Recommended First Challenges

While personal preference matters, here are some popular choices for first-time Frontend Mentor users:

QR Code Component

• Very simple layout
• Great for absolute beginners
• Can be completed quickly

Product Preview Card

• Slightly more complex
• Good responsive design practice
• Visually appealing result

Results Summary Component

• Multiple elements to style
• Good CSS practice
• Interesting visual design

Blog Preview Card

• Common UI pattern
• Image handling practice
• Typography focus

After Choosing Your Challenge

Once you have selected a challenge:

1. Download the starter files - Contains design files, assets, and a README
2. Read the README thoroughly - Includes detailed requirements and suggested workflow
3. Set up your project - Create a repository and organize your files
4. Study the design - Understand every element before coding
5. Start building - Begin with the HTML structure, then add styles

What's Next?

You have chosen your first challenge. Before diving in, it helps to understand exactly what each difficulty level entails. In the next guide, we explain the difficulty levels in detail so you can plan your progression through Frontend Mentor.