AI-powered learning
Save this course
Intermediate JavaScript: Building Frontend Components
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
Updated yesterday
Join 2.9 million developers at
Join 2.9 million developers at
LEARNING OBJECTIVES
- 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
2.
Building a Dropdown Menu
Building a Dropdown Menu
Unpack the core of building, styling, and dynamically populating dropdown menus using JavaScript.
3.
Building the Autocomplete Search
Building the Autocomplete Search
9 Lessons
9 Lessons
Work your way through building and styling an effective autocomplete search component using JavaScript.
4.
Building Tooltips
Building Tooltips
11 Lessons
11 Lessons
Grasp the fundamentals of building tooltips using JavaScript, CSS, and effective debugging.
5.
Building an Autovalidating Form
Building an Autovalidating Form
16 Lessons
16 Lessons
Take a closer look at building, validating, and testing dynamic, user-friendly auto-validating forms.
6.
Building an Infinite List
Building an Infinite List
8 Lessons
8 Lessons
Follow the process of building an infinite scroll list with dynamic loading and styling.
7.
From Toy Components to Production
From Toy Components to Production
4 Lessons
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.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
Learn to apply your introductory knowledge of HTML, CSS, and JavaScript to build beautiful, real-world components. In this course, you'll go through the process of developing several complex components, including:
- eBay's dropdown menu
- Gmail's auto-validating form
- Google's main autocomplete enabled search
- Twitter's infinitely scrolling list
- Medium's tooltips
You'll learn how to approach common frontend challenges, what questions to ask yourself, how to design solutions once you've thought of them, how to debug and work with mistakes, and more.
The end-goal is to empower you to look at anything you see on a website and be able to say, "I can build that!"
Trusted by 2.9 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor
Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go
Future-proof Your Career
Get hands-on with in-demand skills
AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"
MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies
Free Resources
