This post covers the fundamental things web developers should start to get to grips with to build web apps using modern practices. We’ll cover why each topic is important, key areas and links to resources to get up to speed.

#1 Text editor

Our text editor is crucial to master because we spent the majority of our time in this tool. Investing time in mastering this tool will make us more productive.

Key features to learn are:

• Code navigation
• Code refactoring
• Shortcut keys for common tasks such as opening a file or opening a terminal window

Take the time to discover useful extensions such as auto-formatting and linting.

I recommend Visual Studio Code. It’s super popular and cross-platform. It’s also well supported by Microsoft, and we get updates most months.

The Visual Studio Code docs are a great place to learn about all the essential features.

#2 Browser DevTools

We spend lots of time understanding and debugging existing code. There’s no better place to debug code than where it is running in the browser. Like our text editor, mastering this tool will make us more productive.

Key features to learn are:

• Inspecting HTML & CSS
• Stepping through JavaScript code
• Console
• Inspecting HTTP requests

I recommend starting with Chrome DevTools. They powerful and feature-rich, and Chrome is the dominant browser at the moment. However, learning these key features in the other browser tools is essential when we are debugging browser specific issues - lots of products we develop still need to support IE!

#text editor #browser devtools #web developer