Full-Stack Web Development - the Complete Roadmap
Learning web development is a huge advantage for a founder, even understanding
the basics will be extremely useful. This post will give you a high-level
overview of everything you need to learn, a roadmap for getting started, and a
collection of the best resources you can use to learn quickly.
(this post was originally published on Startup Lab, subscribe to my newsletter to receive useful articles, resources, and advice that will help you to build and grow your comany).
I am going to tell you everything a professional full-stack web developer needs
to know, but if you’re only interested in understanding the basics — you can
stop reading after “Domain names and Hosting” section.
Foundations (HTML/CSS/JS)
The best way to begin is by learning the 3 main technologies all websites are
made of. HTML defines the content of a website, CSS specifies how it
looks(fonts/colors/images/etc), and JavaScript allows you to dynamically
manipulate elements(everything interactive you see on the internet was made
using JS).
The best way to learn the basics is to go through The Web Developer Bootcamp on
Udemy.
It will take you through the process of creating your first website, and give
you a great place to get started.
Frameworks
Frameworks are tools that allow you to implement all the common functionality
much faster and easier.
I recommend using frameworks as early as possible, because they will enable you
to get results much faster, and at the same time will teach you the best
practices in a very natural and intuitive way. Just by using frameworks, you
will absorb a huge amount of knowledge incredibly quickly, and avoid wasting
time on anything unnecessary.
In web development, there’s always an enormous amount of technologies to choose
from, and that choice can often be difficult for the novice. For the rest of the
article I will spare you the confusion, and instead of listing pros and cons of
every option, I’ll just tell you the best things to use based on my experience.
The best place to get started is learning Bootstrap and jQuery. These
are by far the most popular frameworks that are used by the vast majority of the
websites.
Bootstrap is a CSS framework, that gives you a bunch of easily customizable
interface elements, and allows you to create responsive websites very quickly
(responsive means they look well on mobile devices).
Bootstrap has recently released the new version, and you can get started with it
by following this course.
jQuery is a JavaScript framework, that significantly simplifies the way you
manipulate webpage elements. It has an enormous amount of plugins for every
conceivable purpose, so whenever you need some interactive element, you can be
sure you will find a way to create it with jQuery. It will also be very easy,
because StackOverflow already has solutions to 95% of the issues you will
encounter.
To learn the fundamentals, you can just watch this excellent
lecture.
Finally, for the sake of completeness, I should mention
Compass. You don’t need to think about it at the
very beginning, because it’s not essential for your ability to make websites,
but when you reach a point where you’re writing a lot of intermediate/advanced
CSS, and begin to find it a bit tedious, you should definitely keep it in mind.
Compass makes the process of writing CSS **way **faster and more enjoyable, so
if you can invest a couple of hours into learning that, that will be one of the
best productivity boosters you can imagine.
WordPress
WordPress is the world’s most popular content
management system. If you are not a technical person, and are just looking to
quickly get started with making an easily customizable website — you just learn
to install and use WordPress, and that’s pretty much it, you don’t need to look
any further. It has an infinite amount of themes and plugins that will cover 90%
of your needs.
If you are interested in becoming more of a professional web developer, and
learning to create your own custom websites, you might want to skip it and learn
a backend framework(I’ll describe them in the following sections).
Domain Names and Hosting
Once you have learned the basics and have built your first website, naturally
you want to make it available to the world. Again, in the interest of saving you
hours of research, I will not list hundreds of available options, and just tell
you the “right” things to use.
To buy domain names you will use Namecheap.
As the name implies, it has very good prices, and also an excellent user
experience.
To host your first pages, you should use Bluehost,
it is cheap, very easy to use, has excellent documentation and a lot of
automated tools. It makes installing WordPress or hosting simple html pages
extremely easy, so if your goal is to get started quickly — that is exactly what
you need.
Finally, when you will go further and gain more skill — you will need a
VPS(virtual private server). It is, to put it simply, a remote computer you have
the complete control over, and will use to serve the sites you have built with
frameworks. I highly recommend using
DigitalOcean, it has great prices, beautiful
and intuitive interface, and I’ve been happily using it to host all of my
websites for the past 4 years.
Backend Frameworks
Now that you have learned the basics, and created several simple websites using
the tools listed above, you can decide to go further, and learn how to
professionally create custom websites.
To do that, the best place to begin is learning one of the backend frameworks.
Backend frameworks run on server, and dynamically generate html for a website
every time the user visits a url.
As always, there are dozens of options, but I will help you to narrow it down
to 3 — Django, Ruby on Rails, and Node/Express.
The opinions on which one you should learn first will differ among different
developers, but I strongly recommend you to begin with Django, and then learn
Node/Express.
The major advantage of Django is that it is written in Python — a beautiful,
powerful language that is used in every field you can imagine, and at the same is
time the best choice for your first programming language.
Django itself is straightforward, powerful, flexible, has excellent documentation, and all
the tools you’re going to need to build 95% of the websites. More importantly —
it will give you an excellent framework for thinking about the backend code, and
understanding it is an excellent way to learn the core fundamentals of web
development in general.
My favorite introduction to Django is the TutsPlus course Getting Started with Django, and the best way to go from a beginner to intermediate/advanced is an excellent
book Two Scoops of Django.
Also, I highly recommend free youtube
tutorials by Mike
Hibbert’s.
Node and Express
Node and Express are extremely powerful tools that I recommend you to
learn after Django. They might be a bit tough for a beginner, but if you have an
understanding of Django — you will learn them very quickly and naturally.
Node has many advantages, and the best way to experience them is to try it for yourself. Often it will enable you to build websites much quicker than you would with Django, you will understand a lot of backend programming concepts in more depth, have an easier time building APIs, real-time webapps(like a chat or a game), and universal webapps(you'll encounter them when you will learn React).
The best course I have encountered is The Complete NodeJS Developer Course.
Frontend Frameworks
If you understand HTML/CSS/JS and one backend framework, you are a capable web
developer with the power to create many kinds of websites. If you want to become
a Full-Stack developer — welcome to the world of frontend frameworks.
Frontend frameworks will enable you to create powerful single-page applications.
At this point you’re essentially making an app that runs completely in the
browser, occasionally exchanging data with the server(like Gmail or Trello).
For a long time there has been a lot of competition in this space, but as you’re
reading this article, the best choice is pretty clear — you should learn React
and Redux.
I can’t go into explaining how they work or what are their advantages(it would
take a long time), but luckily, there’s an absolutely brilliant course that will
teach you everything you need to know - Modern React with Redux.
And to learn more advanced functionality, you can watch the 2nd part of this
course by the same author - Advanced React and Redux.
The author of these courses, Stephen Grider, is an absolutely brilliant teacher,
he explains everything incredibly well, and you will have a ton of fun learning
all the complexities of these technologies by following his courses.
I highly recommend you to create a website with Node and React/Redux, because
it will really help you to grasp how to create and use REST APIs, and combine
the whole set of technologies into a powerful and useful software.
DevOps
Pheew, that’s a lot of stuff. The final part of the puzzle a Full-Stack Web
Developer needs to learn is DevOps. It is a deep subject that I’m not an expert
in, but the fundamentals of deploying websites are not that hard to understand.
By now, chances are you have learned a lot of it just by building and deploying
websites. You have probably used github and some CI tool to deploy your
websites, and Nginx to serve them.
Now, the big thing you should learn is Docker. Docker is an industry
standard for deploying web applications, it makes the whole process fast,
elegant and convenient.
Personally, I have learned Docker from this course, and I’m very happy with it. This course is short, straightforward, to the point, and easy to understand.
Conclusion
I hope this article was useful to you. Obviously, it’s impossible to cover
everything about this deep, complex, and rapidly evolving field in one article, but
I believe that topics and resources above will give you a clear vision of the
path ahead, and a useful roadmap to follow. At least, this is the kind of
article I wish was available to me a few years ago.
You will certainly learn more as you follow along, and go into depth into the
topics that interest you the most, but I think that now your path will be much more
straightforward and less confusing.
If you have questions, comments, or are looking for advice, don’t hesitate to
message me to [email protected].
Also, if you’re interested in more articles on web development, startups, and
building your online business - go ahead and subscribe to my weekly newsletter!