Become a Front end Web Developer in 4 months.
Start Learning
Even though it’s been around for some time, front-end web development is still an in-demand career. There was a time, however, when it was considered the also-ran of development positions, one which serious developers gave thought to only when they could spare the time.
But thanks to the advent of jQuery, Node.js, and a range of development frameworks, including AngularJS, Express, Knockout, and Backbone, front-end web development has gone through an amazing renaissance. Not only is it now an equal contender to back-end development — it’s downright hot!
Today, who doesn’t want a developer who can code up applications that work across desktop and mobile browsers, applications that offer a great user experience? Who doesn’t want a developer who can make an HTML application sing, whether they’re working with graphs, charts, tables, or games?
That said, it’s still a tough discipline to get right. It’s still one with a number of moving parts for you to master before you can be taken seriously and move up to the elite levels. And in this post you will see, in order of priority, the skills you need to learn, from beginner to advanced, to get you there.
By the time you’re finished reading, you’ll have a virtual blueprint of what you need to do.
1. HTML5 & CSS
Without doubt, without question, the first two skills you need to learn are HTML5 and CSS. For web application development, without a firm understanding of these, you really can’t work properly.
You don’t need to know absolutely every element to begin with. After all, there’s a lot to the standard: 3D graphics, multimedia, offline storage, and connectivity, for starters, alongside the basic semantics.
But you need to have a working knowledge of the core. Can you code up a basic HTML page, using nothing more than a text editor, with no form of WYSIWYG editor or template generator to help you along?
If you can’t, you’d best focus here. Now sure, in your day-to-day work, you’ll use IDEs [integrated development environment], which give you lots of support, and build on existing templates and sub-templates — but you have to know what you’re working with.
What about styling the HTML you create? Do you know enough CSS to use divs, instead of tables, for layout? Can you create a user interface style guide, similar to some of the frameworks like Twitter Bootstrap, which provide styling for everything, including buttons, tables, horizontal rules, notifications, and lists?
Knowing HTML and CSS — and how best to combine them, in a reusable and efficient manner, to produce the experience required — is essential. This is a step that cannot be skipped. To learn these tools, here are four excellent resources:
2. Browser Tools
Now that you’ve got a basic working understanding of HTML and CSS, you need to step up by getting to know about browser tools. There was a time when all you had was the raw source to inspect, which equated to almost nothing. But all that’s changed.
Now, just about every browser has a rich set of tools which you can use to inspect virtually everything about the pages, sites, and applications you create.
What’s also handy is that they’re reasonably standardized in what they offer. Given that, in this post Google Chrome will be the point of reference. But have a look at the tools available in Safari and Mozilla Firefox.
So what’s on offer? Here’s a short list:
A Debugger
Ever needed to inspect the state of your JavaScript code, so you can see what it’s doing at any point during execution? Ever been uncertain of the flow of execution, say after a button click? Use step-through debugging to see each individual step and inspect the variables.
A Resource Inspector
Need to know exactly which resources have been loaded? The resource inspector shows you everything: HTML content, frames, images, JavaScript and CSS files, cookies, fonts, and more.
An Execution Timeline
The execution timeline offers a high-level inspection of what was responsible for loading and rendering the page, and how long each section took to render. There are many activities involved in executing a website: loading, scripting, rendering, and so on. Make sure you know how long each took, and why.
An Element Inspector
Does the page look like what you expected? Did it render properly? Is there anything missing? Use the element inspector to drill right down to specific elements and see everything about it, including CSS styling, JavaScript actions, element types, and much, much more.
A Network Inspector
Was a resource loaded, or was it not available? What was its size? How long did it take to load? Was there an abnormal wait time on request?
There’s more available than is covered here, and to truly master these tools takes time. But if you want to create and deploy sites that perform, then mastery is essential.
For information both on getting started with these tools and on using them well, check out the documentation for Safari Developer Tools, Chrome Developer Tools, or Firefox Developer Tools.
3. JavaScript
Now that you’ve got a handle on the basics of creating static sites, it’s time to start learning how to add the dynamic aspects of a website. This can be anything from the simplest functionality (for example, confirmation dialogs, and showing and hiding content based on user input), right through to the most advanced functionality (for example, asynchronous requests to remote APIs).
Whether you want to add dynamism and interactivity to your applications, or to start creating remote APIs in languages other than the more traditional PHP, Python, and Ruby, you’ll be well served by learning JavaScript.
To get started, you’ll need the basics. And for that, you’ll need a great resource. While there are plenty of resources available, not all of them offer the same level of quality.
Start with the JavaScript basics tutorial in the Mozilla Development Network’s (MDN) Learning the Web series. There you’ll learn all about instantiating variables, including scripts, data types, commenting, operators, and more.
It’s a great crash course. After that, start familiarizing yourself with the jQuery and Node.js documentation. These will lead you in the right direction, towards being a professional JavaScript developer, not a script-kiddy.
Then, because like all the moving parts in this technology, JavaScript is constantly changing, evolving, and growing, you’ll need also to stay in touch with the latest trends. To do that, sign up for JavaScript Weekly, a free email round-up of JavaScript news and articles. That way, you’ll stay in tune with where the language and the industry are headed.
Like any dynamic, growing, vibrant language, JavaScript is always moving. It can be a challenge to stay on top of all the latest changes, but to make great web applications, it’s a must!
4. Testing
We’ve now covered the basics. But before we move on to the more advanced features, we need to talk about testing. Yes, testing.
Why? Because it’s amazing how often people keep laboring at software without knowing, with any form of measurable certainty, whether or not it works, and what will happen after changes are made.
Spend more time learning background concepts, rather than becoming fixated on any one tool.
What is software testing? It comes in many forms and to discuss it in depth is beyond the scope of this article, but you should become familiar with the five dominant types:
When implemented properly, these five strategies have the capacity to test an application from end to end, providing reassurance that the software is performing as expected, as well as highlighting issues which need fixing.
In the land of JavaScript, there are a number of testing tools available for front-end developers. Here are the top four.
QUnit
QUnit is one of the first you’ll hear about, originally created by John Resig early in the development of the jQuery project, and also used by jQuery UI and jQuery Mobile.
QUnit supports the creation of a series of one or more test suites to test an individual unit of code. It’s not as full-featured as some of the other libraries, but it supports:
- Asserting results
- Testing synchronous callbacks
- Testing asynchronous callbacks
- Testing user actions
- Grouping of tests
- Atomic tests
Jasmine
Then there’s Jasmine, which is a BDD (Behavior-Driven Development) framework for JavaScript. If you’re not familiar with the term, BDD tests whether a section of software works or behaves as expected based on the anticipated behavior. Here’s a simple example:
describe("The 'toBe' matcher compares with ===", function() {
it("and has a positive case", function() {
expect(true).toBe(true);
});
});
You can see that the language used is rather standard English, or straight-talking. You don’t have to be a developer to read it and know what’s expected.
Unlike some of the other testing frameworks, Jasmine doesn’t rely on the DOM or a browser. So you can use it to test websites, Node.js code, or any kind of JavaScript code.
Mocha
Next comes Mocha. Mocha, running on the Node.js platform, is more feature-rich than QUnit, supporting a more extensive feature set, as well as a more extensive range of testing styles, including BDD and TDD (Test-Driven Development). Some of its features include:
- Test coverage reports
- Node debugger support
- Highlighting of slow tests
- Browser support
- Integration with Continuous Integration (CI) servers
CasperJS
CasperJS is a truly brilliant testing tool, one that lets you know (with the exception of Internet Explorer) whether your websites and web applications look and perform as expected.
It’s different from the others in that it describes itself as “an open source navigation scripting and testing utility.” CasperJS sits on top of the headless WebKit (PhantomJS) and Gecko (SlimerJS) browser projects, allowing you to create scripts that:
- Click and follow links
- Define a set of browser navigation steps
- Fill out and submit forms
- Capture screenshots
- Scrape web content
- Download resources
Want to know more? Check out the website, or this walk-through post.
5. Version Control
Now that you’ve got a solid grasp of the essential skills, you next need to learn version, or source, control. If you’re not familiar with the term, perhaps you’ve heard of some of the tools which implement it? Tools such as CVS, SVN, Git, and Mercurial.
If not these, then you’ve no doubt heard of services like GitHub and BitBucket. All of these offer version control strategies. Version control is exactly what it sounds like: it lets you keep your work under control, recording changes made to it over time. There are a host of benefits to version control.
The first, and likely one of the most important, being to save you from yourself. Version control also enables any number of developers — whether in the same office, different offices, or even different countries — to collaborate together.
If you’ve not used any form of version control before, here’s the basic workflow in a nutshell, using Git as the reference tool:
- Add Git support to your project.
- Create one or more files.
- Review the changes made and commit them, creating the first version or revision.
- Make a change to one or more files.
- Review and commit the changes.
That’s it! Sure, there are refinements, but those are the essentials. With version control, when you need to make a change, it’s easy. What’s more, you can begin collaborating with any number of people, no matter where they are in the world. Imagine trying to do that with a shared file system. It’d be sheer chaos.
Git and Mercurial are the best version control systems available, especially when compared with CVS and SVN. But if you’re at least using one of these systems, you’re off to a good start. And there are a host of online resources to learn these systems.
With respect to Git, here are five of the best:
And here are five for Mercurial:
- Joel Spolsky’s Tutorial
- The Mercurial website
- Mercurial: The Definitive Guide
- Another Mercurial Tutorial
- Introduction to Mercurial from Fog Creek Software
6. Responsive Design
Up until this point, we’ve talked about development broadly, in a device-agnostic way. But now we need to focus on the mobile space. The reason? Usage of the web, and the internet more broadly, is becoming ever more mobile-oriented.
Where once you could get away with simply targeting a handful of browsers, maybe even one, now you have to consider multiple browsers, across multiple devices, and all the various device types as well. There’s iOS, Android, and Windows Phone across phones and tablets; and the devices come in a wide array of sizes and specifications.
To do it right, you need to learn responsive design. This is a big subject, but in this section, we’ll focus on the basics. If this is your first time hearing the term, as originally defined by Ethan Marcotte:
Responsive design . . . responds to the needs of the users and the devices they’re using.
Google suggests that the best way to approach responsive design is to start with the smallest device, and build up from there. The approach used to be to start with the desktop, and increasingly remove features — but that’s been found to be less than effective.
There’s quite a bit to responsive design, if you’re going to master it. But to get off to the right start, start by focusing on the four key techniques of:
- Setting the viewport
- Sizing content to the viewport
- Using CSS media queries
- Choosing breakpoints
The Google developer portal has an excellent resource in their Web Fundamentals series. Start there, and then continue on to the more advanced features, along with learning from such excellent sites as A List Apart, Mozilla, and MSDN.
With a strong foundation in responsive design, you’ll be able to develop sites to reach the widest possible audience.
7. Development Frameworks
So you know how to create almost any page by hand: you can code HTML, CSS, and JavaScript like a rockstar. No doubt you’ve created a number of pages, sites, and applications using what you’ve learned.
You’ve refined them using the browser developer tools so that they’re running like greased lightning; the source is protected by proper version control; and you have some great tests in place.
Despite this, there may be one thought that keeps popping up in your head: Do I have to do so much tedious, mundane work again and again and again?
It’s a common enough question, one we have all asked ourselves at some time or another. Creating page elements and user forms, creating boilerplate code for common tasks, making sure that all the browsers have the same base configuration — tasks such as these can very quickly feel repetitive.
A discussion of development frameworks didn’t make sense until now, because using them well requires first having solid experience with the underlying technologies. But now that we’ve covered all that, let’s look at three good examples you’re likely to have heard of: Twitter Bootstrap, Foundation, and PureCSS.
Each of these frameworks does a number of things for you. First, they provide a base layout that’s the same (as much as possible) across each browser, yes, even IE. On top of that, they provide a grid system to lay out your designs, a grid system which is fluid across devices and device sizes.
From there, they provide a number of regularly used UI elements, as well as widgets. These can include tables, typography, tabs, progress bars, modal windows, lists, labels, grids, and more.
In the screenshot above, you can see a small example from the Bootstrap project. You can see that it has made use of tabs, navigation bars, dropdowns, and alerts.
Now this may not be the style you’re looking for; and at times, when one framework, or another becomes too popular, it can seem like everyone’s doing the same thing. However, with the skills you’re growing, you can build on top of these foundation frameworks and create something individual and unique, but with a good deal less work.
8. Performance
Now that you’re starting to develop some amazing applications, it’s time to think about their performance profiles. Are they light, nimble, and super responsive to user needs? Or are they heavyweight, bloated behemoths?
You know which of those two you want your apps to be.
But to get there, you can’t just guesstimate, or use gut feeling: you need to learn how to monitor and measure the performance of your applications. You need to establish a performance benchmark, and then work to improve it.
Before we see how to measure performance, let’s first look at what makes an application performant. As with all the other skills listed here, it’s not easy to give a concise answer. But Google has created, as part of their portal, the PageSpeed Insight Rules, which lays out a set of criteria for how to measure and improve performance:
- Enable Compression
- Avoid landing page redirects
- Improve server response time
- Leverage browser caching
- Minify resources
- Optimize images
- Optimize CSS Delivery
- Prioritize visible content
- Remove render-blocking JavaScript
- Use asynchronous scripts
Now that we know what to measure, it’s time to learn how. The quickest way is to install the Page Speed extension for Google Chrome and to run performance reports on your sites. In the screenshot above, you can see the results of a report run against the home page of LinkedIn.
You can see that the extension has assessed the page and that it gives a breakdown of where the page is doing well, where it’s doing okay, and where it’s not doing so well, across the criteria listed above. Take the time to use the tool, running reports both on sites you’ve created and on sites you regularly use.
One Tip: Spend more time learning background concepts, rather than becoming fixated on any one tool.
9. Build / Automation
And here we are at the last skill you need to master — build and automation. In the front-end landscape, the tools you need to know about are Yeoman, Bower, Grunt, and Gulp. With these four tools, you’ll be able to quickly and easily keep projects up to date.
Starting at the top, Yeoman is the tool that binds the others together, providing the ability to rapidly scaffold applications and a best practice workflow in the process.
Next, Bower handles all of the dependency management work for you, on sites large or small. This includes assets, such as images and fonts, CSS frameworks, libraries, and the utilities your app will need to truly function. Whether you’re working with Bootstrap, jQuery, AngularJS, Backbone, or another project, Bower can handle them all for you.
Even if you have a good-sized team of developers to do the work, there’s no point in doing it by hand, repeatedly — especially when a large number of packages are already available to be used. And any site, even relatively small unsophisticated sites, will draw on a substantial number of resources. Using Bower helps take the work out of creating and maintaining your site.
Finally, there’s the build systems of Gulp and Grunt. You don’t use them together, it’s an either/or approach. Grunt is a task-oriented build system, allowing you to do such tasks as linting (checking code for errors) and compressing or minimizing JavaScript and CSS files, as well as concatenating them together.
Then there’s Gulp, a newer, slightly slicker successor to Grunt. Whereas with Grunt you create build configurations, Gulp scripts are created using code. You use the Gulp API to stipulate what you want to have happen.
Here’s a simple comparison:
Grunt
grunt.initConfig({
lint: {
src: 'src/<%= pkg.name %>.js'
},
concat: {
src: [
'<banner:meta.banner>',
'<file_strip_banner:src/<%= pkg.name %>.js>'
],
dest: '<%= pkg.name %>.js'
}
});
Gulp
var gulp = require('gulp'),
stylus = require('gulp-stylus'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('default', function() {
return gulp.src('src/styles/*.styl')
.pipe(stylus())
.pipe(autoprefixer())
.pipe(gulp.dest('public/styles'));
});
It’s beyond the scope of this post to get any deeper than this. However, a good place to dive in is this excellent presentation by Mark Dalgleish. In addition, read the documentation from each project to become more familiar with the tools. This goes for Bower and Yeoman as well.
Once you’ve done that, start by creating small examples for small sites, then gradually step up to more complex and sophisticated projects.
The Bottom Line
And those are the nine key skills you’ll need to be worthy of working with the best front-end web developers, as well as to consider yourself a true professional of the craft.
Whether you’re just starting out — or whether you’ve been developing for some time, and you’re looking now to hone those key skills — the nine presented here are the skills you need to focus on. These are the nine to bring you home.
[FE-Download-Content-Form]
