This course will take your web development career to the next level πŸ“ˆ by turning you into a performance expert

Carry out performance audits on real websites

Videos each month

Videos each week
Started 1st May 2017

An in-depth video course to understand front-end performance & modern web dev workflows

  • Forced reflow in devtools

    Build Lightning Fast Websites

    Performance debugging for the modern web is more than minifying code. Boost your front-end skill set with advanced performance insights.

    Develop in the Browser

    DevTools as an IDE. Keep your development workflow completely in the browser and avoid constant page refreshing.

  • Progressive Web Apps

    Delight your users with an offline-first, secure, & bug-free experience. Through this course, you will test on real-world device conditions.

    Full Stack Web Dev

    Learn back-end development & debugging techniques with Node.js, whether it's third-party code, or your own.

    Node.js debugging

Testimonials

  • Addy Osmani

    Umar is a leading community authority on the Chrome DevTools. His productivity tips and bleeding-edge insights are consistently A+ and I've definitely learned some tips and tricks from him that I use in my daily workflow.

    Umar is a leading community authority on the Chrome DevTools. His productivity tips and bleeding-edge insights are consistently A+ and I've definitely learned some tips and tricks from him that I use in my daily workflow.

    Addy Osmani - Engineer at Google

  • Wes Bos

    I've been following Umar's dev tools tips for the past 3 years and whenever I start to think I've got a handle on things, he reveals another hidden gem I had absolutely no idea about. Buy this course right now - you don't know what you are missing out on!

    I've been following Umar's dev tools tips for the past 3 years and whenever I start to think I've got a handle on things, he reveals another hidden gem I had absolutely no idea about. Buy this course right now - you don't know what you are missing out on!

    Wes Bos - Developer and Entrepreneur

  • Sara Soueidan

    Umar has always been the most prominent figure in our industry when it comes to exposing the powers of the Chrome Devtools, and his collection of tips have been my single reference and β€œsource of truth” when it comes to learning about how I can improve and speed up my workflow using the different devtool features. Since the first day I followed him, I’ve learned more about what I can do with devtools than I ever thought was even possible. He has been sharing literally the most extensive and most useful tips that I’d never seen anywhere before. It’s always been like getting insider access to features as soon as they landed. If you care the slightest bit about improving your everyday dev workflow and getting not only better but also faster and more efficient at what you do, then I highly recommend taking his course. I can’t think of anyone else I’d trust to have the latest and greatest on this topic than him. Don’t miss out on what he has to offer. It'll be 100% worth it.

    Umar has always been the most prominent figure in our industry when it comes to exposing the powers of the Chrome Devtools, and his collection of tips have been my single reference and β€œsource of truth” when it comes to learning about how I can improve and speed up my workflow using the different devtool features. Since the first day I followed him, I’ve learned more about what I can do with devtools than I ever thought was even possible. He has been sharing literally the most extensive and most useful tips that I’d never seen anywhere before. It’s always been like getting insider access to features as soon as they landed. If you care the slightest bit about improving your everyday dev workflow and getting not only better but also faster and more efficient at what you do, then I highly recommend taking his course. I can’t think of anyone else I’d trust to have the latest and greatest on this topic than him. Don’t miss out on what he has to offer. It'll be 100% worth it.

    Sara Soueidan - Freelance front-end Web developer & speaker.

  • Mathias Bynens

    Umar consistently manages to distill complex and powerful functionality into easy-to-understand examples β€” be it in video, GIF, or written tutorial form. His unique style of knowledge-spreading makes it possible to learn *a ton* in very little time. Everything he creates has my implicit stamp of approval. πŸ’―

    Umar consistently manages to distill complex and powerful functionality into easy-to-understand examples β€” be it in video, GIF, or written tutorial form. His unique style of knowledge-spreading makes it possible to learn *a ton* in very little time. Everything he creates has my implicit stamp of approval. πŸ’―

    Mathias Bynens - Web standards enthusiast

  • Sarah Drasner

    Being an excellent programmer is not only about writing, it's about adjusting, monitoring, and debugging. Developer tools help us understand what is happening in the browser so we can write well-functioning code. I trust Umar Hansa to not only have the most complete information about current devtools, but also devtools that are going to be released in the future. I've saved countless hours debugging and improved my benchmarks thanks to his extremely easy-to-understand explanations. I'm excited about his course because every minute I spend learning from Umar, pays back in dividends while I work.

    Being an excellent programmer is not only about writing, it's about adjusting, monitoring, and debugging. Developer tools help us understand what is happening in the browser so we can write well-functioning code. I trust Umar Hansa to not only have the most complete information about current devtools, but also devtools that are going to be released in the future. I've saved countless hours debugging and improved my benchmarks thanks to his extremely easy-to-understand explanations. I'm excited about his course because every minute I spend learning from Umar, pays back in dividends while I work.

    Sarah Drasner - Award-winning speaker. Consultant. Writer.

  • Paul Bakaus

    If you care about better tooling, you want to watch this video series. Trust me on this. Umar is the real deal.

    If you care about better tooling, you want to watch this video series. Trust me on this. Umar is the real deal.

    Paul Bakaus - Open Web Developer Advocate at Google

  • Paul Irish

    Umar is, without a doubt, one of the foremost experts on browser devtools. I've been at Chrome working on DevTools for years, and yet, the DevTools team, myself included, learn new things about our own product from Umar regularly. :) Don't hesitate on this page, improving your effectiveness with these tools will transform your productivity and enjoyment of building for the web.

    Umar is, without a doubt, one of the foremost experts on browser devtools. I've been at Chrome working on DevTools for years, and yet, the DevTools team, myself included, learn new things about our own product from Umar regularly. :) Don't hesitate on this page, improving your effectiveness with these tools will transform your productivity and enjoyment of building for the web.

    Paul Irish - PM, Developer Tooling, Google Chrome

  • ⚑Performance Debugging
  • πŸ’»DevTools as an IDE
  • β™»Service Workers
  • πŸ”’Front End Security

