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

76

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

×