HomeCoursesIntermediate JavaScript: Building Frontend Components

Updated 27 Aug

AI-powered learning

Save

Intermediate JavaScript: Building Frontend Components

Name: Intermediate JavaScript: Building Frontend Components
Price: 59 USD
Rating: 4.8 (40 reviews)
Author: Educative

Gain insights into building real-world JavaScript components—dropdowns, auto-validating forms, autocomplete search, infinite scroll, and tooltips—to tackle common frontend challenges smoothly.

4.8

58 lessons

10h

Created by Educative

Intermediate JavaScript: Building Frontend Components

What's included

58 lessons across 7 modules
16 quizzes with instant feedback
AI Tutor on every lesson

Join 3.1 million developers at

What You'll Learn

Design and build a JS dropdown menu with hover behavior, active state, and dynamic submenus
Fetch and render server-driven menu content using HTTP methods, query params, and callbacks
Implement an autocomplete search UI that requests, formats, and styles suggestions from a server
Optimize autocomplete behavior with caching, request cancelation, and browser devtools debugging
Build a Medium-style tooltip using the Selection API, ranges, and accurate positioning logic
Create an autovalidating form with semantic HTML, regex rules, dynamic errors, and custom dropdowns
Implement an infinite scrolling list with client-server pagination, loading states, and duplicate prevention

Learning Roadmap

58 Lessons16 Quizzes2 Challenges

Welcome

Get familiar with building frontend components using HTML, CSS, and JavaScript.

Getting Started

Building a Dropdown Menu

Unpack the core of building, styling, and dynamically populating dropdown menus using JavaScript.

Important Features of a Menu

Getting Data from the Server

Implementing the Behavior of Dropdown Menu

Getting Varied Responses from Server

Extending the Submenu Functionality

Building the Autocomplete Search

9 Lessons

Work your way through building and styling an effective autocomplete search component using JavaScript.

Building Tooltips

11 Lessons

Grasp the fundamentals of building tooltips using JavaScript, CSS, and effective debugging.

Building an Autovalidating Form

16 Lessons

Take a closer look at building, validating, and testing dynamic, user-friendly auto-validating forms.

Building an Infinite List

8 Lessons

Follow the process of building an infinite scroll list with dynamic loading and styling.

From Toy Components to Production

4 Lessons

Piece together the parts of resourcing, frameworks, and effective project structure to build production-ready applications.

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Developed by MAANG Engineers

Every Educative lesson is designed by a team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 3.1 million developers working at companies

These are high-quality courses. Trust me the price is worth it for the content quality. Educative came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks

Anthony Walker

@_webarchitect_

Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!

Evan Dunbar

ML Engineer

You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it.

Software Developer

Carlos Matias La Borde

I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site

Souvik Kundu

Front-end Developer

Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content.

Vinay Krishnaiah

Software Developer

Course

CSS for Front-end Interviews

The ultimate CSS interview guide by FAANG engineers, with real-world questions and a structured approach to styling and advanced concepts.

7 h

intermediate

Course

Web Development Interview Handbook

The ultimate guide to web development interviews. Developed by FAANG engineers, practice with real-world interview questions covering network security, system design, SEO, APIs, and more.

6 h 30 m

intermediate

Course

HTML for Front-end Interviews

The ultimate guide to HTML front-end interviews. Developed by FAANG engineers, practice with real-world interview questions and coding challenges. Get interview-ready in just a few hours.

10 h

intermediate

Course

Build Reactive Websites with RxJS: Master Observables and Wrangle

Gain insights into building reactive websites with RxJS. Delve into mastering observables and managing events efficiently to create fast, responsive applications while reducing bugs.

50 h 30 m

intermediate

Course

Creating a CRUD REST API with Deno & Oak

2 h

intermediate

Course

Building Full-Stack Web Applications with AdonisJs

Learn AdonisJs fundamentals. Delve into routes, controllers, middleware, and hooks. Discover practical examples, illustrations, and quizzes to confidently build your full-stack applications.

intermediate

Course

Grokking the Coding Interview Patterns

Grokking the Coding Interview saves you countless hours of grinding LeetCode. Master the 28 coding patterns behind most coding interview problems. Developed by and for MAANG engineers.

85 h

intermediate

Course

CSS for Front-end Interviews

intermediate

7 hour

Course

Web Development Interview Handbook

intermediate

6 hour 30 min

Course

HTML for Front-end Interviews