Are you wanting to learn how to code and make websites do amazing things? Keep Reading. If you haven’t heard of FreeCodeCamp it’s a free website where you can learn how to code for web development. JavaScript is the Second Section. The first Section talks about HTML and CSS so if you’re new you should probably start there. Having gone through this rodeo already I’d like to share my personal experience with you to get you going or moving forward if you’re feeling stuck. We’re going to cover: what JavaScript is and why it’s so important, why you should do FCC’s JavaScript section, how to approach learning the language, and additional things you’ll need to know that the section is missing(very important so you can avoid the “now what” and “coding overload” moments).
JavaScript is like the verb or brain of the website. It lets you actually do things like make buttons clickable and send information to somewhere else on the web, store the information that people type and other cool things. Heck you can even make video games with just JavaScript and there are machine learning libraries like TensorFlow.js. JavaScript is the language of the web and runs in browsers like Chrome, Firefox, etc. You can also use JavaScript on what’s called a server which is the back-end of a website and make full-stack applications using just JavaScript. This is actually the track that FreeCodeCamp is teaching right now. JavaScript is very powerful.
The JavaScript section is split up into a series of learning modules where you will learn a specific feature of the language or solve a problem. At the end there are 5 master algorithms where you get to prove your skill and if you are able to complete these 5 algorithms you will earn the JavaScript certification. All of the exercises before this build you up in knowledge and skill so that you will be able to solve them.
Here is an example of one of the final challenge algorithms.
The time estimation to complete all of the exercises and the 5 master algorithms is 300 hours. It actually took me closer to 400 hours to get through it as I had never learned a programming language with the exception of doing FreeCodeCamp’s previous section of Responsive Web Design which was HTML and CSS. Some of the challenges are very simple and you can work through them and understand the material in a few minutes. Other times it is not so straightforward and much more difficult. There were times when I thought that there was absolutely no way that I was going to be able to figure out the challenges/exercises. I would literally spend hours, maybe even up to 10 hours trying to work through a single challenge. I made a commitment to myself to not look up solutions as much as possible because I wanted to actually learn the material. There were very few times I had to look up a solution and it would normally be because I understood 90% of the problem and was missing some small piece that I could not figure out on my own yet. Some of the challenges increase in complexity very quickly and it can go from “Hey calculate the mass of this orange” to “What is the mass of the known universe”(that’s not one of the challenges I’m just trying to make a point). My advice to you is to put in the time and do your best. Don’t give up.
FreeCodeCamp does a great job of teaching you the basics of JavaScript and I’m going to tell you right now it’s only just scratching the surface. You will still need to build up your knowledge and you will likely need additional skills to help you get through FCC challenges. I’m going to list the most valuable resources that helped me personally.
One of the best resources to help you learn JavaScript is this website! I would actually start here as it is very thorough and there are some great explanations. This was my number one go to for figuring out how JavaScript works. There is a TON of material so don’t think that you have to memorize or know everything, I found it best to just read through some of the basics and then look up particular things as needed. You won’t need to know everything to get through FreeCodeCamp’s JavaScript section as it covers the more basic things. I do advocate for gaining a deep understanding of JavaScript and all of its inner workings. That deep or expert understanding comes with time and I personally am still working on it. So, don’t be hard on yourself and focus on progression and building up your skills one concept at a time. There’s no pressing the fast forward button so just put your head down and get to work.
Other good sites that I use in no particular order
FCC forum can also be helpful if you are stuck on a challenge.
This last resource is a book series which goes deep into JavaScript and how it works really.
You don’t know JS book series – by Kyle Simpson
In my opinion it would be better to read the series AFTER you have finished the FCC JavaScript section as the books are better read when you have the basics down. WHY should you read this? So you don’t show up to job interviews and end up looking silly. For example, you will get to avoid thinking that JavaScript is like a traditional object-oriented language just because it has syntax for a Class data structure. Even after many months of programming I had no clue how JavaScript actually worked until I read this. Don’t skip out on this one! Really!
Tying it together
The JavaScript section does a very good job of getting you through the basics and helping you test your knowledge as you work through the challenges one at a time. It will teach you loops, data types, algorithms, and so forth. What it does not teach is doing vanilla DOM(Document Object Model) manipulation. FreeCodeCamp jumps straight to using frameworks/libraries like React. A framework is something that helps you build websites easier and React is one of the most used frameworks. Going back to the DOM and why it’s so important. The DOM is everything you see inside your browser window. When I say DOM I’m basically referring to the webpage itself. The HTML is the building block of any webpage and the CSS is the styling. JavaScript and DOM manipulation let you actually do things on the page like store information a user types in, make things clickable, and a million other things. You can think of DOM manipulation as having your JavaScript code talk to your HTML code. HTML and CSS are like 20% or less of what you need to know and JavaScript is like 80-90%.
Let me show you a simple example.
Here we have a very basic page that just displays a question to a user. There is an input element where the user can type things in and a button next to it.
Here is the HTML code. We want to focus on the input element and the button. Notice how the input has an id=”weather”. The button has a reference to a function called getShoes().
We type in a value such as “hot” into the input and then we click the button.
This will activate our getShoes() function in our JavaScript code below.
Notice how the JavaScript sits between what are called <script> tags. This code will output what type of shoes the user should wear depending on the weather that you typed in earlier. Without explaining all of the code I just want to focus on one thing. That is how the JavaScript is connecting to the HTML. We see the const weatherValue is grabbing the HTML input element with the id=”weather” and getting it’s value. This is what I mean by DOM manipulation, it’s the JavaScript and the elements on the page working together. The code ultimately uses more DOM manipulation to display the text to the user via another element that has an id=”output”.
FreeCodeCamp does not have an in-depth explanation of how all of these things are combined together and how the DOM works, so you will need to learn these elsewhere. Don’t worry I have two really good recommendations to learn these! They are:
This has a section dedicated to the DOM. It’s super straight forward and you will gain instant value to start working with the DOM immediately.
This is a free course you can sign up for. You have to sign up with your email but it shouldn’t cost you anything. It covers 30 exercises that you can do in 30 days to level up combining HTML, CSS, and JavaScript without using a framework.
Without understanding how the DOM works when you aren’t using a framework you won’t have any context for why frameworks are even needed. Frameworks are always coming and going. Vanilla JavaScript and DOM manipulation are the basic building blocks so they will always be around. Build up your foundation and learn how these things work; let your roots grow! Then you can move onto the next section of FreeCodeCamp, which is using Front-End libraries like React.
I hope you found some valuable insight and gained some motivation to level up your coding skills and good luck out there!