lesson 11
DESCRIPTION
TRANSCRIPT
![Page 1: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/1.jpg)
Front-EndWeb Development
Lesson 11Lab
![Page 2: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/2.jpg)
Agenda (proposed)
● 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
![Page 3: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/3.jpg)
Agenda (proposed)
● 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
![Page 4: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/4.jpg)
Agenda (proposed)
● Lab (The Memory Game) (180 minutes)○ Pseudo Code (start game, reset game, etc.)○ JavaScript (code the application)
![Page 5: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/5.jpg)
Agenda (proposed)
● 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.
![Page 6: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/6.jpg)
Agenda (proposed)
● Lab (180 minutes)○ The Memory Game○ Demo the site○ Ask students to recreate the game○ Pair off○ Begin
![Page 7: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/7.jpg)
Agenda (alternate)
● Carousel● Introduction to jQuery Plugins● AnythingSlider Plugin● jQuery Navigation Plugin● Final Project
○ discuss and/or sign off
![Page 8: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/8.jpg)
Carousel
View Code and discuss.
![Page 9: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/9.jpg)
AnythingSlider Plugin
Code Along
DemoWebsiteGitHub
![Page 10: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/10.jpg)
Mega Drop Down Plugin
Self Paced
DemoWebsite
![Page 11: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/11.jpg)
Lab
Build out Divided Times using …
Anything Slider
jQuery Mega Drop Down Menu
![Page 12: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/12.jpg)
![Page 13: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/13.jpg)
Introduction to Final Project
Description:● Design and build a website of your choice
![Page 14: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/14.jpg)
Introduction to Final Project
Objectives:● Demonstrate understanding of all topics● Apply knowledge to build a website from the
ground up● Create an efficient website compatible with
modern browsers and devices
![Page 15: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/15.jpg)
Introduction to Final Project
Remaining Topics:● Responsive design● HTML forms● jQuery animation● ?? parallax scrolling / single page website??
![Page 16: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/16.jpg)
Introduction to Final Project
Core Requirements (HTML5):● HTML5 structural elements
○ header, footer, nav, etc.● Include classes and IDs● Additional tags, as appropriate
![Page 17: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/17.jpg)
Introduction to Final Project
Core Requirements (CSS):● Demonstrate fonts and color● Demonstrate floats and the box model● External CSS
![Page 18: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/18.jpg)
Introduction to Final Project
Core Requirements (Interactive):● Use JavaScript / jQuery events to add
interactivity● External scripts
![Page 19: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/19.jpg)
Introduction to Final Project
Deliverables:● Project folder with HTML, CSS,
JavaScript/jQuery and assets● Hosted on GA server
![Page 20: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/20.jpg)
Introduction to Final Project
Best Practices:● Clean and readable code● Search Engine Optimization (SEO)● Avoid deprecated tags
![Page 21: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/21.jpg)
Introduction to Final Project
Grading:● A project is considered satisfactory if it
meets all core requirements and milestones
![Page 22: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/22.jpg)
Introduction to Final Project
Milestones:Project proposal / sketch○ Week 6 -- Saturday, April 5, 2014
HTML wireframes & template pages○ Week 7 -- Saturday, April 12, 2014
At least one coded page○ Week 8 -- Saturday, April 19, 2014
![Page 23: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/23.jpg)
Introduction to Final Project
Milestones:Project proposal / sketch○ Week 9 -- Saturday, April 26, 2014
Final lab & presentations○ Week 10 -- Saturday, May 3, 2014
![Page 24: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/24.jpg)
Introduction to 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.
![Page 25: Lesson 11](https://reader033.vdocuments.net/reader033/viewer/2022052820/54bc87914a7959e92c8b45bb/html5/thumbnails/25.jpg)
Introduction to Final Project
Begin work on Final Project
Introduce “Secret Website”