The Practical Guide to Becoming a Professional Web Developer

This article is meant to serve as a practical guide to becoming a professional web developer. I’ve spent over 20 years writing code for the web. I work with and help developers daily. In this article, I will tell you what you should learn, when you should learn it, and where you can learn it from (usually for free ). I’ll then give you advice on how to get real world experience and, most importantly, how to get paid for writing code.

Author’s Note: Due to popular demand, this article is now available as an expanded eBook that includes a special appendix that puts all the links from this article in one easy to follow list. You can get the eBook version here.

I get no direct compensation for mentioning any of the sites listed here. I just want to provide you with the best resources possible to help you get where you’re going.
Two things to keep in mind…

1. It’s okay to skip ahead.

This guide will help you no matter where you are on your journey toward becoming a professional developer. After reading this introduction, just scroll to the heading that best describes your situation and begin reading from there. If you’re just getting started, or just thinking about getting started, then follow the King’s advice from Alice in Wonderland…

“Begin at the beginning and go on until you come to the end; then stop.”

2. Quickly get a taste of everything first and then specialize.

Money is not the most important thing. You need to ❤ LOVE ❤ what you do! But you won’t know what you love until you try it.
This guide is all about helping you get familiar with as many areas of web development as possible, as quickly as possible, and then helping you specialize in the one you love. At first, you won’t master anything, you’ll just learn the basics and move to the next thing. Once you find your passion, I’ll show you how to dig deeper.

I’ve decided to learn to code. I like the web. I’m not sure where to start.

Congratulations! This is a big first step and the start of something very exciting. It can also be totally overwhelming. Don’t worry, I’m here to help.
Your first goal should be to get up to speed very quickly with the basics of all areas of web development (often called “the full stack”). You’ll go very wide in your learning, but not very deep. This is just about helping you find the area you like the best and building up some general skills across the board so that you can appreciate and handle a wide array of challenges regardless of where you end up specializing.

Learn Basic HTML

Hypertext Markup Language (HTML) is what controls the content and layout of what you see in your web browser. By starting there, you will give yourself a User Interface that you can use to interact with, and see the results of, your code. As you tackle more advanced languages, this will become increasingly important. You don’t want to be coding in the dark.
Here’s the HTML you need to learn about first (click the links to get a free tutorial):

• Getting Started
• Tags, Attributes and Elements
• Page Titles
• Paragraphs
• Headings
• Lists
• Links
• Images
• Tables
• Forms
• Putting It All Together

I know some basic HTML

Awesome! That’s an important first step. Now you need some basic JavaScript.

Learn Basic JavaScript

JavaScript is the language of the web, all major web browsers (Chrome, Firefox, Safari, IE, and many more) have JavaScript support built in. Every web site or web application you’ve ever used probably has lots and lots of JavaScript code behind it. Not to mention, JavaScript is now becoming popular on other platforms as well, including servers , desktops , and devices .
For now, you just need the basics, these links will help:

• Making Stuff Happen
• Variables and Data
• Doing Math
• Logic
• Conditional
• Looping
• Functions
• Objects
• Arrays
• The DOM
• Events and Callbacks
• AJAX
• JSON
• Scope

I know some basic JavaScript and HTML

Fantastic! Let’s get some CSS under your belt.

Learn CSS

CSS stands for Cascading Style Sheets. It’s used to customize the look and feel of the HTML elements on your page. Follow this free tutorial from Mozilla , to get the basics, and then frequently consult CSS-Tricks to solve the most difficult CSS problems (use the search feature on the top right).

Move to the “Back End”

At this point, you’ve been exposed to what is called “front-end web development”. That is to say, you know the major languages that run in a web browser. It’s time to move to the “back end”. Which is code that runs on a server. Don’t worry you don’t need a server to learn this, your own computer will do just fine.
There are lots of backend languages, but since you’re already familiar with JavaScript, I’m going to recommend you learn to use Node JS. Node JS allows you to execute JavaScript code on a server (instead of in a browser).
In addition to Node JS, you should learn about Express and Mongo DB.
Express Express is a library that makes it easier for Node JS to act as a web server (i.e. listen for “requests” from your web pages, and send “responses” back to your web pages).
Mongo DB Mongo DB is a database. It allows you to store and retrieve information.
You can learn about Node JS, Express, and Mongo DB, from t his excellent, free, tutorial and its sequel .

I need to choose between being a “Front End”, “Back End” or “Full Stack” Developer.

