Top 10 Web Design Tools (Spring 2014)


CodeKit animation capture

Lately I have been writing a lot of code and learning about a variety of technologies. Along the way I discovered some pretty cool tools and time savers. I figured I’d write a list that highlights some of the best people and projects on the web today. As always, tell us about your favorites in the comments section!

10. YouTube

treehouse show on youtube
No matter how great the writer, it is really difficult to see the big picture of complex problems with text alone. When faced with a complex code or design challenge, I often start by searching a few articles to get a sense of the vocabulary and the solution. Then I can then use that info to find a few video tutorials. Seeing someone solve the problem in real time is often very helpful. Beware, as with anything on the internet, not every solution is a good one.

My Favorite Channels

The Treehouse Show

LevelUpTuts

Adam Khoury

9. W3Schools

W3Schools home page
W3Schools is a great resource for the basics. Not only can you you find loads of snippets and examples, with their “try-it” feature, you can also edit and manipulate the snippets to get a sense of how they work.

8. Komodo Edit

Screen shot of komodo edit
Komodo Edit is great text editor and as far as I know, it’s still totally free! While it may not have every single feature in the world, it has the ones that count. Komodo edit provides intellisense that doesn’t lag and it is always improving. If you are need of a new text editor checkout Komodo Edit.

7. XAMPP

xampp homepage screen shot
For a simple easy to use php/mysql environment, checkout XAMPP. It’s perfect for developing WordPress and other php/mySql based sites.

6. Clipping Magic

Clipping magic screen shot.
Clipping Magic is a great tool for removing the background from your web assets. Not only does it do a great job of stripping backgrounds, but it is user friendly, accessible on just about any machine and there is nothing to install.

5. Stack Overflow

Stack Overflow Screen Capture
Typically I would give Stack Overflow a higher spot on the list but there are just too many cool new things right now. To be fair, most every exciting new project was likely assisted in some way by the Stack Overflow community. If you are struggling to squash a bug, check out Stack. Chances are someone has been there before.

4. Develop PHP

develop php screenshot
DevelopPHP is a one-stop shop for web design beginners. Author Adam Khoury has written extensive tutorials on html, CSS, php, javascript and more. His site includes tons of written tutorials, code samples and great video tutorials as well. His video series are really helpful and they have the added bonus of being witty and entertaining as well. If you are just getting started or want to brush up on some fundamentals, checkout DevelopPHP.

3. CSS Tricks

css-trick home page
CSS Tricks is an extensive collection of articles, tutorials and snippets for all things web design. As it’s name would imply, the site addresses many CSS solutions but it is not limited to CSS alone. Author Chris Coyier blogs about HTML, CSS, PHP, JavaScript, jQuery, WordPress and every other challenge that web designers face. His snippets section is a great place to find quick answers to some of web design’s most frustrating questions.

2. Compass and Sass

Compass Welcome page
Compass is by far the most exciting technology that I have adopted this year. Even on a good day organizing a stylesheet is a nightmare. Compass really streamlines the process of designing an organized and maintainable style library. With Sass you can write CSS in a rich, object oriented fashion. The addition of variables and mixins lets you create sleak, reusable patterns. Compass extends the language even further with dozens of pre-coded patterns. If you already read and write CSS the language is easy to implement and learn. You can find a more in depth look here.

Compass and Sass require some knowledge of the command line and that often scares people away. Luckily, In the number one spot of this list we have an application allows us to tap into some pretty amazing technology, and do it without ever working in the command line.

1. CodeKit


Code Kit Settings UI

Incident 57′s CodeKit get’s my number one spot. I purchased this app (for $29) just after version 2 was released. The app is truly awesome. If you don’t trust me, checkout the free trial and see for yourself. Among it’s best features are:

It’s a compiler

CodeKit compiles Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown & Javascript.

Validation

Automatically checks your syntax for your not-so-smart days.

Automatically Refreshes Devices

When the code is updated, it refreshes EVERY device and browser that is viewing the project, even mobile.

Minify on the fly

Automatically minifies source code.

Frameworks

With CodeKit, all of your favorite frameworks and tool kits are one click away.

User Friendly

Lastly, it is super user friendly. If you can hand-code a website, you can easily start doing it faster with CodeKit.

So there you have it, my Top 10 Web Design Tools for spring 2014. We should all be thanking the brilliant creators of the projects in this list and beyond. Their work and dedication keeps the web moving forward. Rock on!


Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin