JavaScript is the third and final pillar of modern web development, after HTML and CSS. JavaScript is the most advanced language of the three pillars.
Javascript handles the behavior layer - real-time user interaction. This ranges from trivial form validation to sophisticated web applications that act like ordinary desktop programs.
Just like with HTML and CSS, all you need is a text editor (Notepad, TextEdit) and a web browser! Nevertheless, as you write more complex JavaScript you may find it difficult to write code and debug with only basic text editors. Advanced text editors, browser tools (for debugging), and online integrated development environments (IDEs) make coding JavaScript and squashing bugs easier.
These programs feature productivity-enhancing features such as syntax highlighting, line numbering, and multiple tabs.
- Sublime Text (Mac, Windows, and Linux)
- Komodo Edit (Mac, Windows, and Linux)
- Notepad++ (Windows)
- TextWrangler - MAC only
All popular web browsers come with built in developer consoles and tools for debugging.
- Chrome: Chrome Developer Tools (“DevTools”)
- Firefox: Firefox Developer Tools - Note: you do not need to download the Firefox Developer Edition for these tools
- Safari: Web Inspector
- Internet Explorer: F12 Developer Tools
Shells allow you to quickly write and test JavaScript code without having to save files locally. They allow you to easily send and share links to your work with others. Cloud or online IDEs allow you to write and debug JavaScript from any device, which is especially useful if you have multiple computers.
- JSFiddle - Shell - Save “fiddles” and share with permalinks
- JSBin - Shell - Save work, share links, embed bins on webpages, and view codecasts
- Codepen - Shell
- Koding - IDE
- Cloud9 - IDE
After you've written your code, use linters for static code analysis so that you can further improve readability and maintainability of your JavaScript.
- 💻 - interactive courses, labs, or problems
- 📹 - videos
- 🎧 - podcasts
- 📚 - books or long reads
- 📄 - articles, short reads, or tutorials
- 💰 - paid resource
Lynda.com videos are free with a DC Public Library card. You can obtain an online library card instantly with a valid DC driver’s license. Residents of neighboring counties in MD and VA are also eligible for a free DC library card! Non-DMV residents can also pay $20 at the MLK library to obtain a library card for a year. The org code for DCPL on Lynda.com is dclibrary.org.
You know HTML and CSS and are ready to start adding interactivity to your web pages.
- Codecademy JavaScript Track - 💻 - 10 hours - Free
- HTML/JS: Making webpages interactive - 💻 - KhanAcademy - Free
- Head First JavaScript Programming - 📚 💻 💰 - $24 (e-book) or $35 for print on Amazon - Available on Safari Books - Free sample chapter
- JavaScript For Cats - 📄 💻 - "An introduction for new programmers. So easy your human companion could do it too!"
- JavaScript Fundamentals: Development for Absolute Beginners - 📹 💻 - MSDN Channel9 - Free
- Javascript Guide - 📄
- JavaScript Essential Training - 📹 💻 - Lynda - Free with DC library card
- JavaScript and jQuery: Interactive Front End Development - 📚 💰 - $26.67 on Amazon
- JavaScript Basics - 📹 💻 💰 - Treehouse - Free 14 day trial - $25/month paid plan
- CodeSchool JavaScript Language track - 📹 💻 💰 - First lesson free - $29/month paid plan
- CodeCombat - 💻 - Free - Online game
- JavaScript for Web Designers - 📹 💻 - Lynda - Free with DC library card
- Introduction to JavaScript Development - 📹 - Udemy - Free
- Learning the Web: JavaScript Basics - 📄 - Mozilla Developer Network
- Learn to Program in JavaScript: Beginner to Pro - 📹 💻 - Udemy - Free
- Beginning JavaScript - 📚 💻 💰 - $31.20 on Amazon - 5th edition (2015), not 4th (2009)
- Create a digital clock, alarm, countdown, or even Pomodoro timer
- Create an app that converts English into Pig Latin
- Make a calculator
- Create a to do list application
- Create an image gallery or image slider
- Make a quiz on one of your favorite topics
- Create a BMI calculator
- Create a loan repayment calculator
You know basic Javascript and want to further your understanding of functions and objects. You are also are ready for deep dives on specific topics.
- JavaScript: The Good Parts - 📚 💰 - $13.49 (ebook) or $21.35 print on Amazon
- Speaking JavaScript - 📚 - Free
- Eloquent JavaScript - 📚 - Free
- JavaScript and AJAX - 📹 💻 - Lynda - Free with DC library card
- JavaScript: Functions - 📹 💻 - Lynda - Free with DC library card
- A re-introduction to JavaScript - 📄 - Mozilla Developer Network
- Learn JavaScript by Example - 💻 - Free
- JavaScript: Enhancing the DOM - 📹 💻 - Lynda - Free with DC library card
- JavaScript The Right Way - 📄
- JavaScript Enlightenment - 📚 - Free
- CodeWars - 💻 - Free - Solve programming problems and earn points
- JavaScript Garden - 📄 - “A growing collection of documentation about the most quirky parts of the JavaScript programming language.”
- The TreeHouse Show - 📹 - Treehouse - Free - “Your weekly dose of web design and web development news”
- Introduction to JavaScript - 🎧 - Ep 14 from StartHere.fm
- JavaScript and jQuery: Moving beyond Alert() - 🎧 - Episode 256 of The Hanselminutes Podcast
- JavaScript: The Definitive Guide - 📚 💰 - $22 (ebook) or $32.94 print on Amazon
- Create a strong random password generator
- Create cool shapes, animations, and games with HTML5 Canvas
- Build a robot in the Fight Code Game
- Create a mashup using one of the APIs featured in Wanted! Simple APIs Without Authentication
- Make a VideoGame
You’ve gotten pretty good at this JavaScript thing and are looking to improve your code. You may know several JavaScript libraries but you would like to improve your plain JavaScript skills as well.
- Learning JavaScript Design Patterns - 📚 - Free
- DOM Enlightenment - 📚 - Free
- JavaScript Koans - 💻 - Solve JavaScript runtime errors by fixing Jasmine tests
- Maintainable JavaScript - 📚 💰 - $17 ebook, $26.48 print on Amazon
- You Might Not Need jQuery - 📄
- JavaScript Jabber - 🎧 - Weekly podcast
- Human JavaScript - 📚
- Principles of Writing Consistent, Idiomatic JavaScript - 📄
- Create a mashup with the Google Maps JavaScript API v3
- Create an offline web application
- Contribute to Open Source libraries.