If you’ve been exposed to both ends, it’s time to make a choice. If not, please follow the advice in the previous section to fill any gaps in your knowledge.
By now, you’ve written two kinds of code. One kind has to do with user interaction. The other kind has to do with data interaction. Which kind do you prefer?
User Interaction? Congratulations, you’re a front end developer!
Data Interaction? Congratulations, you’re a back-end developer!
Both? Congratulations, you’re a full stack developer!
Hated everything? Congratulations, becoming a web developer is not for you, be glad you figured this out now instead of wasting more time and money. Not ready to give up yet? Maybe you haven’t found a language you love yet? Try some of the other languages covered in “I want to be a backend developer”.

I want to be a Full Stack Developer

Cool. You need to read and do everything under I want to be a Front End Developer and I want to be a Back End Developer below .

I want to be a Front-End Developer and I know some basic JavaScript, HTML, and CSS

To be effective as a front-end developer, you need to master HTML, CSS, and client-side JavaScript. You’ll also need to become proficient in some important frameworks. This will give you the skills that employers and clients expect from front-end developers.
By now, you should know some basic HTML. If not, go back to Learn Basic HTML.

Learn Intermediate and Advanced HTML

Follow this intermediate HTML tutorial and then this advanced HTML tutorial to get you skilled up.

Learn Advanced Client-side JavaScript

To level-up your JavaScript, I highly recommend the book series, You Don’t Know JS by Kyle Simpson. The author has made the entire series available online for free at these links:

1. “Up & Going”
2. “Scope & Closures”
3. “this & Object Prototypes”,
4. “Types & Grammar”
5. “Async & Performance”
6. “ES6 & Beyond”

Along with those books, the MDN JavaScript Reference should become your best friend.
Knowing the “front-end trifecta” HTML, CSS, and JavaScript is great. But to start earning money, you’ll need to get familiar with some frameworks.

Learn jQuery

jQuery is the most popular JavaScript library of all time. Although some newer frameworks make jQuery less relevant, if you’re looking for employment, chances are jQuery will be part of the job description (and interview) for many years to come.
I recommend following the jQuery path at FreeCodeCamp to begin learning jQuery quickly and effectively. After that, go to jQuery’s official learning site to get more instruction.
You’ll also want to keep the jQuery API docs handy.

Learn a popular JS Framework

Frameworks make working with a particular language or technology easier by addressing and solving some of the biggest problems with that technology. JavaScript has seen a huge boon in the development and popularization of frameworks.
It seems like every week there’s a new JavaScript framework that is touted as the next defacto standard. You’ll have to check the job boards or do some Googling to figure out which one is the most popular for your market. A good place to check is the Hacker News hiring trends tool .
Here’s what seems to be in demand at the time of this writing:

React JS

React was created by Facebook to work with their Flux architecture . It is a JavaScript library for building interfaces. It has surged to first place recently, overtaking Angular. So start with React . There’s a good free course introducing React here .

Angular 1 and 2

Angular JS was created by Google and really took off as soon as it was introduced. Many companies invested heavily in the framework and, as you can see from the graph above, it is still very popular. Unfortunately, Google felt the need to completely re-write Angular when they built version 2. So Angular 1 and Angular 2 are almost like two completely different frameworks. If you want to call yourself an expert in Angular, as of right now, you need to learn both to be really marketable. There’s probably still a window of time, where only knowing Angular 1 is enough. But that window is closing. The majority of Angular work will be in transitioning Angular 1 code bases to Angular 2. Code School has a fun free course for Angular 1 . For Angular 2, check out t his free video series to learn the basics.

Ember JS

There are still quite a few jobs for people with Ember JS experience, but as you can see from the graph, it’s starting to flatline. It doesn’t have the support of a juggernaut like Google or Facebook behind it, and you’ll have your hands full with React and Angular. Still, if you’re curious, you can follow along with the official Ember JS guide .
Once you’ve chosen the framework you like best, and are reasonably familiar with it, it may be worth exploring an accompanying CSS framework. The two dominant players in CSS right now are Bootstrap and Material Design.

Bootstrap

Bootstrap was made by Twitter and is quite mature and popular. There are versions of Bootstrap for Angular, Angular 2, and React.

Material

Material is a design guideline put out by Google that is gaining traction. There are Angular and React versions of it as well. Since Angular is also put out by Google, you’ll find there’s a natural fit there.
Here are some links to get you going.

