Select Page

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!

Technologies

The first thing to know is which technologies to focus on? There are so many things out there!

Well, worry not. I have separated a future proof curriculum for you! In order to become a front end developer you will need: HTML5, CSS3, Javascript (ES6) and jQuery.

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 ūüôā

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.

HTML

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…

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.

Summing up:

  • 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…

JavaScript and jQuery

JavaScript is where things start to get fun, this is where the websites that you may have been building with HTML and CSS will start to have functionality and meaning.

But, before we get started, there is a very important note.

ECMAScript 6 (ES6) is the most current version of JavaScript (at the time of this post)

And, that is something you will have to focus on. there are a lot of out dated resources that will teach you the old versions of JavaScript.

Because of that I’ll recommend you watch two videos at the beginning of your JavaScript journey.

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 is the second video: https://youtu.be/Jakoi0G8lBg With this video, you should be up to date with the 2017 and 2018 ways of writing JavaScript!

But we are not done. Now I want you to go back to freecodecamp.org and go through the Basic Javascript course, this will give you enough practice for the fundamental stuff.

And after you are done with that go over to JavaScript30 and start your 30 day JavaScript challenge where you will build 30 projects in 30 days!

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.

jQuery

jQuery is a javascript library with tons and tons of methods (pre made functions and objects) that will allow you to make your coding a lot faster.

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!

Summing up:

  • Learn JavaScript and ES6 Syntax.
  • Make 30 projects in 30 days with JavaScript30 and start getting practice.
  • 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!