Your SlideShare is downloading. ×
Lesson 12
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 12

100
views

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
100
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
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 12 Review & Refactor
  • 2. Agenda ● ● ● ● ● ● Refactor This Keyword Debugging Techniques Explore Plugins Lab: Personal Projects BCS National Championship
  • 3. The Road Ahead Remaining Topics: ● Responsive design ● HTML forms ● jQuery animation
  • 4. Refactor Making code more efficient without changing functionality.
  • 5. Refactor Purpose: ● to reduce or eliminate redundancy ● to make code easier to read ● to make code more manageable
  • 6. CSS Refactor ● ● ● ● ● Remove inline styling Replace repeated styles with classes Rename classes/ids for readability Organize CSS more ...
  • 7. CSS Refactor ● ● ● ● Group by section Order by precedence (tag selectors at top, id selectors at bottom) Create classes for large CSS changes in JS Remove unnecessary CSS
  • 8. JavaScript Refactor ● ● ● ● Use functions Use variables Use arrays more ...
  • 9. JavaScript Refactor ● ● Combine jQuery selectors Combine jQuery property changes into objects ○ ● .css, .attr, etc. Chain jQuery function calls
  • 10. Keyword: “This” jQuery: “this” refers to the selected object. toggleClass() example: $( "p" ).click(function() { $( this ).toggleClass( "highlight" ); });
  • 11. Keyword: “This” Advanced reading: The “this” keyword
  • 12. Debugging Why isn’t this working?
  • 13. Debugging Always start by defining the problem: ● “The image is not moving.” ● “None of my code works.”
  • 14. Debugging Always start by defining the problem: ● “The image is not moving.” ○ Find the code that makes the image move ● “None of my code works.” ○ Syntax error: check console
  • 15. Debugging: Level 1 Access debugging console in Chrome PC: CTRL + SHIFT + J Mac: COMMAND + OPTION + J Check for errors (red text, aligned right) in console
  • 16. Debugging: Level 2 So no red errors but not getting the right answer? Try console.log
  • 17. Debugging: Level 3 Homework: ● Chrome DevTools a. Debugging JavaScript
  • 18. Debugging: Level 4 Get help: ● Google search ● Access forums (Stack Overflow) ○ Clearly articulate the problem ○ Provide links or code examples
  • 19. Explore Plugins The jQuery Plugin Registry Search Registry: Cycle2 Google: Cycle2 plugin Google: Image Slider Using jQuery Cycle2 Plugin
  • 20. Code Along Image Slider Using jQuery Cycle2 Plugin
  • 21. Explore Plugins How to Add Carousel (Slider) to a Website Using Caroufredsel Getting Started with jQuery Masonry Creating a Parallax Scrolling Webpage Using Jarallax.js
  • 22. Lab: Personal Projects Milestones: 1. Project Proposal / Wireframes ○ Session 12 -- Monday, January 6, 2014 2. Some Coding with Pseudo Code ○ Session 14 -- Monday, January 13, 2014 3. First Draft ○ Session 16 -- Wednesday, January 22, 2014
  • 23. Lab: Personal Projects Target Dates: 1. Session 19 | Project Lab ○ Monday, February 3, 2014 2. Session 20 | Presentations ○ Wednesday, February 5, 2014