2. About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
3. About us
Thinkful prepares students for web development & data
science jobs with 1-on-1 mentorship programs
4. About you
• A lot of experience
• A little experience
• No experience
5. Key Topics
• HTML/CSS Live Editing
• Mobile & responsive testing
• Editing with “Sources”
• Using the console
• Javascript Debugging
• Network performance
6. Setup — Download Chrome
• Standard for developers (Google!)
• Simple & polished
• Mobile & Desktop
• Firefox & Safari are OK
• Avoid Internet Explorer!
8. How do I open DevTools?
• Go to a page in Chrome
• Right Click => Inspect
• Also — Cmd + Shift + I
9. What are the benefits?
• Inspect Document Object Model (DOM)
• Update HTML/CSS in real-time
• Test responsive and mobile friendliness
• Run Javascript in console
• Test & debug Javascript
• Measure & improve performance
11. Typical Workflow
• This style (or code) isn’t working!
• Open HTML/CSS/Javascript
• Guess where the problem is
• Make change
• Save change
• Refresh page
• Did it work?
12. Workflow with DevTools
• This style (or code) isn’t working!
• Open DevTools (“Inspect”)
• Make change
• Did it work?
26. Load times are important!
• Yahoo: reducing page load by .4 seconds increased
traffic by 9%
• Google: increasing page load times from .4 to .9
seconds decreased traffic by 20%
• Amazon: every .1 second increase in load time
decreases sales by 1%
27. Network Features
• Test load times
• Throttle to different speeds
• See which files are cached or not
• See which files are causing slowdowns
• See file download sequence
• Google PageSpeed!
28. Network Challenge
• Go to https://dream-walker.herokuapp.com/
• What is page load time?
• What files are causing slowdowns?
• What do you recommend as a fix?
30. 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
•We only make money when you get a job
31. Our Program
You’ll learn concepts, practice with drills, and build
capstone projects — all guided by a personal mentor