How to get a job in front-end web development


Front-end development has become… complicated. Just figuring out what you have to learn in order to become a developer can be a daunting task.

Knowing how to write HTML, CSS, and Javascript used to be all that was required in order to get a job in front-end development. But nowadays, there is so much more to web development than simply knowing how to code. As what we produce for the web becomes more complex, and as the web becomes available to more people, the required skill-set of the front-end developer expands. We must now take into account things like load times, performance, different screen sizes, multiple input methods, build systems, deployment strategies, and how we organize our code.

All of this may be intimidating to newcomers, but don’t fret; this stuff isn’t difficult to learn. In fact, becoming a front-end developer is quite easy, as long as you have the passion and dedication to do so.

And the effort is well worth it, because web development is just fun. And being paid to do it? That’s just icing on the cake.

Prerequisites

There are a few things you will need to have before you can become dev:

  • A human brain.
  • A strong desire to write code that can be run by any device that has access to a web browser.
  • A laptop. No need to spend more than $500. Trust me. Just make sure it’s running either Windows, Mac OS X, or Linux. A desktop would work too, but you wouldn’t be able to take it to a coffeeshop.
  • A text editor. Some good ones I can recommend are Atom, and Visual Studio Code. Both are available for free on Windows and OS X. Sublime Text is another option, and it is very popular, but it requires you to purchase a license for $70 in order to use it.

That’s it. Now, let’s begin.

The basics

The first thing you’re going to have to learn is how to write code. Specifically, how to write code that can be run by web browsers. Here are the three languages that web browsers can understand:

  • HTML
  • CSS
  • Javascript

The holy trinity.

It’s super important that you understand these three languages before you move on to more advanced topics. Make sure you know how to layout a webpage that looks good on all screen sizes, and how to make something happen when a button is clicked. Here are some resources to get you started:

Intermediate

Once you’ve gotten a hang of writing HTML, CSS, and Javascript, you can start to learn what a professional development workflow looks like. This includes learning:

  • How to use the command line, your new best friend.
  • CSS preprocessors. I would learn Sass first, as it is overwhelmingly popular, and then maybe learn Less, if necessary. But they both do the same exact thing. And once you know one, picking up the other is easy.
  • How to create a build system, with Gulp or Grunt. Build systems handle tasks like compiling Sass into CSS, concatenating Javascript, and minifying your assets for production in order to reduce the amount of data your users have to download. A really good build system will do all of this for you automatically as you code, and include a local web server for testing purposes.
  • Version control with Git.
  • Sharing your code on Github.
  • Deployment; getting your site online.

These are all tools and techniques that front-enders use on daily basis. Make the command line a way of life. Organize your styles better with Sass. Have Gulp automatically compile your Sass and concatenate your Javascript as you write code. Track your code with Git. Deploy your site via SSH or Git.

Congratulations. You can now call yourself a web developer.

Advanced

You know how to make a website. You created and deployed a website for your friend/relative’s business, and man, is it fresh. Clean typography, big photos; the works. It even looks great on your phone.

So what else is there to learn?

  • Integrating your site with a content management system (CMS). A CMS allows you to create, edit, update, and organize content from a user interface, without needing to code. This is how sites like The New York Times, or any blog works. WordPress is a free, open source CMS that would be good to get familiar with.
  • Learning how to build for a CMS usually means that you are also going to have to learn a server-side language, like PHP (this is the language that WordPress is built with). Don’t worry though- learning other programming languages is easy once you already know one. And Codeacademy is here to help.
  • Along with learning a server-side language, you’re going to have to learn how to interact with a database, like MySQL. MySQL is required for WordPress development.
  • How to develop with a Javascript framework. This will allow you build highly interactive web apps. There is no shortage of options when it comes to Javascript frameworks. Some well known frame works are Angular, React and Ember. Play with all of them. Pick the one you like the most. Get good at it.
  • Javascript design patterns; how to organize your code so it’s easy for you, or others, to read and make updates to it. Javascript guru Addy Osmani has written an excellent book on this topic, Learning Javascript Design Patterns. It’s available for free online.

Pro Status

You already have advanced skills, but you’re thirsty for more. This is how you can take your skills to the next level:

  • Learn to communicate. Being a good coder means nothing if you can’t communicate effectively with your future teammates, project managers, or clients. How do you get better at it? Attend meetups. Ask and answer questions on Stack Overflow. Write about your learning experience. Contribute on Github.
  • User interface/experience design. As a developer of user interfaces, it’s important that you have at least a basic understanding of designing usable interfaces that help people navigate your website or app.
  • Search engine optimization. How to optimize your site for better rankings on search engines.
  • CSS Transitions. How to smoothly animate a button on hover, or make a navigation menu slide in from the right side of the screen.
  • Modular CSS: writing CSS in a way that won’t make you want to pull your hair out when you try to make updates to it in the future.
  • Performance. Getting your site to load as quickly as possible, reducing DOM reflows and repaints, avoiding scroll performance bottlenecks, and optimizing Javascript execution.
  • Unit testing your Javascript, with testing frameworks such as QUnit or Jasmine.
  • Continuous integration (CI). How to setup automatic testing and deployments with a single code base that’s shared by multiple developers. Travis CI is a popular CI service that you can get to know.

Brownie Points

These skills aren’t exactly necessary for getting a job, but they’re nice to know, and may help you stand out from the crowd:

Getting a Job

Having the necessary skills isn’t enough for getting a job. You’re going to have show employers why they would want to hire you. There are a couple of things you can do accomplish this:

  • Create a portfolio site. Show off what you have created.
  • Share your code publicly on Github. Make sure your code is clean and well documented, with in-code comments and a readme.
  • Put yourself out there. Network. Attend meetups. Tweet. Start a blog. Get an account on LinkedIn. Print out business cards. You know the drill.
  • Keep on building things.
  • Hustle.

Staying Motivated

It can be difficult to keep yourself motivated, as this is a lot of material to learn, and it may take a bit of time before you land yourself your first job. But don’t let that stop you from getting started- you don’t have to learn everything in this guide before you can build something cool. In fact, I encourage you to build something as quickly as possible, even if it’s a simple About Me type site, and nobody else thinks it’s cool but you.

That’s how you get good at front-end development: you keep building things, over and over again, learning from your mistakes, and trying to build something better the next time around.

And if you ever get stuck, there is a plethora of resources available on the interwebs that can help you out. Here is a small sampling of sites you will want to keep bookmarked:

These are just a few of the places where web developers are sharing what they have learned. This is what I love most about being a web developer: the openness of the community and its eagerness to share what they know with others. It’s because of this openness that I was able to become a developer in the first place.

So don’t ever get discouraged. There is always someone willing to help a fellow developer in need.

Go hard, stay humble, and build cool shit.