Understanding Difficulty Levels

Overview of Difficulty Levels

| Level | Target Audience | Primary Skills | Typical Time | |-------|----------------|----------------|--------------| | Newbie | Beginners | HTML, CSS basics | 1-4 hours | | Junior | Early learners | Layouts, basic JS | 4-8 hours | | Intermediate | Developing skills | Responsive, JS interactivity | 8-20 hours | | Advanced | Competent juniors | Complex apps, APIs | 20-40 hours | | Guru | Ambitious juniors, working devs | Full-stack, advanced patterns | 40+ hours |

Premium Challenges: A Step Above

At each difficulty level, premium challenges take things a step further than their free counterparts. Premium projects tend to be more complex and closer to what you'd encounter in a professional setting.

Why premium challenges stand out:

• More comprehensive scope - Premium projects often include additional pages, states, or features that make them closer to production applications
• Strong portfolio pieces - These challenges produce work that demonstrates your abilities to potential employers
• Professional-grade designs - Premium Design Challenges come with Figma files, giving you experience with the exact workflow used in professional teams
• In-depth Product Challenges - Premium Product Challenges feature complex, real-world applications with rich specifications and many features
• Real-world complexity - The additional complexity better prepares you for the challenges you'll face in a development role

Tip

If you're building a portfolio to land a job, prioritizing premium challenges at your skill level will give you the most impressive projects to showcase.

Newbie Level

Perfect for: Complete beginners and those new to Frontend Mentor

What to Expect

Newbie challenges focus on fundamental HTML and CSS skills. These projects are typically small components or simple layouts that can be completed in a few hours.

Skills Practiced

• Semantic HTML structure
• Basic CSS styling
• Simple layouts (single column, centered content)
• Typography and color application
• Box model understanding

Example Projects

• Single-card components
• Simple landing page sections
• Static profile cards
• Basic forms

What You'll Learn

Completing Newbie challenges teaches you to:

• Translate a design file into code
• Write clean, organized HTML
• Apply CSS styles effectively
• Pay attention to design details

Tip

Don't skip Newbie challenges even if you have experience. They're excellent for warming up, trying new CSS techniques, or practicing with unfamiliar tools.

Junior Level

Perfect for: Developers with basic skills seeking more practice

What to Expect

Junior challenges introduce more complex layouts and may include simple JavaScript functionality. These projects require a solid understanding of CSS and often involve responsive design basics.

Skills Practiced

• Multi-column layouts
• Flexbox and CSS Grid
• Basic responsive design
• Simple JavaScript (toggles, form validation)
• CSS transitions and animations

Example Projects

• Multi-section landing pages
• Interactive cards with hover states
• Navigation components
• Simple calculators or converters

What You'll Learn

Junior challenges help you:

• Create more complex layouts confidently
• Implement basic interactivity
• Think about different screen sizes
• Combine multiple techniques in one project

Intermediate Level

Perfect for: Developers comfortable with basics, ready to grow

Note

Product Challenges start here. At the Intermediate level and above, you can also take on Product Challenges. These are spec-driven projects where you make your own design decisions and build complete applications from product specifications. They're a great complement to Design Challenges for developers who want to practice product thinking, AI collaboration, and shipping real products.

What to Expect

Intermediate challenges are substantially more complex. They require strong responsive design skills, meaningful JavaScript interactivity, and careful attention to user experience.

Skills Practiced

• Advanced responsive design techniques
• Complex CSS layouts
• JavaScript DOM manipulation
• Event handling and state management
• Form handling and validation
• Local storage
• CSS animations and transitions

Example Projects

• Multi-page websites
• Interactive dashboards
• E-commerce product pages
• Applications with multiple states

What You'll Learn

Intermediate challenges develop your ability to:

• Build fully responsive, polished interfaces
• Implement complex interactive features
• Manage application state
• Handle edge cases and error states
• Write maintainable, organized code

Note

Intermediate is where many developers spend significant time. Don't rush through this level. The skills you develop here form the foundation for advanced work.

Advanced Level

Perfect for: Competent junior developers ready for portfolio-worthy projects

What to Expect

