using-markbot.md

layout	title	desc	playlist	video	hide_show_for_marks	hide_markbot	extra_tutorials	steps
lesson	Using Markbot	Use Markbot to check that your code follows all the requirements and submit it for grades when it passes.	web-dev-1	using-markbot	true	true	title url Markbot download (MacOS) https://assets.learntheweb.courses/markbot/Install%20Markbot.dmg title url Markbot download (Windows) https://assets.learntheweb.courses/markbot/Markbot%20Setup.exe title url Markbot source code https://github.com/thomasjbradley/markbot	title before notes Fork the assignment repo Every coding exercise you do by yourself will start with a repository on GitHub. **You’ll follow this process for every code exercise to submit it and get it automatically graded.** The repository contains a `.markbot.yml` hidden file used to check and submit your code—running it through a battery of tests like checking commits, checking naming conventions, validation, indentation and more. ### [Go to this repository and press the “Fork” button ➔](https://github.com/ltw-webdev-1/using-markbot) Forking makes a copy of the repository, in your account, that you can edit.  *Forking action…*  label text Reminder This is the process you’ll use for submitting all code exercises. If the code exercise points to a GitHub repository follow this process. label text Notice All the testing files, like `.markbot.yml`, `.gitignore`, `.editorconfig`, etc. should be left untouched. title before Clone the fork to your computer After forking, clone the repository to your computer by clicking the GitHub Desktop button. *You don’t have to set this repo up as a hosted website because that’s already done.*  Make sure to choose your `web-dev` folder as the location—it isn’t easy to move the repository afterwards.  title before Open folder in code editor When editing code it’s always best to drag the whole project folder to your code editor. That way it will give you a file listing on the left side.  title before notes Create a new HTML file Create a new file and save it as `index.html` directly in your `using-markbot` folder. Inside the file write just “Hello”—**and save.**  label text Notice You’ll probably notice a whole bunch more files show up in the left of the file browser. They are part of the automated marking system and not part of your website—**completely ignore them.** label text Naming conventions Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). title before notes Test it in your browser Go to your folder in Finder and double click the HTML to preview in your browser.  label text Shortcut In your code editor, right mouse click and press “Open in Browser”. label text Reminder Leave this tab open while working and jump back to the window when you want to test—press `⌘R` to refresh. title before notes Commit If you’re satisfied with how it looks in your browser go to the GitHub app and commit the changes.  label text Reminder Make sure to write a descriptive commit message so I know what you did at this save point. title before Check with Markbot After you’ve completed your work and you’re ready to hand it in: **drag and drop the folder into Markbot.**  If the tests fail you’ll see red “x”s—our goal is to get green checks. **No green check, no grade.**  We can scroll through the big list of what’s missing, each error will be described & point to the line of code. In our current code we have a few problems: 1. We don’t have enough commit messages, representative of sloppy code and poor forethought 2. The test is expecting “Hello World!” inside our `index.html` 3. The website isn’t live online yet—because we haven’t pushed *So we need to fix them…* title before notes Fix problems, Markbot, commit Open up your code again and change the content inside `index.html` to say “Hello World!”. 1. Save 2. Refresh browser 3. Check Markbot 4. Commit 5. Push If everything is good you should get a green check mark!  label text Shortcut To run the test in Markbot again press `⌘R`. title before notes Test the live website After you’ve finalized your code, making sure it passes Markbot, we need to test the live website. *We want to make sure it works on the live website before submitting for grades.* - Go to the live url: `http://username.github.io/using-markbot` - Or go to `Settings > GitHub Pages` and click the link.   *It’s alive!*  label text Reminder Always test the live website before submitting—it can easily look different from the local one. title before Submit for grades When everything is working perfectly, submit the assignment for grades with the big button in Markbot.  [**Go check Progressinator it out to make sure.**](https://progress.learntheweb.courses/)