18 | HOME 19 | LEVEL 2 20 | LEVEL 3 21 | 24 | 25 |

The goal of this exercise is to use the various elements of the Twitter Bootstrap framework to make a webpage.

26 |

Start with this webpage.
Use the Bootstrap grids classes to create this webpage with a sidebar and main content:

30 | 31 |

Use the Bootstrap base CSS classes to add a quote, table, and search form to the page:

34 | 35 |

Use the Bootstrap alert component to add a danger alert. Use the thumbnails classes to give the images borders.

38 | 39 |

41 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /exercises/bootstrap_before.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wild & Wacky Vegetables 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Some Favorites

14 |

19 | 20 |

Wild & Wacky Vegetables

21 |

Kale courgette salsify mustard broccoli seakale wakame potato fava bean tigernut leek celery spinach avocado cabbage celtuce rutabaga kohlrabi. Parsnip pea soko groundnut bitterleaf spring onion. Grape dulse rutabaga lentil gram kakadu plum water spinach cabbage lotus root. 22 |

23 |

24 | Mung bean quandong kale prairie turnip celery gram zucchini pumpkin green bean silver beet chard endive komatsuna eggplant kakadu plum radish broccoli. Arugula amaranth fennel wakame peanut garlic chickweed. Sorrel jícama quandong kale chickpea water chestnut rock melon aubergine lettuce pea azuki bean cress onion sea lettuce dandelion nori dulse rutabaga. Coriander napa cabbage bok choy carrot kakadu plum brussels sprout bamboo shoot salad okra cucumber garlic kombu beet greens cauliflower summer purslane. Artichoke daikon horseradish arugula taro catsear kombu rock melon pea sprouts collard greens mustard courgette lettuce soko maize plantain. 25 |

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /exercises/bootstrap_solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wild & Wacky Vegetables 6 | 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 | 15 |

Some Favorites 17 |
Celery Root 18 |
Spaghetti Squash 19 |
Killer Mushrooms 20 |

21 | 29 |

30 |

31 |

32 | Uh oh! Have you had your daily dose of veggies today?? 33 |

34 | 35 |

Wild & Wacky Vegetables

36 |

37 |
The beet is the most intense of vegetables. The radish, admittedly, is more feverish, but the fire of the radish is a cold fire, the fire of discontent not of passion. Tomatoes are lusty enough, yet there runs through tomatoes an undercurrent of frivolity. Beets are deadly serious. 38 |
39 | Tom Robbins 40 |

41 |

Some diseases

42 | 43 | 44 | 46 |

Veggie	Disease 45 \|
Beets	Beeturia 47 \|
Carrots	Carotenosis 48 \|

49 | 50 |

51 |

52 | 53 |

54 | 55 |

56 |

57 | 58 |

59 | 60 |

61 |

62 | 63 |

64 | 65 |

66 |

67 | 68 |

Really informative info

69 |

71 |

72 | Mung bean quandong kale prairie turnip celery gram zucchini pumpkin green bean silver beet chard endive komatsuna eggplant kakadu plum radish broccoli. Arugula amaranth fennel wakame peanut garlic chickweed. Sorrel jícama quandong kale chickpea water chestnut rock melon aubergine lettuce pea azuki bean cress onion sea lettuce dandelion nori dulse rutabaga. Coriander napa cabbage bok choy carrot kakadu plum brussels sprout bamboo shoot salad okra cucumber garlic kombu beet greens cauliflower summer purslane. Artichoke daikon horseradish arugula taro catsear kombu rock melon pea sprouts collard greens mustard courgette lettuce soko maize plantain. 73 |

74 |

75 |

76 |

77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /exercises/calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Exercise: The Calculator 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 1 20 | LEVEL 3 21 | 22 | 25 | 26 |

You can use something like repl.it to code this so that you don't need to worry about making a webpage, or you can create a whole webpage for it, with inputs and buttons. You may want to start off with just JS and then add the UI later, but it's up to you.

27 | 28 |

You may find these slides useful.

29 | 30 |

Write a function called squareNumber that will take one argument (a number), square that number, and return the result. It should also log a string like "The result of squaring the number 3 is 9."
Write a function called halfNumber that will take one argument (a number), divide it by 2, and return the result. It should also log a string like "Half of 5 is 2.5."
Write a function called percentOf that will take two numbers, figure out what percent thebfirst number represents of the second number, and return the result. It should also log a string like "2 is 50% of 4."
Write a function called areaOfCircle that will take one argument (the radius), calculate the area based on that, and return the result. It should also log a string like "The area for a circle with radius 2 is 12.566370614359172"

Bonus: Round the result so there are only two digits after the decimal.

Write a function that will take one argument (a number) and perform the following operations, using the functions you wrote earlier1:

