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

# Animations
Animations are, in my opinion, the "dragons" of CSS to beware of. Once you go beyond basic animations (e.g., object moving from point A to point B, object fading in and out, etc.), you'll almost certainly write some code you feel is suboptimal -- either in the performance it delivers or in the implementation itself. 

That being said, animations are treated as first-class functionalities in CSS. We have `@keyframes` to define how we want things to be at certain stages of the animation. If by chance, you're coming from a Flash background, this will feel very familiar.

Let's take a look at how we can use it to add the following animations
- When the tooltip shows up, it doesn't seem to appear out of thin air. There's a very subtle "bubble out" effect.
- When the tooltip moves from one highlighted area to another, without having gone away in between, it creates a sliding effect.
$$$$
# Popup Animation

This lesson will help you learn how to make your tooltip operate smoothly so it provides a seemless user experience!

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Adding Animations

Animations