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

## They're everywhere!
In this chapter, we'll be building an auto validating form. You see this in a lot of places across the web, so you might hardly notice it anymore. However, poorly done forms can easily give users a negative impression of your product. When they're already filling out a form, it means they're engaged and giving some information. This is not an area of your app that you want them to form negative impressions.

## Understanding validation complexity
Forms that do more than just give you some input fields and let you submit freeform data has a surprising amount of complexity. For example, you rarely get to think about what constitutes a valid email address until you implement one of these. Do you just want to accept any string of characters, followed by `@` followed by another string with a dot? Or do you want completeness, which could be loosely achieved with a regex like the [this](http://www.ex-parrot.com/~pdw/Mail-RFC822-Address.html)?

## Our target
At one point or another in your career as a frontend engineer, customized inputs will almost certainly be something you'll have to think about. We'll be building out Gmail's signup form together, and I believe it'll cover enough cases that you'll be able to extend it to your ​forms. ​



# They're everywhere!
In this chapter, we'll be building an auto validating form. You see this in a lot of places across the web, so you might hardly notice it anymore. However, poorly done forms can easily give users a negative impression of your product. When they're already filling out a form, it means they're engaged and giving some information. This is not an area of your app that you want them to form negative impressions.

# Understanding validation complexity
Forms that do more than just give you some input fields and let you submit freeform data has a surprising amount of complexity. For example, you rarely get to think about what constitutes a valid email address until you implement one of these. Do you just want to accept any string of characters, followed by `@` followed by another string with a dot? Or do you want completeness, which could be loosely achieved with a regex like the [this](http://www.ex-parrot.com/~pdw/Mail-RFC822-Address.html)?

# Our target
At one point or another in your career as a frontend engineer, customized inputs will almost certainly be something you'll have to think about. We'll be building out Gmail's signup form together, and I believe it'll cover enough cases that you'll be able to extend it to your ​forms. ​



This lesson gives a brief overview of auto validating forms and a roadmap of the rest of the chapter.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

What is an Autovalidating form?

They’re everywhere! #