Where to write code

  • Atom
  • Sublime Text
  • Notepad++ (Windows)
  • Gedit (Linux Distros running X11)
  • TextWrangler (OS X)
  • WebStorm
  • Vim (if you dare. If you really want, and you have OS X installed, try macvim)
  • Emacs (if you also dare)

To get it out of the way... Servers

There are cases where Chrome simply doesn't like if your web page accesses remote information from a different protocol. And, most other remote information are sitting behind an HTTP server.

Although, later on, we will not need a web server, but for this lab, and the next few ones, you will need one.

  • XAMPP (on Windows, OS X, many Linux Distros)
  • WAMP (on Windows)
  • MAMP (on OS X)
  • LAMP (on many Linux Distros)
  • nws (using Node.js)
  • http-server (using Node.js)

Most important: managing versions of your app, using Git.

In this class, we will be using Git (or the GitHub client) and GitHub

So install a Git client, and create an account on GitHub.

How to lay out your page

The HTML you write tells the browser on how to build a tree.

Each leaf of the node represents a box that contains text and images, and you can style these boxes (almost) however you like using CSS attributes.

Styling your page

CSS is used to style your pages.

When writing CSS, don't think of it as just styling your page. Think of it as a language to query the DOM, and then applying specific attributes to the queried DOM elements.

Giving your app life

On most (if not, all) browsers, JavaScript is used for adding interactivity to your applications.

Think of JavaScript as being bolted on to the browser, with features injected into the language to modify the web page's content (more specifically, the DOM).

Create a GitHub repo with a custom Bootstrap theme

  1. Create a github account and iat381 repository
  2. Create a page that uses bootstrap as a theme
  3. Add a nav-tabs component that is functional (tabs show different pages)
  4. Commit and push your page to gh-pages branch of your repo
  5. Link to your live bootstrap page, by PASTING and CREATING the link in the canvas text editor

*** MAKE SURE YOU SUBMIT A LINK THAT WORKS!!! ***