Where to start as a web developer/designer

I see this question asked many times and there never seems to be a definitive resource so in this post I hope to give you a high level overview of the things you will need to get started. Over the next few articles I will drill down into each section and expand on the points given.

The first thing I want to mention here is the job of ‘web designer’ is quickly becoming extinct as the industry matures, jobs are becoming more specialised you will see jobs listed as UX designer, Graphic designer, front end developer, back end developer etc the days of one person doing everything are coming to an end in the industry (if you’re freelancing or in a really small agency you may still be expected to complete end to end solutions but this is no longer the norm).

So I’m going to focus on two career paths, the front and backend developer roles. In this article I will cover the frontend role.

For either of the above roles you will need a solid understanding of HTML and CSS, most jobs for backend developers will also expect Javascript in this list whilst Javascript is an essential technology for front end development in 2016.

Front end developer

As a front end developer you will be expected to take a design and convert it into HTML/CSS/Javascript and hook the user interface up to the backend system. A version control system is a must in today’s development and GIT has been king here for a while. As the web moves towards a more API centric platform you will find the majority of your work as a front end developer will be interacting with these API’s so a good understanding of how API’s work and an understanding of HTTP and REST is a must. The basics expected of any front end developer:

  1. HTML
  2. CSS
  3. Javascript
  4. GIT
  5. HTTP
  6. REST

CSS now has a very mature ecosystem around it and has a number of pre-processors and frameworks. Most jobs will ask for at least one of the below in a job description so learning at least one of them will tick a lot of boxes:

  1. SCSS seems to have become the dominant CSS pre-processor so is probably the one you want to learn, there is also LESS but it seems to be losing popularity.
  2. CSS frameworks, there are so many css frameworks its impossible to even begin to cover them, the king has been Bootstrap for many years and I can’t see this changing. I would also consider looking at Foundation, Skeleton and UIKit but they all work in mostly the same way so learn bootstrap and the others will be straight forward.

The javascript landscape has changed rapidly over the last few years and the days of ‘use jQuery’ are quickly becoming numbered as the web moves towards a single page app (SAP) architecture. This doe’s not count out jQuery as a tool, almost every job will ask for jQuery because its so integral to many websites as many developers simply don’t know how to write ‘vanilla’ javascript they simply drop a jQuery plugin without having any idea how it works which leaves plenty of work for us developers to pick up, fix and expand where the jQuery warriors simply don’t have the skill set.

As mentioned above the web is advancing to SAP style websites so a javascript framework is now essential for any front end development career. There are so many frameworks its hard to know where to start but there are a few emerging as the top contenders so it would be wise to pick at least one of these up:

  1. Angular JS
  2. React JS
  3. Vue JS
  4. Backbone JS
  5. Ember JS

If I was a betting man, which I am, I think the top 2 will emerge the winners in this battle. Its not to say the others aren’t any good (I love vue.js) but from a commercial point of view Angular and React make the most sense with having large corporations behind them, excellent support, large communities, fully testable code and extensive documentation. UPDATE: With Laravel now adopting Vue.Js I’m very happy to say you can now count Vue.Js along with Angular and React as best go to platforms.

 

4 thoughts on “Where to start as a web developer/designer”

  1. Semantics here, but the acronym is “SPA” which stands for Single-page-application.

    Otherwise good work, covers the basic for newcomers without digging too deep.

Leave a Reply

Your email address will not be published. Required fields are marked *