Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/javve/bootstrap-workshop

Assignments for my Bootstrap workshop at Hyper Island 2013-09-25
https://github.com/javve/bootstrap-workshop

Last synced: about 1 month ago
JSON representation

Assignments for my Bootstrap workshop at Hyper Island 2013-09-25

Awesome Lists containing this project

README 

        
![](images/0.jpg?raw=true)



# Bootstrap Workshop with Hyper Island



- [Download this project](https://github.com/javve/bootstrap-workshop/archive/master.zip) to get started.

- Open index.html in your favorite editor ([Sublime Text](http://www.sublimetext.com/) is awesome and free)

- What are you wating for?



Each assignment contains a couple of images that shows the desired result. I've decided to no include CSS editing in this workshop, but feel free to add margins under some elements to make it look better.



Questions? Grab me or [ping @javve at Twitter](https://twitter.com/javve).



#### Extra



* If you get stuck with an assignment, ask for help or skip it!

* Tips: Like the kittens? Use [PlaceKitten](http://placekitten.com/) ex  `` (change 400/300 to get other pictures)

* Tips 2: Think kittens are boring? Use [PlaceSheen](http://placesheen.com/) ex  `` (change 400/300 to get other pictures)

* Note: See `class="img-responsive"`? [Read more at getbootstrap.com](http://getbootstrap.com/css/#overview-responsive-images)



#### Errors?



If you find any errors (spelling or whatever), please make a __pull request__ (extra points!) or at least [post an issue](https://github.com/javve/bootstrap-workshop/issues/new).



## Assignment 1: Grid



Create a grid that has four columns, independent of screen size. Then put images inside them. [Read more at getbootstrap.com](http://getbootstrap.com/css/#grid)



#### How it should look at a large display (desktop)

![](images/1-1.png?raw=true)



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

![](images/1-2.png?raw=true)



## 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](http://getbootstrap.com/css/#grid)



#### How it should look at a large display (desktop)

![](images/2-1.png?raw=true)



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

![](images/2-2.png?raw=true)



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

![](images/2-3.png?raw=true)



## Assignment 3: Navbar



Add a responsive menu (navbar) to your site. [Read more at getbootstrap.com](http://getbootstrap.com/components/#navbar). It should container a name (brand)

four items. REMEBER THE ICONS! [Read more at getbootstrap.com](http://getbootstrap.com/components/#glyphicons)



#### How it should look at a large display (desktop)

![](images/3-1.png?raw=true)



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

![](images/3-2.png?raw=true)



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

![](images/3-3.png?raw=true)



## Assignment 4: Form



Add a creat account form with a large create button. _Remember that Bootstrap supports nested grids._ [Read more at getbootstrap.com](http://getbootstrap.com/css/#forms)



![](images/4-1.png?raw=true)



## Assignment 5: Modal



Add a "read more" link beside "Create account" that launches a modal with more info. [Read more at getbootstrap.com](http://getbootstrap.com/javascript/#modals)



![](images/5-1.png?raw=true)

![](images/5-2.png?raw=true)



## Assignment 6: Tooltips



Javascript!



Time to name your images/kittens. Add [tooltips](http://getbootstrap.com/javascript/#tooltips) that tells the name of the image/kitten.



To do this tasks you'll need to use Javascript. Add all code into `` at the bottom of `index.html`, just before `