Web Developer Tools

Web design and development is so much easier with online tools, after all computers are supposed to make our lives easier. I’m sharing with you some web development tools that makes my web development so much easier.

Web Developer Firefox Add-on by Chris Pederick.

This tool is very useful especially if you are a beginning to learn css. There is a button that enables you to edit the css code of any websites and you will see the result right away. If you use this option your browser window will be divided horizontally into two and the css code is at the bottom portion. Another great tool that I use from this add-on is the validator found at the right most portion of the add-on. There are 3 icons that will tell you if your code is valid. The first icon says if you are using complying to the html standards. The second icon is for checking if your css code is valid and the third is if your javascript is valid. Out site is not a valid css level 2.1 coz I used opacity but on css3 it is already acceptable.

Broken Link checker at www.dead-links.com

This site will basically check throughout the site if there are any broken links. It’s kinda time consuming checking for broken links manually.

Another site that checks for broken links is http://validator.w3.org/checklink but this one is much slower on my browser compared to dead-links.

CSS tricks at cssplay.co.uk

This site has loads of menu, gallery, and other css related samples. I have learned a great deal of css from this site using the web developer add-on. Most of the demos are tested on all browsers. When I first found out about this site the site uses pure css for dropdown menus, image galleries and other tricks on css. Now the site also experiments and showcase demos using javascript.

Web Basics at W3C Schools
Learn the basics of front end web development at W3C Schools. This site is a textbook information on what you need to know about html, css, javascript, xml and server scripts. The site also has an interactive tutorial where you can edit the code and see the result on a click of a button. This is where I learned a lot about css and html.

Good ol’ Google

There are times when there are browser compatibility issues that can’t be answered by the tools I’ve mentioned above so I just search for solutions on google. You can always depend on google for anything you need to know about web development.


Posted in Designers Tools, Web Design and tagged , , , .