HTML

In this tutorial, we’re going to be learning how to build out a flip card using html and CSS. Prerequisites This tutorial assumes basic knowledge of HTML and CSS: including topics such as flexbox, CSS pseudo selectors and how to properly layout elements using CSS. This tutorial is not for absolute beginners, and as such, will not explain every basic concept. Before we start, I will like to explain the step-by-step process we’re going to follow in order to build out this flip card....

In this tutorial, we’re going to be stretching our html and css skills by building out a figma logo clone. Why are we building a figma logo clone? Two reasons: It is very easy to build. Anybody can follow along. It is not a very common thing to build. Plus, it sounds like fun to be building out the logo of a really popular UI design tool, so that’s what we are going to be doing....

Have you ever tried to add an event listener to a group of html elements all at once? if you had, you may had probably done something like this: const buttons = document.getElementsByTagName("button"); buttons.forEach((item) => { item.addEventListener("click", function () { console.log("click"); }); }); The problem with the above code is that, when you finally check your browser console, you are going to encounter an error. Why? This is because we are treating our list of buttons as an array while it is not....

In this tutorial, I am going to show you how to build a toggle switch with three states. Normally, a toggle switch has just two states: ON and OFF. That’s why it’s called a toggle switch. However, the other day, while I was browsing the Frontend Mentor website, searching for some frontend development challenges to work on, I came across the calculator challenge on their website. Working on this challenge required building a toggle switch with three states....

At some point in your journey as a developer, you might have come across this error. If you haven’t come across this error, maybe one day you will. The above error occurs as a result of trying to use the forEach array method on an htmlCollection. What is an htmlCollection Well, an htmlCollection is a live and ordered list of nodes that represents a collection of HTML elements extracted from the DOM....