scwebd
3/6/2019 - 10:29 PM

day2

*@channel Resources for Areas of Weakness:*

*========== HTML/CSS: ==========*
*Unit 1 Video Guide* (HTML basics, CSS floats and positioning): https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-08-2019-U-C/blob/master/Video-Guides/Unit-1.md

*Unit 2 Video Guide* (Bootstrap layouts and media queries): https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-08-2019-U-C/blob/master/Video-Guides/Unit-2.md

*Media Query Tutorial:* https://www.tutorialrepublic.com/css-tutorial/css3-media-queries.php

*The CSS Box Model Explained by Living in a Boring Suburban Neighborhood:* https://www.freecodecamp.org/news/css-box-model-explained-by-living-in-a-boring-suburban-neighborhood-9a9e692773c1/

*Box-Sizing: The Secret to Simple CSS Layouts:* https://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

*A Complete Guide to Flexbox:* https://css-tricks.com/snippets/css/a-guide-to-flexbox/

*Flexbox Zombies:* https://mastery.games/p/flexbox-zombies


*========== JavaScript: ==========*
*Unit 3 Video Guide* (Conditionals, loops, Rock/Paper/Scissors, objects): https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-08-2019-U-C/blob/master/Video-Guides/Unit-3.md

*Drill the JS Basics w/the JavaScript Workbook:* https://javascript-workbook.netlify.com/

*JavaScript Array Methods:* https://www.w3schools.com/js/js_array_methods.asp

*Array Method Practice Activities:* https://github.com/lnchapin/arraymethods

*JavaScript String Methods:* https://www.w3schools.com/js/js_string_methods.asp

*JavaScript `document.` Methods and Properties* (ie `document.getElementById()`, etc): https://www.w3schools.com/jsref/dom_obj_document.asp

*JavaScript Functions — Understanding The Basics:* https://codeburst.io/javascript-functions-understanding-the-basics-207dbf42ed99

*JavaScript: A Basic Guide to Scope:* https://codeburst.io/javascript-a-basic-guide-to-scope-9682d57be6fc

*What You Should Already Know about JavaScript Scope:* https://spin.atomicobject.com/2014/10/20/javascript-scope-closures/

*Object-Oriented JavaScript for Beginners:* https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS


*========== jQuery: ==========*
*Unit 4 Video Guide* (HTML manipulation via jQuery, click events, Fridge Game, jQuery Calculator): https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-08-2019-U-C/blob/master/Video-Guides/Unit-4.md

*jQuery Event Types* (click, blur, keyup, mousedown, hover, change, etc):  https://api.jquery.com/category/events/

*jQuery Methods:* https://api.jquery.com/
*==== @channel Resources and Video Walkthroughs from Today's Class: ======================*

*Intro to Whiteboarding* (a great guide!!) https://coding-bootcamp-whiteboarding-algorithms.readthedocs-hosted.com/en/latest/

*JavaScript Arithmetic Operators* (like the modulus/remainder): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators

*Function Definitions vs Function Declarations:* https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

*A Tricky JavaScript Interview Question Asked by Google and Amazon:* https://medium.com/coderbyte/a-tricky-javascript-interview-question-asked-by-google-and-amazon-48d212890703

*Stopwatch Video Walkthrough:* https://www.youtube.com/watch?v=EGhF4iJSnl0

*FizzBuzz Video Walkthrough:* https://www.youtube.com/watch?v=oTart7fFefI

*Practice the JS Algorithms* (try to tackle 10-17 this week!) https://du.bootcampcontent.com/denver-coding-bootcamp/UDEN201902FSF4-FT/tree/master/Algorithms
*==== @channel Resources and Video Walkthroughs from Today's Class: ===============*

*Bubble-sort with Hungarian ("Csángó") folk dance:* https://www.youtube.com/watch?v=lyZQPjUT5B4

*Lego Bubble Sort:* https://www.youtube.com/watch?v=MtcrEhrt_K0

*Using While and Do...While Loops in JavaScript:* https://www.digitalocean.com/community/tutorials/using-while-and-do-while-loops-in-javascript

*VisuAlgo* (neat and helpful algorithm visualizations): https://visualgo.net/en/sorting

*RapidAPI Marketplace:* https://rapidapi.com/

*Bubble Sort Video Walkthrough:* https://www.youtube.com/watch?v=t-qAWbYMiUs
==== @channel Related Resources/Video Walkthroughs for Today’s Activities: ===================

What is the DOM (Document Object Model): https://css-tricks.com/dom/

What is the difference between undefined and not defined in JavaScript?: https://www.quora.com/What-is-the-difference-between-undefined-and-not-defined-in-JavaScript

Preventing cross-site scripting attacks when using innerHTML in vanilla JavaScript: https://gomakethings.com/preventing-cross-site-scripting-attacks-when-using-innerhtml-in-vanilla-javascript/

Securing jQuery against unintended XSS: https://blog.box.com/blog/securing-jquery-against-unintended-xss
(re: the two previous articles, maybe bookmark em for later... know for now that there are some security risks in using JavaScript’s .innerHTML and jQuery methods like .html, .append, etc)

