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

## SVG or PNG?
At the end of the last lesson, we found the middle of some text we highlight. There's still work to be done, like getting the middle of the first line when multiple are selected, and only having the event respond to selections (as of now it responds to clicks too), but I think the hard part is over. In a similar fashion, if you're rapidly iterating on a product and you're coding towards some work-in-progress designs, it would be wise to get 80% of the way there in CSS. Chances are, the last 20% of making things pixel perfect take disproportionately longer, and your efforts will be doubled when the design inevitably changes.

So, let's make 80% of the tooltip.

We won't spend too much time on styling. It's a rectangle with a dark background and four icons separated by a thin divider. For the icons, they seem to use SVG over PNG.

# SVG or PNG?
At the end of the last lesson, we found the middle of some text we highlight. There's still work to be done, like getting the middle of the first line when multiple are selected, and only having the event respond to selections (as of now it responds to clicks too), but I think the hard part is over. In a similar fashion, if you're rapidly iterating on a product and you're coding towards some work-in-progress designs, it would be wise to get 80% of the way there in CSS. Chances are, the last 20% of making things pixel perfect take disproportionately longer, and your efforts will be doubled when the design inevitably changes.

So, let's make 80% of the tooltip.

We won't spend too much time on styling. It's a rectangle with a dark background and four icons separated by a thin divider. For the icons, they seem to use SVG over PNG.

Now that we've found a way to get the middle, let's get a skeleton of a tooltip to display. In this lesson, we will code a basic layout of a tooltip in HTML which we will further extend in the upcoming lessons. 

Let's Start Building the Tooltip

Now that we've found a way to get the middle, let's get a skeleton of a tooltip to display. In this lesson, we will code a basic layout of a tooltip in HTML which we will further extend in the upcoming lessons.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Let's Start Building the Tooltip

SVG or PNG? #