Learn To Code with Google Chrome Developer Tools

Learning to code can be extremely rewarding, but it’s often a difficult process.  Many developers-in-training start their journeys by opening up a text editor and trying to piece together a website from scratch.  While this is indeed a powerful way to learn to code and create websites, there is an easier (and arguably more fun) way to play around with HTML and CSS.  With Google Chrome’s Developer Tools, you can open up any website on the internet and play around with the source code in your very own browser.

Let’s give it a try!  Follow the steps below, and you’ll be learning to code with Google Chrome’s dev tools in just a few minutes.

  1. First of all, make sure you’re using Google Chrome.  If you’re viewing this page with a different browser (like Internet Explorer, Firefox, Safari, etc), you need to open it in Google Chrome instead.  If you don’t have Chrome installed on your computer, you may need to download it from google.com/chrome.
  2. Now that you have this page open in Google Chrome, let’s open the developer tools!  There are two simple ways to do this.  The first is to right-click something on this page and select the “Inspect” option.  Or, if that doesn’t work, you can click on “View –> Developer –> Developer Tools” in the top bar.

By now, you should be seeing a frame at the bottom of your browser window that has some HTML & CSS code in it.  This is the code that the browser is using to display the website that you’re looking at right now.

If you want to view (or edit) the code for a specific element on the website, all you have to do is right-click on the part of the website you want to inspect (or edit), and select the “inspect” option.  Try it now!

  1. Try right-clicking on THESE WORDS, and selecting “inspect.”  See where the chrome developer tools points you within the code.
  2. In this case, you may be pointed to something that looks like <li>…</li>.  <li> is the HTML tag for “list item” (as you can see, “THESE WORDS” are part of item #1 in an <ol> or ordered list).  You may also notice that there’s a little triangular arrow to the left of the <li>.  Click on that little triangular arrow to see what’s inside the <li>.
  3. Now, inside of this <li> tag, you should see the text of list item #1 (that you can see in your browser as the first item on this very list).  You can double-click on that text in the dev tools window, and change it to whatever you want!  Go ahead, try it!  Have fun!  These changes only take effect temporarily within your own browser window; nobody else can see the changes that you’re making (unless they’re looking over your shoulder right now).  If you really mess something up and want to start over, you can always just refresh the page and it will go back to normal.

With these developer tools, you can edit so much more than just text.  Go ahead and play with the HTML!  See what happens when you change an <ol> to a <ul>.  See what happens when you delete a <li>, an <ol>, or entire <div>.  But if you want to have even more fun, try playing around with the CSS styles!  For example:

  1. Right click somewhere on this page where there’s just plain white-space, and click “inspect.”  In the left-hand side of your chrome dev tools window, you should see some highlighted code; you may have clicked on a <div> element, or you may have clicked somewhere that’s just the <body> of the document.  Whatever HTML element is highlighted on the left, you can find its corresponding CSS styles on the right.
  2. Scroll through the CSS code, and you can see (and change) all kinds of things about this particular white space.  One fun thing to do is to look through the CSS code to try to find a background-color property, and then change the background-color.  It’s simple, it’s fun, and it gives you a big splash of instant visual feedback.  If you can’t find a background-color defined in the CSS styles for this element, you can add your own!  At the top of the CSS styles section, there’s a section called element.style.  If you double click on that section, you can add whatever styles you want to the selected element.  For example, if you type in   background-color: lightblue;    then the background color of the element you selected will become light blue!
  3. When you’re done playing around with the HTML & CSS on this page, try playing around with the HTML & CSS on other pages!  Open google.com and try changing the background-color.  Change the size and color of the fonts.  See what else you can change!  Try the same thing with facebook.com, or any other site you want to play with.

While this article is focused on learning to code in HTML and CSS by playing with websites in Chrome’s Developer Tools, keep in mind that Google has done a great job of packing the Developer Tools with many more useful features that you can use as a web-developer.  Note, for example, the little strip of options that runs horizontally above the HTML code (Elements, Console, Sources, Network, Timeline, etc).  If you click on “Console,” for example, you can see everything that’s logged to the javascript console!  This is very useful when you start using javascript to add functionality to your websites.  You might also notice the little smart-phone icon on the left-hand side of this list; clicking on that can show you how this website will look on mobile!  This is an extremely useful feature when you’re developing websites that will be viewed on both desktop and mobile.

When you’re done with Google Chrome’s dev tools, you can close them, simply and easily, by clicking on the little “x” at the top-right corner of the frame.  For now, though, have fun playing with the source code of famous websites and customizing them to look however you want them to!  Aside from just messing around and having fun, playing with Google Chrome’s developer tools is a really great way to learn to code.

2017-07-20T12:42:02+00:00