What are several complementary tools to use in web development?

Get Started
1

Hello, I am interested in “modernizing” my approach to creating websites.

Recently I was going to convert my website to a responsive design and I discovered Twitter Bootstrap and also learned about CSS preprocessors. I am interested to know if there are additional tools that you would like to recommend that are useful for building professional websites. I’m caught up on my programming languages (HTML5, CSS3, Jquery) but I am not familiar with the types of software, web browser tools, or frameworks that web developers use during the development and testing phase.

Also, are there any alternatives to Adobe Photoshop and Adobe Illustrator that can create images that load faster on the web? Thanks

2

I recommend Firebug on FireFox. It allows you to view your HTML source and make changes on the fly to see what is causing the error. It also has a console log that allows you to view any errors that are produced from things like Javascript or network errors; useful for finding broken elements and such.

3

The web developer toolbar is always useful - https://addons.mozilla.org/en-US/firefox/addon/web-developer/ - available for Firefox and Chrome.

Also, are there any alternatives to Adobe Photoshop and Adobe Illustrator that can create images that load faster on the web?

There are many images editors around, but which one to use is really down to your personal preferences. Always remember to optimise your images to get file sizes as small as possible, most image editors have some sort of optimisation tools built in.