Tools Tutorial

Knowing a language is only half of the job. Professional developers also know their tools: the editor where they write code, the browser tools where they find bugs, the terminal, and the services that put their work online.

This tutorial is a practical guide to the free tools that web developers use every day.

Why Learn These Tools?

You write and fix code much faster
You find bugs in minutes instead of hours
You can test APIs and check your site's speed and SEO
You can publish your projects online for free and share the link with clients or employers

What You Will Learn

VS Code: the most popular code editor, with shortcuts and extensions
Browser DevTools: inspect HTML and CSS, use the console, watch network requests
The terminal: basic commands every developer needs
npm and package managers: install libraries and run project scripts
Postman and API testing: send requests and read responses
Lighthouse: measure speed, accessibility and SEO
Code playgrounds and hosting: try code online and publish your site with Vercel, Netlify or GitHub Pages

A First Example

Open any website, press F12, click the Console tab, and type:

Example

javascript

document.title

Output

'Karachi Book Shop - Home'

You just asked the browser for the page's title. Your answer will be the title of whichever page you have open. DevTools are built into every modern browser.

Exercises and Quiz

Each lesson ends with an exercise, and the last lesson is a quiz on all the tools.

Exercise

Which key opens the developer tools in most browsers on Windows?

F5F12EscF1

Use these tools while you learn HTML, CSS and JavaScript. Learn Git to save your code and deploy it, and try server languages like PHP and Django.

Want to learn with a teacher? The Workownix Full Stack Web Development course teaches these tools hands-on with real projects, online or at our institute in Orangi Town, Karachi.