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 dive right into the top-level menu by putting the elements into HTML.

When considering how to structure HTML, you should be thinking about how to group the things you want to build. For the top-level menu, we can create a group for the menu that encompasses the entire component and a group for each menu item. Let's create some `div`s for our groups.

<html>
  <head>
  </head>
 <body>
  <div>
    <div>
      Home
    </div>
    <div>
      Motors
    </div>
    <div>
      Fashion 
    </div>
    <div>
      Electronics
    </div>
    <div>
      Toys
    </div>
   </div>
 </body>
</html>


codemirror

babel

We have a basic HTML layout for a menu, and because this will be static (it won't change), we can define it directly in our HTML. This is the equivalent of "hard-coding" information, meaning that rather than relying on some external source for the menu items, these menu items are listed directly in the front-end source code.
$$$$
## Dynamic vs Static HTML
The alternative is to have data be taken from the server. Take a moment to think about when we'd want to hardcode data to HTML. (Don't worry if you don't know the answer.)

We have a basic HTML layout for a menu, and because this will be static (it won't change), we can define it directly in our HTML. This is the equivalent of "hard-coding" information, meaning that rather than relying on some external source for the menu items, these menu items are listed directly in the front-end source code.
$$$$
# Dynamic vs Static HTML
The alternative is to have data be taken from the server. Take a moment to think about when we'd want to hardcode data to HTML. (Don't worry if you don't know the answer.)

Let's start out with the basic HTML code to design a layout for our top-level menu. 

Basic HTML Code

Let's start out with the basic HTML code to design a layout for our top-level menu.

A Dropdown Menu

Autocomplete Search

Tooltips

Autovalidating Form

An Infinite Scrolling List

From Toy Components to Production

Conclusion

Basic HTML Code