And much more, see below

Sign up for updates

  • Flame chart in DevTools

    Finally understand the flame chart!

  • Using DevTools as an IDE

    Use DevTools as an IDE

  • Audit other websites

    Performance Audit production websites

  • Memory leaks

    Catch memory leaks before your users do

  • Debug node.js from DevTools

    Write & debug Node.js directly from DevTools

What you get

Your purchase includes access to all videos, including those already released. You can access all video and text content from your account dashboard.

  • 150+ mins of video
  • 70+ mins of reading material
  • 4 real world performance audits
  • 3 real world accessibility audits

Current video listing

  • Image Performance on the Web

    #1 - Image Performance on the Web   πŸ•™   20:14

  • Visualise JavaScript performance metrics

    #2 - Visualise JavaScript performance metrics   πŸ•™   19:33

  • Handling JS performance metrics

    #3 - Handling JS performance metrics   πŸ•™   30:00

  • Identifying paint costs

    #4 - Identifying paint costs   πŸ•™   14:57

  • A browser frame

    #5 - A browser frame   πŸ•™   15:21

  • Node CLI debugging

    #6 - Node CLI debugging   πŸ•™   08:02

  • Script Execution Cost

    #7 - Script Execution Cost   πŸ•™   11:32

  • JavaScript Debugging

    #8 - JavaScript Debugging   πŸ•™   18:32

  • JavaScript Profiling

    #9 - JavaScript Profiling   πŸ•™   15:44

  • JavaScript profiling: Gulp Edition (also applies to webpack)

    #10 - JavaScript profiling: Gulp Edition (also applies to webpack)   πŸ•™   17:01

  • A YouTube performance issue

    #11 - A YouTube performance issue   πŸ•™   13:25

  • A modern authoring workflow

    #12 - A modern authoring workflow   πŸ•™   11:49

Purchase

Discover cutting edge web development techniques each week

Single User

$ 93 Regular price: $159

  • πŸ—“ Videos started: 1st May 2017
  • πŸ“Ί Stream videos to all devices
  • πŸ“— Reading material to accompany videos
  • πŸ” Real performance & accessibility audits
  • βœ… Full course access (including all past videos)
Buy - $93

One-time payment - full course access

Team license

$ 517 Regular price: $689

  • πŸ‘ͺ Course access for 10 users
  • πŸ‘©β€πŸ’» All single user features
Team license - $517

One-time payment - full course access

What you will learn

  • Learn new performance tips & tricks
  • Use DevTools as your IDE
  • How to Performance Audit popular websites
  • JavaScript Unit Tests - Writing and Debugging with DevTools
  • Carry out accessibility audits and ensure your website is accessible to all
  • Debug JavaScript errors in production
  • Learn about and debug ES2016/ES2017 with DevTools
  • Implementing and debugging Service Workers
  • Brand new DevTools experiments and how they work
  • Fix memory leaks
  • Understand and improve your website security with the Security Panel

About the author

Hi, I'm Umar. I'm a big fan of modern developer tooling and I'm excited to teach you everything I know on the subject.

Umar Hansa speaking at a conference

DevTools Related

I'm passionate about DevTools, here are some things I've done related to it:

Other

I was previously at Shazam for 5 years where I was fortunate enough to get to work on interesting projects from browser automation, to recreating music recognition using web technologies. I'm currently live in London, and work as a web developer at Sitepen.

I've also been a Google Developer Expert for 5 years mainly focused on web development.

FAQs

  • Q: Who is this course for?

    A: Front-end web developers - from beginner to advanced.

  • Q: What if I'm unhappy with the course?

    A: Receive 100% of your money back if you are unsatisfied with the course within your first month of purchasing.

  • Q: If I buy now, will I get to watch course videos as they are made?

    A: Yes! As new videos are made (the first started on 1st May 2017), you can watch them. Videos are released incrementally at the rate of once per week.

  • Q: Payment options aren't available in my country, help?

    A: You can pay with PayPal or credit/debit card. Want alternative payment options? Email me at [email protected] to discuss.

  • Q: Can I get an invoice?

    A: You will already receive an email confirmation of your purchase, however you can request an official invoice.

My DevTools work has been sponsored by:

  • Google Developers
  • Mailchimp
  • Linode
  • Hired.com
  • Toptal
  • Usersnap
  • circleci
  • Pusher