• React Bootstrap
• Angular Bootstrap
• Angular 2 Bootstrap
• Material UI (React)
• Angular Material
• Angular 2 Material

Congratulations! You now have the key skills needed to be a Front End Developer!

I want to be a back-end developer

Excellent! The first step, is choosing a language. On the back-end, there are many languages that work, all have their strengths and weaknesses. Take a look at the following graphic, it ranks programming languages in terms of popularity. These have all been in the top 10 for a decade. The ones in green are web languages that have been getting more popular over the years.
The languages in green are where you should focus. If you don’t already know any of these, start at the top and work your way down. Stop when you find one you like, and go deep!
If you’re already familiar with a particular green language, and you like it, then focus on that one.

Java

Java is an extremely popular language and can run (almost) anywhere. It was developed by Sun Microsystems (now owned by Oracle ). Java is the language used to build Android apps. It can also be used to build desktop applications and, of course, it can be used to build web applications (either as a stand-alone backend, or coupled with JSP). It’s mature, stable, and there are a ton of resources to learn Java. It’s also one of the mostly widely taught Object Oriented Programming languages in colleges and universities around the world. Here’s a free Java course for beginners, that’s quite good.

C

C# is a language created by Microsoft to directly compete with Java. Until recently, it was not well supported on non-Microsoft systems, but that is quickly changing. Like Java, it is object oriented, and can be used to build not only Web Applications (either as a standalone backend or coupled with ASP.Net) but also for desktop apps as well. If you’re a Windows user and want a slightly more contained eco-system to program within, C# might be the way to go. Check out this free course from Microsoft Virtual Academy .

Python

Although it doesn’t have a big name company behind it like Java or C#, Python is a great language for getting things done quickly. It’s relatively easy to learn and it’s getting more and more popular each year. If you don’t love the others, this is a good language to sink your teeth in. The best place to get started is right here .

JavaScript

If you’ve been following along since the beginning, we’ve already covered JavaScript. With the advent of Node JS and the popularity of npm (the Node Package Manager), JavaScript on the server is only going to get more popular in the years to come. Well worth learning.
If you didn’t do it earlier, now is good time to learn about Node JS, Express, and Mongo DB, from t his excellent, free, tutorial and its sequel .

Ruby

Ruby is an odd bird. People who love it, really, really, love it. It’s in the top 10, but it appears to be slowing in growth. The language itself is a blend between functional programming and imperative programming . I recommend trying it out, maybe you’ll become one of it’s die-hard fans. There will be lots of Ruby work for years to come. But you may want to double check the listings in your particular area to ensure that at least a few companies have been bitten by the Ruby bug.
The best place to learn Ruby is RubyMonk

What about PHP?

There’s a lot of PHP in the marketplace but, at least according to this dataset, it seems to be getting less popular. I made it yellow because I think, right now, it’s still a viable choice to build a career on. Also, in the interest of full disclosure, I am not a fan of PHP, so maybe some personal bias has crept in here as well, but I can’t imagine that in the next 5–10 years PHP will be more valuable than JavaScript, even though it ranks higher at the moment and there will probably still be jobs out there for PHP developers.

I’ve learned a lot, but I have no real world experience.

It’s extremely difficult to get a job without any experience.
The first step is to complete one or two personal projects, to get comfortable building things from end to end.
When you start building personal projects, it’s useful to have a way to manage and publish your code. For that, you need GitHub.

GitHub

GitHub is an online source code repository built on the Git platform. It allows you to store, manage, and publish your code. If you are a developer today, you MUST have a GitHub account. You can learn more about GitHub and how to use GitHub from this “Hello World” guide and also, from this interactive tutorial about using the Git platform .

Personal Projects

Now that you’re set up with GitHub, here are a couple of personal project ideas.

• Build a simple Blog (here’s a tutorial using React and Node)