Advanced challenges are complex applications that require substantial planning and implementation effort. These projects often involve API integration, complex state management, and sophisticated user interfaces. They make exceptional portfolio pieces that demonstrate you can build real-world applications, not just simple components.

Skills Practiced

• API integration and data fetching
• Advanced state management
• Complex routing and navigation
• Authentication patterns
• Performance optimization
• Accessibility best practices
• Error handling and loading states

Example Projects

• Full web applications
• Data-driven dashboards
• E-commerce platforms
• Social media-style interfaces
• Multi-user applications

What You'll Learn

Advanced challenges prepare you for professional development by teaching you to:

• Architect complex applications
• Work with external APIs effectively
• Implement robust error handling
• Build accessible, performant interfaces
• Manage complex application state

Guru Level

Perfect for: Ambitious junior developers or working professionals wanting to level up

What to Expect

Guru-level challenges are the most demanding projects on Frontend Mentor. These are full-stack applications requiring both frontend and backend skills, complex business logic, and professional-grade implementation. They are ideal for developers who have landed their first role and want to get the reps in by building more substantial projects, or for highly motivated juniors looking to create standout portfolio pieces.

Skills Practiced

• Full-stack development
• Backend API development
• Database design and management
• Authentication and authorization
• Deployment and DevOps
• Advanced security practices
• Testing and quality assurance

Example Projects

• Complete SaaS applications
• Platforms with user accounts
• Applications with real-time features
• Complex data management systems

What You'll Learn

Guru challenges push you to:

• Build production-ready applications
• Handle complex backend requirements
• Implement secure authentication systems
• Deploy and maintain full-stack applications
• Make architectural decisions

How Difficulty Levels Connect to Progression

Difficulty levels aren't just about challenge complexity — they also feed into your progression level on the platform. Your progression level depends on whichever is lower: your Mentor Score points or the highest challenge difficulty level you have completed.

This means that to advance through the progression system, you need to push yourself into harder challenges, not just accumulate points at easier levels. For full details on how this works, see the Understanding Mentor Score guide.

Recommended Progression Path

While everyone's journey is different, here is a suggested progression through Frontend Mentor's difficulty levels:

Phase 1: Foundation Building

Complete 5-10 Newbie challenges

Focus on:

• Understanding the Frontend Mentor workflow
• Building confidence with HTML and CSS
• Developing attention to design detail

Phase 2: Skill Expansion

Complete 5-8 Junior challenges

Focus on:

• Strengthening layout skills
• Introduction to responsive design
• Adding basic JavaScript

Phase 3: Real-World Readiness

Complete 3-5 Intermediate challenges

Focus on:

• Building complete, polished projects
• Complex JavaScript functionality
• Portfolio-worthy work
• Trying your first Product Challenge to practice spec-driven development and making your own design decisions

Phase 4: Portfolio Building

Complete 2-3 Advanced challenges

Focus on:

• API integration
• Complex state management
• Application architecture
• Creating standout portfolio pieces that impress employers
• Taking on Product Challenges to demonstrate product thinking and full-stack skills alongside your Design Challenge portfolio

Phase 5: Continued Growth

Attempt Guru challenges when ready

Focus on:

• Full-stack development
• Production-quality applications
• Complete, deployable projects
• Continuing to build and grow once you've landed a role

Tips for Progressing Through Levels

Know When to Move Up

You're ready for the next level when:

• Current level challenges feel comfortable
• You complete projects with minimal struggle
• You want more complexity
• You're not learning new skills at your current level

Know When to Stay

Remain at your current level if:

• You're still struggling with core concepts
• Projects take significantly longer than expected
• You're not confident in your solutions
• You haven't received positive feedback yet

Mix and Match

You don't have to stick to one level. Consider:

• Warming up with an easier challenge
• Tackling a harder challenge when you have more time
• Revisiting easier levels to try new technologies
• Using Newbie challenges to practice new frameworks

Embrace the Struggle

Challenges should be challenging. If you breeze through everything, you're not growing. If you're constantly overwhelmed, step back a level. The sweet spot is feeling stretched but capable.

What's Next?

Now that you understand the difficulty levels, it's helpful to understand the different types of content available on Frontend Mentor. In the next guide, we explain the differences between Free, Free+, and Premium challenges.