Great tools to help you create great websites

I get a lot of questions in regard to which tools and programs I use to develop websites. In response to this I have decided to put together a small list of tools that have helped to hone my skills and increase my work rate, both with Kalexiko and my own projects. Hopefully these will help you when choosing what tools are available to get you started in creating a great website.


Browsers & Testing

There are 5 big browsers out there which are used on a daily basis; Opera, Chrome, Firefox, Safari and Internet Explorer. As a web developer I require all of the above installed (or at least viable) to cross check my websites across different browsers. I personally recommend that you also have all these browsers easily accessible when developing a website.


For cross browser tests there are also a couple of websites out there which will help you test your website on multiple operating systems and platforms. The two sites that I use are Adobe Browserlabs and BrowserStack. BrowserStack is subscription based and will cost around £12 per month for an individual licence; on the other hand Adobes Browserlab is a free to use tool. My personal preference is BrowserStack due to the amount of options available while testing including; IE Developer tools, Companion.Js, FireBug, Chrome Developer tools. These are just a few and there are many many more out there. Another advantage is that you can also specify the resolution at which you view the website you are testing. Also, if your working locally you have the option to tunnel from BrowserStack to test your local sites.


My personal preference It has to be Google Chrome due to its clean and concise layout, ease of use and its tools for developers are much easier to work with than its competitors. The only problem I have with Google Chrome is the web font’s anti-aliasing problem, this exists solely on Windows machines and has been around for years, hopefully Google are working on a fix. Apart from that, it’s a solid browser and my personal preference.


I personally recommend Google Chrome for  developer tools and everyday use, and BrowserStack for cross browser testing.


Code Editors

During my time as a web developer I have used many different code editors which have helped to increase my work flow. With there being so many different ones on the market it’s hard to decide which one I prefer, but the three  that have significantly helped me with a multitude of coding aspects are Espresso for the Mac, Sublime Text 2 and PHP Storm, which Lee talked about briefly in his previous post.


Espresso – Espresso is a Mac only code editor which visually, is my favorite of the three. It has custom icons and colour schemes for different types of projects, which makes it easy to organise your files as well as keeping them looking good. As well as looking good espresso boasts a number of built in features such as their very own CSSEdit3; which is a very easy to use CSS3 UI that switches on when your within a .css file. This UI allows you to set shadows, border radius and gradient backgrounds which will input the css into the relevant style. Espresso also comes with built in Snippets, an easy to use file Navigator, Live Styling and a Sync or Quick Publish which will automatically push your changes to your server for you. Espresso also boasts its own package system known as sugars which can be used to add plug-ins for different languages, new themes and much more.


Espresso has a lot more features than I have discussed here. To learn more about Espresso follow this link.


Sublime Text 2 – One of the most known and used code editors today is Sublime Text 2 and with good reason; with multi-platform accessibility it works flawlessly on Linux, Windows and Mac. Sublime text 2 comes with a multitude of already built in features and a massive library of packages available to install. Sublime Text 2 comes with syntax highlighting, custom layouts to customize your workflow and a Minimap feature which will allow you to scroll to any area of your document with a single click. But one of my favorite features is the ability to have multiple selections within your document which allow you to make sweeping changes to your text efficiently. What makes Sublime Text 2 stand out for me is the support, documentation and community who provide great support for any problems you may come across.


As for espresso, I am only touching on the surface. With Sublime Text 2 you really want to delve in and experience it for yourself. Click here and take a look around.


PhpStorm – PhpStorm is a lightweight and smart PHP IDE bought to you by JetBrains. Focused on developer productivity, PhpStorm is available on all popular platforms. PhpStorm boasts a number of features that have not only increased my knowledge as a web developer but also helped me work with my team at a greater pace. For its full list of features visit here. One of PhpStorms greatest features is the Version Control systems integration which allows me to keep track of everything that is happening within a certain repository and also allows me to perform the majority of Git commands without using the console. This makes it great for people who are new to using Version Control similar to Git and want to begin using this system. PhpStorm also comes with its own plugin system which is easily accessible from the plugin window located within its settings.


Out of the three, PhpStorm is my browser of choice due to its ease of use and feature rich system. To learn more about PhpStorm visit here.


Online CSS Generators

There a alot of CSS3 Generators on the web but I find myself returning to the same 3 each time; though I use each three for different purposes. The majority of these utilities will only work with the new browsers so most versions of Internet Explorer are out of the question; though there is a website called CSS3Pie that will make Internet Explorer 6-9 capable of rendering several of the most useful CSS3 commands.


CSS3Please – CSS3Please updates on the fly allowing you to edit the CSS however you want it and will update it automatically showing you exactly how it will look. I mainly use this site to test CSS3 animations. Though if you plan to use it bear in mind it does not support IE6 – IE8.


Colorzilla Gradient Editor – Colorzilla’s Gradient Editor is the best custom Gradient Editor I have come across and it does exactly what it says on the tin. With the ability to add all manors of gradients, it functions just like the Photoshop gradient tool and also allows you to adjust the hue/saturation. Once you have your gradient looking how you want it simply copy and paste the style into your style-sheet and your done! Supports IE, Safari, Opera, Chrome and Firefox.


CSS3 Generator – I use CSS3 Generator for all my other CSS3 styles, with a great list of CSS3 commands and a great UI to perfect your style I haven’t found nor need to look for anywhere that does it better. It works just like Colorzilla’s Gradient Editor, simply find the style you want, edit it so its relevant to your design and copy and paste the code in.


Out of the three I couldn’t really choose a favorite as each site has its own merits; so whether your looking to set up an animation or need a gradient for your site one of these options will help you.


Front End Templates & Frameworks

Initializr – Initializr is a HTML5 templates generator designed to help you to get started with a new project based on HTML5 Boilerplate. It generates a clean customisable template with just everything you need to start your projects. With the ability to choose predefined templates or edit a template to your liking; whether you just want a simple HTML5 document or want everything from bootstrap to a favicon setup for you initializr will set this up for you and all you need to do is click and download. Initializr also comes with a choice of a responsive templates which come with a basic design to show you how it works behind the scenes.


Bootstrap – Bootstrap is a great front-end framework that comes with a large selection of already styled components to use within your site. All the components within bootstrap are all easily editable to resemble the design of your site via the CSS and all you have to do is use the the HTML markup defined in the documentation. Bootstrap also comes with a responsive template that allows you to use these elements within your site and they will still look good on phones and tablets. It is even built to look great in browsers as old as IE7. There are so many features of bootstrap that the only way for you to really experience them all is to browse through the site and check them all out; oh and did I mention it also comes with a 12-column responsive grid!


Both of these are great and I use both on a daily basis; they are a great place to start a project so be sure to make use of them to get your project off to a fine start.