Along with HTML and CSS, JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. It's got a huge community, and the ecosystem is evolving rapidly. If you want to be a web developer, learn JavaScript. And if you want to learn JavaScript, you're in the right place!
We've built a comprehensive guide to help you learn JS development online, whether you're just getting started as a web developer or you want to explore more advanced topics such as using the newest frameworks or even building your own! This Learning Guide will help you:
- Learn the fundamentals of the JavaScript language.
- Get started coding for the web with jQuery.
- Build websites and apps using front-end frameworks such as React, Angular, and Vue.
- Learn Node.js, and write JavaScript for the server.
- Develop cross-platform mobile apps with Ionic and React Native.
- Go further with JavaScript and keep your skills sharp.
1. What Is JavaScript?
You've likely heard JavaScript referred to as "a client-side language", which is another way of saying that it's a programming language that runs in a web browser. Actually, it's the language that runs in the browser—if you want to make an interactive web page, JavaScript is the language to use.
Wikipedia defines it this way:
JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification.
- High-Level. When a programming language is high-level, you can code it without needing to know details about the host computer. You don't have to manage memory, you don't have to know what type of processor is running, and you don't have to deal with things like pointers (such as in languages like C or Assembly).
- Dynamic. Languages that are dynamic allow developers to add new code or change the structure of objects while the program is running. This is a powerful feature of JavaScript, and it makes possible frameworks that can adapt the language to very different contexts and ways of working.
- Untyped. If you have any programming experience, then you've likely come across statically typed languages that require you to declare the type of variables. In contrast, untyped languages are much more flexible about how types are used and defined. For example, in JavaScript you could pass either a string or a number to the same JavaScript function, or you could have a JavaScript array that stores data of mixed types.
- Interpreted. In compiled languages, the code you write must be converted to a machine-readable form before it can be run. But JavaScript is interpreted (just like PHP), meaning that there is no compiler. Instead, the code is run by an intermediary piece of software called an interpreter (in this case, it is part of the web browser). The interpreter reads your code and converts it to machine instructions. Most high-level languages are interpreted, and most interpreted languages are high-level.
- Standardized. JavaScript is standardized (its official name being ECMAScript) which means that it will work the same in any browser. This wasn't always the case; in the early years of JavaScript it used to work a bit differently from browser to browser.
If you want to learn more about the structure of the language and how to use JavaScript, check out our tutorial.
Why Learn Javascript?
JavaScript is one of the most popular and dynamic languages in use today, allowing the creation of rich experiences delivered via the web to desktops, tablets and mobile devices. It's a first class language with a rich and vibrant ecosystem and an enthusiastic community dedicated to its continual development.
2. JavaScript Fundamentals
If you're learning JavaScript for the first time then you'll want a course that starts at the very beginning and covers everything about the language that a beginner needs to know. Whether you're completely new to coding, or you're coming to JavaScript from another language, our Modern JavaScript Fundamentals course goes through everything you need to get up and running with one of the most popular and dynamic languages in use today. It's the best way to learn JavaScript!
If you're a web designer who's just getting started with JavaScript basics then you should check out JavaScript for Web Designers to learn to code JavaScript from a web designer’s perspective.
-
FREEJavaScriptModern JavaScript FundamentalsDan Wellman
-
FREEJavaScriptJavaScript for Web DesignersAdi Purdila
You should also check out our JS courses specifically aimed at web designers.
The Designer’s Guide to JavaScript Optimization
Handy JavaScript Plugins for Web Designers
You Don’t Need jQuery for That
Essential JS Libraries for UI (User Interfaces)
Building JavaScript Websites With Meteor
-
FREE
3 JavaScript Projects for Beginners
If you want to learn more about the structure of JavaScript and how it works, check out our free js tutorials.
- JavaWhat's the Difference Between Java and JavaScript?Tom McFarlin
- JavaScriptGrokking Scope in JavaScriptPeleke Sengstacke
Practice JavaScript and Learn
If you already know the basics of JavaScript and have created some simple scripts or apps, you might be wondering about your next step. To keep growing as a JavaScript coder, you need to keep learning and practicing new skills.
- JavaScriptPractice JavaScript and Learn: AJAXJeremy McPeak
- JavaScriptPractice JavaScript and Learn: Form ValidationJeremy McPeak
- JavaScriptPractice JavaScript and Learn: FunctionsJeremy McPeak
- JavaScriptPractice JavaScript and Learn: Object-Oriented ProgrammingJeremy McPeak
- JavaScriptPractice JavaScript and Learn: The DOMJeremy McPeak
- JavaScriptPractice JavaScript and Learn: EventsJeremy McPeak
- JavaScriptLearn Functional Programming in JavaScriptJeremy McPeak
Learn jQuery
First released in 2006 by John Resig, jQuery set out to be a cross-platform JavaScript library that makes it easier to write JavaScript code for the browser.
At the time it was released, it was especially useful because of the inconsistencies that existed among JavaScript implementations in older versions of Internet Explorer, Firefox, and eventually Google Chrome (which wasn't released until 2008).
As described by the jQuery website:
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Learn more about jQuery and how it's used in our tutorial.
jQuery has been a part of the JavaScript ecosystem for a long time and has been used in a number of very popular projects (such as WordPress), so it's a great way to kick off your JavaScript learning and start programming for the web. In these courses, you'll learn everything you need to know to get started using jQuery in your projects.
- Web DevelopmentHow to Become a Web Developer: jQuery and BootstrapJeremy McPeak
- JavaScriptIntroduction to jQueryJeremy McPeak
- JavaScriptWrite a jQuery PluginJeremy McPeak
- jQueryQuick jQuery Projects for Web DesignersCraig Campbell
- JavaScriptJavaScript Without jQueryJeremy McPeak
3. Front-End Frameworks
While the number of ways to organise a JavaScript project are almost infinite, JavaScript frameworks can help you give structure to your code and make it more flexible and scalable. There are a number of popular JavaScript frameworks you can choose to use, but deciding between them can be difficult.
Our JavaScript course Comparing Front-End Frameworks can help you make an informed choice. Experiment with each framework, get a feel for how it works, and decide which one is best suited for your project needs or style of programming.
You can also find out which front-end framework you should learn by taking our quiz!
Get Started in the Front-End
We have courses and tutorials to help you learn and develop your skills with all of the major front-end JavaScript frameworks. If you're interested in learning more about React, Angular, or Vue we have full Learning Guides dedicated to them.
- ReactPractical React FundamentalsDerek Jensen
- Angular 2+Modern Web Apps With AngularAndrew Burgess
- Vue.jsGet Started With Vue.jsJeremy McPeak
- EmberJSBuild an Ambitious App With Ember 2Andrew Burgess
- MeteorGet Started With MeteorAndrew Burgess
- JavaScriptIntroduction to StimulusJeremy McPeak
- JavaScriptFaster Web Apps With the Svelte FrameworkJeremy McPeak
4. Back-End Frameworks
Node.js
Node.js is an open-source, cross-platform JavaScript runtime environment that takes JavaScript out of the browser. One of the reasons Node.js is so popular is that it allows you to write web servers and other programs in JavaScript.
As you'll see, it's similar to JavaScript in the browser; however, it isn't all the same. For example, with Node.js, you can read and write files on the hard drive from JavaScript! There are many new patterns and features that you'll learn in our courses: Node.js From Scratch and Get Started With Node.js Express.
- JavaScriptNode.js From ScratchJeremy McPeak
- ExpressGet Started With Node.js ExpressJeremy McPeak
More Back-End Resources
Express is the most popular back-end framework for Node.js and JavaScript. Express makes it easy to create a web server with pure JavaScript, allowing you to write full-stack JavaScript apps—apps that use the same language on the front- and back-ends.
WebSockets are another great full-stack tool. They enable fast asynchronous communication between the browser and server.
GraphQL is designed to work with data represented by a graph, and it has a powerful query syntax for traversing, retrieving, and mutating data. Learn how to build a back-end GraphQL API in our course.
- ExpressGetting Started with ExpressAndrew Burgess
- JavaScriptConnect the Web With WebSocketsDaniel Stern
- GraphQLBuild APIs With GraphQLMarkus Mühlberger
- GraphQLCode a Front-End App With GraphQL and ReactMarkus Mühlberger
- APIsRethinking APIs With FalcorDerek Jensen
5. Front-End Libraries
JavaScript libraries provide helper functions, objects, and modules which your application code calls for specific functionality. Learn how to use some of the most popular front-end libraries in these courses.
- JavaScriptBuilding D3 Data VisualizationsTiffany France
- JavaScriptHow to Use the Google Drive APIReginald Dawson
- Google MapsCustom Interactive Maps With the Google Maps APIDavid East
- JavaScriptHow to Use the Google Maps APIReginald Dawson
- Google APIsHow to Use the Google Calendar APIReginald Dawson
6. Cross-Platform Mobile
Cross-platform mobile development has the advantage of letting you creating mobile apps that feature a polished user experience similar to a native app, while allowing you to share the same code across multiple platforms.
The most popular cross-platform frameworks tend to be those built on successful front-end frameworks such as Angular and React. Make your mobile development more efficient and learn cross-platform mobile development with our courses.
Ionic 2
The Ionic framework is one of the most popular projects on GitHub. By letting web developers use their existing skills to make apps for mobile devices, Ionic has enabled a whole generation of apps. One of the reasons for Ionic's success is that it builds on the popular Angular web framework.
- IonicGet Started With Ionic 2Reginald Dawson
- Mobile AppMobile Apps With Ionic and FirebaseReginald Dawson
You can also check out our series of Coffee Break Courses on Ionic.
React Native
Created by Facebook, React Native tries to bridge the gap between a native application and a web-based mobile application. It does this by letting you write your user interface in modern JavaScript and automatically transforming it into native views specific to your supported platforms. We have several courses to get you started with React Native.
- React NativeGet Started With React NativeMarkus Mühlberger
- React NativeBuild a Social App With React NativeMarkus Mühlberger
Cordova
The Cordova platform is a cross-platform framework for building apps. Instead of building an app with native languages like Java or Objective-C, you can build it with familiar web technologies and bundle it in a native container for your target platform. Cordova allows you to build apps for Android and iOS, as well as Amazon Fire, BlackBerry, Firefox, and Ubuntu.
Despite using web technologies, Cordova has robust support for using the features and facilities of a mobile environment. Learn Cordova in this course by building a simple app.
- Cross-Platform MobileBuilding an App With CordovaReginald Dawson
- CordovaPublish an App With CordovaReginald Dawson
7. Go Further With JS
Want to go further with JavaScript? We regularly publish new javascript tutorials to help you learn JS online, here are some to get you started.
- JavaScriptHow to Use Map, Filter, & Reduce in JavaScriptPeleke Sengstacke
- JavaScriptSimple JavaScript Inheritance: What You Need to KnowDavid Catuhe
- JavaScriptJavaScript: How to Embed Private Members Into an ObjectDavid Catuhe
- JavaScriptKeeping Promises With JavaScriptStuart Memo
- JavaScriptJavaScript Debugging Using Cross-Browser Source MapsDavid Rousset
There's always more to learn, so why not check out our Learning Guide on Data Structures in JavaScript or some of our more advanced courses?
Tooling
Tooling is an important part of the JavaScript ecosystem—though the variety of competing products can be overwhelming. In these courses you'll learn how to integrate some key JavaScript tools to automate tasks like minification, ensuring code quality, and transpiling to older versions of JavaScript.
- JavaScriptModern JavaScript Linting With ESLintDan Wellman
- WebpackInstant Webpack 2Dan Wellman
- JavaScriptUniversal Module Loading With SystemJSDan Wellman
- Build ToolsEssential Gulp TasksDan Wellman
- JavaScriptFix JavaScript Code Style With StandardJSDan Wellman
Practical Projects
Practical projects are a great way to learn a new concept or technology. In these courses, you'll get to sharpen your skills by putting them to work by building useful web apps.
- Vue.jsCode a Quiz App With Vue.jsDerek Jensen
- ReactFive Practical Examples to Learn ReactJeremy McPeak
- ReactReact Deep Dive: Build a React App With WebpackPavan Podila
- JavaScriptDeep Dive Into Reactive Programming With RxJSAndrew Burgess
More JavaScript Courses
- Functional ProgrammingFunctional Programming in JavaScriptJason Rhodes
- JavaScriptAsynchronous ES6 With GeneratorsReginald Dawson
- JavaScriptCreate a New JavaScript FrameworkJason Green
- JavaScriptJavaScript Refactoring TechniquesPavan Podila
- AngularBuild an App From Scratch With JavaScript and the MEAN StackDerek Jensen
- JavaScriptLearn Data Visualization With D3.jsMarkus Mühlberger
- JavaScriptInteractive JavaScript Maps With LeafletCraig Campbell
- Back-EndCode a REST API With Koa and TypeScriptDerek Jensen
8. Learn JavaScript Online
This Learning Guide will continue to be updated with all the latest and greatest JavaScript training tutorials and courses to help you stay at the very top of your game!
To keep up with all the JavaScript content we publish, remember to sign up to our weekly digests to get a comprehensive summary of all our new code tutorials each week, follow @TutsPlusCode on Twitter, and like the Envato Tuts+ Code page on Facebook.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weekly