Build an App with JavaScript and jQuery - LA - July 18 Pasadena
- 1. Build an App with Javascript & jQuery July 2017 WIFI: CrossCamp.us Events bit.ly/web-app-la 1
- 2. Instructor TAs Steve Martin Thinkful student Broadcast Supervisor 89.3 KPCC CrossCamp.us Events bit.ly/web-app-la 2
- 3. About you What's your name? What is your programming experience? Why do you want to learn JavaScript/jQuery? http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L CrossCamp.us Events bit.ly/web-app-la 3
- 4. About Thinkful Thinkful helps people become developers or data scientists through one-on-one mentorship and project-based learning These workshops are built using this approach. CrossCamp.us Events bit.ly/web-app-la 4
- 5. Suggestions for learning Don't treat this as a drill, we're making something real Don't get discouraged, struggle leads to mastery Don't be shy, take full advantage of our support CrossCamp.us Events bit.ly/web-app-la 5
- 6. This is what we're making http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L CrossCamp.us Events bit.ly/web-app-la 6
- 7. Agenda Go over starter code (10 min) Learn key jQuery & Javascript concepts (30 min) Build your app! (30 min) Go over solutions (10 min) Next steps (10 min) http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L CrossCamp.us Events bit.ly/web-app-la 7
- 8. Quick HTML/CSS Refersher CrossCamp.us Events bit.ly/web-app-la 8
- 9. Starter code walkthrough http://bit.ly/tf-shopping-list CrossCamp.us Events bit.ly/web-app-la 9
- 10. Think of our HTML as a "tree" <form> list-content <input> item-input <ul> shopping-list <button> add-item CrossCamp.us Events 10 bit.ly/web-app-la
- 11. What is Javascript? What is jQuery? <input> <ul> shopping-list <button> <li> String cheese <li> Summer sausage <li> Chicken nuggets 11 <div> CrossCamp.us Events bit.ly/web-app-la
- 12. "Grabbing" a section directly $('.shopping-list') jQuery always starts with this Element to grab CrossCamp.us Events bit.ly/web-app-la 12
- 13. jQuery walkthrough CrossCamp.us Events bit.ly/web-app-la 13
- 14. Attaching an "Event Listener" http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L CrossCamp.us Events bit.ly/web-app-la 14
- 15. Real developers use Google... a lot CrossCamp.us Events bit.ly/web-app-la 15
- 16. Let's work on the first step together http://bit.ly/tf-shopping-list http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L CrossCamp.us Events bit.ly/web-app-la 16
- 18. Ways to keep learning More Structure Less Structure More SupportLess Support 18
- 19. Our instructors help us write, teach, andOur instructors help us write, teach, and improve workshops & our curriculumimprove workshops & our curriculum 19
- 20. Career prep and job-placement Liz Stephanie Our career services team has helped 93% of our grads begin jobs at companies like: 20
- 21. Take a Thinkful tour! Talk to one of us to set something up ! Take a look through Thinkful's student platform to see if project-based, online learning is a good fit for you " While we're at it, give us feedback on tonight's workshop. 21