CSS Archives - iDevie

How to create a color gradient tool in JavaScript

A gradient is a blend of two or more colors that transition smoothly from one to another. Gradients add modern aesthetics to backgrounds, text, buttons, etc. In CSS, gradients are added as a value of the background property. For example, a simple gradient might look like this: 1 background: linear-gradient(to right, red, pink); Here, we… Continue reading How to create a color gradient tool in JavaScript

How to build a Connect Four game in HTML, CSS, and Vanilla JavaScript

In this tutorial, we will cover how to build a fully functioning Connect Four game in HTML, CSS and Vanilla JavaScript. Here’s the demo we’ll be working towards. Click on the available slots to place whichever color is next in the queue! Begin with simple HTML markup Alright, let’s get started. In the body of… Continue reading How to build a Connect Four game in HTML, CSS, and Vanilla JavaScript

Create a breakout game with HTML, CSS, and vanilla JavaScript

We’ll begin by creating the game area using the HTML canvas element. The <canvas> element provides access to the Canvas API, which allows us to draw graphics on a webpage. In your HTML add the code below. 1 <div class=”instructions”> 2 <p> 3 Bounce the ball with the paddle. Use your mouse to move the… Continue reading Create a breakout game with HTML, CSS, and vanilla JavaScript

How to animate CSS Grid layouts (image grid project)

That’s right—it turns out we can animate some of the CSS Grid properties! Today, we’ll see this behavior in action by building a responsive image grid with hover effects. Taking this opportunity, we’ll also utilize the powerful :has() CSS selector. Let’s get started! Our Image Grid Here’s what we’re going to create—be sure to view… Continue reading How to animate CSS Grid layouts (image grid project)

From Figma to Functional App Without Writing a Single Line of Code

[unable to retrieve full-text content] How I Created a Design Tokens Converter in Minutes Using Claude Product designers don’t have to code, but knowing HTML and CSS will help us communicate with developers. In addition, a designer who knows JavaScript, Python, or another language, is a plus because they can explain the logic to the developer.… Continue reading From Figma to Functional App Without Writing a Single Line of Code

How to Create a 2D Digital Clock with HTML, CSS, and Vanilla JavaScript

Wouldn’t it be fun to create your own beautiful Digital Clock with basic web technologies? This tutorial will cover how to create a faux-3D digital Clock with HTML, CSS, and Vanilla JavaScript. Let’s get started! HTML Structure The HTML structure will consist of a rectangular container with a time display inside. The time display will… Continue reading How to Create a 2D Digital Clock with HTML, CSS, and Vanilla JavaScript

How to Create an Expanding Search Input with HTML, CSS, and JavaScript

As a designer, you can enhance the user experience of a website or mobile application by adding subtle animations to its components. One such component is a search input box. This tutorial will cover how to create an expanding search input; one which expands when a user clicks on a search icon. You’ll find this… Continue reading How to Create an Expanding Search Input with HTML, CSS, and JavaScript

Build a Simple YouTube App with Vanilla JavaScript

The Tuts+ YouTube channel is fast approaching 1.5M subscribers. Let’s celebrate this great achievement by creating something YoutTube-oriented! We’re going to build a simple, yet fully functional YouTube app with Vanilla JavaScript. The concept will be pretty straightforward; we’ll build a simple UI where we can enter the ID of a channel and our app… Continue reading Build a Simple YouTube App with Vanilla JavaScript

Build a Simple YouTube App with Vanilla JavaScript

The Tuts+ YouTube channel is fast approaching 1.5M subscribers. Let’s celebrate this great achievement by creating something YouTube-oriented! We’re going to build a simple, yet fully functional YouTube app with Vanilla JavaScript. The concept will be pretty straightforward; we’ll build a simple UI where we can enter the ID of a channel and our app… Continue reading Build a Simple YouTube App with Vanilla JavaScript

Create a Currency Converter with HTML, CSS, and Vanilla JavaScript

Let’s create a fully functional currency converter application using HTML, CSS, and vanilla JavaScript. By the end of this tutorial, we will have a responsive currency app that fetches real-time data with the Exchange Rate API and presents it in a user-friendly interface. HTML Structure Our currency application will have a simple interface containing :… Continue reading Create a Currency Converter with HTML, CSS, and Vanilla JavaScript

Create a Currency Converter with HTML, CSS, and Vanilla JavaScript

Build a Grid-to-Full-Screen Image Animation With CSS (and a Touch of JavaScript)

In this tutorial, I’ll show you a motion effect where a split-screen image grid layout will turn into a full-screen image. 1. Begin With the HTML Markup We’ll define three sections: The first and third sections won’t have any real value, but we’ll utilize them to prove that the effect can work inside any page content.… Continue reading Build a Grid-to-Full-Screen Image Animation With CSS (and a Touch of JavaScript)

