The Complete Roadmap - Full-Stack web development

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).

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).

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.

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.

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.

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 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.