Welcome to Frontend Mentor

What is Frontend Mentor?

Frontend Mentor bridges the gap between learning to code and becoming a job-ready developer. Instead of following along with tutorials, you receive project briefs and build from scratch, just like you would in a real-world development role.

Frontend Mentor offers two challenge formats:

Design Challenges provide professional design files (JPEG or Figma) that you replicate as closely as possible. Each challenge comes with:

• Design files - Professional designs to replicate
• Assets - All the images, icons, and fonts you need
• Style guide - Color palettes, typography, and spacing specifications
• README - Project brief with requirements and suggested workflow

Product Challenges provide product specifications instead of design files. You make your own design decisions and build a complete, functional application. Each challenge comes with:

• Product spec - Detailed requirements with acceptance criteria for each feature
• Brand kit - Colors, typography, spacing, and design inspiration to guide your visual decisions
• Sample data - Real-world data with edge cases to test your implementation
• AI context files - Instructions that help AI coding tools (like Claude or Cursor) understand your challenge and guide you throughout the build

How Frontend Mentor Differs from Tutorials

Traditional tutorials walk you through every step, showing you exactly what to type. While this can be helpful for learning syntax, it doesn't prepare you for the reality of building projects independently.

Frontend Mentor takes a different approach:

| Traditional Tutorials | Frontend Mentor | |----------------------|-----------------| | Follow along step-by-step | Build independently from a brief | | Solutions provided upfront | You create your own solution | | Limited problem-solving practice | Real problem-solving experience | | One "correct" way to build | Multiple valid approaches | | Passive learning | Active, hands-on learning |

This approach mirrors how professional developers work. You receive requirements and bring them to life using your skills and knowledge.

What to Expect

Challenges

Frontend Mentor offers a library of challenges ranging from simple HTML and CSS components to complex full-stack applications. Each challenge is designed to help you practice specific skills and build your portfolio.

Challenges are categorized by:

• Difficulty level - From Newbie to Guru
• Required skills - HTML, CSS, JavaScript, APIs, and more
• Format - Design Challenges (build from professional designs) or Product Challenges (build from product specs)
• Type - Free, Free+, or Premium

Community Feedback

One of the most valuable aspects of Frontend Mentor is the community. After submitting your solution, other developers can review your code and provide constructive feedback. This helps you:

• Identify areas for improvement
• Learn best practices from experienced developers
• Discover alternative approaches you might not have considered
• Build connections with other developers

You can also review other people's solutions, which is an excellent way to learn new techniques and see how others approach the same problem.

Learning Paths

If you're unsure where to start or want a structured learning experience, Frontend Mentor offers curated learning paths. These paths guide you through a series of challenges designed to build your skills progressively.

Learning paths are perfect for:

• Beginners who want clear direction
• Developers learning new technologies
• Anyone who prefers structured learning

Portfolio Building

Every challenge you complete becomes a portfolio piece. Unlike tutorial projects that thousands of other developers have built identically, your Frontend Mentor solutions showcase your unique problem-solving approach and coding style.

A strong portfolio of Frontend Mentor projects demonstrates to potential employers that you can:

• Translate designs and specifications into working code
• Make thoughtful product and design decisions
• Build projects independently
• Write clean, maintainable code
• Solve real-world problems

Getting the Most Out of Frontend Mentor

Here are some tips to maximize your learning:

1. Start at the right level - Be honest about your current skills and choose challenges that stretch you without overwhelming you

2. Read the brief carefully - Understanding the requirements before you start coding saves time and frustration

3. Build mobile-first - This approach typically leads to cleaner, more maintainable CSS

4. Ask for feedback - Submit your solutions and engage with the community

5. Review others' solutions - You'll learn new techniques and approaches

6. Be consistent - Regular practice, even if it's just a few hours a week, leads to steady improvement

Tip

Don't worry about making your first solution perfect. The goal is to learn and improve over time. You can always revisit and refactor your earlier projects as your skills grow.

Ready to Begin?

Now that you understand what Frontend Mentor offers, it's time to get started. In the next guide, we'll walk you through creating your account and setting up your profile.

Welcome to the community. We're excited to see what you build.