Tag: CSS

Progressively enhancing Grid Lanes

This post is a follow-up on my previous post. I was wondering whether it’s safe to use Grid Lanes today. I came up with a solution I find okay, but there is a caveat. Note: This post contains interactive demos. If you want to see them instead of screenshots, enable the CSS Grid Lanes Layout flag… Continue reading Progressively enhancing Grid Lanes

CSS! CSS! CSS!

I just came home after three beautiful days in Amsterdam, where I gave a talk at the CSS Day conference. I’ve watched many inspirational and engaging presentations and had many interesting conversations. My biggest takeaway: The CSS community needs you! First things first: CSS Day is a wonderful event, and the community is lovely. If… Continue reading CSS! CSS! CSS!

Syntax podcast episode 623: “Nothing in CSS” errata

I just listened to the Syntax podcast for the first time because they were discussing topics near and dear to my heart, HTML and CSS. The episode is called “Nothing in CSS – 0 vs 0px, no, none, hidden, initial and unset”, and they’re talking about all the things that can be 0, none, or… Continue reading Syntax podcast episode 623: “Nothing in CSS” errata

Totally remdom, or How browsers zoom text

Last week, I lied to my students. After I explained how the rem unit worked, I told them that they could compare px and rem by increasing the font size in their mobile browsers and see how it affects text zoom. Before I said that, we created a simple test page with two paragraphs and… Continue reading Totally remdom, or How browsers zoom text

Building a progress-indicating scroll-to-top button in HTML and CSS

I noticed a nice detail on theneedledrop.com. They have a square scroll-to-top button with an arrow pointing right. The button’s border is black, and the background color is white. When you scroll, the arrow points up, and the background color turns gradually yellow as you scroll. That’s nothing too special, but it caught my attention… Continue reading Building a progress-indicating scroll-to-top button in HTML and CSS

Claude For Code: How to use Claude to Streamline Product Design Process

[unable to retrieve full-text content] Anthropic Claude is a primary competitor of OpenAI’s ChatGPT. Just like ChatGPT this is versatile tool that can be use used in many different purposes but there is an area where Claude shines and this area is coding. Claude is great at code-adjacent design tasks and can be used as… Continue reading Claude For Code: How to use Claude to Streamline Product Design Process

Create a color contrast checker with HTML, CSS, and JavaScript

By “color contrast” we’re referring to the difference in brightness between foreground and background colors. In simpler terms, it defines how easy it is for the human eye to recognize text or images on a coloured background. The Web Content Accessibility Guidelines (WCAG) provide specific recommendations regarding color contrast for text to make web content… Continue reading Create a color contrast checker with HTML, CSS, and JavaScript

How to create a mesh gradient generator in HTML, CSS and JavaScript

What we’re building Here’s the gradient generator we’re going to build. Click the button at the bottom to generate random new mesh gradients! Once they’re generated, you can copy the CSS to recreate the gradients using the background-image property in combination with radial-gradient. Wait, what’s a mesh gradient? Good question. Mesh gradient is the… Continue reading How to create a mesh gradient generator in HTML, CSS and JavaScript

How to create infinite text scrolling in HTML, CSS, and JavaScript

It’s worth noting that a horizontal marquee brings many accessibility challenges. Moving text can be distracting and difficult to read. Consider carefully the kind of content you wish to display in this way! Basics: How the text scroll effect works This text scroll effect can be achieved using simple CSS animation properties. To make text… Continue reading How to create infinite text scrolling in HTML, CSS, and JavaScript

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

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

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)

Published
Categorized as Tutorials Tagged

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