SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
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 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
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
Agenda
●

Lab (The Memory Game) (180 minutes)
○ Pseudo Code (start game, reset game, etc.)
○ JavaScript (code the application)
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.
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 Project
○ discuss and/or sign off
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 what I want to do.” is a
perfectly acceptable answer. You have the
Holiday break to come up with an idea.

Contenu connexe

Similaire à Lesson 11

Presentation sanlab workshops
Presentation sanlab workshopsPresentation sanlab workshops
Presentation sanlab workshops
Artur Roszczyk
 

Similaire à Lesson 11 (15)

Lesson 11
Lesson 11Lesson 11
Lesson 11
 
The Ring programming language version 1.7 book - Part 53 of 196
The Ring programming language version 1.7 book - Part 53 of 196The Ring programming language version 1.7 book - Part 53 of 196
The Ring programming language version 1.7 book - Part 53 of 196
 
The Ring programming language version 1.2 book - Part 36 of 84
The Ring programming language version 1.2 book - Part 36 of 84The Ring programming language version 1.2 book - Part 36 of 84
The Ring programming language version 1.2 book - Part 36 of 84
 
The Ring programming language version 1.8 book - Part 55 of 202
The Ring programming language version 1.8 book - Part 55 of 202The Ring programming language version 1.8 book - Part 55 of 202
The Ring programming language version 1.8 book - Part 55 of 202
 
#AbadIA machine learning pipelines commit conf 2019
#AbadIA   machine learning pipelines commit conf 2019#AbadIA   machine learning pipelines commit conf 2019
#AbadIA machine learning pipelines commit conf 2019
 
Beat Your Mom At Solitaire—Reverse Engineering of Computer Games
Beat Your Mom At Solitaire—Reverse Engineering of Computer GamesBeat Your Mom At Solitaire—Reverse Engineering of Computer Games
Beat Your Mom At Solitaire—Reverse Engineering of Computer Games
 
Tensorflow + Keras & Open AI Gym
Tensorflow + Keras & Open AI GymTensorflow + Keras & Open AI Gym
Tensorflow + Keras & Open AI Gym
 
The Ring programming language version 1.4 book - Part 14 of 30
The Ring programming language version 1.4 book - Part 14 of 30The Ring programming language version 1.4 book - Part 14 of 30
The Ring programming language version 1.4 book - Part 14 of 30
 
The Ring programming language version 1.6 book - Part 51 of 189
The Ring programming language version 1.6 book - Part 51 of 189The Ring programming language version 1.6 book - Part 51 of 189
The Ring programming language version 1.6 book - Part 51 of 189
 
Memory Leak Analysis in Android Games
Memory Leak Analysis in Android GamesMemory Leak Analysis in Android Games
Memory Leak Analysis in Android Games
 
Introduction to Alphago Zero
Introduction to Alphago ZeroIntroduction to Alphago Zero
Introduction to Alphago Zero
 
Strategies for refactoring and migrating a big old project to be multilingual...
Strategies for refactoring and migrating a big old project to be multilingual...Strategies for refactoring and migrating a big old project to be multilingual...
Strategies for refactoring and migrating a big old project to be multilingual...
 
Introduction to Procedural Contents Generation
Introduction to Procedural Contents GenerationIntroduction to Procedural Contents Generation
Introduction to Procedural Contents Generation
 
Small Boxes and Big Fun: Starting a Board Game Collection
Small Boxes and Big Fun: Starting a Board Game CollectionSmall Boxes and Big Fun: Starting a Board Game Collection
Small Boxes and Big Fun: Starting a Board Game Collection
 
Presentation sanlab workshops
Presentation sanlab workshopsPresentation sanlab workshops
Presentation sanlab workshops
 

Plus de Gene Babon (20)

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling Alleys
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch Meeting
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web Developer
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web Technology
 
Info Session
Info SessionInfo Session
Info Session
 
Info session
Info sessionInfo session
Info session
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things Done
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 16
Lesson 16Lesson 16
Lesson 16
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
 
Lesson 09
Lesson 09Lesson 09
Lesson 09
 
Lesson 05
Lesson 05Lesson 05
Lesson 05
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
 
