Intermediate Javascript

Intermediate JavaScript: Building Frontend Components

Intermediate

58 Lessons

10h

Certificate of Completion

AI-POWERED

Explanations

Explanations

This course includes

73 Playgrounds

16 Quizzes

46 Illustrations

This course includes

73 Playgrounds

16 Quizzes

46 Illustrations

Course Overview

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...Show More

Course Content

1

Welcome

Getting Started

2

Building 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

3

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

4

Building 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

5

Building an 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

6

Building an Infinite List

8 Lessons

7

From Toy Components to Production

4 Lessons

COURSE AUTHOR

How You'll Learn

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Videos are holding you back. Educative‘s interactive, text-based lessons accelerate learning — no setup, downloads, or alt-tabbing required.

Learn faster and smarter with adaptive AI tools embedded in every Educative course.

Built-in assessments let you test your skills. Completion certificates let you show them off.

Part of the Front-end Developer Learning Path

Path Cover

Become a Front-end Developer

Go from complete beginner to creating interactive websites using HTML, CSS, and JavaScript.

4 Modules

Recommended Courses

BEFORE STARTING THIS COURSE

AFTER FINISHING THIS COURSE

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath