JavaScript Intro

These are some resources to help you got started with JavaScript.

1. UI (User Interface): Write code to make your web page more interactive like
   1. Navigation
   2. Image Galleries
   3. Scroll-based effects
   4. Animations
2. Read and write data
   1. Process a form
   2. read and display data from an API (weather, maps, sports scores…)
3. Dynamically change your web page in some way.
   1. Templates
   2. web apps

1. How to get JavaScript working on a page. I have a post for that.
2. Language Basics
   1. Variables, Operators, Conditionals, Loops, Functions, Objects
3. How to change elements on the page (aka working with the DOM).
   1. We will learn to use jQuery to help us with this.

Once you have that under your belt, then you can get into more advanced JavaScript that allows you to build applications, interact with data etc. For these kind of complex applications you will see people use frameworks like React, VUE, Express and Angular. These are frameworks used by large companies like Facebook and Google to create their web applications.

JavaScript Basics MDN Page

This page goes over what is JavaScript and the basics of the language (variable, operators, conditionals, functions…) including a quick example of adding interactivity to a web site.

Online Learn Programming/JavaScript courses

For those of you who like to learn through online, self-paced courses, there are a lot out there. Here are some that are (mostly) free:

• JavaScript.com (not official despite the name) This is text-based and interactive. You have to sign up for an account with them to take the full free course. They also upset paid courses.
• Learn series: these two have a large part that are free (later lessons cost money):
  • Learn Programming (in JavaScript)
  • Learn JavaScript (meant to be taken after Learn Programming)
• Scrimba Learn JavaScript for free: this one takes an approach where you build apps. Screencasts are used.
  • This article talks about the course and has videos embedded.
• Udacity Learn JavaScript: also interactive combines screencasts with interactives. They also require sign in and have paid courses to upsell.

LinkedIn Learning JavaScript Collection

These three collections of videos are an introduction to JavaScript from what it is, why it is important to some of the basics. Watch these collections in order. I’ve collected these from a few different LinkedIn Learning video courses.

• JavaScript Essential Training
  • GitHub Repository with Example Files
• JavaScript for Web Designers
  • Exercise Files available through LinkedIn Learning or this discussion board topic

You must be signed in to LinkedIn Learning to view these.

1. Collection: JavaScript Introduction has the following videos
   1. JavaScript: First Contact [2m 46s]
   2. What is JavaScript? [1m 50s]
   3. Live examples [5m 16s]
   4. Vanilla JavaScript versus frameworks [2m 2s]
   5. Getting help [2m 5s]
   6. Navigating the JS Landscape [4m 29s]
2. Collection: Getting Ready has the following videos
   1. Tools for Working with JavaScript [3m 24s]
      1. Make sure to install Visual Studio Code and Live Server extension as directed.
   2. Browsers and tools [3m 21s]
   3. Jargon [4m 10s]
   4. Jargon: The DOM [2m 4s]
   5. DOM: The Document Object Model [4m 7s]
   6. Get to know the browser console [6m 24s]
      1. To follow along fully you will need his 01_05 folder. You can either download everything for the course on this GitHub Repository or
      2. Use this link to Download the 01_05 folder.
   7. JavaScript Language Basics [5m 37s]
3. Collection: JavaScript in the Browser
   First, download these files if you haven’t cloned the GitHub repo. The collection has the following videos:
   1. JavaScript in an HTML Document [3m]
   2. JavaScript as an external file [2m 59s]
   3. Modern JavaScript loading [4m 14s]
   4. JavaScript modules [4m 18s]

Then you can look for other, full JavaScript courses on LinkedIn Learning depending on your interest and reason for wanting to learn JavaScript.

More Resources

You can find more resources on the JavaScript page of our site.