Follow
DEV
Bill Sourour
DESIGN
Sign in / Sign up
DATA
Follow
Founder at Dev Mastery. Consultant. Teacher.
Jun 20 · 16 min read
The Practical Guide to Becoming a
Professional Web Developer
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
The road is long and challenging. But it can be fun and rewarding too!
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
There are many valuable links to free and important resources spread
throughout this article. To make things easier, I’ve collected and
categorized them all into a free PDF, which you can get by clicking 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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
Find your passion first, then monetize 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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
You can do it!!!
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
•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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
•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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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 this 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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
By now, you’ve written two kinds of code. One kind has to do with user
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
Learn Advanced Client-side JavaScript
A great series of books on JavaScript available online for free!
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”,
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
Here’s what seems to be in demand at the time of this writing:
Hacker News Hiring Trends
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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 this 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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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!
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
Look at you go!
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
TIOBE Index of Programming Languages that have been in the top 10 for over a decade.
http://www.tiobe.com/tiobe_index?page=index
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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 this 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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
Okay hot shot, let’s level you up!
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
manager and publish your code. For that, you need GitHub.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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 frontend only ones. Here are two of my faves:
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
•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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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 and 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 nonopen in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
Ready to take on the world, eh?
Rule #1 — Don’t call yourself a “Web Developer”
Check this out…
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
source: indeed.com
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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
If you’re like me, you have at some point in your efforts to learn programming,
thrown up your hands and said: “I need…
medium.freecodecamp.com
Happy coding!
Please
and Share
I want to help as many people as possible. You can help me by hitting the
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
little green
and also by sharing this article on social media.
Finally, don’t forget to get your free PDF containing all the important links
from this article, by clicking here.
Web Development
2.4K
Programming
Coding
Learning To Code
Tech
64
Bill Sourour
Follow
Founder at Dev Mastery. Consultant.
Teacher.
Free Code Camp
Follow
Join our open source community’s
quest to teach coding and help
nonprofits
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com