JavaScript – The beginners guide

JavaScript has rapidly grown in popularity over the past few years and has quickly become one of the pillars of the web, with a large majority of websites making use of it. If you’re learning to become a web developer then learning JavaScript is essential, especially for front-end developers and more recently for back-end developers too.

This guide is to help point you in the right direction, it is not a “You Must Do This” article, it is however, a guideline you can follow to learn JavaScript.

1. What is JavaScript

JavaScript used to be a front-end or client side programming language which was used for interactivity on the front-end of a website, such as; click events, animations and more.

But it has since evolved to become an all-purpose programming language – meaning it can run on the entire software stack. A new popular use case for JavaScript is server side (back-end) development using NodeJS to create API’s and other services that run on a web server.

JavaScript is not only used to create websites, it can now be used to create browser-based games, hybrid mobile apps and with the use of technology like React Native it can be used for native mobile apps too.

2. Is it still worth learning in 2020?

Web development is always changing. A lot of new tools, libraries and frameworks are created every year, it is actually really hard to figure out what you should be learning to keep up.

My answer to “Is it still worth learning in 2020?” is YES. I believe if you want to keep up with the trends of the web then JavaScript has and will continue to be one of the most used and popular technologies on the web. Not only is it popular on the web but it is growing in popularity for mobile development with the use of React native and hybrid solutions.

3. Where should I start?

Before you start learning JavaScript you should already have a good knowledge of the browser DOM, HTML and CSS. Without knowing these, learning JavaScript will be a lot harder.

You should start learning JavaScript from the very top, vanilla, front-end, web-based JavaScript and programming concepts.

Learning plain JavaScript is a daunting task to start with but if you start by learning programming concepts like if statements, loops, arrays, functions and variable types it will become a lot easier to learn.

Here are some resources to help you learn top-level JavaScript:

Freemium Course Tutorial: https://www.codecademy.com/learn/introduction-to-javascript

Video Crash Course: https://www.youtube.com/watch?v=hdI2bqOjy3c

Written course: https://htmldog.com/guides/javascript/beginner/

4. I’ve learned the basics, what’s next?

Projects. I believe the best way to learn anything is by doing.

While you are still learning the basics of JavaScript you want to work on some fairly easy projects. These could be as simple as adding event listeners to your website that trigger animations or interactivity like a drop down menu.

Here is a list of beginner projects you should try:

Drop down menu

A drop down menu that has nested menu items that can be accessed using either a click or hover state activated with JavaScript

Code snippet:

let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('mouseover', function () {
    dropdown.classList.add('is-active');
});

dropdown.addEventListener('mouseout', function () {
    dropdown.classList.remove('is-active');
});

The snippet gets an element with the class of dropdown and uses 2 different event listeners, mouseover and mouseout, in both events we add or remove a class called is-active which with the help of CSS we can show or hide a sub-menu.

Resources

Video tutorial: https://youtu.be/xTN3pvoYENg

Written tutorial: https://ultimatecourses.com/blog/flawless-clickable-drop-down-navigation

Scroll event Animations

Using JavaScript we can check the position that the user has scrolled in a website and activate animations when you get to a certain point on the page.

Code snippet:

window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

The snippet uses the windows onscroll method to call a function the function then checks the position of the screen and once you get to 50px it finds an element and adds a class of test then removes it if you scroll back up.

This can also be done using the Intersection Observer.

Resources

Video tutorial: https://youtu.be/_5Bu3JY-ZHc

Written tutorial: https://scotch.io/tutorials/implementing-a-scroll-based-animation-with-javascript

Todo web app

Using JavaScript you should create a Todo list web app that holds a list of items you can add, remove or update.

Resources

Video tutorial: https://youtu.be/h8SDHa_wGlU

Written tutorial: https://freshman.tech/todo-list/

5. Advancing JavaScript

Once you have learnt the basics and have completed a few projects to help you understand the use cases of JavaScript, you should start looking into more advanced JavaScript such as; object-oriented programming, frameworks and even external libraries.

If you want to be a full-stack JavaScript developer I propose learning one of the following front-end frameworks/libraries:

ReactJS – Created by FaceBook

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. – Wikipedia

https://reactjs.org/

VueJS – Created by Evan You

Vue.js is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru. – Wikipedia

https://vuejs.org/

Angular – Created by Google

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

https://angular.io/

Once you have learnt a front-end library I would then focus on learning NodeJS, a server side JavaScript runtime that executes outside of the web browser. You use NodeJS to create APIs, web apps and server side rendered websites. NodeJS uses the node package manager (NPM) that you can use to import external libraries and tools into your node application.

https://nodejs.org/

ExpressJS.

Once you have learnt the basics of NodeJS I would then focus on learning ExpressJS. It makes using NodeJS a lot easier especially when creating APIs.

https://expressjs.com/

Now you have two pieces of a full-stack developer, the server side language and a front-end framework both in JavaScript.

The next steps are to start learning about databases like MongoDB which works with NodeJS and ExpressJS.

MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schema. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License. – Wikipedia

https://www.mongodb.com/

If you don’t fancy learning a “document-oriented” or NoSQL database program you can always look into MySQL which I prefer to use with PHP but can also be used for NodeJS.

Once you have learnt a JavasScript stack you should look to create some projects using this stack. Florin Pop has a great repository of projects you can practice making.

https://github.com/florinpop17/app-ideas

6. JavaScript Master

Once you have learnt the JavaScript basics, done a few projects with JavaScript like CRUD (Create, read, update and delete) applications, learnt a JavaScript stack and created a few projects in that stack you are essentially a JavaScript Master.

The final test of a JavaScript Master is to build a project fit for purpose AKA a production web application – this can be anything, you can come up with your own application like a service or an API to help other developers achieve a goal or if you have a client who is looking for a web app then you can put your newly learned skills to the test!

I hope you have found this post useful!

If you want to continue learning JavaScript I post videos on it all the time.

Check out my channel: https://youtube.com/c/tylerpotts

Thanks for reading!

JavaScript Wizard