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

## Name
*Original rule: Non-empty string of alpha characters*

Without regex, the non-empty part can be enforced by `.length` and the `alpha` part can be enforced by checking if the character is within the list `['a', 'b', ..., 'z', 'A', 'B', ..., 'Z']`. With regex, the alpha part is matched by `/[a-zA-Z]/` (don't forget capital letters!), and the nonempty part through the symbol `+` (which means one or more). So that gives us:

# Name
*Original rule: Non-empty string of alpha characters*

Without regex, the non-empty part can be enforced by `.length` and the `alpha` part can be enforced by checking if the character is within the list `['a', 'b', ..., 'z', 'A', 'B', ..., 'Z']`. With regex, the alpha part is matched by `/[a-zA-Z]/` (don't forget capital letters!), and the nonempty part through the symbol `+` (which means one or more). So that gives us:

Let's apply the rules to individual fields now so they can validate appropriately

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Validation of User Input with Regex

Name #