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.

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.

The Web Developer Bootcamp — Udemy_The only course you need to learn web development — HTML, CSS, JS, Node, and More!_www.udemy.com

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:

Bootstrap 4 From Scratch With 5 Projects — Udemy_Master Bootstrap 4 and build 5 real world themes while learning HTML5 semantics, CSS3 and Sass_www.udemy.com

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.

Two Scoops of Django 1.11: Best Practices for the Django Web Framework_The book about best practices in Django, Two Scoops of Django 1.8 has been revised, updated, and expanded._www.twoscoopspress.com

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.

The Complete Node.js Developer Course (2nd Edition)_Learn Node.js by building real-world applications with Node, Express, MongoDB, Mocha, and more!_www.udemy.com

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.

Modern React with Redux — Udemy_Master the fundamentals of React and Redux with this tutorial as you develop apps supported by NPM, Webpack, and ES6_www.udemy.com

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.

Docker Technologies for DevOps and Developers — Udemy_Learn how to develop and deploy web applications with Docker technologies. Take your DevOps skills to the next level._www.udemy.com

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!