• Build a simple calendar (here’s a tutorial using C# and .Net)

  Free Code Camp also has a variety of projects to try, including some front-end only ones. Here are two of my faves:

• Build a “pomodoro” clock (front end only)

• Manage a Book Trading Club (full stack project)

Real Experience

Next, you need real experience . Real experience means doing work for someone else. Personal projects are useful, but they’re not enough to make you competitive in the job market. There are a few avenues for gaining real experience.

1. Contribute to an Open Source Project

Thanks to the popularity of GitHub there are millions of open source projects out there with open issues (bugs) just waiting to be fixed by someone like you. Putting on your resume that you’ve contributed to some popular and well known open source projects, is a great way to establish and boost your credibility. The best resource for figuring out what projects to contribute to is Code Triage . Code Triage lets you pick your favorite project and will send you a different open issue right to your inbox every day.

2. Do Work for a Friend or Family Member

Find a friend, or a family member, who has a business and build them a web app or web site, or improve their existing one. Just make sure that you choose very carefully, you need to pick the right-sized project and the right family member so that you avoid any uncomfortable situations down the road. Ideally, it should be a project you can complete in under 90 days and a person with whom you have a very honest relationship. You shouldn’t be afraid to admit if/when things aren’t going as planned and you shouldn’t be afraid or worried about having to say “no” or telling them to “back off” on certain requests or expectations. Also, you should be sure that if either of you end up bailing for any reason, it won’t permanently damage your relationship.

3. Work for Charity/Non-Profits

A very rewarding way to gain real experience is to do some work for non-profits and/or charities. You can approach a local charity or non-profit that you feel strongly about and offer to help. You can also use the site Catch a Fire to find a project that you can help with. Finally, if you follow the program at Free Code Camp and earn all their certificates, you will gain access to non-profit projects where you can put your skills to good use.

4. Slave Labour

I confess, that’s a bit of a cheeky title for what I am about to suggest here, but in my experience, if you take this route, and then subsequently get a job or go freelance, you will look back on it as slave labour, for sure. Sites like Upwork , Fiverr , and PeoplePerHour give you an opportunity to win business, but you’ll have to keep your rates very low and accept that you are only doing this for the experience.

I have some real experience, please help me find employment.

Rule #1 — Don’t call yourself a “Web Developer”

Check this out…
What the heck is the difference between a “web developer” and a “front end” developer!? Well, about 7000$/year apparently. Seriously, when the time comes, a simple change in what you call yourself can make a big difference.

Have a strong resume

Despite all the stories you read about people doing wild and crazy things to get an employer’s attention , you still need to have a good resume. This article from Tech Republic will help you with that.

Build a portfolio website

More important than having a good resume is having a strong portfolio website. Take all the real projects you’ve done and put them on a personal home page that shows them off. This SitePoint article gives some good advice on building a portfolio site. The one other thing I would emphasize is that you should make sure to highlight how each of your projects solved a business problem for your client (or employer). Do that, and your portfolio site will stand head and shoulders above the rest.

Prepare for coding interviews

My previous article, How to Win the Coding Interview will help you with that.

Beef up your general interview skills

You should be prepared for more than just the coding part. This Life Hacker piece is a good roadmap to lots of valuable and important information.

Just get your foot in the door

Don’t worry about getting a job with your dream employer at your dream salary right away. Just worry about getting paid to write code for a while. Once you have some more experience under your belt, you can start to consider your next move.

I want to become a freelancer.

Being your own boss is an amazing thing, but it also comes with a ton of added pressure and complexity. The best source of information on freelancing that I have ever seen is DoubleYourFreelancing.com by Brennan Dunn . He has a series of articles that will walk you through becoming a freelancer better than anything I could ever write here. So, check them out .
Another option for freelancing, if you believe you are really good, is to join Toptal . They only accept 3% of applicants and their process is notoriously difficult, but if you get in, you’ll have access to many well paying freelance opportunities where you can work remotely.

I started down this path, but now I feel stuck.

I hear you. It’s not easy and anybody who told you it was going to be easy has either never done it, or is trying to get money out of you. If you feel stuck, here is what you can do:

Rediscover your original intent

Ask yourself, and write down why you started down this path in the first place. Is your answer still true? If yes, then why stop now? Let’s go!

Get Real

Now that you know more about what is really involved and what is really possible, you have a better idea of the best case scenario, the worst case scenario, and the most likely scenario of continuing. Write it all down, look at it, and realize that the “most likely scenario” is the one that will probably happen and that it’s likely closer to the “best case” than the “worst case”. You do not have to be afraid. Move forward. You can do it!

Read This!

Please don’t quit — every expert was once a beginner

Happy coding!

Please ❤ and Share

I want to help as many people as possible. You can help me by hitting the little green ❤ and also by sharing this article on social media.
Finally, don’t forget to get to grab the expanded eBook version of this article with all the links in one easy-to-follow appendix. Click below to get it.

Free Guide to Becoming a Web Developer