Choosing Your First Challenge

Browsing the Challenge Library

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

• Preview image - Shows what the finished project should look like (for Design Challenges) or a design concept image (for Product Challenges)
• Challenge name - The title of the project
• Difficulty level - Newbie, Junior, Intermediate, Advanced, or Guru
• Format - Design or Product
• 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 |

Tip

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 Format

Frontend Mentor offers two challenge formats:

Design Challenges

• Build from professional design files (JPEG or Figma)
• Goal is to match the design as closely as possible
• Available at all difficulty levels (Newbie to Guru)
• Perfect for learning to translate designs into code

Product Challenges

• Build from product specifications instead of design files
• You make your own design decisions guided by a brand kit
• Available at Intermediate difficulty and above
• Practice product thinking, AI collaboration, and building real applications from written specifications

Tip

If this is your first Frontend Mentor challenge, start with a Design Challenge. Product Challenges are best suited for developers who are already comfortable at the Intermediate level or above on Design Challenges.

Filter by Type

Challenges of both formats are categorized into three types based on accessibility:

Free

• Available to all users
• Design Challenges include JPEG design files
• Perfect for getting started

Free+

• Free Design Challenges with enhanced assets
• Pro members get access to Figma design files
• Free+ doesn't apply to Product Challenges

Premium

• Exclusive to Pro subscribers
• Design Challenges include Figma design files
• Includes the most complex and demanding projects across both formats

For your first challenge, we recommend choosing a Free Design 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

For beginners, start with HTML & CSS challenges. Add JavaScript challenges once you're comfortable with layouts, then progress to API. Many of our projects at Intermediate+ levels can be built as full-stack applications, if full-stack development is something you want to practice.

Reading Challenge Details

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

The Brief

A detailed description of what you need to build. For Design Challenges, this includes user stories and specific requirements. For Product Challenges, this includes an overview of the product spec, features, and what's included in the download.

Preview

Design Challenges show multiple preview images (desktop, mobile, active states). Product Challenges show a design concept image that illustrates the brand kit in action, but you choose your design direction.

What is Included

A list of what's provided in the download:

Design Challenges:

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

Product Challenges:

• Product specification with acceptance criteria
• Brand kit with colors, typography, and spacing
• Sample data with edge cases
• Starter CSS tokens

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 Design Challenges

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

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

Note

Product Challenges are designed for developers who are comfortable at the Intermediate level or above. Build your skills with Design Challenges first, then explore Product Challenges when you're ready for spec-driven development and making your own design decisions.

2. Choose Something That Interests You

You'll 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. Don't Overthink It

Your first challenge doesn't 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. Don't 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 isn't the time to learn a new framework. Use technologies you're already comfortable with so you can focus on the build itself.

Recommended First Design Challenges

While personal preference matters, here are some popular Design Challenges for your first Frontend Mentor project:

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

Tip

Once you're comfortable at the Intermediate level, browse the Product Challenge library and pick one that interests you. The README in each Product Challenge walks you through getting started.

After Choosing Your Challenge

Once you've chosen a challenge:

For Design Challenges:

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

For Product Challenges:

1. Download the starter files - Contains product specs, brand kit, sample data, and starter CSS
2. Read the product spec - Start with the product definition, then review core requirements
3. Review the brand kit - Understand the visual foundation for your design decisions
4. Choose your tech stack - Product Challenges are framework-agnostic and often full-stack
5. Start building - Begin with the foundation (authentication, database), then layer in features

Tip

If you'd prefer to skip backend work, each Product Challenge includes a frontend-only alternative.

What's Next?

You've 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.