Back To Module Home

0% completed

A Dropdown Menu

Important Features of a Menu Basic HTML Code Styling Conventions Submenu Styling your Submenu Getting Data from the Server Implementing the Behavior of Dropdown Menu Getting Varied Responses from Server Extending the Submenu Functionality

Autocomplete Search

Understanding the Autocomplete Search Functionality Examining Google's Autocomplete Functionality Setting up a Framework to build Google's Autocomplete Building a Server Endpoint for Autocomplete Displaying Autocomplete Suggestions Formatting the Autocomplete Suggestions Styling an Autocomplete Enabled Engine Further Styling an Autocomplete Enabled Engine Final Styling Touches to the Autocomplete Enabled Engine

Tooltips

What is a Tooltip?Examining the Important Features How to Determine the Middle of Cursor?Alternative Approach to find the Middle Let's Start Building the Tooltip Perfecting the Position Bug 1: Selectable Tooltip Bug 2: Tooltip Displays on Clicking Bug 3: Multiline Highlights Adding Styling Adding Animations

Autovalidating Form

What is an Autovalidating form?Rules for User Input Categories Building the Form Displaying Errors when Validation Fails Test Driven Development Unit Tests Integration Tests Acceptance Tests Unique Errors for Each Field Introduction to Regular Expressions Validation of User Input with Regex Displaying Actual Errors Styling the Form Guide to implementing Rules for Password Restrictions and Month Selector Wrapping Up

An Infinite Scrolling List

What is an Infinite List?Building an HTML Template for Infinite Lists Styling List items Server Client Communication Generating Tweets from Server Client Side Hydration Adding a 'Loading' Element Autopopulation

From Toy Components to Production

Frameworks and Libraries

Project Structure

Conclusion

...

/

Ship it!

Ship it!

This lesson gives some additional guidelines to make your journey to build frontend components smooth and fast.

Congrats on completing all the components! We covered a lot of material, and it’ll hopefully have been enough for you to start navigating the web landscape on your own. That doesn’t mean you can hop on a plane and start coding your next idea, but you ...