Lesson 03
Lesson 03Lesson 03
Lesson 03
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
 

Dernier

Russian Escorts Agency In Goa 💚 9316020077 💚 Russian Call Girl Goa
Russian Escorts Agency In Goa  💚 9316020077 💚 Russian Call Girl GoaRussian Escorts Agency In Goa  💚 9316020077 💚 Russian Call Girl Goa
Russian Escorts Agency In Goa 💚 9316020077 💚 Russian Call Girl Goa
sexy call girls service in goa
 
Karnal Call Girls 8860008073 Dyal Singh Colony Call Girls Service in Karnal E...
Karnal Call Girls 8860008073 Dyal Singh Colony Call Girls Service in Karnal E...Karnal Call Girls 8860008073 Dyal Singh Colony Call Girls Service in Karnal E...
Karnal Call Girls 8860008073 Dyal Singh Colony Call Girls Service in Karnal E...
Apsara Of India
 
Call Girls In Goa 9316020077 Goa Call Girl By Indian Call Girls Goa
Call Girls In Goa  9316020077 Goa  Call Girl By Indian Call Girls GoaCall Girls In Goa  9316020077 Goa  Call Girl By Indian Call Girls Goa
Call Girls In Goa 9316020077 Goa Call Girl By Indian Call Girls Goa
sexy call girls service in goa
 
Desi Bhabhi Call Girls In Goa 💃 730 02 72 001💃desi Bhabhi Escort Goa
Desi Bhabhi Call Girls  In Goa  💃 730 02 72 001💃desi Bhabhi Escort GoaDesi Bhabhi Call Girls  In Goa  💃 730 02 72 001💃desi Bhabhi Escort Goa
Desi Bhabhi Call Girls In Goa 💃 730 02 72 001💃desi Bhabhi Escort Goa
russian goa call girl and escorts service
 
Goa Call Girls 9316020077 Call Girls In Goa By Russian Call Girl in goa
Goa Call Girls 9316020077 Call Girls  In Goa By Russian Call Girl in goaGoa Call Girls 9316020077 Call Girls  In Goa By Russian Call Girl in goa
Goa Call Girls 9316020077 Call Girls In Goa By Russian Call Girl in goa
russian goa call girl and escorts service
 

Dernier (20)

𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...
𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...
𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...
 
Russian Escorts Agency In Goa 💚 9316020077 💚 Russian Call Girl Goa
Russian Escorts Agency In Goa  💚 9316020077 💚 Russian Call Girl GoaRussian Escorts Agency In Goa  💚 9316020077 💚 Russian Call Girl Goa
Russian Escorts Agency In Goa 💚 9316020077 💚 Russian Call Girl Goa
 
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...
 
2k Shot Call girls Laxmi Nagar Delhi 9205541914
2k Shot Call girls Laxmi Nagar Delhi 92055419142k Shot Call girls Laxmi Nagar Delhi 9205541914
2k Shot Call girls Laxmi Nagar Delhi 9205541914
 
↑Top Model (Kolkata) Call Girls Behala ⟟ 8250192130 ⟟ High Class Call Girl In...
↑Top Model (Kolkata) Call Girls Behala ⟟ 8250192130 ⟟ High Class Call Girl In...↑Top Model (Kolkata) Call Girls Behala ⟟ 8250192130 ⟟ High Class Call Girl In...
↑Top Model (Kolkata) Call Girls Behala ⟟ 8250192130 ⟟ High Class Call Girl In...
 
Call Girls in Barasat | 7001035870 At Low Cost Cash Payment Booking
Call Girls in Barasat | 7001035870 At Low Cost Cash Payment BookingCall Girls in Barasat | 7001035870 At Low Cost Cash Payment Booking
Call Girls in Barasat | 7001035870 At Low Cost Cash Payment Booking
 
Dakshineswar Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Se...
Dakshineswar Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Se...Dakshineswar Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Se...
Dakshineswar Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Se...
 
Book Sex Workers Available Kolkata Call Girls Service Airport Kolkata ✔ 62971...
Book Sex Workers Available Kolkata Call Girls Service Airport Kolkata ✔ 62971...Book Sex Workers Available Kolkata Call Girls Service Airport Kolkata ✔ 62971...
Book Sex Workers Available Kolkata Call Girls Service Airport Kolkata ✔ 62971...
 
