SlideShare a Scribd company logo
1 of 34
Download to read offline
Getting Started with Dev Tools
March 2017
http://bit.ly/tf-dev-tools
About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
About us
Thinkful prepares students for web development & data
science jobs with 1-on-1 mentorship programs
About you
• A lot of experience
• A little experience
• No experience
Key Topics
• HTML/CSS Live Editing
• Mobile & responsive testing
• Editing with “Sources”
• Using the console
• Javascript Debugging
• Network performance
Setup — Download Chrome
• Standard for developers (Google!)
• Simple & polished
• Mobile & Desktop
• Firefox & Safari are OK
• Avoid Internet Explorer!
What are DevTools?
How do I open DevTools?
• Go to a page in Chrome
• Right Click => Inspect
• Also — Cmd + Shift + I
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
Why live editing for HTML/CSS?
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?
Workflow with DevTools
• This style (or code) isn’t working!
• Open DevTools (“Inspect”)
• Make change
• Did it work?
What am I looking at?
DOM Styles
Live Editing HTML
• Inspect element
• Expand/Collapse
• Edit HTML
• Add attributes
• Click & drag
• Delete
Challenge
• Go to facebook.com
• Change your name to a friend’s name
• Try and change picture
Live Editing CSS
• See computed CSS styles
• CSS for states
• Add CSS properties
• Modify CSS properties
• Remove CSS properties
• Links to CSS source files
Challenge
• Change background to your favorite color
• Add a fun border to the post button
• Delete Newsfeed (advanced)
Sources Features
• Prettify
• Persistent changes
• Local modifications
• Revert
• Save As
Mobile Demo
• Responsive sizes
• Device
• Frame
• Media queries
• Rotate
Console Features
• Interact with page in real-time using Javascript
Console Demo
• Basic JS commands
• Grab/manipulate element
• Quick scrape
Challenge
• Go to https://dream-walker.herokuapp.com/
• Change the title using Javascript in the console
Javascript Debugging is Pain
Debugging Features
• See where Javascript is failing
• Inspect variables
• Step through code slowly
Debugging Demo
• http://samplerdj.com
• Add breakpoint (+ step through)
• Inspect variables
• Pause on caught & uncaught exceptions
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%
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!
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?
Advanced Topics
• CPU profiling
• Memory profiling
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
Our Program
You’ll learn concepts, practice with drills, and build
capstone projects — all guided by a personal mentor
Our Mentors
Mentors have, on average, 10+ years of experience
Web Development Syllabus
• Frontend Development (HTML, CSS, Javascript)
• Frontend “Frameworks” (React.js)
• Backend Development (Node.js)
• Electives (Python, Ruby, Swift, Angular, UX)
• Computer Science Fundamentals
• Technical interviews + Career prep
October 2015
Questions?
jas@thinkful.com
schedule a call through thinkful.com

More Related Content

What's hot

What's hot (20)

Gatsby intro
Gatsby introGatsby intro
Gatsby intro
 
Designing for Growth, Academy Xi
Designing for Growth, Academy XiDesigning for Growth, Academy Xi
Designing for Growth, Academy Xi
 
WordPress Optimization - Pubcon Las Vegas 2014
WordPress Optimization - Pubcon Las Vegas 2014WordPress Optimization - Pubcon Las Vegas 2014
WordPress Optimization - Pubcon Las Vegas 2014
 
Untangling - fall2017 - week 7
Untangling - fall2017 - week 7Untangling - fall2017 - week 7
Untangling - fall2017 - week 7
 
Why Blogs Are Better
Why Blogs Are BetterWhy Blogs Are Better
Why Blogs Are Better
 
11 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 201411 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 2014
 
Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012
 
Untangling spring week10
Untangling spring week10Untangling spring week10
Untangling spring week10
 
State of the Web
State of the WebState of the Web
State of the Web
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today
 
Secrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LASecrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LA
 
Food blogging at UBC
Food blogging at UBCFood blogging at UBC
Food blogging at UBC
 
Migrate PHP E-Commerce Site to Go
Migrate PHP E-Commerce Site to GoMigrate PHP E-Commerce Site to Go
Migrate PHP E-Commerce Site to Go
 
SEO Tune Up: Technical and Performance
SEO Tune Up: Technical and PerformanceSEO Tune Up: Technical and Performance
SEO Tune Up: Technical and Performance
 
Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016
 
Single page applications the basics
Single page applications the basicsSingle page applications the basics
Single page applications the basics
 
Building a real time html5 app for mobile devices
Building a real time html5 app for mobile devicesBuilding a real time html5 app for mobile devices
Building a real time html5 app for mobile devices
 
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET Developer
 
Azue Webjobs
Azue WebjobsAzue Webjobs
Azue Webjobs
 
Life in the Fast Lane: Speed, Usability & Search Engine Optimization
Life in the Fast Lane: Speed, Usability & Search Engine OptimizationLife in the Fast Lane: Speed, Usability & Search Engine Optimization
Life in the Fast Lane: Speed, Usability & Search Engine Optimization
 

Similar to Getting started with dev tools (atl)

