Setup

Choice 1: your text editor

  • If you have a text editor that you have used in the past to edit files that you view in your browser, use that!
    Note: this will probably be an extra piece of software you installed at some point. TextEdit and Notepad will not suffice. If you're not absolutely sure you have a text editor, or if the HTML file you edit doesn't look like a web page in your browser, use the jsfiddle instructions below. If you'd like to install a text editor, here are some solid instructions.
  • Download the base template and the cat picture (put them in the same directory).
  • Open the base template in your editor and browser.

Choice 2: jsfiddle

  • Only do this if you don't already have a text editor - let's tread lightly on the convention center wifi!
  • Download the base template.
  • Go to jsfiddle.
  • Copy-paste the HTML between the body tags only from the base template into the HTML box on jsfiddle.
  • Add the following URL to the box under "External Resources" in the left sidebar: https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css . Then click the "+" sign to add it.
  • Click the " Run" button to see what happens!

Where to find help & more information

If you need reference sources, whether to go into more depth or to help yourself out if you're stuck, here you go:

  • Ask the person next to you!
  • Bootstrap documentation - it's pretty thorough.
  • The files for this presentation - see all the code I used, and how I made the effects we don't have time to cover today. (They're also linked from the bottom of every page.) There's a button on the right to download the whole archive as a ZIP file if you want to play with it. It's got an MIT license, so you can pretty much do what you want with it.
  • Ask Dr. Google - there's a good chance someone has already answered your question (probably on StackOverflow).

Sticky note time!

Have you gotten a text editor or jsfiddle working (either is fine)?

Nope!

Put a sticky note on your computer. (It should stick up over the top so people can see it.)

Yep!

High five! Look for people near you with sticky notes and help them get up and running, too.

Back home On to making stuff!