Using Markbot

Use Markbot to check that your code follows all the requirements and submit it for grades when it passes.

Watch the video

  1. Video or tutorial

    You can watch the video(s) or follow along with the written tutorial—or both—they convey exactly the same information.

1 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 ➔

Forking makes a copy of the repository, in your account, that you can edit.

Forking action…

  1. 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.

  2. Notice

    All the testing files, like .markbot.yml, .gitignore, .editorconfig, etc. should be left untouched.

2 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.

3 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.

4 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.

  1. 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.

  2. Naming conventions

    Don’t forget to follow the naming conventions.

5 Test it in your browser

Go to your folder in Finder and double click the HTML to preview in your browser.

  1. Shortcut

    In your code editor, right mouse click and press “Open in Browser”.

  2. Reminder

    Leave this tab open while working and jump back to the window when you want to test—press ⌘R to refresh.

6 Commit

If you’re satisfied with how it looks in your browser go to the GitHub app and commit the changes.

  1. Reminder

    Make sure to write a descriptive commit message so I know what you did at this save point.

7 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…

8 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!

  1. Shortcut

    To run the test in Markbot again press ⌘R.

9 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!

  1. Reminder

    Always test the live website before submitting—it can easily look different from the local one.

10 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.