Build a dropdown menu, tooltip, auto-validation form, and an infinitely scrolling list, similar to the Twitter news feed.

Become a Front-end Developer

In this module, we’ll learn to apply our introductory knowledge of HTML, CSS, and JavaScript to build beautiful, real-world components. We'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, and Medium's tooltips.
We'll also learn how to approach common frontend challenges—what questions to ask, how to design solutions once we've thought of them, how to debug and work with mistakes, and more. By the end of this module, you’ll have acquired sufficient skills to build any website.

Projects

Let’s get started by making a dropdown menu!

Menus can be seen all over the web. Some are simple and expand a single column of options; some are more complex and can nest submenus. If you're creating a website from scratch with any sort of navigation or extended options, the chances are good that you'll be implementing a dropdown menu as well.

We'll base ours on one used by one of the most popular e-commerce websites: eBay. 

Let's first list down the features we want to implement in our dropdown menu. 

Important Features of a Menu 

Let's first list down the features we want to implement in our dropdown menu.

A Dropdown Menu

Autocomplete Search

Tooltips

Autovalidating Form

An Infinite Scrolling List

From Toy Components to Production

Conclusion

Important Features of a Menu