In this post I’ll share with you all the FREE resources I know of, so you can become a front end developer. I’m also organizing these resources into a learning strategy so you can make the most out of them.
For those that don’t know me, I’m Nicolas Kao Sartor and I’m a full stack web developer. I’ve been through all the things a beginner developer goes through before being job ready, so I understand the struggle and I can guide you through it!
The first thing to know is which technologies to focus on? There are so many things out there!
Now that you know the main technologies you will start to become familiar with for the next three months let me make one thing clear…
As a developer your job is not to remember all the syntax from a language, your job is to understand the tools that language/library can provide you with, and later on during the development of an application, be able to do some research in order to figure out the syntax. In other words: Don’t try to memorize everything, just start getting practice as soon as possible and then start building projects and escalating the challenge.
Let’s begin laying out your learning strategy 🙂
The best thing you can do is to first have an overview of the technologies you are going to use. This will help you become more familiar with them and speed up your learning process.
So, before you start ANY of the courses that I’ll list bellow (and yes, they are all FREE), I want you to go on YouTube and watch a video about the language/library. I’m going to list some videos bellow, but the basic idea is for you to search for: “Learn X in 30 minutes” or just “X in 30 minutes”.
You’re not supposed to learn everything about the language/library in 30 minutes, again you are only preparing yourself mentally for what is about to come. First you make this very quick and superficial overview and then, you start to go deeper into it.
By understanding what you are about to get into, you will be able to guide yourself much quicker (essential in order to learn front end development in 3 months) and you will also be able to get unstuck a lot faster by understanding how to find alternative sources of information.
The next section I’ll start by giving you the resources I’ve selected in a very specific order, I recommend you to follow that order.
First things first, watch this video: https://youtu.be/hrZqiCUx6kg
After watching the video above, I want you to sign up for freecodecamp.org. And although you might be tempted to just follow the map they have laid out, I recommend you keep reading this post to the end so you can add some different courses in between, we will be mixing courses so you can get the best and most up to date information out there.
Once you have signed up for freecodecamp.org, I want you to start the HTML5 and CSS section of the Front end Development Certification. Once you get finish the HTML part watch a overview video of CSS3.
HTML is all about formatting content.
Now, into CSS…
There has been a lot of updates to CSS, many updates make learning bootstrap redundant (like the CSS grids for example), and as you may have noticed, freecodecamp.org still recommends that you learn about bootstrap, you may if you want to, but I can say that CSS is a much more complete language than it was in 2015, they have added a lot of technologies that people used to rely on bootstrap in the past to get done.
I will recommend that you learn your CSS portion from this YouTube playlist: https://www.youtube.com/playlist?list=PLkBfv4fGBau81ldUMNZszy9qNkaKdonQ_.
On top of that, take a look at this CSS Grid Layout Crash Course from Traversy Media (I also highly recommend you subscribe to this channel).
The most important thing you will learn in CSS is how to create responsive websites and applications, that is, websites that work both on desktop and mobile without having to add too many media queries.
And now that I have mentioned it, learn about media queries and responsive design here.
There are a lot more interesting things to CSS, like animations and pseudo classes to learn about, but those things aren’t essential to become a front end developer. So for now, I’ll leave them out of this post.
CSS is all about styling content.
- Learn the fundamentals of CSS with the YouTube playlist provided above.
- Learn about CSS’s grid system.
- Learn about responsive design and media queries.
- At this point you will be able to make very simple websites, I’d recommend making a few small ones to get some experience.
Now, on to the big one…
But, before we get started, there is a very important note.
The first overview video is: https://youtu.be/zPHerhks2Vg ATTENTION: This video is slightly updated, that is why you should also see the second video.
This should be enough practice for now, but if you are looking for more, I recommend you sing up to codewars and start building some basic algorithms, just go to (on the left menu) Kata and select your desired difficulty (8 being the lowest and 1 the highest).
You can also go back to freecodecamp.org and start their algorithms scripting course.
I’ll recommend you learn jQuery with Traversy Media’s jQuery Crash Course playlist on YouTube.
AJAX and JSON APIs
After all this, you will need to learn about JSON APIs and AJAX, here is where the cool development starts, I made my Rocker Finder project with AJAX and JSON. You can get started at freecodecamp.org with their AJAX section of the front end development fundamentals, and then start building the Intermediate Front End Development Projects provided by them.
Another good resource is this video by LearnWebCode.
Finishing AJAX I’d say you are pretty much a front end web developer now. All you need is to learn Git and gitHub for version control, and you will be mostly job ready!
- Learn jQuery.
- Learn AJAX and JSON and start making awesome front end project for your portfolio!
- And also make your portfolio.
- Your path to become a front end developer is mostly done! Now it’s up to you to pursue different technologies, libraries and frameworks.
After learning all this, I’d highly recommend learning either React.js or Angular.js.
You can find a good introduction to React here: https://youtu.be/A71aqufiNtQ
Become A Front End Developer Conclusion
Now you have an entire study guide/strategy and tons of free resources to become a front end developer! Follow this through and try to invest at least 2 hours a day into this and you should be able to become job ready within 3 months.
If you are interested in becoming a full stack web developer, I might make a similar post in the near future with the same structure but for the back end technologies.
You should also checkout this post I made on the most important front end developer skills.
Good luck with your coding journey! Share this post with your aspiring web developer friends to help them out!