...

1. Build an App with Javascript & jQuery
June 2017
WIFI: TechSquare Labs
Pass: bu1ldsometh1ngb1g
http://bit.ly/thinkful-jquery-app
1

2. Instructor
TAs
Jake Askew
Recent Thinkful graduate
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
2

3. About you
What's your name?
Why do you want to learn JavaScript/jQuery?
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
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.
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
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
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
5

6. This is what we're making
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
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)
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
7

8. Quick HTML/CSS Refersher
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
8

9. Starter code walkthrough
http://bit.ly/tf-shopping-list
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
9

10. Think of our HTML as a "tree"
<form>
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
10
bit.ly/thinkful-jquery-app

11. What is Javascript? What is jQuery?
<input>
<ul>
shopping-list <button>
<li>
String
cheese
<li>
Summer
sausage
<li>
Chicken
nuggets
11
<div>
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app

12. "Grabbing" a section directly
$('.shopping-list')
jQuery always starts with this
Element to grab
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
12

13. jQuery walkthrough
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
13

14. Attaching an "Event Listener"
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
14

15. Real developers use Google... a lot
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
15

16. Let's work on the first step together
http://bit.ly/tf-shopping-list
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
16

17. Solution
Wi-Fi: TechSquare Labs
Pass:bu1ldsometh1ngb1g
bit.ly/thinkful-jquery-app
17

18. Ways to keep learning
More Structure
Less Structure
More SupportLess Support
18

19. 325+ mentors325+ mentors with an average of
10 years of experience10 years of experience in the
field
19

20. Support 'round the clock
Your Mentor
Q&A Sessions
Career Coach
In-person Workshops
Slack
Program Manager
YouYou
20

21. Our results
93%93%job-placement rate + job guarantee
Kaeside IwuagwuKaeside Iwuagwu
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-https://www.thinkful.com/bootcamp-jobs-
statsstats
Frontend Developer
Sierra GreggSierra Gregg
Software Engineer
JP EarnestJP Earnest
Web Developer
21

22. Trying Thinkful
Talk to me (or email jasjit@thinkful.com) if you'reTalk to me (or email jasjit@thinkful.com) if you're
interestedinterested
Get a free trial of Thinkful
with three mentor sessions
Starting with HTML/CSS/JS,
with option to continue to
full program
22