SlideShare a Scribd company logo
Build an App with Javascript & jQuery
September 2017
Wi-Fi Name: Cross Camp.us Events
http://bit.ly/jquery-la
Instructor
Tim Paik
Program Manager, Thinkful
Former Thinkful front end web
development student
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
About you
What's your name?
What's your goal?
What is your coding background?
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
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.
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
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
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
This is what we're making
it.ly/jquery-lahttp://b
http://bit.ly/jQueryDCFinal
Wi-Fi: Cross Camp.us Events
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)
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
Starter code
http://bit.ly/tf-shopping-list
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
Quick HTML/CSS Refresher
it.ly/jquery-lahttp://b
http://bit.ly/tf-html-refresher
Wi-Fi: Cross Camp.us Events
Starter code walkthrough
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
Think of our HTML as a "tree"
<div>
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
What is Javascript? What is jQuery?
<input>
<ul>
shopping-list <button>
<li>
String
cheese
<li>
Summer
sausage
<li>
Chicken
nuggets
<div>
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
"Grabbing" a section directly
$('.shopping-list')
jQuery always starts with this
Element to grab
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
jQuery walkthrough
it.ly/jquery-lahttp://b
http://bit.ly/tf-jquery-refresher
Wi-Fi: Cross Camp.us Events
Attaching an "Event Listener"
it.ly/jquery-lahttp://b
http://bit.ly/tf-jquery-events
Wi-Fi: Cross Camp.us Events
Real developers use Google... a lot
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
Let's work on the first step together
http://bit.ly/tf-shopping-list
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
Solution
it.ly/jquery-lahttp://bWi-Fi: Cross Camp.us Events
Ways to keep learning
For aspiring developers, bootcamps fill the gap
Source: Bureau of Labor Statistics
91%91%
job-placement rate + job guarantee
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats
Thinkful's track record of getting students jobs
Our students receive unprecedented support
1-on-1 Learning Mentor
1-on-1 Career MentorProgram Manager
Los Angeles Community
You
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
Thinkful Two-Week Trial
Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more
Two-week course with 6 mentor
sessions for $50 ($750 value)
Start with HTML, CSS and JavaScript
Option to continue with full bootcamp
Financing & scholarships available
Offer valid for one week after eventOffer valid for one week after event
BenjyBenjy SchechnerSchechner
Education Advisor

More Related Content

PDF
webapp 8/29
Thinkful
 
PDF
Build an App with JavaScript and jQuery - LA - July 27
Thinkful
 
PDF
Build a Web App with JavaScript & jQuery
Thinkful
 
PDF
Build an App with JavaScript and jQuery (DTLA, 06/21)
Thinkful
 
PDF
Build a Web App with JavaScript & jQuery
Thinkful
 
PDF
Build an App with JavaScript and jQuery - LA - July 18 Pasadena
Thinkful
 
PDF
Labuildwebsiteseptember5
Thinkful
 
PDF
first website la
Thinkful
 
webapp 8/29
Thinkful
 
Build an App with JavaScript and jQuery - LA - July 27
Thinkful
 
Build a Web App with JavaScript & jQuery
Thinkful
 
Build an App with JavaScript and jQuery (DTLA, 06/21)
Thinkful
 
Build a Web App with JavaScript & jQuery
Thinkful
 
Build an App with JavaScript and jQuery - LA - July 18 Pasadena
Thinkful
 
Labuildwebsiteseptember5
Thinkful
 
first website la
Thinkful
 

What's hot (20)

PDF
DC jQuery App
TJ Stalcup
 
PDF
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful
 
PDF
Jsjqwebapp.12.14.17
Thinkful
 
PDF
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
PDF
Build Your Own Website with HTML/CSS
Thinkful
 
PDF
Build Your Own Website with HTML/CSS - July - LA
Thinkful
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Justin Ezor
 
PDF
Intro to js august 31
Thinkful
 
PDF
Top 10 things a fresh programmer should know - Dao Ngoc Khanh
DevDay Da Nang
 
PDF
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
PDF
Professionalpresenationslideshow
Artie Edwards
 
PDF
Build a Game with JavaScript - Pasadena July
Thinkful
 
PDF
7 steps-to-migrate-your-seo-strategy robin-neyt
michael_wijs
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Deck 6-130-441
Justin Ezor
 
PDF
Intro to JavaScript - LA - July
Thinkful
 
PDF
Buildappjsjq9:12 sd
Thinkful
 
PDF
website la 11/28
Thinkful
 
PDF
Buildappjsjq10.30 SD
Thinkful
 
PPT
NHSPA Fall 2011 - Online
Matt Rasgorshek
 
DC jQuery App
TJ Stalcup
 
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful
 
Jsjqwebapp.12.14.17
Thinkful
 
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
Build Your Own Website with HTML/CSS
Thinkful
 
Build Your Own Website with HTML/CSS - July - LA
Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Justin Ezor
 
Intro to js august 31
Thinkful
 
Top 10 things a fresh programmer should know - Dao Ngoc Khanh
DevDay Da Nang
 
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
Professionalpresenationslideshow
Artie Edwards
 
