Lesson 11
Upcoming SlideShare
Loading in...5

Lesson 11






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Lesson 11 Lesson 11 Presentation Transcript

    • Front-End Web Development Lesson 11 Lab
    • 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 Demo Website GitHub
    • Mega Drop Down Plugin Self Paced Demo Website
    • 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”