Chrome Devtools For Beginners

0

1

2

3

4

5

Posted on 22 Nov 10:23 | by mitsumi | 10 views

Published 11/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 308.18 MB | Duration: 0h 31m

Diagnose, troubleshoot, and debug websites using DevTools

What you'll learn
use DevTools as all-in-one web development, dignotic and testing tool
Increase your productivity during website development
Identify and fix the various errors occuring during website development
Improve the performance of the website using Chrome DevTools
Requirements
latest, updated version of the Google chrome browser, basic knowledge of jаvascript, HTML, and CSS
Description
Web development requires a vast skill-set. As web developers, we're responsible for developing, and maintaining error-free, fast loading smooth-functioning websites. When it comes to developing such websites, we use lots of programming languages. But when it comes to testing, diagnosing and troubleshooting our web development projects, we have only a few tools at our disposal. Thankfully, Google offers an all-in-one diagnostic and testing tool-set, called Chrome DevTools, that can help us with all the diagnostic, and testing tasks. This course introduces you to Chrome Devtools from scratch. We start the course slow, so beginners can take it up slowly. The course tells you what is Chrome DevTools, how its interface looks like, what different tools (tool panels) it has. And once we warm up fully, the course goes on to discuss what all tools DevTools offers and how to use them effectively to build smooth-functioning, error-free, fast-loading, responsive websites.Register for the course to learn all about- The user interface of DevTools- DOM (The document object model)- keyboard shortcuts to work with DevTools faster- CSS debugging- understanding breakpoints- jаvascript debugging- Analyzing network calls- Detecting and fixing network issues- Improving page loading speed in the browsersThe course is still being updated, and we hope you like it!
Overview
Section 1: Introduction
Lecture 1 Introduction
Lecture 2 How to open DevTools
Lecture 3 changing DevTools position with respect to the browser window
Lecture 4 Customising tabs' positions and the font size
Lecture 5 customizing the theme for DevTools
Section 2: Overview of different tabs
Lecture 6 The INSPECT mode & the DEVICE mode
Lecture 7 The ELEMENTS tab
Lecture 8 debugging CSS pseudo properties
Lecture 9 debuggins CSS properties - adding a class
Lecture 10 the CONSOLE tab
Lecture 11 the SOURCES tab
Lecture 12 the SECURITY tab
Lecture 13 Productivity hack - 1
Web developers responsible for improving the performance of their web applications and/or websites