0
Front-End
Web Development
Lesson 11
Lab
Agenda
●

Lab (The Memory Game) (180 minutes)
○ Description: This lab is your standard memory
game. Select two cards, see ...
Agenda
●

Lab (The Memory Game) (180 minutes)
○ HTML (game container, game cards, reset buttons,
etc). Time: 20 minutes
○ ...
Agenda
●

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

Lab (The Memory Game) (180 minutes)
○ Bonus
■ Use the web to find a function to shuffle the
cards. Source: Stack...
Agenda
●

Lab (180 minutes)
○
○
○
○
○

The Memory Game
Demo the site
Ask students to recreate the game
Pair off
Begin
Agenda (alternate)
●
●
●
●
●

Carousel
Introduction to jQuery Plugins
AnythingSlider Plugin
jQuery Navigation Plugin
Final...
Carousel
View Code and discuss.
Introduction to jQuery Plugins
Learn jQuery Plugins
The jQuery Plugin Registry
AnythingSlider Plugin
Code Along
Demo
Website
GitHub
jQuery Navigation Plugin
Individual Assignment
Demo
Website
GitHub
Final Project
Leon and Gene to check in with each class
member to chat about the final project.
“I really have no idea wha...
Upcoming SlideShare
Loading in...5
×

Lesson 11

101

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
101
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lesson 11"

  1. 1. Front-End Web Development Lesson 11 Lab
  2. 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. 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. 4. Agenda ● Lab (The Memory Game) (180 minutes) ○ Pseudo Code (start game, reset game, etc.) ○ JavaScript (code the application)
  5. 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. 6. Agenda ● Lab (180 minutes) ○ ○ ○ ○ ○ The Memory Game Demo the site Ask students to recreate the game Pair off Begin
  7. 7. Agenda (alternate) ● ● ● ● ● Carousel Introduction to jQuery Plugins AnythingSlider Plugin jQuery Navigation Plugin Final Project ○ discuss and/or sign off
  8. 8. Carousel View Code and discuss.
  9. 9. Introduction to jQuery Plugins Learn jQuery Plugins The jQuery Plugin Registry
  10. 10. AnythingSlider Plugin Code Along Demo Website GitHub
  11. 11. jQuery Navigation Plugin Individual Assignment Demo Website GitHub
  12. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×