JavaScript and jQuery Drink List Video Walkthrough: https://www.youtube.com/watch?v=9_9-NeU2L_U

jQuery Sandwich List Video Walkthrough: https://www.youtube.com/watch?v=6BLReDBUZRk

Lottery Generator Video Walkthrough (this is the “bonus” challenge we recommended you try, built on the ‘07-TriggerRandom’ solution): https://www.youtube.com/watch?v=Nh4wxhzePIs
(this is your ‘take-home’ challenge... we’ll code through it during morning office hours on Wednesday!)

Practice, Practice, Practice with the Weekly Algorithms (try to conquer 1-9 for now): https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-12-2019-U-C/tree/master/Algorithms

...Or the JavaScript Workbook, it you’d like to go back to basics: https://javascript-workbook.netlify.com/

jQuery Drink List Activity Coded Three Ways (JavaScript for loop, jQuery for loop, and jQuery forEach with streamlined syntax): https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-12-2019-U-C/blob/master/Class-Content/05-Third-Party-APIs/01-Activities/04-jQueryDrinkList/liveCodedJSJQDrinkList.html
==== @channel Related Resources and Fridge Game Video Walkthrough: ===================

Adding multiple attributes at once using jQuery’s `.attr()`: http://api.jquery.com/attr/#setting-several-attrs

JavaScript: A Basic Guide to Scope: https://codeburst.io/javascript-a-basic-guide-to-scope-9682d57be6fc

What You Should Already Know about JavaScript Scope: https://spin.atomicobject.com/2014/10/20/javascript-scope-closures/

jQuery Fridge Art Video Walkthrough: https://www.youtube.com/watch?v=gC529k3KzmE

Also attached is an updated Fridge Game solution using template literals and highly streamlined syntax…
==== @channel Related Resources/Video Walkthrough for Today’s Activities: ==================

Understanding jQuery Event Delegation (HINT: you’ll need this if you can’t get click events to work properly on dynamically-created jQuery elements): https://learn.jquery.com/events/event-delegation/

jQuery Event Delegation Example (with comments!): https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-12-2019-U-C/tree/master/Resources/jQuery/Event-Delegation-Example
(this is also available in the Resources folder in the class repo which you have cloned locally)

Understand JavaScript’s “this” With Clarity, and Master It (a bit of a deeper read, btw): https://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

jQuery .val() (use .val() to get the value of HTML form elements, like HINT HINT buttons): http://api.jquery.com/val/

Use parseInt() to convert a string into a number: https://www.w3schools.com/jsref/jsref_parseint.asp

JavaScript Comparison and Logical Operators (look into the !, &&, and || operators): https://www.w3schools.com/js/js_comparisons.asp

Feeling bored with if/else? Consider the JavaScript switch statement: https://www.w3schools.com/js/js_switch.asp

JavaScript return statements (you may want to use returns to break out of your functions if certain conditions apply): https://codeburst.io/javascript-what-is-the-return-statement-97d8b11a1a0c

jQuery Calculator Video Walkthrough: https://www.youtube.com/watch?v=yKE7016Ioxc&feature=youtu.be
==== @channel Resources and a Video Walkthrough from Today’s Class: ==============

HueCraft (Minecraft + Philips Hue): https://www.youtube.com/watch?v=ovYORLkO5bQ
(great example of using a hardware API)

GIPHY API Documentation: https://developers.giphy.com/docs/

JavaScript Reserved Keywords: https://www.w3schools.com/js/js_reserved.asp
(remember how our code broke when we tried to name a variable ‘location’?)

JSON.stringify(): https://www.w3schools.com/js/js_json_stringify.asp

event.preventDefault(): https://www.w3schools.com/jquery/event_preventdefault.asp

jQuery promises: .then() and .done() are not the same: https://makandracards.com/makandra/39543-jquery-promises-done-and-then-are-not-the-same

GIPHY API Basics Video Walkthrough: https://www.youtube.com/watch?v=Kp7Xy2LScLM

OpenWeatherMap API Tutorial: http://osp123.github.io/tutorials/html/weatherAPI.html
(may be helpful as you work on the AJAX/API homework over break!)

Remember to practice the weekly algorithms! https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-12-2019-U-C/tree/master/Algorithms

Want to practice the JS basics? Try the JavaScript Workbook: https://javascript-workbook.netlify.com/
==== @channel Resources and Video Walkthroughs from Today’s Class: ================

Adding multiple attributes at once using jQuery’s `.attr()`: http://api.jquery.com/attr/#setting-several-attrs

jQuery `.param()` (we used this in the NYTimes solution to build a query string from an object): http://api.jquery.com/jquery.param/

Button-Triggered AJAX Activity Video Walkthrough: https://www.youtube.com/watch?v=K1JDUkF94cs

Dynamic Element Generation with jQuery/AJAX Video Walkthrough: https://www.youtube.com/watch?v=UVBmX4cZkHY

NYTimes Article Search App Video Walkthrough (I know the solution is a little obtuse, but try to work through it alongside the video!): https://www.youtube.com/watch?v=QiIlhmeGYuk