Mini Lessons

Sign in Subscribe

NodeLists

Tabbed Content: Setting up HTML and CSS

Tabbed Content: Setting up HTML and CSS

Here is what we are trying to achieve: 0:00 /0:06 1× Come on, download the starter files and open them up inside the code editor: tabs-component-starter-filestabs-component-starter-files.zip84 KBdownload-circle Here is the basic HTML structure to achieve the tabbed content: <div class="tabbed-content"> <div

Tabbed content: What are they, and how do they work

Tabbed content: What are they, and how do they work

Now that we understand how to loop through NodeLists, many possibilities open up. For example, you can now create image galleries, tabbed content, etc. And starting from this lesson, we will work on the tabs component. Tabs are a bit complicated design pattern when compared to accordions. So, in this

Understanding and using Dot Notation Chaining a.k.a Object chaining

Understanding and using Dot Notation Chaining a.k.a Object chaining

Imagine there is a button on a web page called "Subscribe" with the following HTML: <button class="btn">Subscribe</button> Next, to perform any action on the button, let's say, changing its text, you have to select the button and

Using loops for creating accordions

Using loops for creating accordions

Here is how to achieve it: //Step 1: Select all FAQ headlines const faqHeaders = document.querySelectorAll(".faqs .faq-header"); //Step 2: Loop through all selected FAQ headlines for (let i = 0; i < faqHeaders.length; i++) { const faqHeader = faqHeaders[i]; //Step 3: Add "click" event listener to

Project recap: FAQ Accordions

Project recap: FAQ Accordions

When we worked on an FAQ-based accordion project previously, we were dealing with a single FAQ because we didn't know about "for" loops back then. But now, we do know a lot more than "for" loops. So, it's time to build a

A NodeList is similar to an array with few important differences

A NodeList is similar to an array with few important differences

Technically speaking, if you know how to get around arrays, then you already know how to get around NodeLists, too. This is because, at the end of the day, both arrays and NodeLists represent a list of data. An array represents a collection of non-HTML data, while a NodeList represents

Understanding NodeLists

Understanding NodeLists

Just a quick recap about lists in programming: A list is nothing but a collection of items or data. In the real world, a list could be a collection of music albums, shopping items, etc. But sooner or later, you have to deal with these real-world lists in your coding