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

# HTML templating

Learning CSS styling is generally a quick path to being proficient enough to build most things. That's even more true with structuring the template with HTML.

The way to write HTML is not careful planning -- it's brute force. If you dive straight into writing CSS with reckless abandon, you might find your codebase tangled with conflicting rules, accidentally additive rules (e.g., the border is thicker because you've added borders to inner and outer elements which add up), dislocated rules (it gets one rule from this file and another from another file in a different directory), and other pitfalls which fall under the category of "messy CSS." 

None of that applies to HTML, in my opinion. It can be too long, in which case you should divide it into separate files. There can be duplicates that increase the time it takes to make changes, but errors will be immediately visible if anything goes wrong. I think the main misses are accessibility and choosing groups. If you choose a sensible grouping for your components, you generally don't have to worry about mistakes here. If you notice you can't achieve something with styling as easily as you think you should, you can go back and change groupings. That's why I recommend getting 80% styling done immediately after creating the template -- it acts as a validation that the template is reasonable.

# Our starting point
With that said, here's a tweet:

![](/api/collection/5750244981604352/5757334940811264/page/5748755743637504/image/5635415851663360)

$$$$
**Question:**

How would you group this at the top level? level?
$$$$
**Option A**:
![](/api/collection/5750244981604352/5757334940811264/page/5748755743637504/image/5651874166341632)
$$$$



**Option B**:
![](/api/collection/5750244981604352/5757334940811264/page/5748755743637504/image/5718532058775552)
$$$$
**Option C**:
![](/api/collection/5750244981604352/5757334940811264/page/5748755743637504/image/5644572721938432)

$$$$
**Option D**:
![](/api/collection/5750244981604352/5757334940811264/page/5748755743637504/image/5756035713204224)

$$$$

The template for each list item needs to be built first in order to test

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Building an HTML Template for Infinite Lists

HTML templating