Lesson 11
-
Upload
babong -
Category
Technology
-
view
67 -
download
4
description
Transcript of Lesson 11
Front-EndWeb Development
Lesson 11Lab
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
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
Agenda (proposed)
● Lab (The Memory Game) (180 minutes)○ Pseudo Code (start game, reset game, etc.)○ JavaScript (code the application)
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.
Agenda (proposed)
● 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.
AnythingSlider Plugin
Code Along
DemoWebsiteGitHub
Mega Drop Down Plugin
Self Paced
DemoWebsite
Lab
Build out Divided Times using …
Anything Slider
jQuery Mega Drop Down Menu
Introduction to Final Project
Description:● Design and build a website of your choice
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
Introduction to Final Project
Remaining Topics:● Responsive design● HTML forms● jQuery animation● ?? parallax scrolling / single page website??
Introduction to Final Project
Core Requirements (HTML5):● HTML5 structural elements
○ header, footer, nav, etc.● Include classes and IDs● Additional tags, as appropriate
Introduction to Final Project
Core Requirements (CSS):● Demonstrate fonts and color● Demonstrate floats and the box model● External CSS
Introduction to Final Project
Core Requirements (Interactive):● Use JavaScript / jQuery events to add
interactivity● External scripts
Introduction to Final Project
Deliverables:● Project folder with HTML, CSS,
JavaScript/jQuery and assets● Hosted on GA server
Introduction to Final Project
Best Practices:● Clean and readable code● Search Engine Optimization (SEO)● Avoid deprecated tags
Introduction to Final Project
Grading:● A project is considered satisfactory if it
meets all core requirements and milestones
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
Introduction to Final Project
Milestones:Project proposal / sketch○ Week 9 -- Saturday, April 26, 2014
Final lab & presentations○ Week 10 -- Saturday, May 3, 2014
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.
Introduction to Final Project
Begin work on Final Project
Introduce “Secret Website”