Lesson 3 – Tools of the Trade

In this Thesis theme video tutorial lesson we will install and learn the basics of some of the tools of the trade (NetBeans, Firebug, Web Developer, MeasureIt and ColorZilla) used by professional web designers and developers. These tools will make the process of customizing your Thesis theme website much easier. They will help prevent errors, troubleshoot problems and prevent a myriad of headaches that plague new web designers.

We will start off by installing and touring NetBeans, an open-source, error checking code editor. Next we’ll install and tour a variety of tools and addons for Firefox. Then we’ll learn a work flow designed to get the most advantage out of those tools. Finally we’ll practice using these tools together on a submit button.

Install NetBeans

• Get the latest version of Java
• Select the right version of NetBeans
• Special instructions for the Mac OSX
• Install NetBeans

Tour NetBeans Functionality

• The Start Screen
• Create a project
• The User Interface
• Create a new file
• Open custom.css
• Using the CSS Style Builder
• Using commenting tools
• Using code completion features
• Automatic help

Install and Tour MeasureIt for Firefox

• Install MearureIt
• How to use MeasureIt

Install and Tour ColorZilla for Firefox

• Install ColorZilla
• How to use ColorZilla

How to Install Firebug and Web Developer – Watch the Video

• Why Firefox?
• Install Firebug
• Install Web Developer

Introduction to Firebug and Web Developer – Watch the Video

• Different views Available
• HTML Tab
• Select Element button
• Menu
• Web Developer Tool Bar
• Edit CSS button
• Standards Compliance button
• Images button

Using them Together – Watch the Video

• Viewing the HTML structure
• Visual cues
• Examine the CSS
• On-Off button
• Thesis HTML Structure
• Descendants in CSS
• Descendants in Thesis .menu
• Change the style

Customize the Appearance of a “Submit” Button – Watch the Video

• Change the button color
• Change the button size
• Add “hover” behavior
• Update & Test