Account

The first step is to make yourself an account on the computer you're using. Just follow the instructions when the computer starts up into Ubuntu (Linux).

We're using Chromebooks for this class, and you'll get to use the same laptop every week. You're also welcome to bring your own laptop if you have one, most of us know Mac especially well but Windows should also work just fine.

Put a label on your computer with your name so you can find the laptop in future classes. There are labels and sharpies at the front of the class. Get creative with it! :)

Wireless

The wireless network name and password will be on the whiteboard.

Browser

The first thing you need to build something for the web is a web browser. One of the best web browsers for web development work is Google Chrome, which also happens to be the most popular web browser in the US by most metrics. Other popular browsers are Mozilla Firefox, Microsoft Internet Explorer, and Apple Safari. These computers already have Chrome installed on them, but you might have to install it if you're using your own computer.

Text Editor

The next most important thing is a text editor. For writing code you want to use a special text editor designed for that purpose. We have experience with a lot of these. The trouble is that many of them are either tricky to learn or expensive to purchase. For this course we're going to be using Adobe Brackets, which is super powerful, easy to use, and also free and open source. One really cool thing about Adobe Brackets is that it's made almost entirely with the same web technologies that we'll be using: HTML, CSS, and JavaScript. Maybe we'll even figure out how to build our own extensions to Brackets to customize it just for us.

If your computer does not have brackets installed already, you'll need to download it. On Ubuntu you'll need to open Terminal and type in the following commands (press enter after each line, enter your password when it asks):

sudo add-apt-repository -y ppa:webupd8team/brackets
sudo apt-get -y -q update
sudo apt-get -y -q install brackets

"Remixing" Websites

Browsers have traditionally had a "view source" button that allowed you to look under the hood of a website and see how it was built, but a few years ago web browsers started adding better developer tools that even let you modify websites while you're looking at them.

This is a great tool that you can use to learn how sites are put together, but it can also be used for more nefarious purposes like taking fake screenshots or cheating in a web game.

Let's take a few minutes to experiment with developer tools and remix a site. Find some site on the internet that would be fun to change the content for, maybe the news, Facebook, or Wikipedia, and then right-click (the right side of the trackpad is right-click) and choose "Inspect Element". Double-click on the text you want to change and press enter to change it.

Once you've finished your remix masterpiece, take a screenshot of the browser. You can press the search button and search for "Screenshot" to open the screenshot app, then choose "Grab the current window" and click "Take screenshot". This should put a screenshot in your Pictures folder. Go to http://imgur.com/ ("imager") and upload the screenshot and come up to the board and write the URL down so we can all check it out!

GitHub

GitHub is a free service we'll be using to keep our code safe and help us collaborate. GitHub is like a backup service for your code, and if you make sure to push your code there every class you won't lose it, even if you aren't using the same laptop every class, or you accidentally delete a file or make a mistake after you've pushed it. When working in groups it also makes it much easier for multiple people to collaborate on the same project.

Go to https://github.com/ and sign up for an account.

GitHub won't spam you, but the email address you choose will be associated with your account and by default it may be published along with your code. If you don't want that, go to the Emails section under Account Settings. After you verify your email address there will be an option to "Keep my email address private".

IMPORTANT: verify your email with GitHub

Make sure to verify your email address with GitHub. Check your email and click on the link and confirm your address. You won't be able to publish anything online until you've done this!

Intro Survey

Fill this survey out before you take a break: http://bit.ly/mbit-fall-2014-adroll

Roll Call

• Get a sheet of paper and a sharpie or pen
• Write your name on the sheet of paper!
• Use "Cheese Webcam Booth" on your laptop to take a picture of yourself with your name (press the search button on the left of your keyboard between Shift and Tab, search for "Cheese" and you'll find it)
• Drag and drop your photo into a new comment on the Roll Call issue on Github (find it by clicking the Issues button on the right side of this page).

Set up Git

From GitHub's Set Up Git and Caching your GitHub password in Git:

Open Terminal and type the following commands, with your email address and name instead of [email protected] and Your Name:

git config --global user.email "[email protected]"
git config --global user.name "Your Name"
git config --global credential.helper 'cache --timeout=7200'

The first two lines tell git who you are, which will be useful when we are doing collaborative projects. The second one tells Git to remember your password for two hours so you'll only need to type it once per class.

Making a Repository

Go to GitHub.com, make sure you're logged in, and click the green "+ New Repository" button. Name your new repository USERNAME.github.io. For example, if your GitHub username is pokemonfan then the name should be pokemonfan.github.io.

Copy the HTTP url from the page, it will look like https://github.com/USERNAME/USERNAME.github.io.

Open terminal and type the following (use Ctrl-Shift-V to paste the URL in rather than typing it out!). Make sure to change USERNAME to your GitHub username:

This will clone (download) the repository to your computer:

git clone https://github.com/USERNAME/USERNAME.github.io

This will go to your local clone of the repository:

cd USERNAME.github.io

This will create a file with the contents Hello, world! named index.html

echo "Hello, world!" > index.html

This will add any changes you've made to the repository, save a permanent copy of them with the message First commit!, and then upload it to the GitHub server

git add -A .
git commit -m "First commit!"
git push origin master -u

If you've verified your email address, your website at https://USERNAME.github.io should be published within the next 10 minutes. It will update much faster after the first time!

Using Brackets

First you'll want to start brackets, use the search key to do that. After it's open you can right-click it to lock it to the Launcher to make it easier to start it in the future.

Next you'll want to install the "Brackets Git" extension so you don't have to use the terminal every time you want to commit. You can do this from "File -> Extension Manager…" and then search for brackets git (it might not show up first in the list) then install it.

After Brackets restarts you can edit this repository by pressing Ctrl-Alt-O (File -> Open Folder). Navigate to your home directory (will be in the list on the left and be the same as the username on your computer) and you'll find the USERNAME.github.io folder in there. Click on the folder to select it and then click "Open".

Click on the "index.html" file to edit it (you can change the text). Press Ctrl-S to save.

To sync the update with GitHub after saving your file:

• Click the Git button on the right side
• Check the box next to the "Commit" button
• Type in a commit message, such as "updated the text in my file", then click "Ok"
• Click the "Git Push" icon (looks like a book with an up arrow, will have a (1) next to it) to push the update to the GitHub servers then click "Ok"

Above and Beyond

Brackets supports a live preview mode! Go to File -> Live Preview and you can see changes to your website as you type them.

You can get started on Mozilla's HTML intro or an online web course and start picking up HTML tags to use on your website!

When searching for information about HTML, add "mdn" to the search query. Mozilla has the best information. If you don't do this, you might end up at w3schools (avoid that place!) which is full of incomplete and outdated info about web programming!

• Mozilla HTML intro
• General Assembly Dash
• Codecademy Web Track