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

This is probably something you'd eventually do on your own once you've coded enough. When you're scrolling through your file to find some code and have trouble finding it, it's probably time to refactor and split the file up. In a non-trivial production web app, `index.js`, `index.css`, and `index.html` would be a painful way to structure your code.

There are a few schools of thoughts on how to do this.
$$$$
<img src="/api/collection/5750244981604352/5757334940811264/page/5183361953824768/image/5699127396532224" alt="Drawing" style="width: 400px;"/>

$$$$
There's lots of literature on the web around people expressing opinions on each one. Some people like to split components up atomically, where you might have `Button.js` and `Button.css` in one `Button` file, which is reused and extended across the project. Some people like to have all their templates in one file and not have any HTML in their `.js` files. 

My advice is not to bother with strictly sticking to any. Do what makes sense to you. Again, explore and find what works for you. If you happen to read an article that sways you one way, find an article or blog post for the counterargument.

That being said, I generally like to split code up by the business logic domains they're concerned with. For example, if I'm building a crypto-currency trading app, I might have folders named `trading`, `dashboard`, `user`, etc. The rest depends on what framework I'm using. 

This is probably something you'd eventually do on your own once you've coded enough. When you're scrolling through your file to find some code and have trouble finding it, it's probably time to refactor and split the file up. In a non-trivial production web app, `index.js`, `index.css`, and `index.html` would be a painful way to structure your code.

There are a few schools of thoughts on how to do this.
$$$$
<img src="/api/collection/5750244981604352/5757334940811264/page/5183361953824768/image/5699127396532224" alt="Drawing"/>

$$$$
There's lots of literature on the web around people expressing opinions on each one. Some people like to split components up atomically, where you might have `Button.js` and `Button.css` in one `Button` file, which is reused and extended across the project. Some people like to have all their templates in one file and not have any HTML in their `.js` files. 

My advice is not to bother with strictly sticking to any. Do what makes sense to you. Again, explore and find what works for you. If you happen to read an article that sways you one way, find an article or blog post for the counterargument.

That being said, I generally like to split code up by the business logic domains they're concerned with. For example, if I'm building a crypto-currency trading app, I might have folders named `trading`, `dashboard`, `user`, etc. The rest depends on what framework I'm using. 

Structuring your project is a very main step. This lesson will explain its importance and some guidelines to keep in mind while performing this step.   

Project Structure

Structuring your project is a very main step. This lesson will explain its importance and some guidelines to keep in mind while performing this step.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Project Structure