How to be a great front-end web developer

Tags: , , , &

How to be a great web developer

As we kick off a new year, most of us make resolutions …and some of us even stick to them! Here are 10 ways to be a better front-end developer in 2014. This is a helpful guide for designers and developers alike. The list is partly wise advice based on previous experience, and partly a new year’s resolution. To help keep track of accomplishing these goals, I’ve added a checklist to tick off as you progress through the year.

If you are new to the world of front-end development, the best place to start is to take a course with one of the e-learning websites. You can find our review of these e-learning websites on our article Web design & development training site comparison.

Don’t get too attached to any given framework or platform

When it comes to the web, there’s always going to be something newer, shinier and faster around the next corner. Web technologies also have the habit of being suddenly rendered obsolete (we are looking at you, Adobe Flash). Be sure to research and trial a new technology, as just because something is new, doesn’t mean it’s better.

Utilise the right tools for the job and identify them quickly

These days there’s a framework for pretty much everything. Go out and research absolutely every possible technological solution before starting a new project. If you keep looking for a solution to a nitty-gritty problem and haven’t found it after a hard hour of Googling, it may be time for you to step up and build it yourself. Just make sure you’re not reinventing the wheel.

Let the tools do all the hard work!

In this fast-paced industry, any tool that can save you time is extremely precious. Here are my recommendations for a front-end development “stack”:

  • Don’t slog away at vanilla CSS, use a pre-processor like Sass with the Compass library to handle the tedious stuff.
  • Write secure, best-practice JavaScript in a terser language variant like CoffeeScript.
  • Use Bootstrap 3 for scaffolding simple responsive websites where you want fine-level control over presentation and functionality.
  • Use Foundation 5 to quickly build responsive sites and web apps with feature-rich interactivity.
  • Use Yeoman to manage your workflow. Yeoman combines Bower – for package management and Grunt – for task running and testing.
  • Test across every device and OS imaginable with BrowserStack
  • Use SourceTree to manage Git repositories.
  • Use DeployHQ to deploy apps straight from the repo.
  • Once your websites or apps are deployed, use Raygun to track errors and keep things running fast and cost-effectively.

Get on GitHub

If you haven’t done so already, create a GitHub account and start coding. GitHub makes collaboration within a team really easy (and it’s not just for software developers). Once you’ve got the hang of Git, weigh-in on other developers’ projects. Whether it’s fixing up the front-end for a couple of bemused software developers or dipping your toe into the murky waters of application development with some Django devs – just get involved. If people don’t like your additions, they can simply choose not to include them, so you really can’t go wrong!

If you’re stuck on where to start with Git, check out the awesome Try Git tutorial, or install SourceTree and you’ll be Gitting away like a champ in minutes.

Testing can be easy

Testing is probably the biggest …and most dreaded… task that a front-end developer has to do. Luckily there are tools at hand to help you test as you develop:

  • Qunit: Unit testing on the client-side
  • JSHint: JavaScript bug detection which helps you to write better code
  • CSSLint: Identifies potential browser compatibility issues and points out any dodgy CSS
  • BrowserStack: Test a website or local site across pretty much every device and browser imaginable.

Fortunately these tools can be easily set up to run in the background as you code using Grunt. Yeoman and the Bootstrap 3 development package come with all of these testing tools ready to use.

Decisions should be made with user experience in mind

Make sure that you’re not building something for yourself or for other developers. Think about how your target audience or your client’s target audience will use your product. This idea should be the main factor in every usability decision and at the forefront of your mind at every stage of development, even if you are not a designer by trade.

Develop a well rounded skill-set

Front-end specialists are a rare breed. Unless you’re a super-genius building the next CoffeeScript, these days it seems essential that you broaden your experience beyond the text editor. Immerse yourself in the web industry; build tutorials, attend conferences, teach students, learn project management, and maybe… if you’re feeling brave… start writing blog posts 😉

Keep a keen eye on web trends

Immerse yourself in blogs, portfolios, apps and anything awesome. You should constantly be on the look out for new tools and design trends because developers are always coming up with better, faster and more efficient ways of solving problems. Check out resources like DZone, Hacker News, Flippin’ Awesome and Open Web Platform Daily Digest for the latest in what other developers are up to around the web.

Stay on top of bugs

Bugs come in many forms, and as much as we’d like to think that our code is bug-free, there will always be a few that slip through the net. As you progress through your career, taking on a multitude of different projects, keeping track of bugs becomes increasingly difficult. Bugs can cause inefficiencies in code, meaning slower sites and apps. They can also lead to unpleasant things like security vulnerabilities.

Decent bug-tracking software is surprisingly scarce, but fortunately the guys at Mindscape have built A tool built for blasting errors, can track bugs on every popular development platform. Front-end developers will be pleased to hear that it supports WordPress and JavaScript tracking. By quickly identifying problems that might have gone under the radar in the past, you’ll be able to keep web apps running more efficiently and learn how to write better code in the process. So go and check out – they have a free trial too 🙂

Find a platform that works for you

Build a simple web app in each popular language – PHP, Ruby, Python and JavaScript. Don’t listen to the platform fanboys or the trolls, figure out which one solves your problems most effectively and stick with it.

Here’s a checklist of various goals for front-end developers of all levels to tick off throughout the year:

The front-end developer's goal checklist for 2014
Start writing Sass instead of CSS
Start writing CoffeeScript instead of JavaScript
Create a GitHub account
Build a PHP app
Build a Ruby app
Build a Python app
Build a JavaScript app
Contribute to another developer's project
Attend a web-related conference
Give a seminar to some students
Write a blog post about an interesting web topic
Attend a course which expands your skill-set
Subscribe to DZone and the Open Web Daily Digest
Start using Trello to organise your tasks
Use Raygun to detect errors in your websites and apps
Build a website or app using Yeoman to manage your workflow
Print checklist

Keep coming back to the checklist and tick things off as you make progress and don’t forget to tell us how you are tracking during the year.

People who have viewed this post also viewed


  1. ercan

    excellent post. great for me to see i make at least half of them. i can recommend to use Mixture tool. ( you can try 14 days trial and see that this front end development tool handles a lot of boilorplates without being lost in setting up a boilarplate manually.


Leave a comment

* Required fields


Please enter the CAPTCHA text