Take half of the number and store the result.
Square the result of #1 and store that result.
Calculate the area of a circle with the result of #2 as the radius.
Calculate what percentage that area is of the squared result (#3).

46 | 47 |

48 |       function squareNumber(num) {
49 |           var squaredNumber = num * num;
50 |           console.log('The result of squaring the number ' + num + ' is ' + squaredNumber);
51 |           return squaredNumber;
52 |       }
53 | 
54 |       squareNumber(3);
55 | 
56 |       function halfOf(num) {
57 |           var half = num / 2;
58 |           console.log('Half of ' + num + ' is ' +  half);
59 |           return half;
60 |       }
61 | 
62 |       halfOf(5);
63 | 
64 |       function percentOf(num1, num2) {
65 |           var percent = (num1/num2) * 100;
66 |           console.log(num1 + ' is ' + percent + '% of ' + num2);
67 |           return percent;
68 |       }
69 | 
70 |       percentOf(5, 10);
71 | 
72 |       function areaOfCircle(radius) {
73 |           var area = Math.PI * squareNumber(radius);
74 |           console.log('The area of circle with radius ' + radius + ' is ' + area);
75 |           return area;
76 |       }
77 | 
78 |       areaOfCircle(2);
79 | 
80 |       function doCrazyStuff(num) {
81 |           var half    = halfOf(num);
82 |           var squared = squareNumber(half);
83 |           var area    = areaOfCircle(squared);
84 |           var result  = percentOf(squared, area);
85 |       }
86 | 
87 |       doCrazyStuff(5);
88 |

89 | 90 | 91 | -------------------------------------------------------------------------------- /exercises/catwalk.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exercises: Cat Walk 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 1 20 | LEVEL 3 21 | 24 | 25 |

The goal of this exercise to make an awesome interactive animated cat.

26 |

You may find these slides helpful.

27 | 28 |

Start with this webpage, which has an img of a cat walking, and JavaScript functions 30 | that animate the cat across the screen. (For all of these, you shouldn't need to touch the original code - just add code below.)

 32 |         <!DOCTYPE html>
 33 |         <html>
 34 |          <head>
 35 |           <meta charset="utf-8" />
 36 |           <title>Cat Walk</title>
 37 |          </head>
 38 |          <body>
 39 |           
 40 |           <button id="start-button">Start</button>
 41 |           <button id="speed-button">Go Faster!</button>
 42 |           <button id="stop-button">Stop</button>
 43 |           <div id="info"></div>
 44 |           
 45 |           <img style="position:absolute; left: 0px; top: 80px;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif">
 46 | 
 47 |           <script>
 48 |             var movePixels = 10;
 49 |             var delayMs = 50;
 50 |             var catTimer = null;
 51 |             function catWalk() {
 52 |               var img = document.getElementsByTagName('img')[0];
 53 |               var currentLeft = parseInt(img.style.left);
 54 |               img.style.left = (currentLeft + movePixels) + 'px';
 55 |               if (currentLeft > (window.innerWidth-img.width)) {
 56 |                 img.style.left = '0px';
 57 |               }
 58 |             }
 59 |             function startCatWalk() {
 60 |               catTimer = window.setInterval(catWalk, delayMs);
 61 |             }
 62 |           </script>
 63 | 
 64 |          </body>
 65 |         </html>
 66 |

Add an event listener to the start button, so that the cat starts moving across the screen when its clicked.
Add an event listener to the stop button, so that the cat stops moving when clicked.
Add an event listener to the speed button, so that the cat moves faster when it's clicked.

71 | 72 | 73 |

74 |

 75 |         // #1
 76 |         function onStartClick() {
 77 |             startCatWalk();
 78 |         }
 79 |         var startButton = document.getElementById('start-button');
 80 |         startButton.addEventListener('click', onStartClick);
 81 | 
 82 |         // #2
 83 |         function onStopClick() {
 84 |            window.clearInterval(catTimer);
 85 |         }
 86 |         var stopButton = document.getElementById('stop-button');
 87 |         stopButton.addEventListener('click', onStopClick);
 88 | 
 89 |         // #3
 90 |         function onSpeedClick() {
 91 |             movePixels += 5;
 92 |             var speed = movePixels * (1000/50);
 93 |             document.getElementById('info').innerHTML = 'Current speed: ' + speed + 'px/second';
 94 |         }
 95 |         var speedButton = document.getElementById('speed-button');
 96 |         speedButton.addEventListener('click', onSpeedClick);
 97 |

98 | 99 |

100 |         function onStartClick() {
101 |             startCatWalk();
102 |             startButton.setAttribute("disabled", "disabled");
103 |             stopButton.removeAttribute("disabled");
104 |             speedButton.removeAttribute("disabled");
105 |         }
106 |         var startButton = document.getElementById('start-button');
107 |         startButton.addEventListener('click', onStartClick);
108 | 
109 |         function onStopClick() {
110 |            window.clearInterval(catTimer);
111 |            stopButton.setAttribute("disabled", "disabled");  
112 |            speedButton.setAttribute("disabled", "disabled");  
113 |            startButton.removeAttribute("disabled");
114 |         }
115 |         var stopButton = document.getElementById('stop-button');
116 |         stopButton.addEventListener('click', onStopClick);
117 |         stopButton.setAttribute("disabled", "disabled");
118 | 
119 |         function onSpeedClick() {
120 |             movePixels += 5;
121 |             var speed = movePixels * (1000/50);
122 |             document.getElementById('info').innerHTML = 'Current speed: ' + speed + 'px/second';
123 |         }
124 |         var speedButton = document.getElementById('speed-button');
125 |         speedButton.addEventListener('click', onSpeedClick);
126 |         speedButton.setAttribute("disabled", "disabled");
127 |

128 |

129 | 130 |

Bonus: Disable the start/stop/faster buttons at the appropriate times (e.g. the user shouldn't be able to click "stop" if the cat isn't currently moving.)

131 | 132 |

133 | 134 | 135 | -------------------------------------------------------------------------------- /exercises/copycat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML Copycat Exercise 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 2 20 | LEVEL 3 21 | 24 | 25 |

What's one of your favorite websites to visit? Imitation is the highest form of flattery, so why don't you try to imitate it?

26 | 27 |

Open up the webpage and keep it open as reference
Create a basic webpage wih that webpage's content (or atleast a small subset of it, like one blog post if its a blog).
Set up the layout for the webpage using a framework like Twitter Bootstrap.
Change the text and background color to match.
Figure out if you need a custom font to match their font.
Keep going until it looks close!

35 | 36 |

37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /exercises/embed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML Embed Exercise 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 2 20 | LEVEL 3 21 | 24 | 25 | 26 |

In this exercise, you'll create a webpage of many embedded elements. For some of these, you may have to google to figure out how to get embed codes - some sites make it easier/more obvious than others.

27 |

You may want to consult these slides.

28 |

Create a new blank page with just a header (“All About Dogs”).
Add an embedded Google Map that shows dog parks in San Francisco.
Follow these instructions so that you are opening your page with an http:// URL instead of file://. Many embeds don't work off of file:// URLs, for various reasons.
Add Facebook comments to your page.
Add a Twitter button to the page.
Create a Google custom search engine that searches across multiple dog sites and embed the search box on the page.
For each of the embeds, add comments around them to show where they start and end, and add an h2 to split the page up into sections.

37 | 38 | 39 | 40 | 43 | 44 |

45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /exercises/embed_solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | All About Dogs 6 | 7 | 8 |

All About Dogs

9 | 10 |

Before: 1 requests ❘ 1.44KB transferred ❘ 270ms (onload: 541ms, DOMContentLoaded: 541ms)

11 | 12 |

Maps of dog parks

13 | 16 |
View Larger Map 17 | 18 | 19 |

What do you think about dog parks?

20 | 23 |

24 | 31 |

32 | 33 | 34 |

Follow us on Twitter!

35 | 38 | Follow @pamelafox 39 | 40 | 41 | 42 |

Some cool looking dogs from Flickr

43 | 46 |

47 | 48 | 49 |

Want more info? Search my fav dog sites

50 | 53 |

54 | 55 | 64 | 65 | 66 |

After: 155 requests ❘ 557.22KB transferred ❘ 23.40s (onload: 6.58s, DOMContentLoaded: 3.45s)

67 | 68 |

69 | 70 | 71 | -------------------------------------------------------------------------------- /exercises/htmlbasics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML Exercise 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 2 20 | LEVEL 3 21 | 24 | 25 |

Part 1: HTML Basics Exercise

26 |

Decide whether to use jsbin.com (recommended, for real-time feedback on your HTML) or a desktop editor (like Sublime Text).
Create a webpage that looks like the screenshot below.
You can find a logo by searching Google images for "girldevelopit logo" and copy the hyperlink URLs from 30 | girldevelopit.com. 31 |
Bonus: If you have time after, send it through the 33 | W3C validator and fix any issues it reports. 34 |
You may want to consult these slides. 36 |

38 | 39 |

41 | 42 |

Part 2: HTML Tables Exercise

43 |

Starting with the webpage from the first exercise, add tags to the webpage so that it looks like the screenshot below.
Bonus: If you have time after, send it through the W3C validator and fix any issues it reports.
You may want to consult these slides.

48 | 49 |

51 | 52 |

Part 3: HTML Forms Exercise

53 |

Starting with the webpage from the previous exercise, add tags to the webpage so that it looks like the screenshot below.
Bonus: If you have time, try using new HTML5 form types in the form as well.
Bonus: If you have time after, send it through the W3C validator and fix any issues it reports.
You may want to consult these slides.

59 | 60 |

62 | 63 |

64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /exercises/invite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML Event Invite Exercise 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 2 20 | LEVEL 3 21 | 24 | 25 |

What's an upcoming event that you're organizing or that you're attending and want others to come to? Create a webpage for that event!

26 | 27 |

Create a basic webpage with the event name, logistical information (in a table), and an embedded Google Map of where it is.
Create a Google form and embed it on the page.
Come up with a color scheme, using Color Scheme Designer 31 | or ColourLovers, and apply that using CSS to parts of your page.
Find a Google Web Font that suits your event theme, and use that for the headers of your page.

34 | 35 |

36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /exercises/jsdataviz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Exercise: Data Visualization 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | HOME 15 | LEVEL 1 16 | LEVEL 2 17 | 20 | 21 |

22 |

23 |

The point of this exercise is to learn to read, manipulate, and visualize data in JavaScript.

24 | 25 |

Find an interesting dataset in some sort of text format (XML, JSON, CSV, etc). Store the dataset in your project folder. Truncate it to a reasonable length if it’s very long (i.e. 1000 rows). Some possible sources are:

Create an empty webpage and load the dataset into your webpage using an AJAX or JSONP request. (See slides: AJAX/JSONP)
Display the data as a table with columns for each of the attributes. (See slides: HTML Tables)
Use the tablesorter jQuery plugin to make the table sortable. (See slides: jQuery)
Create a form above the table which lets users filter or manipulate the data somehow, i.e. a dropdown box to only show rows matching a particular query, or a way of summing up attributes. Whatever would be useful with the data. (See slides: DOM, Events)
Use the High Charts JS library to visualize a numerical aspect of the data. Or find a different library here.
If the data has a geographical aspect (locations), use the Google Maps API to plot it on a map. 38 | (See slides: JS APIs)
Use Twitter Bootstrap on the site to make it prettier, styling the buttons and table.

41 |

42 |

43 |

44 |

45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /exercises/madlibs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Exercise: Mad Libs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

The goal of this exercise is to make a Mad Libs generator.

25 |

The second half of these slides may be useful.

26 | 27 |

Start with this webpage, which has several input elements and a button:

30 |       <!DOCTYPE html>
31 |       <html>
32 |       <head>
33 |         <meta charset="utf-8" />
34 |         <title></title>
35 |       </head>
36 |       <body>
37 |         <h1>Mad Libs</h1>
38 |         <ul>
39 |           <li>Noun: <input type="text" id="noun">
40 |           <li>Adjective: <input type="text" id="adjective">
41 |           <li>Someone's Name: <input type="text" id="name">
42 |         </ul>
43 |         <button id="lib-button">Lib it!</button>
44 |         <div id="story"></div>
45 |       </body>
46 |       </html>
47 |

Add a script tag to the bottom of the page for your code.
Add an event listener to the button so that it calls a makeMadLib function when clicked.
In the makeMadLib function, retrieve the current values of the form input elements, make a story from them, 51 | and output that in the story div (like "Pamela really likes pink cucumbers.")

53 | 54 | 55 |

56 |     function libIt() {
57 |       var storyDiv = document.getElementById("story");
58 |       var name = document.getElementById("name").value;
59 |       var adjective = document.getElementById("adjective").value;
60 |       var noun = document.getElementById("noun").value;
61 |       storyDiv.innerHTML = name + " married a " + adjective + " " + noun + "... So weird!";
62 |     }
63 | 
64 |     var libButton = document.getElementById('lib-button');
65 |     libButton.addEventListener('click', libIt);
66 |

67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /exercises/mediaqueries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS: Media Queries Exercise 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

The goal of this exercise is to use CSS media queries to make a webpage appeardifferent for printing and for different window sizes.

25 |

You may want to consult these slides.

26 | 27 |

Start with this webpage, 29 | which already has HTML and CSS for a header, navigation, content, sidebar, and footer. This is what it looks like:

31 | 32 |

Add a CSS media query and appropriate styles so that the webpage looks like the screenshot below when printed. 34 | Specifically:

The header, navigation, and footer should be hidden.
The sidebar should display under the main content.

40 | 41 |

Add a CSS media query and appropriate styles so that the webpage looks like the screenshots below when resized to smaller widths. Specifically:

The sidebar should be hidden.
The body should have no padding.
The images shouldn't exceed the width of the window.
The navigation items should each be on their own line.
The header should be fixed, so that it stays at the top after scrolling.

51 | 52 |

54 | 55 | 56 | 57 | 60 |

61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /exercises/memorygame.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Exercise: The Memory Game 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 1 20 | LEVEL 3 21 | 22 | 25 | 26 |

In this exercise, you'll make a HTTP Status Cat memory game -- you can see 27 | a screenshot of a sample solution on the right. A memory game consists 28 | of an even number of tiles with images on one side and a generic back. 29 | Each image appears on precisely two tiles. You start the game with all 30 | tiles turned face down, and proceed to flip over two tiles at a time. 31 | If the two tiles have the same image, they remain face up. If not, 32 | they're flipped face down again after a short delay. The goal of the 33 | game is to get all the tiles flipped face up (i.e., find all the 34 | matching image pairs) in the least number of tries. 35 |

36 |

37 | We'll make the game more fun by using random HTTP Status Cat images from HTTP Status Cats 38 | because their images follow a regular naming scheme so we can avoid 39 | scraping image URLs from sites by hand. The HTTP Status Cat.com image URLs 40 | follow the pattern https://http.cat/[statuscode]NNNN where NNNN 41 | is a sequentially assigned number. Some experimentation shows that most 42 | of the range between100 and 599 works well, though a few of the 43 | images are missing. (If you happen to pick a missing one, which HTTP status cat would you expect to appear?) 44 |

45 |

Here are some suggested steps for building the game:

46 | 47 |

Write the HTML for the game's page, displaying a grid of face-down tiles. You can use any image you want for the tiles' backs, but make sure it's not easily confused with the HTTP Status Cat pictures, so it's clear whether a tile is face up or face down. You'll probably want to use a <table> to lay out the tiles, and set the width and height of each image by hand. You can either write the table by hand into your HTML file, or write code to generate it dynamically using document.createElement and appendChild.
Write code to pick a bunch of random HTTP Status Cat image URLs and stick two copies of each URL into an array, then randomize the order of the array (using the code from the previous exercise). You might also take this opportunity to preload the images so there'll be no delay when they're flipped over for the first time. Make the preload images visible for now so you can verify that you're forming the URLs correctly.
Assign one HTTP Status Cat URL from the randomized array to each tile. The easiest way to attach the URLs is to store them in a made-up attribute (e.g. facesrc) right on the DOM image elements. The browser will ignore any attributes it doesn't understand, but you'll be able to retrieve them later in your code when handling click events on the elements. (Note though that Firebug will not show your custom attribute in the DOM pane.)
Attach a click handler to each tile that will turn it face up. Make sure that clicking on tiles that are already face up does nothing.
Add a timeout handler when a tile is turned face up that will flip the tile face down again after a short delay (e.g., 500 milliseconds).
Add the game logic that keeps track of the tiles that are face up and reacts appropriately based on whether they match or not.

55 | 56 |

You should now have a working game! Have fun playing it and tweaking it to really make it your own. Here's a few suggestions for extra features you could add:

57 |

Add an outline around "active" tiles (flipped up but not yet matched) so it's clear which tile the player is currently trying to match.
Add a timer or move counter to make the game more competitive. (For the timer, window.setInterval() could prove useful.)
When the game is over, allow the player to see the full-size HTTP Status Cat pictures from the tiles.
Allow the player to start a new game with a button, rather than by reloading the page. You could also allow them to pick the size of the board to play on.

63 | 64 |

65 | 66 |

67 | 68 |

69 | 70 | 71 | -------------------------------------------------------------------------------- /exercises/positioning.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Positioning Exercise 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 2 20 | LEVEL 3 21 | 24 | 25 |

You may want to consult these slides.

26 |

The goal is to use the CSS position property to create a webpage that looks like the one below.

27 |

Here's what it looks like with a window width of 800x530:

28 | 29 |

30 | 31 |

32 | 33 |

Here's what it looks like when the window is 400x475 - notice how elements resize:

34 | 35 |

36 | 37 |

38 | 39 |

Here are recommended steps for making this happen:

40 |

Create a blank web page with just html, head, body, and a style tag.
Change the background of the page to be a sky blue and have a background image of clouds.
Create a div for the grass - position it at the bottom and give it an appropriate height.
Create a div for the "Farm Party!" banner - position it near the top center area, and style the text so that it's red. For a bonus, use a fun custom font (like from Google Web Fonts) and give it the appearance of a black stroke.
For each of the images shown, search for an appropriate image on Google Image search - it doesn't have to be the exact same. Try searches like "sheep animated gif" and if you need to, restrict the results to just "clip art". When you find the image, create a img for it on the page.
Position each of the img elements appropriately. The sheep should be around the bottom left, the cow should be on the horizon, the dude should be dancing in the middle, the tree should be on the front right, and the sun should be around the upper right.
As a bonus, position a picture of your face on top of the dude, and watch yourself have a farm party!

49 | 50 | 51 | 52 | 55 |

56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /exercises/positioning_solution.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Farm Party! 5 | 6 | 7 | 86 | 87 | 88 | 89 | 90 |

91 | 92 | 93 | 94 |

95 | 96 |

97 | 98 |

99 | 100 |

101 | 102 |

103 |

104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /exercises/wordguesser.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Exercise: The Word Guesser 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 1 20 | LEVEL 3 21 | 22 | 25 | 26 |

You'll create a simple word guessing game where the user gets infinite tries to guess the word (like Hangman without the hangman, or like Wheel of Fortune without the wheel and fortune).

27 | 28 |

Create two global arrays: one to hold the letters of the word (e.g. 'F', 'O', 'X'), and one to hold the current guessed letters (e.g. it would start with '_', '_', '_' and end with 'F', 'O', 'X').
Write a function called guessLetter that will:

Take one argument, the guessed letter.
Iterate through the word letters and see if the guessed letter is in there.
If the guessed letter matches a word letter, changed the guessed letters array to reflect that.
When it's done iterating, it should log the current guessed letters ('F__') and congratulate the user if they found a new letter.
It should also figure out if there are any more letters that need to be guessed, and if not, it should congratulate the user for winning the game.

Pretend you don't know the word, and call guessLetter multiple times with various letters to check that your program works.
Bonus: Make it more like Wheel of Fortune:

Start with a reward amount of $0
Every time a letter is guessed, generate a random amount and reward the user if they found a letter (multiplying the reward if multiple letters found), otherwise subtract from their reward.
When they guess the word, log their final reward amount.

Bonus: Make it like Hangman:

Keep track of all the guessed letters (right and wrong) and only let the user guess a letter once. If they guess a letter twice, do nothing.
Keep track of the state of the hangman as a number (starting at 0), and subtract or add to that number every time they make a wrong guess.
Once the number reaches 6 (a reasonable number of body parts for a hangman), inform the user that they lost and show a hangman on the log.

52 | 53 | 54 |

55 |       var wordLetters     = ['G', 'O', 'A', 'T'];
56 |       var guessedLetters  = ['_', '_', '_', '_'];
57 | 
58 |       function guessLetter(letter) {
59 |           var goodGuess = false;
60 |           var moreToGuess = false;
61 |           for (var i = 0; i < wordLetters.length; i++) {
62 |               if (wordLetters[i] == letter) {
63 |                   guessedLetters[i] = letter;
64 |                   goodGuess = true;
65 |               }
66 |               if (guessedLetters[i] == '_') {
67 |                   moreToGuess = true;
68 |               }
69 |           }
70 |           if (goodGuess) {
71 |               console.log('Yay, you found a letter!');
72 |               console.log(guessedLetters.join(''));
73 |               if (!moreToGuess) {
74 |                   console.log('YOU WON!');
75 |               } 
76 |           } else {
77 |               console.log('Oh noes, thats not right!');
78 |           }
79 |       }
80 | 
81 |       guessLetter('G');
82 |       guessLetter('I');
83 |       guessLetter('O');
84 |       guessLetter('A');
85 |       guessLetter('T');
86 |

87 |

88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /exercises/youtube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exercise: Youtube Player 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | HOME 19 | LEVEL 1 20 | LEVEL 2 21 | 24 | 25 |

In this exercise, you'll try to bring in Youtube video information using their JSON API. You may find these slides useful.

26 | 27 |

Start with this file.
Note: Before you explore the YouTube API, you need to check Developers Console and create the appropriate credentials to ping the API.
Go to the Youtube API docs and read through them. Look at the sample output and the example URLs for the API. Find a URL that will give you search results, and test that out in the browser.
The webpage currently brings in video information using the jQuery $.ajax function to bring in a local videos.json file into the page. Change that function so that it instead brings in the results of a Youtube API search from the Youtube servers and displays those results instead. Search for whatever you fancy, but limit the search to 5 results. 32 |
Tips: Remember that the JSON that the Youtube API returns will be different than the JSON format of videos.json. You should console.log inside your callback to see what the data looks like and make sure you're using it correctly. In particular, check how they store the ID, the author, and the rating. 33 |
Bonus: Create your own playlist on Youtube of your favorite videos, and bring that into the page instead.
Bonus: Add a search button to the page so that people can search for any query.

37 | 38 |

Make sure that you use your browser developer tools to make debugging easier while working on this. Check for errors, and use console.log() to figure out how far your code makes it, and what the values of your variables are along the way.

39 | 40 |

41 | 42 | 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PairUp 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | Fork me on GitHub

29 | 30 | 31 |

32 | 35 | 36 |

37 | 38 |

39 |

Welcome!

40 |

Decide what project to work on using this list or by brainstorming ideas with your partner.

41 |

42 | 43 |

44 |

45 |

Level 1: HTML/CSS

46 |

If you're learning: Basic HTML tags, CSS Properties, Selectors

47 | 48 |

Level 2: Basic Javascript

49 |

If you're learning: JS variables, arrays, functions, loops, conditionals

50 | 51 |

Level 3: Javascript for the Web

52 |

If you're learning: HTML/CSS, JS DOM access/manipulation/events

53 | 54 |

Level 4: Advanced Javascript

55 |

If you're learning: JS DOM, jQuery, AJAX/JSON

56 |

57 |

58 |

59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /responsive.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Responsive v2.3.1 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */ 10 | 11 | .clearfix { 12 | *zoom: 1; 13 | } 14 | 15 | .clearfix:before, 16 | .clearfix:after { 17 | display: table; 18 | line-height: 0; 19 | content: ""; 20 | } 21 | 22 | .clearfix:after { 23 | clear: both; 24 | } 25 | 26 | .hide-text { 27 | font: 0/0 a; 28 | color: transparent; 29 | text-shadow: none; 30 | background-color: transparent; 31 | border: 0; 32 | } 33 | 34 | .input-block-level { 35 | display: block; 36 | width: 100%; 37 | min-height: 30px; 38 | -webkit-box-sizing: border-box; 39 | -moz-box-sizing: border-box; 40 | box-sizing: border-box; 41 | } 42 | 43 | @-ms-viewport { 44 | width: device-width; 45 | } 46 | 47 | .hidden { 48 | display: none; 49 | visibility: hidden; 50 | } 51 | 52 | .visible-phone { 53 | display: none !important; 54 | } 55 | 56 | .visible-tablet { 57 | display: none !important; 58 | } 59 | 60 | .hidden-desktop { 61 | display: none !important; 62 | } 63 | 64 | .visible-desktop { 65 | display: inherit !important; 66 | } 67 | 68 | @media (min-width: 768px) and (max-width: 979px) { 69 | .hidden-desktop { 70 | display: inherit !important; 71 | } 72 | .visible-desktop { 73 | display: none !important ; 74 | } 75 | .visible-tablet { 76 | display: inherit !important; 77 | } 78 | .hidden-tablet { 79 | display: none !important; 80 | } 81 | } 82 | 83 | @media (max-width: 767px) { 84 | .hidden-desktop { 85 | display: inherit !important; 86 | } 87 | .visible-desktop { 88 | display: none !important; 89 | } 90 | .visible-phone { 91 | display: inherit !important; 92 | } 93 | .hidden-phone { 94 | display: none !important; 95 | } 96 | } 97 | 98 | .visible-print { 99 | display: none !important; 100 | } 101 | 102 | @media print { 103 | .visible-print { 104 | display: inherit !important; 105 | } 106 | .hidden-print { 107 | display: none !important; 108 | } 109 | } 110 | 111 | @media (min-width: 1200px) { 112 | .row { 113 | margin-left: -30px; 114 | *zoom: 1; 115 | } 116 | .row:before, 117 | .row:after { 118 | display: table; 119 | line-height: 0; 120 | content: ""; 121 | } 122 | .row:after { 123 | clear: both; 124 | } 125 | [class*="span"] { 126 | float: left; 127 | min-height: 1px; 128 | margin-left: 30px; 129 | } 130 | .container, 131 | .navbar-static-top .container, 132 | .navbar-fixed-top .container, 133 | .navbar-fixed-bottom .container { 134 | width: 1170px; 135 | } 136 | .span12 { 137 | width: 1170px; 138 | } 139 | .span11 { 140 | width: 1070px; 141 | } 142 | .span10 { 143 | width: 970px; 144 | } 145 | .span9 { 146 | width: 870px; 147 | } 148 | .span8 { 149 | width: 770px; 150 | } 151 | .span7 { 152 | width: 670px; 153 | } 154 | .span6 { 155 | width: 570px; 156 | } 157 | .span5 { 158 | width: 470px; 159 | } 160 | .span4 { 161 | width: 370px; 162 | } 163 | .span3 { 164 | width: 270px; 165 | } 166 | .span2 { 167 | width: 170px; 168 | } 169 | .span1 { 170 | width: 70px; 171 | } 172 | .offset12 { 173 | margin-left: 1230px; 174 | } 175 | .offset11 { 176 | margin-left: 1130px; 177 | } 178 | .offset10 { 179 | margin-left: 1030px; 180 | } 181 | .offset9 { 182 | margin-left: 930px; 183 | } 184 | .offset8 { 185 | margin-left: 830px; 186 | } 187 | .offset7 { 188 | margin-left: 730px; 189 | } 190 | .offset6 { 191 | margin-left: 630px; 192 | } 193 | .offset5 { 194 | margin-left: 530px; 195 | } 196 | .offset4 { 197 | margin-left: 430px; 198 | } 199 | .offset3 { 200 | margin-left: 330px; 201 | } 202 | .offset2 { 203 | margin-left: 230px; 204 | } 205 | .offset1 { 206 | margin-left: 130px; 207 | } 208 | .row-fluid { 209 | width: 100%; 210 | *zoom: 1; 211 | } 212 | .row-fluid:before, 213 | .row-fluid:after { 214 | display: table; 215 | line-height: 0; 216 | content: ""; 217 | } 218 | .row-fluid:after { 219 | clear: both; 220 | } 221 | .row-fluid [class*="span"] { 222 | display: block; 223 | float: left; 224 | width: 100%; 225 | min-height: 30px; 226 | margin-left: 2.564102564102564%; 227 | *margin-left: 2.5109110747408616%; 228 | -webkit-box-sizing: border-box; 229 | -moz-box-sizing: border-box; 230 | box-sizing: border-box; 231 | } 232 | .row-fluid [class*="span"]:first-child { 233 | margin-left: 0; 234 | } 235 | .row-fluid .controls-row [class*="span"] + [class*="span"] { 236 | margin-left: 2.564102564102564%; 237 | } 238 | .row-fluid .span12 { 239 | width: 100%; 240 | *width: 99.94680851063829%; 241 | } 242 | .row-fluid .span11 { 243 | width: 91.45299145299145%; 244 | *width: 91.39979996362975%; 245 | } 246 | .row-fluid .span10 { 247 | width: 82.90598290598291%; 248 | *width: 82.8527914166212%; 249 | } 250 | .row-fluid .span9 { 251 | width: 74.35897435897436%; 252 | *width: 74.30578286961266%; 253 | } 254 | .row-fluid .span8 { 255 | width: 65.81196581196582%; 256 | *width: 65.75877432260411%; 257 | } 258 | .row-fluid .span7 { 259 | width: 57.26495726495726%; 260 | *width: 57.21176577559556%; 261 | } 262 | .row-fluid .span6 { 263 | width: 48.717948717948715%; 264 | *width: 48.664757228587014%; 265 | } 266 | .row-fluid .span5 { 267 | width: 40.17094017094017%; 268 | *width: 40.11774868157847%; 269 | } 270 | .row-fluid .span4 { 271 | width: 31.623931623931625%; 272 | *width: 31.570740134569924%; 273 | } 274 | .row-fluid .span3 { 275 | width: 23.076923076923077%; 276 | *width: 23.023731587561375%; 277 | } 278 | .row-fluid .span2 { 279 | width: 14.52991452991453%; 280 | *width: 14.476723040552828%; 281 | } 282 | .row-fluid .span1 { 283 | width: 5.982905982905983%; 284 | *width: 5.929714493544281%; 285 | } 286 | .row-fluid .offset12 { 287 | margin-left: 105.12820512820512%; 288 | *margin-left: 105.02182214948171%; 289 | } 290 | .row-fluid .offset12:first-child { 291 | margin-left: 102.56410256410257%; 292 | *margin-left: 102.45771958537915%; 293 | } 294 | .row-fluid .offset11 { 295 | margin-left: 96.58119658119658%; 296 | *margin-left: 96.47481360247316%; 297 | } 298 | .row-fluid .offset11:first-child { 299 | margin-left: 94.01709401709402%; 300 | *margin-left: 93.91071103837061%; 301 | } 302 | .row-fluid .offset10 { 303 | margin-left: 88.03418803418803%; 304 | *margin-left: 87.92780505546462%; 305 | } 306 | .row-fluid .offset10:first-child { 307 | margin-left: 85.47008547008548%; 308 | *margin-left: 85.36370249136206%; 309 | } 310 | .row-fluid .offset9 { 311 | margin-left: 79.48717948717949%; 312 | *margin-left: 79.38079650845607%; 313 | } 314 | .row-fluid .offset9:first-child { 315 | margin-left: 76.92307692307693%; 316 | *margin-left: 76.81669394435352%; 317 | } 318 | .row-fluid .offset8 { 319 | margin-left: 70.94017094017094%; 320 | *margin-left: 70.83378796144753%; 321 | } 322 | .row-fluid .offset8:first-child { 323 | margin-left: 68.37606837606839%; 324 | *margin-left: 68.26968539734497%; 325 | } 326 | .row-fluid .offset7 { 327 | margin-left: 62.393162393162385%; 328 | *margin-left: 62.28677941443899%; 329 | } 330 | .row-fluid .offset7:first-child { 331 | margin-left: 59.82905982905982%; 332 | *margin-left: 59.72267685033642%; 333 | } 334 | .row-fluid .offset6 { 335 | margin-left: 53.84615384615384%; 336 | *margin-left: 53.739770867430444%; 337 | } 338 | .row-fluid .offset6:first-child { 339 | margin-left: 51.28205128205128%; 340 | *margin-left: 51.175668303327875%; 341 | } 342 | .row-fluid .offset5 { 343 | margin-left: 45.299145299145295%; 344 | *margin-left: 45.1927623204219%; 345 | } 346 | .row-fluid .offset5:first-child { 347 | margin-left: 42.73504273504273%; 348 | *margin-left: 42.62865975631933%; 349 | } 350 | .row-fluid .offset4 { 351 | margin-left: 36.75213675213675%; 352 | *margin-left: 36.645753773413354%; 353 | } 354 | .row-fluid .offset4:first-child { 355 | margin-left: 34.18803418803419%; 356 | *margin-left: 34.081651209310785%; 357 | } 358 | .row-fluid .offset3 { 359 | margin-left: 28.205128205128204%; 360 | *margin-left: 28.0987452264048%; 361 | } 362 | .row-fluid .offset3:first-child { 363 | margin-left: 25.641025641025642%; 364 | *margin-left: 25.53464266230224%; 365 | } 366 | .row-fluid .offset2 { 367 | margin-left: 19.65811965811966%; 368 | *margin-left: 19.551736679396257%; 369 | } 370 | .row-fluid .offset2:first-child { 371 | margin-left: 17.094017094017094%; 372 | *margin-left: 16.98763411529369%; 373 | } 374 | .row-fluid .offset1 { 375 | margin-left: 11.11111111111111%; 376 | *margin-left: 11.004728132387708%; 377 | } 378 | .row-fluid .offset1:first-child { 379 | margin-left: 8.547008547008547%; 380 | *margin-left: 8.440625568285142%; 381 | } 382 | input, 383 | textarea, 384 | .uneditable-input { 385 | margin-left: 0; 386 | } 387 | .controls-row [class*="span"] + [class*="span"] { 388 | margin-left: 30px; 389 | } 390 | input.span12, 391 | textarea.span12, 392 | .uneditable-input.span12 { 393 | width: 1156px; 394 | } 395 | input.span11, 396 | textarea.span11, 397 | .uneditable-input.span11 { 398 | width: 1056px; 399 | } 400 | input.span10, 401 | textarea.span10, 402 | .uneditable-input.span10 { 403 | width: 956px; 404 | } 405 | input.span9, 406 | textarea.span9, 407 | .uneditable-input.span9 { 408 | width: 856px; 409 | } 410 | input.span8, 411 | textarea.span8, 412 | .uneditable-input.span8 { 413 | width: 756px; 414 | } 415 | input.span7, 416 | textarea.span7, 417 | .uneditable-input.span7 { 418 | width: 656px; 419 | } 420 | input.span6, 421 | textarea.span6, 422 | .uneditable-input.span6 { 423 | width: 556px; 424 | } 425 | input.span5, 426 | textarea.span5, 427 | .uneditable-input.span5 { 428 | width: 456px; 429 | } 430 | input.span4, 431 | textarea.span4, 432 | .uneditable-input.span4 { 433 | width: 356px; 434 | } 435 | input.span3, 436 | textarea.span3, 437 | .uneditable-input.span3 { 438 | width: 256px; 439 | } 440 | input.span2, 441 | textarea.span2, 442 | .uneditable-input.span2 { 443 | width: 156px; 444 | } 445 | input.span1, 446 | textarea.span1, 447 | .uneditable-input.span1 { 448 | width: 56px; 449 | } 450 | .thumbnails { 451 | margin-left: -30px; 452 | } 453 | .thumbnails > li { 454 | margin-left: 30px; 455 | } 456 | .row-fluid .thumbnails { 457 | margin-left: 0; 458 | } 459 | } 460 | 461 | @media (min-width: 768px) and (max-width: 979px) { 462 | .row { 463 | margin-left: -20px; 464 | *zoom: 1; 465 | } 466 | .row:before, 467 | .row:after { 468 | display: table; 469 | line-height: 0; 470 | content: ""; 471 | } 472 | .row:after { 473 | clear: both; 474 | } 475 | [class*="span"] { 476 | float: left; 477 | min-height: 1px; 478 | margin-left: 20px; 479 | } 480 | .container, 481 | .navbar-static-top .container, 482 | .navbar-fixed-top .container, 483 | .navbar-fixed-bottom .container { 484 | width: 724px; 485 | } 486 | .span12 { 487 | width: 724px; 488 | } 489 | .span11 { 490 | width: 662px; 491 | } 492 | .span10 { 493 | width: 600px; 494 | } 495 | .span9 { 496 | width: 538px; 497 | } 498 | .span8 { 499 | width: 476px; 500 | } 501 | .span7 { 502 | width: 414px; 503 | } 504 | .span6 { 505 | width: 352px; 506 | } 507 | .span5 { 508 | width: 290px; 509 | } 510 | .span4 { 511 | width: 228px; 512 | } 513 | .span3 { 514 | width: 166px; 515 | } 516 | .span2 { 517 | width: 104px; 518 | } 519 | .span1 { 520 | width: 42px; 521 | } 522 | .offset12 { 523 | margin-left: 764px; 524 | } 525 | .offset11 { 526 | margin-left: 702px; 527 | } 528 | .offset10 { 529 | margin-left: 640px; 530 | } 531 | .offset9 { 532 | margin-left: 578px; 533 | } 534 | .offset8 { 535 | margin-left: 516px; 536 | } 537 | .offset7 { 538 | margin-left: 454px; 539 | } 540 | .offset6 { 541 | margin-left: 392px; 542 | } 543 | .offset5 { 544 | margin-left: 330px; 545 | } 546 | .offset4 { 547 | margin-left: 268px; 548 | } 549 | .offset3 { 550 | margin-left: 206px; 551 | } 552 | .offset2 { 553 | margin-left: 144px; 554 | } 555 | .offset1 { 556 | margin-left: 82px; 557 | } 558 | .row-fluid { 559 | width: 100%; 560 | *zoom: 1; 561 | } 562 | .row-fluid:before, 563 | .row-fluid:after { 564 | display: table; 565 | line-height: 0; 566 | content: ""; 567 | } 568 | .row-fluid:after { 569 | clear: both; 570 | } 571 | .row-fluid [class*="span"] { 572 | display: block; 573 | float: left; 574 | width: 100%; 575 | min-height: 30px; 576 | margin-left: 2.7624309392265194%; 577 | *margin-left: 2.709239449864817%; 578 | -webkit-box-sizing: border-box; 579 | -moz-box-sizing: border-box; 580 | box-sizing: border-box; 581 | } 582 | .row-fluid [class*="span"]:first-child { 583 | margin-left: 0; 584 | } 585 | .row-fluid .controls-row [class*="span"] + [class*="span"] { 586 | margin-left: 2.7624309392265194%; 587 | } 588 | .row-fluid .span12 { 589 | width: 100%; 590 | *width: 99.94680851063829%; 591 | } 592 | .row-fluid .span11 { 593 | width: 91.43646408839778%; 594 | *width: 91.38327259903608%; 595 | } 596 | .row-fluid .span10 { 597 | width: 82.87292817679558%; 598 | *width: 82.81973668743387%; 599 | } 600 | .row-fluid .span9 { 601 | width: 74.30939226519337%; 602 | *width: 74.25620077583166%; 603 | } 604 | .row-fluid .span8 { 605 | width: 65.74585635359117%; 606 | *width: 65.69266486422946%; 607 | } 608 | .row-fluid .span7 { 609 | width: 57.18232044198895%; 610 | *width: 57.12912895262725%; 611 | } 612 | .row-fluid .span6 { 613 | width: 48.61878453038674%; 614 | *width: 48.56559304102504%; 615 | } 616 | .row-fluid .span5 { 617 | width: 40.05524861878453%; 618 | *width: 40.00205712942283%; 619 | } 620 | .row-fluid .span4 { 621 | width: 31.491712707182323%; 622 | *width: 31.43852121782062%; 623 | } 624 | .row-fluid .span3 { 625 | width: 22.92817679558011%; 626 | *width: 22.87498530621841%; 627 | } 628 | .row-fluid .span2 { 629 | width: 14.3646408839779%; 630 | *width: 14.311449394616199%; 631 | } 632 | .row-fluid .span1 { 633 | width: 5.801104972375691%; 634 | *width: 5.747913483013988%; 635 | } 636 | .row-fluid .offset12 { 637 | margin-left: 105.52486187845304%; 638 | *margin-left: 105.41847889972962%; 639 | } 640 | .row-fluid .offset12:first-child { 641 | margin-left: 102.76243093922652%; 642 | *margin-left: 102.6560479605031%; 643 | } 644 | .row-fluid .offset11 { 645 | margin-left: 96.96132596685082%; 646 | *margin-left: 96.8549429881274%; 647 | } 648 | .row-fluid .offset11:first-child { 649 | margin-left: 94.1988950276243%; 650 | *margin-left: 94.09251204890089%; 651 | } 652 | .row-fluid .offset10 { 653 | margin-left: 88.39779005524862%; 654 | *margin-left: 88.2914070765252%; 655 | } 656 | .row-fluid .offset10:first-child { 657 | margin-left: 85.6353591160221%; 658 | *margin-left: 85.52897613729868%; 659 | } 660 | .row-fluid .offset9 { 661 | margin-left: 79.8342541436464%; 662 | *margin-left: 79.72787116492299%; 663 | } 664 | .row-fluid .offset9:first-child { 665 | margin-left: 77.07182320441989%; 666 | *margin-left: 76.96544022569647%; 667 | } 668 | .row-fluid .offset8 { 669 | margin-left: 71.2707182320442%; 670 | *margin-left: 71.16433525332079%; 671 | } 672 | .row-fluid .offset8:first-child { 673 | margin-left: 68.50828729281768%; 674 | *margin-left: 68.40190431409427%; 675 | } 676 | .row-fluid .offset7 { 677 | margin-left: 62.70718232044199%; 678 | *margin-left: 62.600799341718584%; 679 | } 680 | .row-fluid .offset7:first-child { 681 | margin-left: 59.94475138121547%; 682 | *margin-left: 59.838368402492065%; 683 | } 684 | .row-fluid .offset6 { 685 | margin-left: 54.14364640883978%; 686 | *margin-left: 54.037263430116376%; 687 | } 688 | .row-fluid .offset6:first-child { 689 | margin-left: 51.38121546961326%; 690 | *margin-left: 51.27483249088986%; 691 | } 692 | .row-fluid .offset5 { 693 | margin-left: 45.58011049723757%; 694 | *margin-left: 45.47372751851417%; 695 | } 696 | .row-fluid .offset5:first-child { 697 | margin-left: 42.81767955801105%; 698 | *margin-left: 42.71129657928765%; 699 | } 700 | .row-fluid .offset4 { 701 | margin-left: 37.01657458563536%; 702 | *margin-left: 36.91019160691196%; 703 | } 704 | .row-fluid .offset4:first-child { 705 | margin-left: 34.25414364640884%; 706 | *margin-left: 34.14776066768544%; 707 | } 708 | .row-fluid .offset3 { 709 | margin-left: 28.45303867403315%; 710 | *margin-left: 28.346655695309746%; 711 | } 712 | .row-fluid .offset3:first-child { 713 | margin-left: 25.69060773480663%; 714 | *margin-left: 25.584224756083227%; 715 | } 716 | .row-fluid .offset2 { 717 | margin-left: 19.88950276243094%; 718 | *margin-left: 19.783119783707537%; 719 | } 720 | .row-fluid .offset2:first-child { 721 | margin-left: 17.12707182320442%; 722 | *margin-left: 17.02068884448102%; 723 | } 724 | .row-fluid .offset1 { 725 | margin-left: 11.32596685082873%; 726 | *margin-left: 11.219583872105325%; 727 | } 728 | .row-fluid .offset1:first-child { 729 | margin-left: 8.56353591160221%; 730 | *margin-left: 8.457152932878806%; 731 | } 732 | input, 733 | textarea, 734 | .uneditable-input { 735 | margin-left: 0; 736 | } 737 | .controls-row [class*="span"] + [class*="span"] { 738 | margin-left: 20px; 739 | } 740 | input.span12, 741 | textarea.span12, 742 | .uneditable-input.span12 { 743 | width: 710px; 744 | } 745 | input.span11, 746 | textarea.span11, 747 | .uneditable-input.span11 { 748 | width: 648px; 749 | } 750 | input.span10, 751 | textarea.span10, 752 | .uneditable-input.span10 { 753 | width: 586px; 754 | } 755 | input.span9, 756 | textarea.span9, 757 | .uneditable-input.span9 { 758 | width: 524px; 759 | } 760 | input.span8, 761 | textarea.span8, 762 | .uneditable-input.span8 { 763 | width: 462px; 764 | } 765 | input.span7, 766 | textarea.span7, 767 | .uneditable-input.span7 { 768 | width: 400px; 769 | } 770 | input.span6, 771 | textarea.span6, 772 | .uneditable-input.span6 { 773 | width: 338px; 774 | } 775 | input.span5, 776 | textarea.span5, 777 | .uneditable-input.span5 { 778 | width: 276px; 779 | } 780 | input.span4, 781 | textarea.span4, 782 | .uneditable-input.span4 { 783 | width: 214px; 784 | } 785 | input.span3, 786 | textarea.span3, 787 | .uneditable-input.span3 { 788 | width: 152px; 789 | } 790 | input.span2, 791 | textarea.span2, 792 | .uneditable-input.span2 { 793 | width: 90px; 794 | } 795 | input.span1, 796 | textarea.span1, 797 | .uneditable-input.span1 { 798 | width: 28px; 799 | } 800 | } 801 | 802 | @media (max-width: 767px) { 803 | body { 804 | padding-right: 20px; 805 | padding-left: 20px; 806 | } 807 | .navbar-fixed-top, 808 | .navbar-fixed-bottom, 809 | .navbar-static-top { 810 | margin-right: -20px; 811 | margin-left: -20px; 812 | } 813 | .container-fluid { 814 | padding: 0; 815 | } 816 | .dl-horizontal dt { 817 | float: none; 818 | width: auto; 819 | clear: none; 820 | text-align: left; 821 | } 822 | .dl-horizontal dd { 823 | margin-left: 0; 824 | } 825 | .container { 826 | width: auto; 827 | } 828 | .row-fluid { 829 | width: 100%; 830 | } 831 | .row, 832 | .thumbnails { 833 | margin-left: 0; 834 | } 835 | .thumbnails > li { 836 | float: none; 837 | margin-left: 0; 838 | } 839 | [class*="span"], 840 | .uneditable-input[class*="span"], 841 | .row-fluid [class*="span"] { 842 | display: block; 843 | float: none; 844 | width: 100%; 845 | margin-left: 0; 846 | -webkit-box-sizing: border-box; 847 | -moz-box-sizing: border-box; 848 | box-sizing: border-box; 849 | } 850 | .span12, 851 | .row-fluid .span12 { 852 | width: 100%; 853 | -webkit-box-sizing: border-box; 854 | -moz-box-sizing: border-box; 855 | box-sizing: border-box; 856 | } 857 | .row-fluid [class*="offset"]:first-child { 858 | margin-left: 0; 859 | } 860 | .input-large, 861 | .input-xlarge, 862 | .input-xxlarge, 863 | input[class*="span"], 864 | select[class*="span"], 865 | textarea[class*="span"], 866 | .uneditable-input { 867 | display: block; 868 | width: 100%; 869 | min-height: 30px; 870 | -webkit-box-sizing: border-box; 871 | -moz-box-sizing: border-box; 872 | box-sizing: border-box; 873 | } 874 | .input-prepend input, 875 | .input-append input, 876 | .input-prepend input[class*="span"], 877 | .input-append input[class*="span"] { 878 | display: inline-block; 879 | width: auto; 880 | } 881 | .controls-row [class*="span"] + [class*="span"] { 882 | margin-left: 0; 883 | } 884 | .modal { 885 | position: fixed; 886 | top: 20px; 887 | right: 20px; 888 | left: 20px; 889 | width: auto; 890 | margin: 0; 891 | } 892 | .modal.fade { 893 | top: -100px; 894 | } 895 | .modal.fade.in { 896 | top: 20px; 897 | } 898 | } 899 | 900 | @media (max-width: 480px) { 901 | .nav-collapse { 902 | -webkit-transform: translate3d(0, 0, 0); 903 | } 904 | .page-header h1 small { 905 | display: block; 906 | line-height: 20px; 907 | } 908 | input[type="checkbox"], 909 | input[type="radio"] { 910 | border: 1px solid #ccc; 911 | } 912 | .form-horizontal .control-label { 913 | float: none; 914 | width: auto; 915 | padding-top: 0; 916 | text-align: left; 917 | } 918 | .form-horizontal .controls { 919 | margin-left: 0; 920 | } 921 | .form-horizontal .control-list { 922 | padding-top: 0; 923 | } 924 | .form-horizontal .form-actions { 925 | padding-right: 10px; 926 | padding-left: 10px; 927 | } 928 | .media .pull-left, 929 | .media .pull-right { 930 | display: block; 931 | float: none; 932 | margin-bottom: 10px; 933 | } 934 | .media-object { 935 | margin-right: 0; 936 | margin-left: 0; 937 | } 938 | .modal { 939 | top: 10px; 940 | right: 10px; 941 | left: 10px; 942 | } 943 | .modal-header .close { 944 | padding: 10px; 945 | margin: -10px; 946 | } 947 | .carousel-caption { 948 | position: static; 949 | } 950 | } 951 | 952 | @media (max-width: 979px) { 953 | body { 954 | padding-top: 0; 955 | } 956 | .navbar-fixed-top, 957 | .navbar-fixed-bottom { 958 | position: static; 959 | } 960 | .navbar-fixed-top { 961 | margin-bottom: 20px; 962 | } 963 | .navbar-fixed-bottom { 964 | margin-top: 20px; 965 | } 966 | .navbar-fixed-top .navbar-inner, 967 | .navbar-fixed-bottom .navbar-inner { 968 | padding: 5px; 969 | } 970 | .navbar .container { 971 | width: auto; 972 | padding: 0; 973 | } 974 | .navbar .brand { 975 | padding-right: 10px; 976 | padding-left: 10px; 977 | margin: 0 0 0 -5px; 978 | } 979 | .nav-collapse { 980 | clear: both; 981 | } 982 | .nav-collapse .nav { 983 | float: none; 984 | margin: 0 0 10px; 985 | } 986 | .nav-collapse .nav > li { 987 | float: none; 988 | } 989 | .nav-collapse .nav > li > a { 990 | margin-bottom: 2px; 991 | } 992 | .nav-collapse .nav > .divider-vertical { 993 | display: none; 994 | } 995 | .nav-collapse .nav .nav-header { 996 | color: #777777; 997 | text-shadow: none; 998 | } 999 | .nav-collapse .nav > li > a, 1000 | .nav-collapse .dropdown-menu a { 1001 | padding: 9px 15px; 1002 | font-weight: bold; 1003 | color: #777777; 1004 | -webkit-border-radius: 3px; 1005 | -moz-border-radius: 3px; 1006 | border-radius: 3px; 1007 | } 1008 | .nav-collapse .btn { 1009 | padding: 4px 10px 4px; 1010 | font-weight: normal; 1011 | -webkit-border-radius: 4px; 1012 | -moz-border-radius: 4px; 1013 | border-radius: 4px; 1014 | } 1015 | .nav-collapse .dropdown-menu li + li a { 1016 | margin-bottom: 2px; 1017 | } 1018 | .nav-collapse .nav > li > a:hover, 1019 | .nav-collapse .nav > li > a:focus, 1020 | .nav-collapse .dropdown-menu a:hover, 1021 | .nav-collapse .dropdown-menu a:focus { 1022 | background-color: #f2f2f2; 1023 | } 1024 | .navbar-inverse .nav-collapse .nav > li > a, 1025 | .navbar-inverse .nav-collapse .dropdown-menu a { 1026 | color: #999999; 1027 | } 1028 | .navbar-inverse .nav-collapse .nav > li > a:hover, 1029 | .navbar-inverse .nav-collapse .nav > li > a:focus, 1030 | .navbar-inverse .nav-collapse .dropdown-menu a:hover, 1031 | .navbar-inverse .nav-collapse .dropdown-menu a:focus { 1032 | background-color: #111111; 1033 | } 1034 | .nav-collapse.in .btn-group { 1035 | padding: 0; 1036 | margin-top: 5px; 1037 | } 1038 | .nav-collapse .dropdown-menu { 1039 | position: static; 1040 | top: auto; 1041 | left: auto; 1042 | display: none; 1043 | float: none; 1044 | max-width: none; 1045 | padding: 0; 1046 | margin: 0 15px; 1047 | background-color: transparent; 1048 | border: none; 1049 | -webkit-border-radius: 0; 1050 | -moz-border-radius: 0; 1051 | border-radius: 0; 1052 | -webkit-box-shadow: none; 1053 | -moz-box-shadow: none; 1054 | box-shadow: none; 1055 | } 1056 | .nav-collapse .open > .dropdown-menu { 1057 | display: block; 1058 | } 1059 | .nav-collapse .dropdown-menu:before, 1060 | .nav-collapse .dropdown-menu:after { 1061 | display: none; 1062 | } 1063 | .nav-collapse .dropdown-menu .divider { 1064 | display: none; 1065 | } 1066 | .nav-collapse .nav > li > .dropdown-menu:before, 1067 | .nav-collapse .nav > li > .dropdown-menu:after { 1068 | display: none; 1069 | } 1070 | .nav-collapse .navbar-form, 1071 | .nav-collapse .navbar-search { 1072 | float: none; 1073 | padding: 10px 15px; 1074 | margin: 10px 0; 1075 | border-top: 1px solid #f2f2f2; 1076 | border-bottom: 1px solid #f2f2f2; 1077 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); 1078 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); 1079 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); 1080 | } 1081 | .navbar-inverse .nav-collapse .navbar-form, 1082 | .navbar-inverse .nav-collapse .navbar-search { 1083 | border-top-color: #111111; 1084 | border-bottom-color: #111111; 1085 | } 1086 | .navbar .nav-collapse .nav.pull-right { 1087 | float: none; 1088 | margin-left: 0; 1089 | } 1090 | .nav-collapse, 1091 | .nav-collapse.collapse { 1092 | height: 0; 1093 | overflow: hidden; 1094 | } 1095 | .navbar .btn-navbar { 1096 | display: block; 1097 | } 1098 | .navbar-static .navbar-inner { 1099 | padding-right: 10px; 1100 | padding-left: 10px; 1101 | } 1102 | } 1103 | 1104 | @media (min-width: 980px) { 1105 | .nav-collapse.collapse { 1106 | height: auto !important; 1107 | overflow: visible !important; 1108 | } 1109 | } 1110 | -------------------------------------------------------------------------------- /share.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | var disqus_shortname = 'pairup'; 4 | var mainDiv = document.getElementsByTagName('div')[0]; 5 | 6 | var shareLink = '
'; 7 | mainDiv.innerHTML += shareLink; 8 | 9 | function loadShare() { 10 | var shareHTML = '

To make a public URL, you can copy your HTML into jsbin.com and copy that URL. Or, if its a few files, you can host on Google Drive. Then, post in the comments below with a link to it. Or tweet it at @GDIsf. Or both!

'; 11 | 12 | var shareComments = document.createElement('div'); 13 | shareComments.id = 'disqus_thread'; 14 | mainDiv.innerHTML += shareHTML; 15 | mainDiv.appendChild(shareComments); 16 | 17 | var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 18 | dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 19 | (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 20 | } 21 | 22 | function showSolution() { 23 | if (confirm('You surrrrre?')) { 24 | document.getElementById('solution').style.display = 'block'; 25 | window.scrollTo(0, document.body.scrollHeight); 26 | } 27 | } 28 | 29 | $("#showSolution").on("click", showSolution); 30 | $("#share").on("click", loadShare); 31 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 10px; 3 | padding-bottom: 10px; 4 | } 5 | 6 | /* Custom container */ 7 | .container-narrow { 8 | margin: 0 auto; 9 | max-width: 700px; 10 | } 11 | .container-narrow > hr { 12 | margin: 30px 0; 13 | } 14 | 15 | /* Main marketing message and sign up button */ 16 | .jumbotron { 17 | margin: 0px 0; 18 | text-align: center; 19 | } 20 | .jumbotron h1 { 21 | font-size: 62px; 22 | line-height: 1; 23 | } 24 | 25 | /* Supporting marketing content */ 26 | .marketing { 27 | margin: 0px 0; 28 | } 29 | .marketing p + h4 { 30 | margin-top: 18px; 31 | } 32 | 33 | --------------------------------------------------------------------------------

Level 1: HTML/CSS

HTML

CSS

HTML & CSS

HTML/CSS template to practice around

Level 2: Basic Javascript

Basic Javascript

Level 3: JavaScript for the Web

Advanced Javascript

Level 4: Advanced Javascript

Advanced Javascript

CSS: Bootstrap Exercise

Some Favorites

Wild & Wacky Vegetables

Wild & Wacky Vegetables

Some diseases

Really informative info

The Calculator

Exercises: Cat Walk

HTML Copycat Exercise

HTML Embed Exercise

All About Dogs

Maps of dog parks

What do you think about dog parks?

Follow us on Twitter!

Some cool looking dogs from Flickr

Want more info? Search my fav dog sites

HTML Exercise

Part 1: HTML Basics Exercise

Part 2: HTML Tables Exercise

Part 3: HTML Forms Exercise

HTML Event Invite Exercise

JavaScript Exercise: Data Visualization

JavaScript Exercise: Mad Libs

CSS: Media Queries Exercise

JavaScript Exercise: The Memory Game

CSS Positioning Farm Party

The Word Guesser

Exercise: Youtube Player

Pair Up

Welcome!