2018 Full Stack Developer Road Map: Part 1 – Front End Development

There’s never been a better time to become a Full Stack Developer. The demand for Full Stack Developers has been steadily on the rise for years and resources to learn have never been more available then they are today. In fact, there are so many resources that it can be overwhelming. So I’ve taken the time to compile what I believe to be the best road map to become a Full Stack Developer in 2018. I’ve included links to some learning resources, but feel free to branch out and use other resources, as this list is only a small fraction of what is available. Also, feel free to provide links to alternative learning resources in the comments section if you’ve completed them and found them valuable.

I had originally intended this article to cover front-end, back-end, and devops but I quickly realized how ambitious that was and decided to break it into multiple parts. In part one we’re going to cover front-end requirements exclusively.

The steps included are taken from my own experience as a Full Stack Developer and are technologies that I use on a daily basis in my career. That’s not to say there aren’t more to learn, but the ones listed are the must haves to navigate your way successfully as a Full Stack Developer.

Step 1 – Learn HTML

HTML is the core language of the web and it’s the first thing you should learn on your journey to becoming a Full Stack Developer. It’s tempting to dive straight into Javascript or Python because it might seem more interesting, but ultimately that would be a mistake. Your Javascript and Python will likely be outputting or manipulating HTML and you’ll need to know what it means.

Luckily there are all kinds of resources available to learn HTML and working with it is as easy as opening a file in your browser.

Learning Resources

Step 2 – Learn CSS

Cascading Style Sheets (CSS) is how you make your HTML not look like a terribly formatted newspaper article. It’s an extremely powerful styling language that allows you to create user interfaces from raw markup. You’ll quickly learn that HTML and CSS go hand in hand on the web, and that you’ll rarely see one without the other. With the adoption of CSS3 on all major browsers, the limits on what you can produce with CSS has been stretched way beyond what was possible only a few years ago. With that said, learning CSS is the next step in our road map to becoming a Full Stack Developer.

Learning Resources

Step 3 – Learn Javascript

If HTML elements are the building blocks of the internet, Javascript is the mortar. Javascript is a scripting language that is used by browsers to add functionality to websites. Ever since the release of NodeJS, Javascript has become a full-stack language. It has proven to be one of the most important programming languages you can learn when become a Full Stack Developer. Although Javascript has also found it’s way into most back-end programmer tool belts, for this article we’ll be focusing on the fundamentals of Javascript from the client side or front-end perspective.

When learning Javascript, take your time and become familiar with the core concepts of the language. Compared to most programming languages, Javascript is considered to be fairly quirky and can often produce unexpected outcomes or performance issues. Laying a solid foundation of the language’s fundamentals will give you a strong leg up against the competition.

Learning Resources

Step 4 – Learn CSS Preprocessors

Although CSS is extremely powerful, it’s ability to adhere to some of the core principals of good development is significantly limited. Particularly when it comes to the DRY (don’t repeat yourself) principal. CSS Preprocessors like Sass and Less help make writing maintainable CSS easier by providing a sort of standard library of functions. Variables, nesting, mixins, conditionals, and loops are some examples of tools that Preprocessors provide.

In this day and age, you’ll be hard pressed to find a modern application that was developed without using a CSS Preprocessor. That’s why step number four in the 2018 Full Stack Developer road map is to gain an understanding of how Preprocessors work and to become familiar with either Less or Sass.

Learning Resources

Step 5 – Learn a Single Page Application Framework

If you’ve been interested in learning to become a Full Stack Developer, you most likely have heard buzz words like React, Vue, and Angular. These are what we call SPA frameworks or Single Page Application frameworks. Over the last few years, application development has moved away from rendering HTML on the back-end with template processing languages and has moved to rendering applications in real time using SPA frameworks. The result is a much smoother user experience where the page rarely needs to reload during the use of the application.

However, this has lead to more and more complicated front-end frameworks and a much larger dependency on Javascript. The result is that front-end development now requires knowledge of fairly complicated application frameworks and, to some degree, an understanding of how to interact with a server side API. For these reasons, step number five is to learn how SPA frameworks are used to create seamless user interfaces and to become familiar with at least one of the current frameworks.

When trying to decide which framework to learn, keep in mind that the nature of the development industry makes it almost impossible to know for sure which frameworks will continue to be used in the future. Also, keep in mind that although frameworks can have a shelf life, the applications that are built with them will continue to exist and require developers who understand their technologies to maintain them.

Learning Resources

Step 6 – Misc. Topics

If you’ve gotten this far, let’s be honest, you’re probably a keener. Which means you probably want to go above and beyond. If that’s the case, here are some miscellaneous topics that you should invest your time into.

Git (Version Control)

Unit Testing (Javascript)

Javascript Tool Libraries

CSS/Style Frameworks

Step 7 – Practice, Practice, Practice

Now that you’ve learned the fundamentals of front end development, you’re a huge step closer to becoming a Full Stack Developer. Like most skills, it’s import that you practice to maintain your edge and stay immersed in the industry. At this point you should be able to create dynamic web application interfaces using the most modern web technologies available.

Unfortunately, that’s not enough! Employers want to see projects that you’ve completed from start to finish and that you are passionate about. So get to work! Build things you are interested in, things that you think would be cool, or things that solve your own problems. Build out your portfolio and double down on technologies that you are most interested in.

If you’ve made it this far, you should take the time to pat yourself on the back. Most people can lead a successful career working exclusively in the topics listed above. In the next article, we’ll cover technologies and concepts required for learning back-end development. Until then, good luck!

2018 Full Stack Developer Road Map: Part 2 – Back End Development


Looking for Tech Jobs? Check out my website ObviousJobs.com for jobs with full salary disclosure.

Connect With Me

1 Comment 2018 Full Stack Developer Road Map: Part 1 – Front End Development

Leave a Reply

Your email address will not be published. Required fields are marked *