1. Front-End
Web Development
Lesson 11
Lab

2. Agenda
●
Lab (The Memory Game) (180 minutes)
○ Description: This lab is your standard memory
game. Select two cards, see if they match, and if
they don't, turn them back over.
○ Topics: jQuery, each/forEach, events, functions,
variables, arguments, classes/ids, using
StackOverflow and other resources
○ Activity Type: paired exercise

3. Agenda
●
Lab (The Memory Game) (180 minutes)
○ HTML (game container, game cards, reset buttons,
etc). Time: 20 minutes
○ CSS (style the game play area). Each card should
use a "card" class and when "selected" should have
a background image that shows the card as it would
appear if turned over. Time: 30 minutes

4. Agenda
●
Lab (The Memory Game) (180 minutes)
○ Pseudo Code (start game, reset game, etc.)
○ JavaScript (code the application)

5. Agenda
●
Lab (The Memory Game) (180 minutes)
○ Bonus
■ Use the web to find a function to shuffle the
cards. Source: Stack Overflow
■ Track the number of moves it took to match all
cards
■ Add a "cheat" mode which shows the match for
the currently selected card by making the
matching card bigger.

6. Agenda
●
Lab (180 minutes)
○
○
○
○
○
The Memory Game
Demo the site
Ask students to recreate the game
Pair off
Begin

7. Agenda (alternate)
●
●
●
●
●
Carousel
Introduction to jQuery Plugins
AnythingSlider Plugin
jQuery Navigation Plugin
Final Project
○ discuss and/or sign off

8. Carousel
View Code and discuss.

9. Introduction to jQuery Plugins
Learn jQuery Plugins
The jQuery Plugin Registry

10. AnythingSlider Plugin
Code Along
Demo
Website
GitHub

11. jQuery Navigation Plugin
Individual Assignment
Demo
Website
GitHub

12. Final Project
Leon and Gene to check in with each class
member to chat about the final project.
“I really have no idea what I want to do.” is a
perfectly acceptable answer. You have the
Holiday break to come up with an idea.