Hey there.

When I develop a website or a HTML app (or anything else with HTML), I usually use these web development tools, softwares or libraries. Let's check them out and give some tips and tricks.

1. Brackets

Brackets (Web development tools)

Brackets is a powerful, modern, open-source IDE for HTML, CSS, Javascript and PHP by Adobe. It has many special features like color pickers, auto correction, live preview, plugins and a tool called Extract which let you convert style information from a Photoshop file into CSS code. It's very fast and easy to use, there are tons of plugins for it and it makes development easier and faster. You can get Brackets at brackets.io.

2. XAMPP

XAMPP

You probably heard of XAMPP or even use it. If not, you should. It is a bundle of Apache, PHP, MariaDB (MySQL) and Perl. It also includes Tomcat and Mercury. If you want to test your website but don't want to upload it to your webserver, just use XAMPP. It is super easy to setup, fast and also open-source. It's great for playing around and you can even test your website on other devices in your network just by navigating to your local IP address. Get it here for free.

3. Mobiletest

If you want to test your website on a mobile device but have no one next to you, mobiletest.me is your help. You can select a device and begin with testing. The free testing is only with iFrames, but you can get a free demo and can test your site with thousand of devices.

4. CSS Shrink

CSS ShrinkCSS Shrink minifies your CSS code with a bunch of options, shrinks it beautiful or just makes it beautiful. It also shows you how much space you really saved. If you don't want to use the online tool, you can also install it via npm on your computer and use it whenever you want. It's available at cssshrink.com

5. Javascript Compressor

JavascriptCompressor.com is like CSS Shrink, just for Javascript.

6. Google Fonts

Google FontsGoogle Fonts has hundreds of fonts you can use for your website. You can search for any font type you like and find exactly what you want. You can add fonts to your collection and choose which styles you want. It shows up the page load time and if you want to host it yourself, you can easily download the font or download all fonts by forking the GitHub repository.

7. JS Lint

If you want to check your Javascript for errors, JS Lint is the tool for you. It checks for errors and warnings and corrects them.

8. Font Awesome

Font AwesomeOriginally made for Bootstrap, Font Awesome is a font with a huge amount of icons. It is probably the best icon font because it contains brand icons, web app icons, file icons, animated icons and many more. Check it out at fontawesome.io.

9. AjaxLoad

With AjaxLoad, you can generate animated loading gifs with tons of templates. Just set color and background color and there you go! If you don't want to use CSS3 or jQuery animations, this is the best way.

Alright, I hope you found some cool web development tools in that list. Check them out, you will love them.


Code

Newsletter

Subscribe to my newsletter and stay tuned.