Become a Professional Full Stack Web Developer in 2020 – Every Skill Required (with learning material)
Written By: Grant Darling
January 5, 2020
So you want to become a professional full-stack web developer but you don’t know where to start? Well, look no further because this article is going to walk you through every skill you need to learn to become a professional web developer!
I remember back when I first began my journey as a freelance developer, I quickly became overwhelmed by the different programming languages, client-server interactions and obscure terminology that made my goal seem completely unreachable. Well I want to make sure no one goes through the same long sleepless nights that I did to try and figure all this out.
So without further ado, here is every skill required to become a professional full-stack web developer, along with some great resources to help you learn for free!
Side Note: To keep this post as short and helpful as possible, I am not going to teach you the learning material, but rather, give you a helpful hand in finding the best material possible that already exists!
Once you start coding this distinction becomes more apparent, but for now, let's just dive in!
The first step on any web developer's journey should be to learn HTML (Hypertext Markup). So what is HTML and what is it used for? Well, HTML is a declarative language that can display elements onto a webpage.
Excited to learn? Good. Here are some really good resources to learn the basics of HTML. All of them will teach you what you need to know.
Codecademy is one of my favourite learning platforms. It helps teach you about new languages and concepts in an easily digestible and interactive way. It's very beginner-friendly and a great way to grow your skills.
Learn HTML with Codecademy
Freecodecamp is a well respected and completely free way to learn how to code! The user interface isn't exactly the nicest the work with but it is great content and will teach you everything you need to know. You need to sign in to reach the HTML lessons.
Learn HTML with Freecodecamp
Last on our resource list for HTML courses is Udemy. Udemy is also a very well know and respected learning platform that can take you from no knowledge to experienced very quickly! Feel free to check them out if Codecademy and Freecodecamp just aren't cutting it for you.
Learn HTML with Udemy
Full Web Development Course (Codecademy)
I am going to reference this course in each section of this blog post. I have used it personally and it was the easiest and most organized approach I could find. It starts every lesson assuming you have no knowledge and teaches you from the ground up.
The only thing I recommend is making sure you are building real-life projects along the way so you engrain the learning deeper than just surface knowledge. If not, the learning can feel somewhat passive and you may not retain as much information as you could be!
Once you have a clear understanding of HTML, the next step is to learn CSS. CSS stands for Cascading Style Sheets and is the language that describes how your HTML elements are displayed.
So what does this mean? This means that by using CSS, you will be able to style your webpage! CSS lets us change a plethora of design elements to our text, images or links. Altering their position on the page, their colour, and their proportions. I know this is a vague explanation but I promise our resources below will make everything much clearer.
Codeacademy also has a great free CSS course to help you learn. All projects and quizzes are unfortunately paid learning material, but the lectures themselves should be enough to give them the information you need to get a good understanding of the language.
Learn CSS with Codecademy
Flukeout has an interesting interactive style similar to Codeacademy. It's a free learning resource and does a good job of explaining the content. I thought it was a little frustrating whilst testing it out. Some of their examples seem like they might be more confusing to a new learner than helpful. However, it's free and worth checking out!
Learn CSS with Flukeout
This book is slightly more geared towards an intermediate CSS learner. That being said, it's a good book and is helpful to keep around while you study and learn this language. If you prefer books over interactive games to learn, this might be the route for you.
Learn CSS with Guidelines
I highly recommend reading this book! It helped me take my knowledge from a more basic level to an intermediate level. Do not let the name fool you, it's not a book meant for complete beginners. The author does not attempt to baby you through the book and you will more than likely need to do some extra research to figure out the end of chapter problems.
Use some of the other resources then come here. You won't regret it!
Frameworks, Sass and Software Design Apps: Getting More In-depth
As developers, we spend a lot of time coding and at the end of the day time is money! Especially when you’re freelancing. So we must not be reinventing the wheel every time we want to build something new.
As of 2020, React is the most popular framework to use. Which means it is what most employers will be building with. So if you are looking to get a job as a front end web developer, React is probably the way to go!
Frameworks build off of their respective languages by way of abstraction. A simple way to think of this is instead of writing 100 lines of complex code, you can condense this down to 10 lines that are more human-friendly to read and simpler to understand.
This is personally how I learnt React. This course is meant to teach you every major concept of the JSX language (The React language). It goes very in-depth and is a great resource if you have no knowledge of the framework.
I won’t speak too much about what Sass is. Since it isn’t a necessity to start building websites. However, it does make building websites much easier and cleaner!
Sass is a preprocessor of CSS. Meaning you write in the Sass language and it will compile (convert) into plain CSS. Sass is everything developers wished CSS was. It can be written exactly like css but also includes certain aspects to make your code more human-friendly readable, organized and modular
Sass and scss are two slightly different ways of writing your CSS code. Sass is written in a simpler and quicker method than scss. Allowing you to skip using curly brackets and opt for proper indenting to create your code. While scss could be written exactly like CSS but with all of the great benefits included in Sass.
I prefer scss as I am already very comfortable with the CSS language and it includes added benefits, like allowing me to import css libraries directly into my style.css file. An easy way to load less style sheets!
This is a great mini-series that shows you how to install Sass on your computer and all the major components of the language. This post was made for the Sass language, not scss, but it's a great video to get you started and you can always learn the scss language after. It's the same set-up process!
Once you have Sass installed on your computer, you can refer to the documentation to get a refresher on how the language works. I refer back to it often when I want to do something but forget how the syntax works.
Learn with Sass documentation
6. Software Design Applications
If you are going to become a freelance web developer (like myself), chances are you are going to need to be more than just a developer, you will need to be a designer too! On a daily basis, I use Photoshop, illustrator and xD to build and modify my websites. Here is a short description and learning resource for each.
Software Design Resources
I primarily use Photoshop to optimize images for the web and create photographs that do not actually exist. Photoshop can be a very powerful tool if you know how to use it properly and can open up a world of possibilities that you otherwise would never be able to create.
Learn Photoshop: 30 days of Photoshop
My final must-have for web design is Adobe xD. Adobe xD allows you to quickly and easily prototype websites for desktop, tablet and mobile before you start to build them. Which can be a huge time saver when going back and forth with clients about different design elements they want to implement without having to code everything up beforehand!
Learn Adobe xD: documentation tutorials
Here is an example of what my xD workspace looks like for my website grantdarling.com.
Serverside Languages, SQL and Databases: Backend Development
7. Backend Language
I find the backend to be one of the more intriguing parts of Web Development. We get to move away from what things look like, to how things work. There are many backend languages to choose from, such as PHP, Ruby, Java, and Python. These languages also have their own set of frameworks. Laraval, for instance, is the most popular PHP language.
My opinion is to learn PHP for your backend language. It is the most popular backend web development language and is used by the world's largest CMS, Wordpress! Meaning you can find a lot of freelance work from small business' that need modifications to their websites.
This video is a great resource to get you up and running with PHP in under 5 hours. I recommend following along with the video or you may not retain as much information as you hope.
Learn PHP with freecodecamp
The other major component of learning backend Web Development is understanding how to interact with a Database. In Web Development, the most popular of which is a SQL database, which you can interact with using the SQL language.
a SQL database is a relational database, meaning the data is essentially held in tables, columns and rows. If you have done any work in Microsoft Excel, SQL will be much easier to understand conceptually while you learn this language.
Here are my top resources for learning SQL.
These lessons by studybyyourself.com are a great free resource to start learning SQL. They have both a beginner and an advanced section to start your learning journey now!
Learn SQL with studybyyourself
The command line seems scary because, at first, you have no idea what's going on. However, if you spend a bit of time getting comfortable with it, it starts to get a lot more intuitive and easy to understand.
I won’t talk too much about the command line because there is a lot to cover, but here are some great resources that will.
A great way to learn that will take you from complete beginner to pro in no time! The course is free for the first 7 days. I have used this resource and can say it is very manageable to complete in a week.
Learn the command line with Codecademy
If you want to take a more hands-on approach where you need to Google and figure things out yourself, this game could be for you. It takes you from level 0 to level 34. Teaching you the basics of the command line and progressing to more advanced topics.
Learn the command line with overthewire
Git is an industry-standard version control software that allows you to track changes for a web development project. The easiest way to envision what Git does is to think of an old video game with multiple save files. At any point in time, you can go back and check your game progress and return there if something goes wrong. The only difference is that multiple people can be playing the same game at one time and Git makes it easier to track who was making changes and that they do not conflict with each other.
Hopefully, that makes sense, but if not, these learning resources should clear things up!
Great documentation to help you visualize Git, provides a cheat sheet and how to branch, add, commit, merge, revert, cherry-pick, and rebase!
Learn Git/Github with try.github.io
Full Web Development Course (Codecademy)
That's pretty much it! If you can learn these core skills, you can pretty much build anything you want on the web! Of course, your learning never really stops and there will always be something new and exciting to explore. However, these skills will get you to were you need to be so you can go out there and land your first job or client!