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 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 feed. Once on the My Challenges page, click the challenge for which you’d like to submit a solution. This will take you to the challenge page, 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” refers to Git version control. We need to create a repository where our 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. Give your repository a meaningful name and ensure its visibility is set to “Public.” Then click “Create repository.”
3. You’ve now created an empty repository on GitHub. The next step 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 your empty repository is created, 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 drag and drop your files, which will be uploaded to GitHub. Be sure to upload only the files inside your project folder, 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 use GitHub as an example for the rest of this guide.

GitHub also has excellent documentation, including 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. 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 your project folder's root level (first level). 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 your files to be “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 connect 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 the manual upload or the Git terminal commands copy the URL and paste 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 will see when they preview your solution and give you feedback, so it’s crucial that this link is working.

There are several 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 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 to which you want to point the URL, 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. It’s a top-class tool that we 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 to the Vercel documentation.

Netlify

Netlify is another incredible tool worth learning 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.

You can read more about our trusted providers if you prefer not to use one of these options. 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 ensure the project looks as expected. If it doesn’t and you’re unsure how to resolve the issue, you can post a question in the #help channel of the Frontend Mentor Discord community. Plenty of people there will be happy to help you troubleshoot your issue.

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

4) Tags

You can add tags to your solution to add more context. Adding tags helps others on the platform discover your solution if they follow 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, leaving the tags empty is fine.

5) Solution retrospective

The solution retrospective helps you think about your project and share it with the community. Although the fields are optional, writing something is crucial if you seek feedback on your solution. It also helps you review how everything went, which can be an excellent source of learning and helping others understand your process.

We’ve divided the retrospective into three sections. Each section is optional, so feel free to leave one or more empty if you have nothing to write about.

The final section is the most important, especially if you’re seeking feedback. You can ask specific questions about your project to get feedback from other community members. If you fill in this field, your solution appears in the “feedback request” tab on the /solutions page, making it easy for others to discover.

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

6) Submit your solution

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 your solution's visual or code-related issues.

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

Also, 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 🙂

Remember, if you get stuck on any of these steps, please don’t hesitate to create a post in the #help channel inside our Discord community. The community is extremely supportive, and we know getting started can be tricky. So, we’re all here to help you in your journey!