Almora call girls 📞 8617697112 At Low Cost Cash Payment Booking
Almora call girls 📞 8617697112 At Low Cost Cash Payment BookingAlmora call girls 📞 8617697112 At Low Cost Cash Payment Booking
Almora call girls 📞 8617697112 At Low Cost Cash Payment Booking
 
Karnal Call Girls 8860008073 Dyal Singh Colony Call Girls Service in Karnal E...
Karnal Call Girls 8860008073 Dyal Singh Colony Call Girls Service in Karnal E...Karnal Call Girls 8860008073 Dyal Singh Colony Call Girls Service in Karnal E...
Karnal Call Girls 8860008073 Dyal Singh Colony Call Girls Service in Karnal E...
 
Independent Garulia Escorts ✔ 9332606886✔ Full Night With Room Online Booking...
Independent Garulia Escorts ✔ 9332606886✔ Full Night With Room Online Booking...Independent Garulia Escorts ✔ 9332606886✔ Full Night With Room Online Booking...
Independent Garulia Escorts ✔ 9332606886✔ Full Night With Room Online Booking...
 
↑Top Model (Kolkata) Call Girls Rajpur ⟟ 8250192130 ⟟ High Class Call Girl In...
↑Top Model (Kolkata) Call Girls Rajpur ⟟ 8250192130 ⟟ High Class Call Girl In...↑Top Model (Kolkata) Call Girls Rajpur ⟟ 8250192130 ⟟ High Class Call Girl In...
↑Top Model (Kolkata) Call Girls Rajpur ⟟ 8250192130 ⟟ High Class Call Girl In...
 
Call Girls In Goa 9316020077 Goa Call Girl By Indian Call Girls Goa
Call Girls In Goa  9316020077 Goa  Call Girl By Indian Call Girls GoaCall Girls In Goa  9316020077 Goa  Call Girl By Indian Call Girls Goa
Call Girls In Goa 9316020077 Goa Call Girl By Indian Call Girls Goa
 
Desi Bhabhi Call Girls In Goa 💃 730 02 72 001💃desi Bhabhi Escort Goa
Desi Bhabhi Call Girls  In Goa  💃 730 02 72 001💃desi Bhabhi Escort GoaDesi Bhabhi Call Girls  In Goa  💃 730 02 72 001💃desi Bhabhi Escort Goa
Desi Bhabhi Call Girls In Goa 💃 730 02 72 001💃desi Bhabhi Escort Goa
 
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRL
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRLBhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRL
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRL
 
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...
 
Goa Call Girls 9316020077 Call Girls In Goa By Russian Call Girl in goa
Goa Call Girls 9316020077 Call Girls  In Goa By Russian Call Girl in goaGoa Call Girls 9316020077 Call Girls  In Goa By Russian Call Girl in goa
Goa Call Girls 9316020077 Call Girls In Goa By Russian Call Girl in goa
 
📞 Contact Number 8617697112 VIP Ganderbal Call Girls
📞 Contact Number 8617697112 VIP Ganderbal Call Girls📞 Contact Number 8617697112 VIP Ganderbal Call Girls
📞 Contact Number 8617697112 VIP Ganderbal Call Girls
 
College Call Girls Pune 8617697112 Short 1500 Night 6000 Best call girls Service
College Call Girls Pune 8617697112 Short 1500 Night 6000 Best call girls ServiceCollege Call Girls Pune 8617697112 Short 1500 Night 6000 Best call girls Service
College Call Girls Pune 8617697112 Short 1500 Night 6000 Best call girls Service
 
Model Call Girls In Velappanchavadi WhatsApp Booking 7427069034 call girl ser...
Model Call Girls In Velappanchavadi WhatsApp Booking 7427069034 call girl ser...Model Call Girls In Velappanchavadi WhatsApp Booking 7427069034 call girl ser...
Model Call Girls In Velappanchavadi WhatsApp Booking 7427069034 call girl ser...
 

Lesson 11