There are a lot of valuable tools in web browsers like Chrome and code editors such as Atom or VSCode that make it easy for someone new to programming be able to jump right in and get started writing code. Many people have no idea of the vast scope and capability of Chrome’s developer tools that are built right into the browser. I’m going to talk about some of these tools and how they helped me get excited about two languages, in particular, CSS and HTML. First, let’s talk about how much of the learning curve associated with those languages is undercut by the implementation of a code editor.
When I first decided to learn programming one of the first places I started to look was free online boot camps. Some of these courses were great and easy to use tools for learning the fundamentals of programming. However, at the time, I did not realize the importance of using a code editor such as Atom or VSCode. Before using my own editor I was always discontented with the structure and syntax of HTML. It just seemed to take the fun out of it. Then there’s CSS… I know I’m not alone when I say that CSS can seem a little unintuitive and unwieldy at times. The two languages that style and mark-up the web as we know it always seemed like a hassle to dive into and actually build anything I thought would be worth building. However, recently I have begun to jump back into these languages but this time with a tool belt equipped with a code editor and a knowledge of how to use various developer tools found in Chrome.
How does a code editor make writing HTML/CSS easier and more enjoyable?
If you’re like me, you like anything that makes programming faster and easier. Making the whole experience faster and easier is exactly the type of thing that code editors were made for. For example, Intellisense, a fancy word for code auto-completion. Itellisense can be paired with vast libraries of code snippets that can complete portions of code large and small. There are a huge number of tools that can make your writing experience, I dare say, an enjoyable one. I am particularly fond of auto-completion when writing HTML tags. For example, to begin an html document all you have to do is start to type the name of the tag, hit the ‘Tab’ key, and the carrots and closing tag are auto-filled for you! Just with ! and pressing the ‘Tab’ key VSCode will give you this:
``` <!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
-->
Just like that! The basic structure of an html document has been built for you.
On the CSS side of things it’s the same story. When typing out a property, you get a full list of available options. You can even choose a color from an interactive color wheel that types in the RGB values once you make your choice. Along with these examples there are so many other invaluable features of VSCode such as, an easy to find and use “Extenions” tab where you can install and use all of your extensions. There are even consoles for debugging and version control but let’s now talk about Chrome Developer Tools.
Chrome and Developer Tools
The DevTools UI can be a little overwhelming… there are so many tabs! But, if you take some time to get familiar with each tab to understand what’s possible, you may discover that DevTools can seriously boost your productivity. There are many ways to open DevTools, because different users want quick access to different parts of the DevTools interface. When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS). When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to jump straight into the Console panel.
One of the most useful tools is the elements panel.
This panel allows you to select different elements and reveals the HTML source for that element. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. I don’t know how I ever got by without all of these tools.