JavaScript fundamentals
Adding interactivity to our web pages is a key skill of the front-end developer. The challenges in this path are designed to guide you through handling common user interactions with JavaScript.
✍️ Prerequisites
You need a good understanding of HTML and CSS fundamentals and a basic grasp of JavaScript to get the most out of this learning path.
If you have no experience with JavaScript, then we recommend checking out this short code-along from MDN which covers the basics.
💭 Learning outcomes
- Understand the DOM and how to interact with it
- Create interactive web pages
- Tackle client-side form validation
- Work with JSON data
- Learn how to refactor your code
Welcome to the JS fundamentals path!
This article gives you an overview of the JS fundamentals path, why you should learn JavaScript, and how you can get help along the way.
Not started
Setting up your project to use JavaScript
This article provides you with a simple and robust local setup for JavaScript projects.
Not started
The Document Object Model
As the interface between HTML and JavaScript, the Document Object Model is a fundamental concept to working with JavaScript. This article gives you an overview of the DOM and how to interact with it.
Not started
Handling user events
This article covers the fundamentals of handling user events with JavaScript, and paves the way for creating interactive web pages.
Not started
- 1newbieFree
Article preview component
Practice your layout skills with this article preview component. There's lots of fun to be had playing around with animations for the sharing icons as well.
Not started
Managing forms with JavaScript
Forms present some specific challenges for the JavaScript developer. This article covers retrieving data from a form, and looks at some approaches for performing client-side validation.
Not started
- 2juniorFree
Newsletter sign-up form with success message
This will test your skills with basic form structure, validation, and submission. The success state will also be an excellent opportunity to work with DOM manipulation.
Not started
Working with data
One of the most common tasks for front-end web developers is retrieving data, and using it to populate a web page. This article looks at some different approaches to handling this situation.
Not started
- 2juniorFree
Time tracking dashboard
A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.
Not started
Refactoring your code
This article offers an introduction to refactoring, and provides some useful patterns to improve the readability and reusability of your code.
Not started
- 2juniorFree
Tip calculator app
This small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!
Not started
- 3intermediatePremium
Password generator app
This app will be an excellent test of your HTML, CSS, and JS skills. You'll build custom form controls and use JavaScript to generate random passwords.
Not started
- 3intermediatePremium
Frontend Quiz app
This app will test your skills (as well as your knowledge!) as you build out a fully functional quiz. We provide a local JSON file to help you practice working with JSON!
Not started
