Gain insights into building real-world components using JavaScript. Delve into dropdown menus, auto-validating forms, autocomplete search, infinite scroll, and tooltips to tackle common frontend challenges seamlessly.

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!"

Intermediate JavaScript: Building Frontend Components

We'll begin with resourcing. For the most part, you've probably had someone giving you the answers to questions, and maybe even giving you the questions to ask. This course has hopefully taught you a little bit more about which questions to ask at various points of building the app.

For many beginners, *starting out* is the hardest part about building an app (ironically, finishing is usually the hardest for veterans, they want to do the fun stuff and never end up shipping!). If the app doesn't fit in the framework of something you've had exposure to, how do you start out?

First, describe your idea in more and more detail. Pretend you're a product manager (which you pretty much are when you're the only person building the app), and write specifications. They don't have to be overly technical, but they should be exhaustive.

Then, do research to determine whether or not each step is possible, technically. This will become easier and easier as you build more, but when you're first starting out, it's completely understandable not to have a good sense of what's possible. Pop quiz:


Tips to start building components on your web: use all the resources you can!

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Resourcing