A complete guide to submitting solutions on Frontend Mentor

So, you’ve put in the time to build out your solution. You’re happy with how it looks and have tried matching it up to the design. Now it’s time to submit it to the platform!

You’ll find all of the challenges you’re currently working on on the My Challenges page, which you can get to by clicking “Submit a solution” or “My challenges” on the Home page. Once you’re on the My Challenges page, click the challenge you’d like to submit a solution for. This will take you to the challenge hub, where you can click “Submit solution” and fill in the submission form.

Here is a walkthrough of the various fields you’ll need to fill in:

1) Title

This step is pretty simple. Try to make sure that your title is nice and descriptive so that it helps catch people’s attention. For example, instead of just adding a title of “HTML and CSS solution” you could say “Mobile-first solution using CSS Grid and Flexbox”. This helps add context to your solution and can lead to more people looking at it.

2) Repository URL

The word “repository” relates to Git version control. We need to create a repository where your code is stored so that other people can easily see it.

Let’s first create an empty repository on GitHub, then you can choose which approach you’d like to take:

1. Go to your GitHub profile and click the + icon at the top and select “New repository”
2. Be sure to give your repository a meaningful name and ensure its visibility is set to “Public”. Click “Create repository”.
3. You’ve now created an empty repository on GitHub. So the next thing you need to do is to connect your local project with the remote repository and push your code to GitHub.

There are two options here depending on whether or not you have learned basic Git commands yet.

Option 1 — No knowledge of Git

1. Once you’ve created your empty repository, it will navigate to a page with basic setup instructions. Near the top of the page, it should say “Get started by creating a new file or uploading an existing file.” Click on “uploading an existing file”.
2. You’ll be taken to a page where you can now drag and drop your files which will upload them to GitHub. Be sure to upload only the files inside of your project folder and not the project folder itself. Add a commit message, like “Initial commit” and select “Commit changes”.
3. You’ll now see your files have been uploaded to GitHub. To make updates, you can use the “Upload Files” option that you’ll see on the page and upload files again once you’ve made changes.

Option 2 — At least a basic knowledge of Git

If you haven’t installed Git on your computer, you can install it here. Also, if you haven’t learned Git yet, you might want to read through the book online. However, this guide will give you everything you need to submit your solution without knowing Git inside out.

You can create a repository on any Git platform, such as GitHub, GitLab or Bitbucket. We use GitHub for authentication on Frontend Mentor, so we’ll carry on with GitHub as an example for the rest of this guide.

GitHub also has an excellent documentation with a getting started guide if you’d like to learn more about the platform.

OK, let’s take your code from your local machine and push it up to GitHub. Note that if you have any GitHub authentication issues while working through these steps, you might want to try connecting to GitHub with SSH for authentication.

Here are the steps you’ll need to follow to push your code to GitHub:

1. Open the terminal and navigate to the root level (first level) of your project folder. Your command will look something like this cd /path/to/my/project-folder. Once there, type git init to initialize Git version control in your project.
2. Next, add all of your files, so that they’re “staged” and ready to be committed. You can do this by typing git add . on the command line.
3. Commit your files with a message by typing git commit -m "Initial commit"
4. Now we need to make the connection between your locally initialized project and the remote Git repository on GitHub. To do this, copy the command from the repository setup page that looks like this:git remote add origin git@github.com:username/repository-name.git. Paste it into the command line and hit enter.
5. Next, push the code to that repository by typing git push -u origin master and hitting enter.
6. Your code should now be pushed to the remote repository on GitHub. You can double-check this by refreshing the repository page. The setup instructions should disappear and be replaced by your code.

Now that you’ve pushed your code to GitHub using either the manual upload or the Git terminal commands, copy the URL and past it into the Repository URL field on the solution submission form.

3) Live Site URL

The Live Site URL is where you need to provide a link to a working version of your project. This is what people are going to see when they preview your solution and give you feedback, so it’s crucial that this link is working.

There are a number of ways to create a live version of your project using the code from your code repository. Here are a few options we recommend:

GitHub Pages

This is arguably the easiest way to create a live URL for your project. Go to Settings on your repository. You should see a Pages link in the settings navigation sidebar. Choose the branch you would like to point the URL to, click save, and wait a moment.

As soon as it’s all ready to go, you’ll be able to see your project using the URL GitHub provides!

Vercel

Vercel is doing incredible things in the front-end ecosystem. They’re a top-class tool that we’d recommend getting to know and playing around with.

They make it easy to connect your repo (GitHub, GitLab, BitBucket) and publish to a live URL.

For more information on getting set up, head over to the Vercel documentation.

Netlify

Netlify is another incredible tool that is worth getting to know as a front-end developer. It’s effortless to connect your repo and publish it to a live URL which will track any changes you make to your code.

To get set up with Netlify, check out the Netlify docs.

If you’d prefer not to use one of these options you can read more about our trusted providers. You’ll need to use one of these options in order to post your solution on Frontend Mentor.

Once you’ve got your live URL, visit it to make sure the project looks as expected. If it doesn’t, and you’re not sure how to resolve the issue, you can post a question in the #help channel of the Frontend Mentor Discord community. There are plenty of people there who will be happy to help you troubleshoot your issue.

If you’re happy with how your project looks, you can simply paste the URL in the Live Site URL field.

4) Tags

You can add tags to your solution to add more context to it. Adding tags helps others on the platform discover your solution if they’re following a tag you use. Tags are for additional tools, techniques, and topics you focused on with your project. You won’t see HTML, CSS, and JavaScript tags, as they’re implied by the languages required for a challenge. But you will see tags like “react”, “bem”, and “accessibility”. Be sure to add the tags you feel are relevant to your project. If you haven’t used any additional tools, it’s fine to leave the tags empty.

5) Questions for the community

Although this field is optional, it’s absolutely crucial to write something if you’re looking to get feedback on your solution. Solutions with questions show up on the dashboard, and so are much easier to find than solutions without questions.

Be as specific as you can be when you write your questions. The more specific you can be, the more specific and focused the feedback will be. Writing something like “Please provide feedback” or “Please tell me how I can improve” isn’t likely to help you get valuable and detailed feedback.

So be sure to put some thought and effort into your questions. The more you can help the people out who are looking to give you feedback, the more likely you will be to get receive valuable insights.

6) Submit Solution

Now it’s time to submit your solution! Once you’ve submitted your solution, don’t forget to check the design comparison and the solution report. These will give you valuable insights into any visual or code-related issues with your solution.

Don’t forget to share your solution around. The more people who see your solution, the more likely you are to get feedback from a number of people.

Also, be sure to check out other people’s solutions to see how others have approached the same challenge. There’s a lot to be learned by reading other people’s code. If you have a question about someone’s approach or have some feedback leave a comment on their solution. Frontend Mentor is all about the community helping each other improve, so don’t be afraid to ask questions and help each other out 🙂