How to Know Diskstation Upload Is Complete

A complete guide to submitting solutions on Frontend Mentor

So, yous've put in the time to build out your solution. You're happy with how it looks and accept tried matching information technology upwardly to the design. Now it'due south fourth dimension to submit it to the platform!

You'll notice all of the challenges y'all're currently working on in the My Challenges section in your dashboard. Click on your avatar (or the hamburger carte icon if you're on mobile) and click Dashboard. From in that location, whorl to the My Challenges section and click the one you'd like to submit a solution for from the "In Progress" section. This will take you to the claiming hub where you can click "Submit Solution" and fill up 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. Effort to make sure that your championship is nice and descriptive so that it helps catch people's attention. For instance, instead of just adding a title of "HTML and CSS solution" you lot could say "Mobile-first solution using CSS Grid and Flexbox". This helps add context to your solution and tin can lead to more people looking at information technology.

2) Repository URL

The word "repository" relates to Git version control. Nosotros need to create a repository where your code is stored so that other people tin hands run across it.

Let'southward starting time create an empty repository on GitHub, and so you can choose which arroyo 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 gear up to "Public". Click "Create repository".
3. Y'all've at present created an empty repository on GitHub. So the next thing you demand to exercise 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 non you lot accept learned basic Git commands yet.

Selection 1 — No knowledge of Git

1. One time y'all've created your empty repository, it will navigate to a page with basic setup instructions. Near the acme 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 tin can at present drag and driblet your files which will upload them to GitHub. Exist sure to upload only the files inside of your project folder and not the projection folder itself. Add together 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, yous tin can use the "Upload Files" option that you lot'll encounter on the page and upload files once more once you've made changes.

Pick 2 — At to the lowest degree a basic noesis of Git

If you haven't installed Git on your computer, you lot can install it hither. Likewise, if you haven't learned Git yet, you might want to read through the book online. Nonetheless, this guide will give you lot 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 employ GitHub for authentication on Frontend Mentor, then we'll acquit on with GitHub as an example for the rest of this guide.

GitHub also has an incredible learning lab resource if you'd like to acquire more about the platform.

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

Here are the steps yous'll need to follow to push your code to GitHub:

1. Open the terminal and navigate to the root level (first level) of your projection binder. Your command will look something similar this cd /path/to/my/project-folder. Once at that place, blazon git init to initialize Git version control in your project.
2. Side by side, add all of your files, and so that they're "staged" and fix to be committed. You lot can exercise 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 demand to make the connection betwixt 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 together origin git@github.com:username/repository-proper noun.git. Paste information technology into the command line and striking enter.
5. Adjacent, push the code to that repository by typing git push -u origin master and hitting enter.
6. Your lawmaking should at present exist pushed to the remote repository on GitHub. You can double-check this by refreshing the repository folio. The setup instructions should disappear and exist replaced by your lawmaking.

Now that you've pushed your lawmaking to GitHub using either the transmission upload or the Git terminal commands, re-create 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 yous 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 lawmaking from your code repository. Hither are a few options we recommend:

GitHub Pages

This is arguably the easiest fashion to create a live URL for your project. Get to Settings on your repository, scroll downwardly to the GitHub Pages department and configure it to rail your chief/primary co-operative.

Equally shortly as information technology'southward all hooked up, you'll exist able to come across your project using the URL GitHub provides!

Vercel

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

They make information technology piece of cake to connect your repo (GitHub, GitLab, BitBucket) and publish to a live URL.

For more data on getting prepare up, head over to the Vercel documentation.

Netlify

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

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

If yous'd adopt non to use i of these options you tin read more about our trusted providers. You'll demand to use 1 of these options in social club to post your solution on Frontend Mentor.

One time y'all've got your live URL, visit it to make sure the project looks as expected. If it doesn't and you lot're not sure how to resolve the consequence, you can post a question in the #aid channel of the Frontend Mentor Slack community. There are enough of people there who will be happy to aid you troubleshoot your issue.

If you're happy with how your projection looks you tin can simply paste the URL in the Live Site URL field.

four) Tags

You can add tags to your solution to add more context to information technology. Adding tags helps others on the platform detect your solution if they're following a tag you use. Tags are for boosted tools, techniques, and topics you focused on with your project. You won't see HTML, CSS, and JavaScript tags, as they're unsaid past the languages required for a challenge. Merely you will see tags like "react", "bem", and "accessibility". Be certain to add together the tags you lot feel are relevant to your project. If you oasis't used any additional tools, information technology's fine to leave the tags empty.

five) 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 prove upwardly on the dashboard and then are much easier to find than solutions without questions.

Exist every bit specific as you can exist when you write your questions. The more than specific yous can be the more specific and focused the feedback will be. Writing something like "Please provide feedback" or "Please tell me how I can ameliorate" isn't likely to help you become valuable and detailed feedback.

And so be certain to put some thought and try into your questions. The more you can assist the people out who are looking to give you feedback the more likely yous will exist to get receive valuable insights.

6) Submit Solution

Now it'south fourth dimension to submit your solution! Once you've submitted your solution, don't forget to check the design comparison and the solution written 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 than likely you are to become feedback from a number of people.

Also, be sure to check out other people's solutions to see how others have approached the same claiming. At that place'due south a lot to be learned past reading other people's lawmaking. If you lot take a question about someone's approach or take some feedback leave a comment on their solution. Frontend Mentor is all about the community helping each other improve, then don't be afraid to inquire questions and aid each other out 🙂

lordequallown.blogspot.com

Source: https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248

Share this post