Skip to content
2junior

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
This path contains premium content. You can complete all the free steps without a subscription, but you will need a Pro subscription to complete the full path.
Unlock Pro

  • 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
  • 1newbie
    Free

    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
  • 2junior
    Free

    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
  • 2junior
    Free

    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
  • 2junior
    Free

    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
  • 3intermediate
    Premium

    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
  • 3intermediate
    Premium

    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