-
Notifications
You must be signed in to change notification settings - Fork 2
Setup
The first step is to make yourself an account on the computer you're
using. Remember the name of this computer, it'll be easier if you
pick the same one every week because it'll already have an account
for you. The name is on a label on the bottom of your computer.
To do that, log in to the administrator account missionbit with the
password (password given in class). Then open up System Preferences,
click on Users & Groups, click the lock to make changes, and then
click the + icon to make yourself a user.
Once that's done, click the Apple menu and log out, then login with your account!
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. It's a bit easier if we're all using the same thing, so
open it by pressing Command+Space and typing "Chrome".
You may also want to drag it into the dock because you'll be using
it constantly!
The next most important thing is a text editor. For writing code you want to use a special text editor designed for that purpose. 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. Go ahead and download Brackets now and put it in your Applications folder and dock.
When you open up Brackets you may get an error that it's an unsigned application. If you get this error, open System Preferences, go to Security & Privacy, and click "Open Anyway". The next time you open Brackets it should work.
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 (with two fingers or use Ctrl-Click if the laptop
has a physical button) and choose "Inspect Element". Double-click
on the text you want to change and press return to change it.
Once you've finished your remix masterpiece, take a screenshot of the
browser with Cmd-Shift-4, then press Space, and click on the browser
window. This should put a screenshot on your desktop. Go to
[https://github.com/MissionBit/f16-mw-mission/issues/1](this issue)
and drag the image in and submit a comment to share your masterpiece
with the rest of us!
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".
Open the GitHub app and sign in. Click the + at the top and name your new repository YOURNAME.github.io. For example, if your GitHub username is
pokemon-fan then the name should be pokemon-fan.github.io.
Now open Brackets and press Opt-Cmd-O (File -> Open Folder).
Navigate to your home directory by pressing Shift-Cmd-H
(or use the pulldown). Choose your repository and then click Open (or
press return).
Press Cmd-N (File -> New) to create a new file. Type anything you
want, such as "Hello World", into the window and then press
Cmd-S (File -> Save). Choose the name index.html and click Save.
Switch back to GitHub with Cmd-Tab. You should see the changes you
made. Click on the + with arrows icon so that the button says
"Commit and Sync". Type in a quick note about what you did in Summary
and then click "Commit and Sync".
After about 10 minutes, you'll have your own website at http://YOURNAME.github.io/ - we'll be using this repository throughout the semester so you can easily show off your projects.
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 Codecademy's web track and start picking up HTML tags to use on your website!