---
prev: ./
next: ./cli-1.md
---
# 00 Technology Setup

## Module Objectives

* create accounts and successfully login to the tools used for this course
* practice in each of the tools to start getting familiar with each of them

## :books: Watch and Read

:::warning
I recorded these steps and screenshots in fall 2018. Websites evolve quite quickly and some of the steps below may be different. Most changes should be minor and easy to figure out. If any of the steps below are gravely inaccurate or confusing, don't hesitate to reach out on Slack or email and I will update them accordingly.

And always remember this, **you don't have to pay for any of the services below**. The free version of everything will work perfectly for this course.
:::

### Slack

Slack is our communication tool for this course. It's used by teams in many industries and is quickly changing how teams communicate with each other and with technology.

1. Visit our [Slack signup][] page and create an account with your myRCC email address.

    If you're new to Slack, you can check out [:book: What is Slack?][] or [:tv: What is Slack?][].

1. You've successfully joined our slack when you see a page like this. *If you are new to slack, you won't see the left-most sidebar with all the icons. It only shows when you're in multiple teams.*

    ![RCC Slack #homeroom screenshot][]

1. I recommend you install the desktop and mobile apps, but it is not required. The web app can always be found at [https://rccitp175.slack.com][]

### Github

Git is a popular version control software used by developers around the world. We'll learn more about how git works a little later.

1. Visit [https://github.com][] and create an account with your myRCC email address.
1. Choose the `unlimited public repositories for free` option and click the green `Continue` button. You do not need to check either of the two checkboxes.

    ![Github signup screenshot 1][]

1. Respond to the questions how you see fit, they are not used for this course.

    ![Github signup screenshot 2][]

1. When you've completed sign up, you should see a screen like this and have an email asking you to verify your email address in your inbox. Click the link in that email to verify your address.

    ![Github signup screenshot 3][]

### codecademy

codecademy.com is a website for learning and practicing programming concepts and is a tool we'll be using to learn about the command line.

1. Visit [https://codecademy.com][] and click the Github icon in the bottom-right corner to login with your Github account.

    ![codecademy signup screenshot 1][]

2. Click the green `Authorize Codecademy` button and enter your Github password if asked.

    ![codecademy signup screenshot 2][]

3. Codecademy really wants you to signup for their Pro service, which is **NOT required** for this course. Anytime you are asked to sign up for Pro, you can skip or exit out of that.
4. Click the black background to opt out of the Pro trial and you should see a screen like this

    ![codecademy signup screenshot 3][]

5. Click the `Skip to Dashboard` button in the upper right and you'll be taken to your dashboard.

    ![codecademy signup screenshot 4][]

6. Click the yellow/orange `Start` button on the Welcome to Codecademy! course. This course walks you through the codecademy interface. Be sure to click the X on the upgrade to Pro banner.

    ![codecademy signup screenshot 5][]

7. The Welcome to Codecademy course does introduce some programming concepts. If you have trouble completing it, do not be discouraged, you are not required to have prior knowledge of programming to take ITP 175.

What is most important is that you understand how the codecademy interface works for when we use it to learn and practice concepts later.

### freeCodeCamp

freeCodeCamp.org is another website for learning and practicing programming concepts and is a tool we'll be using to learn about JavaScript.

1. Visit [https://www.freecodecamp.org][] and click `Sign in` in the upper right.
1. Click the `Continue with GitHub` button to login with your Github account.

    ![freeCodeCamp signup screenshot 1][]

1. Click the green `Authorize freeCodeCamp` button.

    ![freeCodeCamp signup screenshot 2][]

1. After you've been logged in, click `Settings` in the upper right.
1. Scroll down to privacy settings and make your `profile` and `timeline` public.

    ![freeCodeCamp signup screenshot 3][]

:::tip
All other settings are up to you. If you choose to change your username, be sure to click the Save button next to it.
:::

### Glitch

Codecademy and freeCodeCamp are great for learning and practicing new concepts, but they are purposefully limiting in what you can do. When we need more flexibility, we'll use a site called Glitch to apply the concepts.

This is especially useful when learning the command line as typing the wrong command on your personal computer can do serious damage.

1. Head to [https://glitch.com][] and click the `Sign in` button in the upper right.

    ![Glitch signup screenshot 1][]

1. Choose the `Sign in with Github` option and you'll be taken to the screen below. Click the green `Authorize FogCreek` button (FogCreek is the company who makes Glitch). You'll be redirected to the glitch homepage with an account ready for coding!

    ![Glitch signup screenshot 2][]

1. Click `New Project` then `hello-webpage` in the upper right corner and you'll be taken to the Glitch coding environment.

    ![Glitch signup screenshot 3][]

1. Notice, my project is called gutsy-gym. Yours will be called something different, this allows many people to create projects on glitch and share them with each other. You can rename your projects by clicking the name of the project in the upper left and editing the text shown highlighted in pink below.

    ![Glitch rename project screenshot][]

1. Click the `Logs` button near the upper left to open the console at the bottom of your browser.
1. There, you will see a `Console` button. Click this and a command line for your project will open. This is a safe place for us to practice command line without damaging our computer. If you get stuck, head back to glitch.com and create a new project to start over.

    ![Glitch console screenshot][]

### Markdown

Markdown is a markup language that makes it easy to write rich text documents that display nicely online. You will encounter it on github and glitch, and it's a quick way to type notes as well.

In fact, this page you're reading is [written in Markdown][] and you can see what it looks like without formatting.

1. Go through the [Commonmark Markdown Tutorial][] to get an introduction to the Markdown language.

## Extra Resources

* :book: [Slack Help Center][]
* :book: [codecademy Help Center][]
* :book: [freecodecamp Help Center][]
* :book: [Markdown-Cheatsheet][]
* :tv: [Markdown Crash Course][]

<div class="asn chat">

## :speech_balloon: 00 Chat

**Due: 01/21/19 9 AM**

The purpose of this chat is to make sure you have joined our Slack workspace and give you a chance to use the three types of Slack messages

* a normal message is sent in in a `#channel` and is viewable by the professor and students
* an `@` message is also sent in a `#channel` and is viewable by the professor and students but also notifies the person you mentioned
* a `direct message` is private and only viewable by you and the person you are direct messaging

### Instructions

Send the following messages in the ITP 175 Slack.

1. A normal message in `#homeroom` introducing yourself to your classmates.
1. Join the [#sp19-00-chat][] channel and use `@profmikegreene` to mention me. Ask a question you have about the course or programming.
1. Use the **+** button to the right of `Direct Messages` and select profmikegreene from the list to send me a Direct Message that you've been able to login.

### Grading Rubric

| % | Explanation|
|-----|:--------|
| 25% | Complete [Slack signup][] and join our ITP 175 Slack workspace |
| 25% | Say hello to your classmates in the `#homeroom` channel. |
| 25% | Use `@profmikegreene` in `#sp19-00-chat` and ask a question you have about the course or programming. |
| 25% | Direct Message profmikegreene stating that you've been able to login. |

You can always send me questions privately via email or Direct Message. But I encourage you to ask them in  `#q-and-a` or in the channel for that assignment (like `#sp19-00-chat`) so that you and your fellow students can help each other out. Learning and programming are not solo sports!

</div>

<div class="asn journal">

## :memo: 00 Journal

**Due: 01/21/19 9 AM**

A common technique used by programmers when learning a new language or technique is to do something in a very basic way and call it "hello world".

This assignment introduces journaling for this course, it'll be our hello world journal.

### Instructions

1. After you've gone through all the content for this week, open Slack and write a `Direct Message` to Michael Greene (profmikegreene) that contains two lists.
    1. One for the things you understand most confidently
    1. One for the things you are struggling with.

>The items in these lists can be vocabulary, assignment tasks, concepts, whatever sticks out in your mind. Try to find at least two items per list and feel free to make them as long as you like.

### Grading Rubric

| % | Explanation|
|-----|:--------|
| 50% | Direct message to `profmikegreene` containing a list of things you are confident you understand |
| 50% | Direct message to `profmikegreene` containing a list of things you are struggling with  |

</div>

<div class="asn project">

## :atom_symbol: 00 Project

**Due: 01/21/19 9 AM**

This assignment is another "hello world" and gives you a first exposure to how projects will be submitted for this course.
### Instructions

1. Click `Channels` in the Slack sidebar to view all channels.
1. Find and join the `sp19-00-project` slack channel
1. In that Slack channel, you will see a link that will take you to Github Classroom

    You'll need to authorize Github Classroom the first time you use it.

    ![Github Classroom screenshot 1][]

1. Click the `Accept this assignment` button and Github will create a version of the project for you.

    ![Github Classroom screenshot 2][]

    ![Github Classroom screenshot 3][]

1. Once this step is complete, the page should say "Your assignment has been created here: https://github.com/RCC-ITP-175/sp19-00-". Click that link to move onto the next step. 

    ::: tip
    You don't have to remember that link, you can always visit [https://github.com][] and you should now see a repository in the list on the left that starts with `RCC-ITP-175/sp19-00-` and ends with your Github username.
    :::

    ::: warning
    Reach out to the professor if you have issues getting to this stage. Do NOT Wait!!
    :::

1. Because this is a "hello world" project, there is no code for you to write and your project repository is empty. It should look like this:

    ![Empty Github repository][]

1. Click the `creating a new file` link.
1. Name the file `readme.md`
1. One line 1 of the file, write `Hello world`
1. Scroll down and you'll see a section called `Commit new file`. In the smaller textbox type, `create readme.md` and select the Commit directly to the `master` branch option.

    >On github, a commit is like hitting a "save and upload" button. We'll learn more about Github and version control soon.

1. Click the green `Commit new file` button.

![00-project complete][]

### Grading Rubric

| % | Explanation|
|-----|:--------|
| 50% | Completing the Github Classroom process and creating a sp19-00-project repository |
| 50% | Creating a readme.md file that states `hello world` |

</div>

[//]: # (References)
[Slack signup]: https://rccitp175.slack.com/signup "RCC ITP 175 Slack signup page"
[:book: What is Slack?]: https://get.slack.help/hc/en-us/articles/115004071768-What-is-Slack-#channels "What is Slack?"
[:tv: What is Slack?]: https://www.youtube.com/watch?v=9RJZMSsH7-g "What is Slack?"
[https://github.com]: https://github.com "Github homepage"
[Github signup screenshot 1]: ./assets/github-signup-1.png "Github signup screenshot 1"
[Github signup screenshot 2]: ./assets/github-signup-2.png "Github signup screenshot 2"
[Github signup screenshot 3]: ./assets/github-signup-3.png "Github signup screenshot 3"
[written in Markdown]: https://raw.githubusercontent.com/RCC-ITP-175/course/master/docs/setup.md "setup.md raw markdown"
[Markdown-Cheatsheet]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet "Markdown-Cheatsheet"
[Commonmark Markdown Tutorial]: https://commonmark.org/help/tutorial/ "Commonmark Markdown Tutorial"
[Markdown Crash Course]: https://www.youtube.com/watch?v=HUBNt18RFbo "Markdown Crash Course"
[https://codecademy.com]: https://www.codecademy.com/ "codecademy homepage"
[codecademy signup screenshot 1]: ./assets/codecademy-1.png "codecademy signup screenshot 1"
[codecademy signup screenshot 2]: ./assets/codecademy-2.png "codecademy signup screenshot 2"
[codecademy signup screenshot 3]: ./assets/codecademy-3.png "codecademy signup screenshot 3"
[codecademy signup screenshot 4]: ./assets/codecademy-4.png "codecademy signup screenshot 4"
[codecademy signup screenshot 5]: ./assets/codecademy-5.png "codecademy signup screenshot 5"
[RCC Slack #homeroom screenshot]: ./assets/slack-1.png "RCC Slack #homeroom screenshot"
[https://rccitp175.slack.com]: https://rccitp175.slack.com "ITP 175 Slack Workspace"
[#sp19-00-chat]: https://itp175fa18.slack.com/messages/CF2F82MC4 "#sp19-00-chat Slack channel"
[https://glitch.com]: https://glitch.com "Glitch homepage"
[Glitch signup screenshot 1]: ./assets/glitch-1.png "Glitch signup screenshot 1"
[Glitch signup screenshot 2]: ./assets/glitch-2.png "Glitch signup screenshot 2"
[Glitch signup screenshot 3]: ./assets/glitch-3.png "Glitch signup screenshot 3"
[Glitch console screenshot]: ./assets/glitch-4.jpg "Glitch console screenshot"
[Glitch rename project screenshot]: ./assets/glitch-5.jpg "Glitch rename project screenshot"
[Slack Help Center]: https://get.slack.help/hc/en-us/categories/200111606 "Slack Help Center"
[https://www.freecodecamp.org]: https://www.freecodecamp.org "freeCodeCamp homepage"
[freeCodeCamp signup screenshot 1]: ./assets/fcc-1.jpg "freeCodeCamp signup screenshot 1"
[freeCodeCamp signup screenshot 2]: ./assets/fcc-2.jpg "freeCodeCamp signup screenshot 2"
[freeCodeCamp signup screenshot 3]: ./assets/fcc-3.jpg "freeCodeCamp signup screenshot 3"
[codecademy Help Center]: https://help.codecademy.com/hc/en-us/categories/202886527-Using-Codecademy "codecademy Help Center"
[freecodecamp Help Center]:https://support.freecodecamp.org/ "freecodecamp Help Center"
[Github Classroom screenshot 1]: ./assets/github-classroom-authorize.png "Github Classroom screenshot 1"
[Github Classroom screenshot 2]: ./assets/GitHub_Classroom1.png "Github Classroom screenshot 2"
[Github Classroom screenshot 3]: ./assets/GitHub_Classroom2.png "Github Classroom screenshot 3"
[Empty Github repository]: ./assets/empty-github-repo.jpg "Empty Github repository screenshot"
[00-project complete]: ./assets/00-project-complete.jpg "00-project complete screenshot"