Day 2 Notes

Here are some notes that should help you follow along during Day 2.

Get a GitHub accounts

Sign up for a free GitHub account at

I recommend using your .edu email address, as that will qualify you for some discounts and coupons that you might want to use later. Remember to verify your email address after signing up.

If you already have a GitHub account, I recommend making a new one for this class, because some of the tools that we use will ask for permission to view all of your repositories. If you have access to e.g. private work repositories, then you should make a new account and keep things separate.

Get a Heroku account

Sign up for a free Heroku account at

If asked what your primary development language is, say Ruby. You can use any one of your email addresses, but remember to verify it.

GitHub and Heroku readings

While you’re waiting for everyone to finish creating accounts, read up on GitHub and Heroku. Think of question:

Create a GitHub repository

Let’s create our first GitHub repository and upload the code we wrote in the CSS Basics course on Treehouse.

First, we need to get our code from Treehouse. Visit the list of your workspaces on Treehouse:

And find the one you worked in for CSS Basics. Then, from the File menu, choose Download Workspace. (If you can’t find your Treehouse workspace, then you can download the zip file from Canvas called You’ll find it in the Day 2 folder under Files.)

Find the zip file that you downloaded and unzip it:

On GitHub, create a new repository called my-first-repo:

Click “Uploading an existing file” and then drag-and-drop the folder that you unzipped earlier. Then click “Commit Changes”.


Read about Gitpod:

Create a Gitpod workspace based on the new repository that you created above. You’ll need to visit a URL of the following pattern:

Gitpod will walk you through the sign-up process if necessary.

Once you sign up, Gitpod will begin creating a new workspace for you, and it will download the code from your GitHub repository on to it. You should end up here:

Right-click on index.html, select Open With…, and then select Preview:

Okay! We now have a full-fledged, industrial-grade development environment to continue building our site.

Create a profile of yourself

Use what you’ve learned about HTML to add a page called profile.html that looks like this:

Try not to peek at the source code until you’re almost done.

Add styling

Use what you’ve learned about about CSS to make your profile look sort of like this:

Try not to use the DevTools until you’re almost done.


Here are some notes about Classbook that may come in handy:

Ask lots of questions as you work! That’s the point, remember?