How to Hide/Reveal a Sticky Bottom Nav Bar on Scroll (With JavaScript)

If you’ve ever used LinkedIn’s mobile app, you’ve probably noticed the sticky bottom navigation bar. By default, it appears, then as you scroll down disappears, and appears again as you scroll up. LinkedIn’s Mobile App Layout Fixed/sticky navigation bars are the primary layout pattern on mobile apps. Udemy’s Mobile App Layout But nothing stops us… Continue reading How to Hide/Reveal a Sticky Bottom Nav Bar on Scroll (With JavaScript)

Getting Started with HTML Tables — SitePoint

HTML tables are intended for displaying tabular data on a web page. They’re great for displaying information in an organized way, and can be styled with CSS to match the look and feel of our website. In this tutorial, we’ll cover the basics of creating HTML tables and adding styles to make them responsive and… Continue reading Getting Started with HTML Tables — SitePoint

How to Make a Custom Mouse Cursor with CSS or JavaScript

Back in the early stages of web development, websites ran rampant with all sorts of wacky features: galaxy-themed backgrounds, colorful fonts to the point of illegibility, and marquees galore. Source: cameronsworld.net Now we’ve more or less calmed down when it comes to web design but that doesn’t mean we can’t have fun features on our… Continue reading How to Make a Custom Mouse Cursor with CSS or JavaScript

How to create animated snow on a website (with CSS and JavaScript)

‘Tis the season to be jolly so let it snow, let it snow, let it snow! 1. Markup with holiday HTML For our markup, we’ll have two primary containers: a main element containing the content of our page and a snow-container element that will display the snow. 1 <main> 2 <h1>Happy Holidays!</h1> 3 </main> 4… Continue reading How to create animated snow on a website (with CSS and JavaScript)

How to Create Animated Snow on a Website (with CSS and JavaScript)

In this tutorial, we’re going to implement an animated snow effect on a webpage using CSS and vanilla JavaScript, just in time for the holiday season. ‘Tis the season to be jolly so let it snow, let it snow, let it snow! 1. Markup with Holiday HTML For our markup, we’ll have two primary containers:… Continue reading How to Create Animated Snow on a Website (with CSS and JavaScript)

How to Animate a “Twisting Text Effect” With CSS and JavaScript

In this tutorial, we’ll learn how to split an element’s text into separate characters, which we’ll then animate to give us a twisting effect. What We’ll be Building Without further intro, let’s check out what we’ll be building: In our case, there will be two types of animations: The first animation will happen each… Continue reading How to Animate a “Twisting Text Effect” With CSS and JavaScript

How to Implement Infinite Scrolling With JavaScript

What is Infinite Scrolling? Infinite scrolling is a feature used to dynamically load more content on a page once a user scrolls to the end of the page. The concept of infinite scrolling is used to load data from a server in a way that feels “seamless” to a user but doesn’t overload the server… Continue reading How to Implement Infinite Scrolling With JavaScript

10 Best Free Open Source JavaScript Lightbox Widgets and Plugins

Images are crucial, whether you’re running an e-commerce or portfolio website. How many sales you make or new clients you get depends a lot on the quality of the images of your products and services that you can showcase through your images. So it makes sense to highlight your images with a lightbox. Lightboxes make… Continue reading 10 Best Free Open Source JavaScript Lightbox Widgets and Plugins

How to Customize the WooCommerce Checkout Page

The checkout page is one of the most important pages on any eCommerce website. All the effort that you put into your website content, design and marketing will amount to nothing if your customers keep abandoning their carts and never complete the checkout process. Some statistics show that cart abandonment rate can vary in range… Continue reading How to Customize the WooCommerce Checkout Page

Choosing a WordPress Website Builder and Why You Should Use One

There are a lot of tools and services for creating websites today. However, none of them are as popular as WordPress. In fact, WordPress powers around 43% of all websites: that include hobby sites, official government websites, and the biggest news websites. Some examples of websites built with WordPress are The White House, Rolling Stone,… Continue reading Choosing a WordPress Website Builder and Why You Should Use One

WooCommerce Shortcodes Cheatsheet

WordPress added support for shortcodes around 15 years ago. You can use shortcodes to easily add complicated functionality to your website which otherwise would have required you to write a lot of code yourself. Basically, shortcodes are short text snippets whose behavior depends on some more complicated code written in the back end. While WordPress… Continue reading WooCommerce Shortcodes Cheatsheet

How to Customize the WooCommerce Shop Page

People who have created WordPress websites know that there are different kinds of pages that you can create in WordPress. WooCommerce follows a somewhat similar structure. There are single product pages like single post pages and then there are archive type pages to show a list of products. The WooCommerce shop page falls in the… Continue reading How to Customize the WooCommerce Shop Page