Your SlideShare is downloading. ×
Lesson 11
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 11

87
views

Published on


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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.

×