educative.io

Intermediate JavaScript: Building Frontend Components (Educative)


Building a Dropdown Menu - Getting Data from the Server We need data to fill the items in our menu and sub-menu. For this purpose, we’ll have to JavaScript to connect to the server and fetch data. Building a Dropdown Menu - Implementing the Behavior of Dropdown Menu This lesson is a step-by-step guide on how to implement a working dropdown menu in JavaScript. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5718998062727168). Building the Autocomplete Search - Understanding the Autocomplete Search Functionality In this lesson, we'll learn what the autocomplete functionality is and give a layout of the rest of the chapter View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5643440998055936). Building a Dropdown Menu - Important Features of a Menu Let's first list down the features we want to implement in our dropdown menu. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5639274879778816). Building a Dropdown Menu - Basic HTML Code Let's start out with the basic HTML code to design a layout for our top-level menu. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5676830073815040). Building a Dropdown Menu - Getting Varied Responses from Server This lesson will explain how to get a varied response from a server based on the input we send to it. This will help us build a more accurate dropdown menu in the end. Building a Dropdown Menu - Styling Conventions This lesson is a small guide to styling techniques and conventions that we’ll be using to design our top-level menu. Welcome - Getting Started This lesson will give you a brief overview of the course and its prerequisites. Good luck! View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5645478960037888). Building a Dropdown Menu - Styling your Submenu This lesson briefly explains how to approach styling and how to implement them via code. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5700735861784576). Building Tooltips - Bug Squashing Time to address the bugs in our implementation! In this lesson, we will try to catch bugs in our previously designed tooltip and see how we can fix it! View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5735735550279680). Building an Infinite List - Generating Tweets from Server We need to bring back the server to generate varied data again! View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5694639155707904). Building an Infinite List - Client Side Hydration When the user first loads the page, we need to show some list items right away. We’ll learn how to in this lesson! Building an Infinite List - What is an Infinite List? In this lesson, you’ll get an overview of infinite scrolling lists, their benefits, and their real world applications. From Toy Components to Production - Resourcing Tips to start building components on your web: use all the resources you can! Building an Autovalidating Form - Displaying Errors when Validation Fails Let's display errors when the validation fails View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/6274262172172288). Building Tooltips - Alternative Approach to find the Middle The previous approach didn’t work, so we’ll try to use a different approach to find the middle of the cursor. Building Tooltips - Perfecting the Position As you can see, the Tooltip that currently appears needs to be repositioned. In this lesson, we will try to reposition it to get a neater look! Building an Autovalidating Form - Unique Errors for Each Field Back to our form! In this lesson, we’ll learn how to distinguish each field instead of showing the same error for each one. Building an Autovalidating Form - Styling the Form In this lesson, we’ll give our form a more familiar appearance. Building an Autovalidating Form - Integration Tests In this lesson, we’ll learn what integration tests are and see one in practice. From Toy Components to Production - Frameworks and Libraries Should you use frameworks and libraries? Read this lesson to find the answer. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5726683906703360). Building the Autocomplete Search - Displaying Autocomplete Suggestions Let’s connect the data from the backend and make the suggestions visible. Building the Autocomplete Search - Final Styling Touches to the Autocomplete Enabled Engine In this lesson, we continue to make our backend component look like Google’s. Building an Autovalidating Form - Validation of User Input with Regex Let's apply the rules to individual fields now so they can validate appropriately View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5740423507083264). Building an Autovalidating Form - Introduction to Regular Expressions This lesson explains and introduces Regular Expressions. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5748475799011328). Building an Autovalidating Form - Displaying Actual Errors The first step to getting error messages to show up when validation fails View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5647308616105984). Building an Infinite List - Server Client Communication Let's talk a little about the client and the server are expected to interact and what that implies for our implementation View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5734977488551936). From Toy Components to Production - Ship it! This lesson gives some additional guidelines to make your journey to build frontend components smooth and fast. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5081622768517120). From Toy Components to Production - 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. Building an Autovalidating Form - Acceptance Tests In this lesson, let's discuss what acceptance tests are and see one in practice View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5707274949492736). Building the Autocomplete Search - Formatting the Autocomplete Suggestions Let’s style the autocomplete suggestions in this lesson to make them look more like Google’s. Building Tooltips - Adding Animation & Styling This lesson will help you learn how to make your tooltip look pretty so it delivers a great user experience! Building an Infinite List - Styling List items In this lesson, we’ll style our list item before adding in any functionality. Building Tooltips - Examining the Important Features Medium has a pretty interesting tooltip. Let's analyze what we're building and how we can achieve it. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5752142325350400). Building an Infinite List - Autopopulation In this lesson we learn how to dynamically load more tweets. Building an Infinite List - Adding a 'Loading' Element Showing the rest of the list items – infinitely. (Or almost) Building the Autocomplete Search - Further Styling an Autocomplete Enabled Engine In this lesson, we’ll be modifying our backend component look like Google’s. Building an Autovalidating Form - Wrapping Up Polishing up our form component View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5676325415157760). Building Tooltips - What is a Tooltip? Before building this component, let's see what it looks like and what features it incorporates. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5674248798470144). Building an Autovalidating Form - Rules for User Input Categories In this lesson, let’s choose which rules will be used to validate various user input types such as birthday, name and username. Building an Autovalidating Form - Building the Form Let’s set up the basic framework for our auto validating form using the HTML form element. Building the Autocomplete Search - Styling an Autocomplete Enabled Engine Let’s assess the kind of styling we would need to add to our Autocomplete Search Engine in this lesson. Building an Infinite List - Building an HTML Template for Infinite Lists The template for each list item needs to be built first in order to test Building an Autovalidating Form - Guide to implementing Rules for Password Let's get back to something we've missed: the password guide View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5686306919153664). Building an Autovalidating Form - Restrictions and Month Selector Let’s talk about restrictions to further help the user fill in their form and provide a month selector. Building the Autocomplete Search - Setting up a Framework to build Google's Autocomplete Let’s Set the template as a framework to begin building Google’s Autocomplete Functionality. Building Tooltips - How to Determine the Middle of Cursor? One of the most interesting aspects was that the tooltip appears in the middle of our cursor. How can we do that? Let’s find out in this lesson. Building an Autovalidating Form - What is an Autovalidating form? This lesson gives a brief overview of auto validating forms and a roadmap of the rest of the chapter. Building a Dropdown Menu - Extending the Submenu Functionality Now we will extend the submenu functionality by fetching dynamic data and images from the server, and making submenus distinct. Building a Dropdown Menu - How to create a Submenu? Each menu item has a nested menu which is called the “submenu.” This lesson will briefly explain how we are going to implement it in our code. Building an Autovalidating Form - Test Driven Development In this lesson, we'll learn what Test Driven Development (TDD) is, the three categories of tests involved, what Unit Tests are and how to build and run them. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5630721452408832). Building Tooltips - Let's Start Building the Tooltip Now that we've found a way to get the middle, let's get a skeleton of a tooltip to display. In this lesson, we will code a basic layout of a tooltip in HTML which we will further extend in the upcoming lessons. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5732694713434112). Building the Autocomplete Search - Examining Google's Autocomplete Functionality Before we begin building, we'll analyze Google search Engine's Autocomplete Functionality which is the component that we're aiming to build. View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5709068098338816). Building the Autocomplete Search - Building a Server Endpoint for Autocomplete Let's modify the server we have already built so that it returns data that's a little less hardcoded and more varied for a search engine example! View the lesson [here](https://www.educative.io/collection/page/10370001/5165314803236864/5764640680181760).
About the Intermediate JavaScript: Building Frontend Components (Educative) category [Intermediate JavaScript: Building Frontend Components (Educative)] (1)