Deck 6-80-140-196-213-271-321-364-438 (1)

1. Intro to JavaScript: Build a Web AppIntro to JavaScript: Build a Web App
April 2018
WIFI: CrossCamp.us MembersWIFI: CrossCamp.us Members
Pass: innovate
bit.ly/web-app-la
Interactive Slides: bit.ly/la-slides-42418Interactive Slides: bit.ly/la-slides-42418
1

2. Instructor
Skyler Benge
Thinkful Web Dev Mentor
Lead Shopify Developer @
Fashion Nova
TAs
bit.ly/web-app-la
Justin Ezor
Thinkful Community Manager
Web developer
2

3. About you
What's your name?
What brought you here today?
What is your programming experience?
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.
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
bit.ly/web-app-la
5

6. This is what we're making
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)
bit.ly/web-app-la
7

8. Starter code walkthrough
bit.ly/web-app-la
https://bit.ly/tf-shopping-list
8

9. Quick HTML/CSS Refresher
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
bit.ly/web-app-la
10

11. What is JavaScript? What is jQuery?
<input>
<ul>
shopping-list <button>
<li>
String
cheese
<li>
Summer
sausage
<li>
Chicken
nuggets
11
<form>
bit.ly/web-app-la

12. "Grabbing" a section directly
$('.shopping-list')
jQuery always starts with this
Element to grab
bit.ly/web-app-la
12

13. jQuery walkthrough
bit.ly/web-app-la
13

14. Attaching an "Event Listener"
bit.ly/web-app-la
14

15. Real developers use Google... a lot
bit.ly/web-app-la
15

16. Let's work on the first step together
bit.ly/web-app-la
https://bit.ly/tf-shopping-list
16

17. Solution
bit.ly/web-app-la
17

18. Ways to keep learning
18

19. 1-on-1 mentorship enables flexible learning
Learn anywhere,
anytime, and at your
own schedule
You don't have to quit
your job to start career
transition
19

20. Our students receive unprecedented support
Learning Mentor
Career MentorProgram Manager
Local Community
You
20

21. 90%90%
job-placement rate in tech careers
Link for the third party audit jobs report:
https://thinkful.com/bootcamp-jobs-stats
Thinkful's track record of getting students jobs
21

22. LA Hiring Partners
22

23. Thinkful's free resource
HTML, CSS and JavaScript
Unlimited mentor-led Q&A sessions
Personal Program Manager to help you
set goals and navigate resources
Slack channel with our mentors and
students
Data Science: bit.ly/ds-free-la
bit.ly/web-free-labit.ly/web-free-la
23