John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
Jia Mi
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
Raj Subramanian - Mobile Web Testing
Raj Subramanian - Mobile Web TestingRaj Subramanian - Mobile Web Testing
Raj Subramanian - Mobile Web Testing
QA or the Highway
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquerySpsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
Marijn Somers
 

Similar to Getting started with dev tools (atl) (20)

John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery Mobile
 
Greenfield Java 2013
Greenfield Java 2013Greenfield Java 2013
Greenfield Java 2013
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
Why use Go for web development?
Why use Go for web development?Why use Go for web development?
Why use Go for web development?
 
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
.NET executable requirements
.NET executable requirements.NET executable requirements
.NET executable requirements
 
Creating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCreating a Responsive Website From Scratch
Creating a Responsive Website From Scratch
 
Automated Visual Regression Testing by Dave Sadlon
Automated Visual Regression Testing by Dave SadlonAutomated Visual Regression Testing by Dave Sadlon
Automated Visual Regression Testing by Dave Sadlon
 
Lean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill AyersLean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill Ayers
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
 
Introduction To Web Application Testing
Introduction To Web Application TestingIntroduction To Web Application Testing
Introduction To Web Application Testing
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 
A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
Raj Subramanian - Mobile Web Testing
Raj Subramanian - Mobile Web TestingRaj Subramanian - Mobile Web Testing
Raj Subramanian - Mobile Web Testing
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquerySpsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
 

More from Thinkful

LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: Fundamentals
Thinkful
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018
Thinkful
 

More from Thinkful (20)

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

Recently uploaded

Contoh Aksi Nyata Refleksi Diri ( NUR ).pdf
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdfContoh Aksi Nyata Refleksi Diri ( NUR ).pdf
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdf
cupulin
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
EADTU
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
Peter Brusilovsky
 
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lessonQUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
httgc7rh9c
 
Orientation Canvas Course Presentation.pdf
Orientation Canvas Course Presentation.pdfOrientation Canvas Course Presentation.pdf
Orientation Canvas Course Presentation.pdf
Elizabeth Walsh
 

Recently uploaded (20)

HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdf
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdfContoh Aksi Nyata Refleksi Diri ( NUR ).pdf
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdf
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
dusjagr & nano talk on open tools for agriculture research and learning
dusjagr & nano talk on open tools for agriculture research and learningdusjagr & nano talk on open tools for agriculture research and learning
dusjagr & nano talk on open tools for agriculture research and learning
 
Observing-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxObserving-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptx
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfRich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
 
Ernest Hemingway's For Whom the Bell Tolls
Ernest Hemingway's For Whom the Bell TollsErnest Hemingway's For Whom the Bell Tolls
Ernest Hemingway's For Whom the Bell Tolls
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUMDEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
 
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lessonQUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
 
UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Orientation Canvas Course Presentation.pdf
Orientation Canvas Course Presentation.pdfOrientation Canvas Course Presentation.pdf
Orientation Canvas Course Presentation.pdf
 
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdfDiuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
Michaelis Menten Equation and Estimation Of Vmax and Tmax.pptx
Michaelis Menten Equation and Estimation Of Vmax and Tmax.pptxMichaelis Menten Equation and Estimation Of Vmax and Tmax.pptx
Michaelis Menten Equation and Estimation Of Vmax and Tmax.pptx
 

Getting started with dev tools (atl)

  • 1. Getting Started with Dev Tools March 2017 http://bit.ly/tf-dev-tools
  • 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
  • 10. Why live editing for HTML/CSS?
  • 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?
  • 13. What am I looking at? DOM Styles
  • 14. Live Editing HTML • Inspect element • Expand/Collapse • Edit HTML • Add attributes • Click & drag • Delete
  • 15. Challenge • Go to facebook.com • Change your name to a friend’s name • Try and change picture
  • 16. Live Editing CSS • See computed CSS styles • CSS for states • Add CSS properties • Modify CSS properties • Remove CSS properties • Links to CSS source files
  • 17. Challenge • Change background to your favorite color • Add a fun border to the post button • Delete Newsfeed (advanced)
  • 18. Sources Features • Prettify • Persistent changes • Local modifications • Revert • Save As
  • 19. Mobile Demo • Responsive sizes • Device • Frame • Media queries • Rotate
  • 20. Console Features • Interact with page in real-time using Javascript
  • 21. Console Demo • Basic JS commands • Grab/manipulate element • Quick scrape
  • 22. Challenge • Go to https://dream-walker.herokuapp.com/ • Change the title using Javascript in the console
  • 24. Debugging Features • See where Javascript is failing • Inspect variables • Step through code slowly
  • 25. Debugging Demo • http://samplerdj.com • Add breakpoint (+ step through) • Inspect variables • Pause on caught & uncaught exceptions
  • 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?
  • 29. Advanced Topics • CPU profiling • Memory profiling
  • 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
  • 32. Our Mentors Mentors have, on average, 10+ years of experience
  • 33. Web Development Syllabus • Frontend Development (HTML, CSS, Javascript) • Frontend “Frameworks” (React.js) • Backend Development (Node.js) • Electives (Python, Ruby, Swift, Angular, UX) • Computer Science Fundamentals • Technical interviews + Career prep