Introduction to Solution Reports
When you submit a solution on Frontend Mentor, our system automatically analyzes your code and generates detailed feedback reports. These reports help you identify areas for improvement and reinforce what you're doing well.
Table of contents
What Are Solution Reports?
Solution reports are automated code analysis tools that review your submitted code across multiple dimensions. Each report examines your code from a different perspective, helping you build well-rounded development skills.
The Four Report Types
Your solution receives four separate reports:
1. Accessibility Report
Analyzes your code for accessibility issues that could prevent users with disabilities from using your site. This includes checking for proper use of ARIA attributes, color contrast ratios, form labels, and more.
2. HTML Report
Evaluates your HTML structure and semantic markup. It checks whether you're using the right elements for the right purposes, proper document structure, and following HTML best practices.
3. CSS Report
Reviews your stylesheet for maintainability, efficiency, and best practices. It identifies issues like overly specific selectors, duplicate styles, and opportunities to use modern CSS features.
4. JavaScript Report
Examines your JavaScript code for quality, potential bugs, and adherence to best practices. It looks for issues like unused variables, potential memory leaks, and code organization.
Free vs Pro Reports
All users receive solution reports, but the depth of analysis differs between free and Pro subscribers.
What Free Users Get
Free users receive standard automated reports that check for common issues across all four report types. Each report shows:
- Issues found - Problems identified in your code, categorized by severity (error, warning, info)
What Pro Users Get
Pro subscribers receive AI-enhanced reports that catch up to 3x more issues. In addition to everything free users see, Pro reports include:
- More issues detected - AI analysis identifies additional problems related to code quality, best practices, and performance that standard tools miss
- AI-detected badges - Issues found by AI analysis are clearly marked so you know which insights come from deeper analysis
- "Learn how to fix" recommendations - Click any issue to get a personalized explanation with code examples showing how to resolve it
- Priority recommendations - AI-generated summary highlighting the most important improvements to focus on
- Strengths - Things you did well
The AI-enhanced analysis is particularly valuable for catching subtle issues and providing context-specific guidance tailored to your actual code.
When Reports Are Generated
Reports are generated automatically after you submit your solution:
- You submit your solution with your repository URL
- Our system retrieves your code from the repository
- Automated analysis runs across all four report categories
- Reports become available on your solution page
The process usually takes just a few minutes.
Report Privacy
Your solution reports are private. Only you can see the detailed feedback in your reports. This means you can review feedback and learn from mistakes without worrying about others seeing areas you need to improve.
How to Access Your Reports
- Navigate to your submitted solution
- Look for the report tabs near the top of the page
- Click on any report type to view the analysis
Each report shows issues organized by severity, making it easy to prioritize what to fix first.
Making the Most of Your Reports
Review all four reports
Don't just focus on one area. Frontend development requires skills across accessibility, HTML, CSS, and JavaScript. Reviewing all reports helps you grow as a well-rounded developer.
Don't be discouraged by issues
Finding issues in your code is normal and expected. Even experienced developers receive feedback on their code. Each issue is a learning opportunity.
Track your progress
As you complete more challenges, you'll notice patterns in your reports. Maybe you consistently miss form labels or tend to use non-semantic HTML. Identifying these patterns helps you focus your learning.
Use reports as a learning guide
When a report flags an issue you don't understand, take time to research it. The reports often point you toward important concepts you might not have encountered yet.