Note: I have written a much better, more comprehensive article on this topic here. I recommend checking that out instead!
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!
HTML, CSS and Javascript: The Necessities of Frontend Development
The first step in learning to become a Full Stack Web Developer is learning what developers call “The Frontend”. In its most basic form, the front end is made up of three languages: HTML, CSS, & Javascript. You can think of the front end as everything you see on a webpage, while the backend is everything it does. Want to display a contact form on a page? That’s Frontend development. Want to send an email from your contact form? That’s backend development.
Once you start coding this distinction becomes more apparent, but for now, let’s just dive in!
1. HTML
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.
It is important to note that HTML is not a programming language! It has no logical components and because of this, it can’t be considered a language that you ‘program’ something with. It’s declarative, meaning it can ‘declare’ an element to exist on the page. Once you start working with HTML and Javascript, you’ll quickly start to see the difference between the two!
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.
HTML Resources
Codecademy: Interactive
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.
Freecodecamp: Interactive
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.
udemy.com/course/hmtl5-training/” target=”_blank” rel=”noopener noreferrer”>udemy: Interactive
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.
udemy.com/course/hmtl5-training/” target=”_blank” rel=”noopener noreferrer”>Learn HTML with udemy
Paid Learning:
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!
2. CSS
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.
CSS Resources
Codecademy: Interactive
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.
Flukeout: Interactive
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!
CSS Guidelines: Book
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.
Paid Learning:
Full Web Development Course (Codecademy)
3. Javascript
So we now understand that HTML and CSS make up the information and design of a webpage. But what about adding interactivity to our website? That’s where Javascript comes in. A crucial element in becoming a professional full-stack Web Developer!
Javascript is a programming language most commonly used for frontend web development (and now backend too!). Javascript is a client-side programming language that compiles in your web browser. It allows us to create interactivity in our elements and countless other things.
A common example of Javascript in action would be a slider on a webpage or displaying a heart icon over an Instagram photograph when it is double tapped.
Javascript is hard to learn. Some may disagree since it is much easier than other languages (like C), but I know I had a tough time with it and you probably will too. That’s OK. The trick is to stick with it and slowly but surely, it will get easier! It just requires some practice.
Check out these great resources that helped me out immensely while trying to learn Javascript. Hopefully, they will help you too.
Javascript Resources
Codecademy & Freecodecamp
Codecademy and Freecodecamp have great Javascript tutorials to get you up and running quickly. If either of these resources worked for you for HTML or CSS, it will work for you while learning Javascript too.
Learn Javascript with Codecademy
Learn Javascript with Freecodecamp
You Don’t Know JS: Book
Learning Javascript through books helped me to take my learning to the next level. You Don’t Know JS is a great book to keep close by when trying to learn Javascript. It takes you from the very basics to much more advanced topics.
Learn Javascript with the You Don’t Know JS book
Eloquent Javascript: Book
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!
Learn Javascript with the Eloquent Javascript book
Paid Learning:
Full Web Development Course (Codecademy)
Frameworks, Sass and Software Design Apps: Getting More In-depth
4. Frameworks
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.
For that reason, to get into some real frontend development work, we will want to start using a frontend framework. Most frontend frameworks are built off of Javascript. Some very popular options are React, AngularJs, & Vue.
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.
So if you feel like you have a good understanding of Javascript, let’s jump into some learning lessons with it’s most popular framework, React!
React Resources
Codecademy: Interactive
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.
React Documentation: Do By Learning
Of course, you can always dive right into the React documentation that walks you through a simple Tic-Tac-Toe game to show you every major component of the JSX language!
Paid Learning:
Full Web Development Course (Codecademy)
5. Sass/scss
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!
Sass Resources
Sass Set-up and Basics: Video
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!
scss Documentation
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.
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
Photoshop
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
Illustrator
I don’t use Illustrator that often when I build websites. However, I do use it whenever I need to make icons for my webpages (which needs to be done more often than you think!). For example, this page represents all the icons I created with Illustrator. If you’re a talented artist, creating more advanced illustrations for your websites/web applications could make your work stand out above the rest too.
Learn Illustrator: a complete beginners guide
Adobe xD
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.
PHP Resources
Codecademy: Interactive
As always a great interactive way to learn PHP for a complete beginner. If you are brand new to programming, I recommend you start here.
freecodecamp: Video
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.
Paid Learning:
Full Web Development Course (Codecademy)
8. SQL & Databases
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.
SQL Resources
Codecademy: Interactive
Codecademy’s SQL course is great for complete beginners.
studybyyourself: Lessons
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
Paid Learning:
Full Web Development Course (Codecademy)
Necessary Tools Relating To Programming
10. Command Line
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.
The most important reason to start using the command line is that it will save you a lot of time and you can start utilizing very powerful programs such as running javascript outside of a browser, creating your own scripts, and allowing you to use Git & Github (more on this below)!
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.
Command Line Resources
Codecademy: Interactive
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
Overthewire: Game
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
Paid Learning:
Full Web Development Course (Codecademy)
11. Git/GitHub
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!
Git/Github Resources
Codecademy: Interactive
Another Codecademy Pro course but with a 7-day free trial. A great resource if you have time in the next 7 days to learn!
Learn Git/Github with Codecademy
try.github.io: Documentation
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
Paid Learning:
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!
