We may earn money from the courses and companies mentioned in this post.
This thorough guide on how to become a Full Stack Developer in 2020 comes from real-life industry experiences from over the past decade. It is written with time-served advice, highlighting major factors of the full-stack cycle in easy-to-digest sections. This modern-guide takes the development industries’ current trends into major consideration too, ultimately giving you the best chance at landing yourself employment.
Firstly, what does Full-Stack Developer even mean?
Let’s explain the meaning of the role and the answer will become clear. The role is generally a vast array of different knowledge bases across many languages one might say. But, in a nutshell, a full-stack developer is an individual who can take a client’s idea from paper to a fully operating web-application or system. Sorry if that definition is a bit vague, here is a real-world example to help you understand what it means.
Client Idea Example
A customer support ticket system to allow customers to raise ‘query tickets’ around the clock. Customer services are able to manage customer queries much more resiliently.
What you would need to know
If this is still not 100% clear, read this more technical and precise guideline to what a full-stack developer is by Laurence Gellert.
Understanding the front and back end
A full-stack developer skill-set must possess both the ability to work with the front-end and the back-end. The following part of this article will explain the basics of both of these terms before we get into what must be considered to learn before you are ready for real-world development.
What is the Front-End?
It is possible to be a front end web developer as a professional too, who’s full responsibility is to look after or develop the front-end of a website daily.
What is the Back-End?
The back-end is where core logic happens, the logic that is hidden from the front-end. This is where many tasks within an application are managed. In addition, this is usually where the database sits, enabling the programming language to work with data and deliver to the front-end.
The full guide to becoming a Full Stack Developer
Now we have the basics cleared up, there is a steep learning curve ahead. The below-numbered list is what is first, what is considered to learn, and secondly, advice to aiding your understanding of certain techniques or core principals. If you’ve covered some of the topics below before, feel free to skip past them and move to view the ones you haven’t. Each part of the full-stack development guide will feature a brief introduction to what the technology is about and lead on to some resources that are available for free on the web.
Essentially it makes a website visually structured by sectioning out visual data and design across a web page and is also persistently used by search engines to help them understand what exactly their crawlers are reading.
Resources for HTML
- Understanding the very basic principles with an Intro to HTML5 elements
- Take this free online HTML5 course on Free Code Camp. It covers a lot of bite-size topics to add to your knowledge.
- Learn about how search-engines work hand-in-hand with HTML5. (Optional reading)
- An extremely detailed mark-up cheat-sheet defining and explaining each and every element. You can even print this sheet too.
CSS3 or known otherwise as Cascading Style Sheets are what is needed to visually transform a web page. Think of it as HTML5 is a white sheet of paper and CSS3 is your paint. But, version 3 of CSS isn’t just any old paint, it’s got a vast selection of different styles you can apply to really beautify a web page. You may even want to consider using a CSS framework, this is completely optional, though. Below are some important topics to get-to-grips with.
- Take this online-course on CSS that has a nice selection of beginner sub-sections to work through.
- Flexbox is very important to know for modernized design, it’s easy to use, powerful, and capable of doing just about anything.
- Learn about the box model which is a core concept for understanding how size and positioning works.
- Have a look at the top ten CSS frameworks currently available to use for free.
- Have a go at this free introduction course on CodeAcademy
- Learn about JQuery and what it’s capable of, then take a look at this JQuery course full of gloriously detailed chapters.
Just starting to think about these technologies alone can be overwhelming, and it may be hard to get your head around at first. Have a read through this great article on these technologies working together, the author has used a seriously clever analogy against the human-body to simplify it!
This isn’t always a key factor in the software-stack but can come in handy for certain job-roles. Hopefully, you already have an eye-for-design, simply put, knowing what looks good. If you do, it’s a huge bonus, this way you will naturally know what looks good and what does not. Not to worry though, there are plenty of CSS frameworks out there that are perfect for this situation. Pre-designed components by incredible designers ready for your implementation.
Some questions to ask yourself after finishing your web-design –
- Would I like to use this site?
- Would I trust this site?
- Is the layout fluent?
- Are certain sections eye-catching?
- Would I pay for this design?
- Can I see all of the navigation instantly?
- Can I navigate to any page from the navigation bar easily?
In any case, the design usually flows with what your web-application intends to do, so it’s worth doing some research on similar applications to get some ideas. Take a look at this modern CSS framework list that has some of the most popular available frameworks that are free to use. These frameworks are simple to get set up in your own project and generally come with extensive documentation. Additionally, take a look at this comprehensive guide to modern web-design.
6. Back-end programming language
Now when it comes to programming languages there are so many contenders to choose from. There is no right or wrong when it comes to making the choice either, so don’t sweat it. It’s always good to see what’s popular when deciding on something of this nature, whether it’s a new CSS framework I want to use or similarly a programming framework. Websites like Google Trends are perfect to see what’s performing the best in terms of popularity in the industry.
Programming Languages to choose from
CodingDojo executed an investigation to answer what really was the most in-demand programming languages in 2017 and 2018. See it here, The 7 Most In-Demand Programming Languages of 2018. A great chart has been put together displaying the seven most popular job postings for programming languages across the years of 2017 and 2018. See the graph below.
Software or Solution Stacks
Now, these statistics can be an indicator of what to learn, but, you need to consider what is referred to as a ‘software stack’ or ‘solution stack’. Each programming will come with additional technology to execute or run that language. This will become part of the ‘stack’ that you will rely on in everyday development. The software stacks below are what is currently popular in the modern development industry. This can also help make your choice on which programming language to choose.
- WAMPP or LAMPP – This software stack that can run on both Windows and Linux is based on the PHP language with Apache, MySQL, and PERL. This software stack is probably the easiest and the quickest to use to get up and running because everything is installed to your environment in one single install. WAMPP has been around for a long time and therefore is extremely stable.
- .NET ASP.NET is Microsoft’s answer to web applications, it uses the ASP.NET web application framework whose files are executed by IIS, an extremely powerful web-server. Using this type of stack, you would use the C# programming language with an additional language named Razor. Razor allows you to put ‘inline’ C# code within HTML documents, making pages extremely versatile. ASP.NET is commonly used with SQL Server but it can be used with much more.
- Python with Django This framework has opened the doors to an easy solution to building a web-application with native Python programming language. Django interfaces with databases such as Microsoft’s SQL Server and MySQL. The selection of the database will come down to preference in the end. Django is still evolving rapidly and comes with a great knowledge base to trawl through when getting set up.
- FreeCodeCamp offers some tutorials and courses on many specific parts of the back-end development. Including Node and MongoDB.
- Learn C# with this interactive learning tutorial and prepare yourself for the world of ASP.NET.
- Get Started with these stacks –
Again, another vast selection of technologies to use when it comes to databases, but all-in-all, knowing the syntax is what should be worried about at first. No matter what technology is used, you still need to be able to pull data out into an application or insert or delete from a database’s table.
After learning the basics, it will be time to move onto some common traits of working with databases. Learn about the primary and foreign key, relationships between tables like ‘one-to-many’, and how to construct table-joins. Understanding these principles will give you a keen approach to building and working with any database, regardless of what data goes into it. Knowing these before creating a database will essentially save you a lot of time in the long run too.
According to the StackOverflow 2018 Developer Survey, mostly SQL technology dominates the top ten most-used databases for development which is great for getting the most out of learning SQL syntax. This is particularly good because most ‘SQL Engine’ technologies have virtually the same syntax, so when you learn MySQL Syntax, it’s a breeze to start working with SQL Server Syntax.
MongoDB is also present, and quite a contender in 2018 too, so learning this syntax should be considered too. MongoDB is quite different from modern SQL technology because it’s predominately file-based, which, is hard to get your head around at first, but is thoroughly understood when reading this huge getting started documentation.
8. HTTP requests, GET & POST and the beautiful AJAX
Yep, sounds funky doesn’t it? These small functional parts of the full stack cycle are tremendously important to understand. The above terminologies are the real bread and butter of dynamic applications, aiding the seamless transfer of data to one place to another. They will inevitably use sooner or later so here’s a couple of resources to help out
- Learn the core principles on HTTP requests before you move onto Get & Post by TutorialsPoint & Code Academy
Get & Post
- This tutorial/example shows how GET and POST work in PHP, but don’t get bogged down by that, the principles work for all languages, so this article is perfect – Get & Post Tutorial.
- Another explanation about Get & Post by W3CSchools.
- This both visual and hands-on article provides knowledge about the AJAX function.
- Check out the following article for a more advanced dive into the world of AJAX.
9. Make a twitter account, now
Twitter, believe it or not, is an absolute gem when it comes to becoming a developer. The resources that are thrown around on the social-network 24/7 is immense. I started using Twitter about 4 months ago and could not believe I hadn’t done it sooner. Here are some reasons to join
- Be among like-minded individuals.
- Keep up with the latest trends within the development industry
- Find really informative and meaningful content in your feed, every day.
- Have fun with some programming comedy in the style of jokes and memes.
- Be part of a worldwide community in an instant.
- Take the #100DaysOfCode challenge with many other beginners, see the rules here.
- Follow influential developers in the industry.
10. Git Source Control
Git is any developer’s dream tool, I can’t imagine coding without it. It allows you to commit changes to your code with specific reasons attached. This provides traceability from the very first creation of the code and can even compare with earlier versions line-by-line too. It’s forever becoming more popular among job adverts too, so it’s virtually a must to have some working knowledge of.
Git has now even been taken on board by Microsoft’s Visual Studio and VS Code as a default source control extension. Git has its own mini-language set of commands that you will need familiarize yourself with. Best start using Git as soon as possible, you will reap the benefits in the long run.
- Getting Started with Git This comprehensive documentation will give you the knowledge to start using Git as an everyday tool.
- This Git Commands reference table is perfect to bookmark or print. Each command is listed adjacent to a descriptive snippet of exactly what that command does.
11. GitHub (Optional)
Although this is completely optional, GitHub works alongside git and offers an online code repository that can either be public or private. These ‘repos’ are then accessible to you via the World Wide Web. This, of course, has so many benefits for working as a team in a commercial industry. GitHub is just as good a tool to store your own personal repositories though.
Take the time occasionally to see what’s trending on GitHub too, this allows you to see what’s heating up across the industry. Repositories get ranked as most ‘Favourited’ or ‘Starred’ then you can filter by technology also, for example, the most starred repository in PHP for the month. Repos include a wide range of sources including frameworks, drivers, engines, designs, and simple scripts.
You can find a lot of knowledge on GitHub so it’s certainly worth having a dig around on there. It’s also possible to take part in on-going open-source projects too, which always looks good on your C.V or resume.
12. Some helpful tools for your development career
When it comes to self-teaching, the more free-resources you can get your hands on the better. So, I wrote an article listing all the greatest online tools that you can be used throughout any web-developer or programmer’s career. This list also applies to a full stack developer, each tool is free to use, and all have unique features of their own. List of the best tools for web developers & programmers.
13. Take some online courses
There are plenty of paid courses available across the web that are really cost-effective. As long as you can sacrifice a few hours to sit and do them, you can turbo-charge your journey to becoming a developer. See some of the hand-picked courses below –
- Learn Full-Stack Web Development Building Over 40+ Projects. Enables learning by building 40+ projects across a range of technologies. Starting with the basics of HTML5 and moving up to advanced back-end learning.
- Another great course that teaches Object-oriented programming with PHP, working with MySQL databases and much more with HTML & CSS. There are 21+ hours of on-demand video learning too.
14. Getting to grips with a great integrated development environment
With all this knowledge you’re going to need a great tool to unleash your coding skills. That means you need a great IDE, which is software you write code in. You want a tool that has some of the following features –
- Intelligent autocomplete (This really helps the learning curve of coding in itself)
- Debugging support
- Intelligent syntax highlighting (This will highlight in your code where you go wrong)
We wrote an article that lists some of the best IDE’s to use as of 2020 here.
15. Learn about debugging
Learning how to debug is one of the greatest tools a developer can have in his arsenal. It not only helps you solve issues in your code but it has a major effect on understanding the code you write so much more. There is a great article exactly on this topic on the Microsoft website which is worth a read. – Debugging code for absolute beginners
Putting it to the test
Obviously sooner or later you will want to get your hands dirty with some serious coding, real-life projects, and meaningful applications. You could start by building something of your own interest, like a web application that stores an online-games statistic in a database that can be visualized via an HTML data table (That’s if it’s of interest of course!). The world is your oyster though, once you have sufficient knowledge, you really do have the power to turn paper-ideas to real-life applications. There are many options that you could have a crack at, see a few ideas below –
- Technical support ticket system.
- E-commerce online-shop.
- Custom Blogging Content Management System.
- Simple Data Entry Management System.
Alternatively, take a glance at this mega-beginner project list on Reddit, there is plenty of inspiration for a custom project to propel your learning curve.
Recap & Summary
There is a huge amount to sink your teeth into regarding learning, but, it’s not something that can be done overnight. With dedication, discipline, and the right resources, you will ultimately reach the goal of being a full-ready full stack developer. Just so you know, it’s perfectly fine to diverge into other resources from time to time, but for the most part, take these guidelines seriously and try to get as much in-depth knowledge of each section.
Last, of all, I hope this transfer of knowledge helps you fulfill your dream of becoming a full stack developer. It’s one of the most exciting, frustrating, and joyous jobs to have, but that may be slightly biased! Have fun.