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
- Putting It All Together
I know some basic HTML
For now, you just need the basics, these links will help:
- Making Stuff Happen
- Variables and Data
- Doing Math
- The DOM
- Events and Callbacks
Fantastic! Let’s get some CSS under your belt.
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.
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 .
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.
- “Up & Going”
- “Scope & Closures”
- “this & Object Prototypes”,
- “Types & Grammar”
- “Async & Performance”
- “ES6 & Beyond”
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
Here’s what seems to be in demand at the time of this writing:
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.
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 was made by Twitter and is quite mature and popular. There are versions of Bootstrap for Angular, Angular 2, and React.
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 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# 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 .
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 .
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 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?
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 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 .
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)
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!
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!
Please don’t quit — every expert was once a beginner
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
This content was originally published here.