Skip to content

Complete Guide to Submitting Solutions

Submitting your solution is a straightforward process, but taking care with each step ensures your work gets the attention and feedback it deserves. This guide walks you through every part of the submission flow.

Table of contents

  1. Step 1: Navigate to Your Challenge
  2. Step 2: Enter Your URLs
  3. Step 3: Write a Descriptive Title
  4. Step 4: Choose Your Technology Tags
  5. Step 5: Write Your Retrospective
  6. Step 6: Preview and Submit
  7. What Happens After Submission
  8. Tips for a Great Submission

Step 1: Navigate to Your Challenge

From your dashboard, find the challenge you've been working on. You can access it through:

  • My Challenges in the secondary navigation
  • The challenge page through /challenges

Click on the challenge card to open it, then look for the "Submit solution" tab. This is at the top of the challenge page.

Step 2: Enter Your URLs

The submission form requires two URLs:

Live Site URL (Required)

This is where your deployed solution lives. Common hosting options include:

  • GitHub Pages
  • Netlify
  • Vercel
  • Cloudflare Pages

Make sure your site is publicly accessible before submitting. Test the URL in an incognito window to confirm it works.

Repository URL (Required)

Link to your code repository so others can review your implementation. This is typically a GitHub, GitLab, or Bitbucket URL.

Ensure your repository is:

  • Set to public (private repos won't be accessible to the community)
  • Contains a clear README explaining your approach
  • Has clean, organized code

Step 3: Write a Descriptive Title

Your title appears in solution listings and helps others find your work. A good title includes:

  • The challenge name
  • Key technologies or approaches you used

Examples of effective titles:

  • "Responsive landing page using CSS Grid and Flexbox"
  • "React solution with custom hooks and Context API"
  • "Mobile-first approach with Sass and BEM methodology"

Avoid generic titles like "My solution" or "First attempt" - these don't help your solution stand out or get discovered.

Step 4: Choose Your Technology Tags

Select the technologies you actually used in your solution. Available tags include:

  • React
  • Vue
  • Angular
  • Sass/SCSS
  • Tailwind CSS
  • And many more

There aren't HTML, CSS, or JavaScript tags, as they're implied by the challenge languages. Be honest and accurate with your tags. They help others filter solutions and find implementations using specific technologies they want to learn about.

Step 5: Write Your Retrospective

The retrospective is the heart of your submission. You'll answer three prompts:

  1. What are you most proud of, and what would you do differently next time?
  2. What challenges did you encounter, and how did you overcome them?
  3. What specific areas of your project would you like help with?

Thoughtful retrospectives attract better feedback and help you reflect meaningfully on your work.

Take your time here. Share specific details about your code decisions, struggles, and questions. The more context you provide, the more useful feedback you're likely to receive.

Step 6: Preview and Submit

Before final submission:

  • Review all your information for accuracy
  • Double-check that both URLs are working
  • Read through your retrospective for typos and preview the markdown formatting
  • Confirm your tags accurately reflect your tech stack

When you're satisfied, click "Submit solution" to publish your work.

What Happens After Submission

Once you submit, several things happen automatically:

Screenshot Generation

Our system visits your live site URL and captures a screenshot. This becomes the preview image for your solution in listings and on your profile. The process usually takes a few minutes.

If your screenshot doesn't look right (perhaps your site loaded slowly or had an issue), you can regenerate it later from your solution's page.

Solution Reports Generated

Your code is automatically analyzed and you receive four solution reports:

  • Accessibility report - Checks for accessibility issues
  • HTML report - Evaluates semantic markup and structure
  • CSS report - Reviews stylesheet quality and best practices
  • JavaScript report - Examines code quality and potential issues

These reports are private to you and provide immediate, actionable feedback. Pro subscribers receive AI-enhanced reports that identify more issues and learning opportunities.

Community Visibility

Your solution becomes visible to the entire Frontend Mentor community. Other developers can:

  • View your live site and code
  • Read your retrospective
  • Leave feedback and suggestions
  • Like/Bookmark your solution

Tips for a Great Submission

  1. Test everything first - Visit your live URL and repo URL before submitting
  2. Write thoughtfully - Your retrospective is your chance to show your thinking
  3. Be specific - Vague descriptions get vague feedback
  4. Stay honest - Only tag technologies you actually used
  5. Ask questions - The third prompt is specifically for requesting help

Your submission is more than just sharing code - it's starting a conversation about your development journey. Put in the effort, and you'll get valuable feedback in return.

NextWriting an Effective Retrospective