7. This makes it a good place to start
• Has large community of developers, libraries and
frameworks
• Lots of job opportunities
• Also the syntax is easier to understand for first-time
developers
8. How the web works
Type a URL from a client (e.g. google.com)
Browser communicates with DNS server to
find IP address
Browser sends an HTTP request asking
for specific files
Browser receives those files and renders
them as a website
9. Clients / Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manage what app does
10. Are we learning frontend or backend?
100% of client-side web development is in Javascript.
You can also use Javascript to write server-side code
thanks to Node.js. So technically both!
11. What is jQuery?
• jQuery solves cross-browser issues with Javascript
• Javascript not designed for UI features, jQuery is
• At least 50% of all websites (in 2012) used jQuery
• jQuery is written in Javascript
12. A Quick Example
Changing background color of a “body” element. With
jQuery you’ll use a “$” before your line of code
Javascript
document.body.style.background = “red”
jQuery
$(body).css(‘background’, ‘red’)
13. Common uses of jQuery
• Animations
• UI interaction (i.e. change in appearance when user
hovers over a button)
• Form handling
• Loading data without a page refresh (Ajax)
18. “Grabbing” an element
First, select the element you’re looking to interact with
• Select using element type: $(“p”)
• Select using class: $(“.class”)
• Select using id’s: $(“#id”)
Full list here: https://api.jquery.com/category/selectors/
19. DOM traversal
First, select the element you’re looking to interact with.
Elements can have siblings, parents, and children
•$(“.shopping-list”).parent();
•$(“.shopping-list”).find(“li”);
20. DOM manipulation
Once you’ve targeted the correct element, you then want to
create some effect
•.addClass() adds a CSS class to selected elements
•.after() insert content after selected content
•.val() gets the value of the first matched element
(typically a form), or sets the value for that element
22. Events
Events let us create responses to user behavior. When we
add an event listener we specify the event to listen for and
write a “callback function” that runs when the event occurs
Example: https://jsbin.com/ciqade/edit
23. Special note: this
• this refers to the element targeted with an event. Often
used to refer to a button that was clicked
• Note that this can have other meanings, but that’s
beyond scope of tonight’s discussion
• Example: https://jsbin.com/zufere/2/edit
24. Event delegation
• Event delegation allows us to attach a single event
listener to a parent element that will fire for all
descendants matching a selector, whether those
descendants exist now or are added in the future.
• Example 1: https://jsbin.com/geheji/3/edit
• Example 2: https://jsbin.com/lecome/2/edit
25. Event Listener Drill #1
• Write jQuery code such that when a user clicks on one
of the thumbnail images, that image is displayed in the
full size image container at the top (no need to change
HTML or CSS)
• Code here: https://jsbin.com/beyefib/1/edit
26. Drill Walkthrough
Start by breaking problem down into achievable steps
• Step 1: ?
• Step 2: ?
• Step 3: ?
27. Drill Walkthrough
Start by breaking problem down into achievable steps
• Step 1: Add an event listener such that when a
thumbnail is clicked, a callback function runs
• Step 2: Get the URL for the image that was clicked
• Step 3: Set the URL for the top image
29. Event Listener Drill #2
• Use event listeners to detect when users click on a
lightbulb. When that happens, that bulb should turn on
(use the CSS class .bulb-on), and any other bulb that is
on should turn off. No need to change HTML CSS.
• Code here: https://jsbin.com/moyasum/1/edit
30. Drill #2 Walkthrough
•Step 1: Add an event listener such that when a lightbulb
is clicked, a callback function is run
•Step 2: Remove the relevant CSS class for all lightbulbs
•Step 3: Add the relevant CSS class for the clicked
lightbulb
Hint: Not sure how to remove a CSS class? Google
“jquery remove CSS class”
31. Take Home Challenge: Shopping List App
Create an application that allows users to add, check,
uncheck, and remove items from a shopping list
•https://github.com/Thinkful-Ed/shopping-list
•Live: https://thinkful-ed.github.io/shopping-list-solution/
32. Learning to learn
• Google is your friend!
• Practice at the edge of your abilities
• Ignore the hot new thing. Instead go deep with one
technology
33. More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility matters — learn anywhere, anytime
•Our incentives are aligned with our students
34. Our Program
You’ll learn concepts, practice with drills, and build
capstone projects — all guided by a personal mentor
35. Web Development Syllabus
• Frontend Development (HTML, CSS, Javascript)
• Backend Development (Node.js)
• Frontend Frameworks (React.js)
• Electives (Python, Ruby, Swift, Angular, UX)
• Computer Science Fundamentals
• Technical interviews + Career prep
38. Special Introductory Offer
• Two-week program, includes six mentor sessions for $50
• Starts with HTML/CSS/Javascript
• Option to continue into full web development bootcamp
• Talk to me (or email me) if you’re interested