Build a Game with JavaScript - Pasadena July
Thinkful
 
7 steps-to-migrate-your-seo-strategy robin-neyt
michael_wijs
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Deck 6-130-441
Justin Ezor
 
Intro to JavaScript - LA - July
Thinkful
 
Buildappjsjq9:12 sd
Thinkful
 
website la 11/28
Thinkful
 
Buildappjsjq10.30 SD
Thinkful
 
NHSPA Fall 2011 - Online
Matt Rasgorshek
 
Ad

Similar to Build a webapp la september 6 (17)

PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build a Web App with Javascript and Jquery 09/19
Ivy Rueb
 
PDF
Intro js-nov-7
Thinkful
 
PDF
Intro js-la-12-18
Thinkful
 
PDF
Intro to js september 19
Thinkful
 
PDF
Deck 6-80
Ivy Rueb
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41(1)
Thinkful
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Justin Ezor
 
PDF
Build a game la september 7
Thinkful
 
PDF
Intro js-la-jan-4
Thinkful
 
PDF
Deck 6-80-140-196-213-271-321-364-438 (1)
Justin Ezor
 
PDF
Deck 6-80-140-196-213-271-321-364-413
Justin Ezor
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-31(1)
Thinkful
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-106
Thinkful
 
PDF
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
PDF
Intro to JavaScript: Build a Web App
Justin Ezor
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build a Web App with Javascript and Jquery 09/19
Ivy Rueb
 
Intro js-nov-7
Thinkful
 
Intro js-la-12-18
Thinkful
 
Intro to js september 19
Thinkful
 
Deck 6-80
Ivy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41(1)
Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Justin Ezor
 
Build a game la september 7
Thinkful
 
Intro js-la-jan-4
Thinkful
 
Deck 6-80-140-196-213-271-321-364-438 (1)
Justin Ezor
 
Deck 6-80-140-196-213-271-321-364-413
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-31(1)
Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-106
Thinkful
 
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
Intro to JavaScript: Build a Web App
Justin Ezor
 
Ad

More from Thinkful (20)

PDF
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
Thinkful
 
PDF
LA 1/31/18 Intro to JavaScript: Fundamentals
Thinkful
 
PDF
LA 1/31/18 Intro to JavaScript: Fundamentals
Thinkful
 
PDF
Itjsf129
Thinkful
 
PDF
Twit botsd1.30.18
Thinkful
 
PDF
Build your-own-instagram-filters-with-javascript-202-335 (1)
Thinkful
 
PDF
Baggwjs124
Thinkful
 
PDF
Become a Data Scientist: A Thinkful Info Session
Thinkful
 
PDF
Vpet sd-1.25.18
Thinkful
 
PDF
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
Thinkful
 
PDF
How to Choose a Programming Language
Thinkful
 
PDF
Batbwjs117
Thinkful
 
PDF
1/16/18 Intro to JS Workshop
Thinkful
 
PDF
LA 1/16/18 Intro to Javascript: Fundamentals
Thinkful
 
PDF
(LA 1/16/18) Intro to JavaScript: Fundamentals
Thinkful
 
PDF
Websitesd1.15.17.
Thinkful
 
PDF
Bavpwjs110
Thinkful
 
PDF
Byowwhc110
Thinkful
 
PDF
Getting started-jan-9-2018
Thinkful
 
PDF
Introjs1.9.18tf
Thinkful
 
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
Thinkful
 
LA 1/31/18 Intro to JavaScript: Fundamentals
Thinkful
 
LA 1/31/18 Intro to JavaScript: Fundamentals
Thinkful
 
Itjsf129
Thinkful
 
Twit botsd1.30.18
Thinkful
 
Build your-own-instagram-filters-with-javascript-202-335 (1)
Thinkful
 
Baggwjs124
Thinkful
 
Become a Data Scientist: A Thinkful Info Session
Thinkful
 
Vpet sd-1.25.18
Thinkful
 
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
Thinkful
 
How to Choose a Programming Language
Thinkful
 
Batbwjs117
Thinkful
 
1/16/18 Intro to JS Workshop
Thinkful
 
LA 1/16/18 Intro to Javascript: Fundamentals
Thinkful
 
(LA 1/16/18) Intro to JavaScript: Fundamentals
Thinkful
 
Websitesd1.15.17.
Thinkful
 
Bavpwjs110
Thinkful
 
Byowwhc110
Thinkful
 
Getting started-jan-9-2018
Thinkful
 
Introjs1.9.18tf
Thinkful
 

Recently uploaded (20)

PDF
The Future of Artificial Intelligence (AI)
Mukul
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PDF
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
PDF
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
PPTX
IT Runs Better with ThousandEyes AI-driven Assurance
ThousandEyes
 
PDF
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
PDF
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PPTX
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
PPTX
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PPTX
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
PDF
Doc9.....................................
SofiaCollazos
 
PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
The Future of Artificial Intelligence (AI)
Mukul
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
IT Runs Better with ThousandEyes AI-driven Assurance
ThousandEyes
 
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
Doc9.....................................
SofiaCollazos
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 

Build a webapp la september 6