A Guide On How To Become a Full Stack Developer In 2018

This thorough guide on how to become a Full Stack Developer 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?

Lets 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 able to manage customer queries much more resiliently.

What you would need to know

This would require the need to understand the full-life-cycle of a web application. From the front end you would need to know the design and HTML structure. Additionally, some JavaScript to aid transferring data from the front end of the website to the back-end, and vice-versa. Finally, in the back-end you would need to understand how to consume the data in a programming language and store it in a database.

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?

front end back end developer

If you haven’t heard this term already, you will hear it a lot as you start to become a developer. The front end is largely considered the client side, what the person visually see’s. Like what you’re reading now, your reading this on the front-end of this website. This part of the development life cycle houses mainly HTML5 mark-up, Cascading Style Sheets (CSS) and JavaScript.

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

Again a back-end developer is a full role on its own. Usually, these roles have an array of teams working on the back-end working to some technical methodology.

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 firstly, 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 topic’s below before, feel free to skip past them and move view the one’s 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.

1. HTML5

html

HTML5 is the truly the bones of a website’s front end and is a must-know core principle. Commonly known as Hyper-text Markup Language, the technology prevents a user from seeing a matrix-style text pattern without a single space jamming their full screen up. Furthermore, HTML has another popular use, defining meta attributes, these attributes will link to local resources like CSS and JavaScript and instruct the browser what to read and use for rules so-to-speak.

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

2. CSS3

css3

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.

3. JavaScript

js

JavaScript is what makes a website somewhat interactive, it can be tricky, but that all depends on the projects you are working on. JavaScript can be used to simply animate an element on the page and on another hand, it can send data to be stored on a database on a completely different web-address. Take the time to understand these concepts in this vast guide to solidify your knowledge.

It’s also worth learning about the evolving JavaScript versions, ES5 & ES6. This may start to confuse things, but the popularity with these new versions is sky-rocketing. Meaning, it won’t be long till knowing these are requirements to successfully land a certain job. Here are a few more resources to help you on your journey to becoming a full stack developer.

4. HTML5, CSS3 and JavaScript all-together

Just starting to think about these technologies alone can be overwhelming, and it may be hard to get your ahead 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!

5. Web-Design

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

programming code

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.

most popular programming job listings in 2017, 2018
Credit – CodingDojo

As shown in these statistics, Java seems to be ruling the world, but I do believe this is because it’s become part of certain ‘legacy systems’. Anyhow, you can put any of these languages together with HTML, CSS3 and JavaScript in one way or another. And, even if you think you’ve made the wrong choice half way through learning, don’t worry, because core programming principles are still usable across other languages.

Software or Solution Stacks

Now these statistics can be an indicator on what to learn, but, you need to consider what is referred to as a ‘software stack’ or ‘solution stack’. Each programming will come with an additional technology to execute or run that language. This will become part of the ‘stack’ that you will rely on in every day development. The software stacks below are what are 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.
  • MEAN – MEAN is relatively new in the grand scheme of things. MEAN Stands for MongoDB (DataBase), Express (Framework), AngularJS (Framework) and Node JS (A JavaScript run-time engine). Using this stack means it’s essentially possible to program with JavaScript as your back-end language. This solution is also currently fully open-sourced.
  • .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.

Quick Recap

Either one of the above software stacks are great places to start with programming languages, they come ‘already thought about’ regarding being part of a full-stack developer’s tool set. Each of these stacks are more than capable of working with HTML, CSS and JavaScript and in fact, do it extremely well. See the below resources for further reading and learning.

Resources

7. Databases

database design

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

After learning the basics, it will be time to move onto some common traits of working with databases. Learn about 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 to 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 don’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 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

HTTP Requests

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.

AJAX

I love AJAX, and you will fall for it too. It’s so simple yet powerful and the backbone of many projects across the web. AJAX provides great dynamic functionality for quickly transferring or pulling data. AJAX is a part of the JavaScript language which can be learnt about in the following resources –

  • 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, everyday.
    • 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.

Of course you can go ahead and follow @DanEnglishby, whom post’s plenty of developer-genre content everyday. Or check out these whopping lists of programmers and developers to follow.

10. Git Source Control

git source control

Git is any developers dream tool, I can’t imagine coding without it. It allows you to commit changes to your code with specific reasons attached. This provides trace-ability 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 programmers 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 –

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-game’s statistic in a database that can be visualized via a 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.
  • Forum.
  • Dashboards.
  • 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.

Interesting Links

Last of all, I hope this transfer of knowledge helps you fulfil your dream of becoming a full stack developer. It’s one of the most exciting, frustrating and joyous job to have, but that maybe slightly bias! Have fun.

A Guide On How To Become a Full Stack Developer In 2018

You May Also Like

One thought on “A Guide On How To Become a Full Stack Developer In 2018

Leave a Reply

Your email address will not be published.