This document outlines an agenda for a JavaScript crash course workshop to build a web application. The agenda includes introducing the instructor and Thinkful, reviewing key HTML/CSS concepts, walking through starter code for a shopping list application, teaching JavaScript and jQuery concepts, building the app together, reviewing solutions, and discussing next steps for learning web development. The workshop aims to help participants learn programming concepts through hands-on project work with support from mentors.

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