Deck 6-130-441

1. JavaScript Crash Course: Build a Web AppJavaScript Crash Course: Build a Web App
May 2018
WIFI: Deskhub-main
stakes2017!
bit.ly/js-app-sdbit.ly/js-app-sd
1

2. Instructor
TA
Amanda Pattridge
Bootcamp graduate
Web Developer @ Tech ow
bit.ly/js-app-sd
Wi : Deskhub-main
PW: stakes2017!
2

3. About you
What's your name?
Why do you want to learn JavaScript/jQuery?
What is your programming experience?
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
bit.ly/js-app-sd
Wi : Deskhub-main
PW: stakes2017!
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/js-app-sd
Wi : Deskhub-main
PW: stakes2017!
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/js-app-sd
Wi : Deskhub-main
PW: stakes2017!
5

6. This is what we're making:
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 6

7. Agenda
Go over starter code (10 min)
Learn key jQuery & JavaScript concepts (20 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 7

8. Quick HTML/CSS Refresher
8

9. Starter code walkthrough
http://bit.ly/tf-shopping-list
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
10

11. What is JavaScript? What is jQuery?
<input>
<ul>
shopping-list <button>
<li>
String
cheese
<li>
Summer
sausage
<li>
Chicken
nuggets
11
<div>

12. "Grabbing" a section directly
$('.shopping-list')
jQuery always starts with this
Element to grab
12

13. jQuery walkthrough
13

14. Attaching an "Event Listener"
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 14

15. Real developers use Google... a lot
15

16. Let's work on the rst step together
http://bit.ly/tf-shopping-list
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 16

17. Solution
http://bit.ly/tf-app-solution
17

18. 18

19. For aspiring developers...
Source: Bureau of Labor Statistics
19

20. 92%92%
of grads placed in full-time tech jobs
job guarantee
Link for the third party audit jobs report:
https://www.thinkful.com/outcomes
Thinkful's track record of getting students jobs
20

21. Our students receive unprecedented support
1-on-1 Learning Mentor
1-on-1 Career MentorProgram Manager
San Diego Community
You
21

22. 22

23. Thinkful's free course
75+ hours of curriculum for two weeks
HTML, CSS and JavaScript
Unlimited mentor-led Q&A sessions
Personal Program Manager
bit.ly/web-dev-freebit.ly/web-dev-free
Thinkful Coding Prep Course
$1500 FREE
23