Friday, July 22, 2011

Tool: Use Your Browser's Developer Tools to Learn New HTML, CSS, and JavaScript Techniques

Good idea.

Use Your Browser's Developer Tools to Learn New HTML, CSS, and JavaScript Techniques [Teach Yourself]

Use Your Browser's Developer Tools to Learn New HTML, CSS, and JavaScript Techniques
Like we noted in our night school lessons on JavaScript and HTML/CSS, one of the best ways to learn how to code better is by looking at what other people are doing. A new web site called Don't Fear the Internet has a great overview on how you can do that easily. Here are the basic steps:


  1. Use a browser with developer tools built in (Chrome, Safari) or the Firebug extension (Firefox, Internet Explorer, Opera).

  2. Navigate to the web page you want to learn about. If you're using Firebug, just click the Firebug icon to bring it up. In Chrome, go to the wrench icon, then Tools, then Developer Tools (or Control/Command+Alt/Option+I). This will bring up the developer tools panel at the bottom of your screen.

  3. If you want to inspect a specific element, just hover over it or click on it. In some browsers you'll also be able to just right-click an element and choose "Inspect Element". This will show you the HTML code for that element of the web page plus and specific styles applied to it via CSS.
  4. Once you have this information, you can repurpose it in your own code to create similar effects. If you want a more in-depth and entertaining explanation of this process, be sure to check out the video over at Don't Fear the Internet. Unfortunately we weren't able to add them to this post, but they're definitely worth a watch.

    Use Your Browser's Developer Tools to Learn New HTML, CSS, and JavaScript Techniques Don't Fear the Browser | Don't Fear the Internet via Swissmiss

0 comments: