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

# The HTML
We'll start with the HTML and layout some basic elements for us to work with.

In general, as you​'re developing on the frontend, you'll find an iterative process with short feedback loops to be the fastest way of progressing. If you're building a JavaScript library, that means continuously​ `console.log`ing or writing small tests after completion of a piece. In our case, we're working towards validating inputs, so it makes sense to have some to work with.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="signup">
    <div class="signup__field signup__field--name">
      <div class="signup__field__header">Name</div>
      <input type="text" class="signup__field__input signup__field__input--firstname" placeholder="First"/>
      <input type="text" class="signup__field__input signup__field__input--firstname" placeholder="Last"/>
    </div>
    <div class="signup__field signup__field--username">
      <div class="signup__field__header">Choose your username</div>
      <input type="text" class="signup__field__input signup__field__input--username"/>
    </div>
    <div class="signup__field signup__field--password">
      <div class="signup__field__header">Create a password</div>
      <input type="password" class="signup__field__input signup__field__input--password"/>
    </div>
    <div class="signup__field signup__field--confirm-password">
      <div class="signup__field__header">Confirm your password</div>
      <input type="password" class="signup__field__input signup__field__input--confirm-password"/>
    </div>
    <div class="signup__field signup__field--birthday">
      <div class="signup__field__header">Birthday</div>
      <div class="signup__field__selection">Month</div>
      <input type="hidden" class="signup__field__input signup__field__input--birth-month"/>
      <input type="text" class="signup__field__input signup__field__input--birth-day" placeholder="Day"/>
      <input type="text" class="signup__field__input signup__field__input--birth-year" placeholder="Year"/>
    </div>
    <div class="signup__field signup__field--phone">
      <div class="signup__field__header">Mobile phone</div>
      <input type="text" class="signup__field__input signup__field__input--phone"/>
    </div>
    <div class="signup__field signup__field--current-email">
      <div class="signup__field__header">Your current email address</div>
      <input type="text" class="signup__field__input signup__field__input--current-email"/>
    </div>
  </div>
</body>
</html>


codemirror

# `<div>` vs `<label>`
Forms are an exciting part of HTML with many surprises. You might have seen `label` and other semantic elements around in tutorials for forms, but what's the advantage of doing so over using plain `div`?

While different elements usually make no difference in how they're presented to the user, they can have slightly different user experiences. For example, you can define a `div` and an `input` and the `div` acts as a "label" for the div, but using a `label` element will give the additional functionality that when you click on the text, the input for that label is focused. Of course, this can be powered by JavaScript, too.

Another benefit that semantic labels give is greater accessibility. For example, screen readers for the visually-impaired will interpret different tags uniquely. This is often a neglected aspect of web development but one for which companies often have entire teams. We won't touch on this too much, but keep in mind that you should take care to test your web app on screen readers and such.

Finally, semantic​ elements can have platform-specific ramifications. When you wrap a set of inputs within a `form`, your mobile browsers will often add a special button like "Go" on the keyboard displayed for users to easily submit.

# Switching to semantic tags
Since there's a little downside, let's switch our implementation to use semantic tags. 

Let's set up the basic framework for our auto validating form using the HTML form element. 

Building the Form

Let's set up the basic framework for our auto validating form using the HTML form element.

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 the Form

The HTML