This is an incredible add-on!This is an amazing add-on. Please contribute!

This is the tool that makes your learning here possible and it is "given" through the amazing generosity of the open-source community. Where else can you try something on, wear it around and THEN decide if you want to pay for it?

As you use this software you will come to appreciate the genius of this program. SO FIRST, make sure you download and install web developer on you latest Firefox (and contribute). Once this is installed, go to your browser under the <views> tab at the top and select <Toolbars> then <web developer> this should look like this:

 

 

 

 

The amazing Chris Pederick tool Once you have downloaded and added "Web Developer" you need to make it visible as a toolbar. Here is how you get the toolbar active and what it looks like once it is deployed. NOW the fun begins! Web Developer Toolbar
Go to <view> then over to "Web Developer Toolbar"   Here is how the toolbar appears below the address bar

 

How to disable CSS stylesSelectively Disable CSS Styles with Web Developer

Here is a fun feature you can use to selectively disable the CSS styling on a page. This essentially allows you to dissect the page and see how the designer added all the features. The example here is the TC3 index page. A well-written page like this one where the styling is separated from the html looks pretty barren without it's clothes on! SO now when you look at a page and say "how did they do that?" you can use this tool to take it apart and learn the techniques.




The "naked" page without CSS stylesThe "Naked" html Page With All Styles Removed

Here is the TC3 index page with the styles removed with the web developer Add On. You can see that the fancy tabs are just unordered lists styled up with some CSS. All the color bands and position cues are now lacking so we just have blocks of color. To emphasize, well written, standard compliant web pages will have the structure in the html and the styling all in the CSS. This makes for a lighter weight code and easier updating. There are lots of tools in this program for "validating." This will check whether the page was written correctly according to the W3 standards. But there is more.

 

 

 




Adacio website


Great Website!

Click onto this website and play with the "customise" slider to see what CSS can do to a proper html layout. This is a talented designer. There are lots of good links and information here also!

 




Web Primer | HTML Tags | HTML Tutorial | CSS Tutorial | JavaScript Tutorial | CSS Color Names | HTML-Kit | IRT Site | HOME!