Bootstrap 3.x workshop assignments
CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 8 commits ahead of javve:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
fonts
images
js
less
.gitignore
README.md
index.html

README.md

Bootstrap Workshop with InnovateCU

Each assignment contains a couple of images that shows the desired result. The idea is to compose the desired layouts and styles by writing the HTML with appropriate Bootstrap classes and IDs. LESS/CSS editing should not be necessary, but you can add your own style if you feel like it.

Questions? Ask me or one of the coaches for help. I'll work through the workshop assignments on the big screen too, so you can follow along if you're lost at all. Feel free to ask questions about what I'm doing too.

Extra

  • If you get stuck with an assignment, ask for help or skip it!
  • Tips: Like the kittens? Use PlaceKitten example: <img src="http://placekitten.com/400/300" class="img-responsive"> (change 400/300 to get other pictures for other resolutions)
  • Tips 2: Think kittens are boring? Use PlaceSheen example: <img src="http://placesheen.com/400/300" class="img-responsive"> (change 400/300 to get other pictures for other resolutions)
  • Note: See class="img-responsive"? Read more at getbootstrap.com

Errors?

If you find any errors (spelling or whatever), please make a pull request (extra points!) or at least post an issue.

Assignment 1: Grid

Create a grid that has four columns, independent of screen size. Then put images inside them. Read more at getbootstrap.com

How it should look at a large display (desktop)

How it should look if you make the browser small as a mobile phone

Assignment 2: Responsive grid

Improve the grid. It should have four columns for desktop, two for tablets and one in mobile. Read more at getbootstrap.com

How it should look at a large display (desktop)

How it should look if you make the browser small as a tablet

How it should look if you make the browser small as a mobile phone

Assignment 3: Navbar

Add a responsive menu (navbar) to your site. Read more at getbootstrap.com. It should have four items, plus icons for each. Read more at getbootstrap.com

How it should look at a large display (desktop)

How it should look if you make the browser small as a mobile phone

How it should look if you make the browser small as a mobile phone

Assignment 4: Form

Add a create account form with a large create button. Remember that Bootstrap supports nested grids. Read more at getbootstrap.com

Assignment 5: Modal

Add a "read more" link beside "Create account" that launches a modal with more info. Read more at getbootstrap.com

Assignment 6: Tooltips

JavaScript!

Time to name your images/kittens. Add tooltips that display the name of the image/kitten.

To do these tasks you'll need to use JavaScript. Add all code into <script></script> at the bottom of index.html, just before </body>.

Tips: Easiest way to set this up is probably using $('img').tooltip(); and then use data- attributes.

Assignment 7: Build your own site

Use Bootstrap to setup a personal website, or a landing page for your startup!

  • Start with a single page site.
  • Need a startup idea? Make something up, or use a silly generator like this one.

When you're done, show me your site!

Credits

This workshop was originally written by Jonny Strömberg for Hyper Island. He did such a great job, I used his workshop as a starting point. To see more awesome work from Jonny, look him up on GitHub or check out List.js.