HTML Archives - iDevie

Alt Text: Not Always Needed

Summary: Write alt text that communicates an image’s purpose without repeating page content. Focus on meaning rather than visual description. Alt text (or alternative text) is metadata intended to help screen-reader users understand what an image is depicting. Most guidance for writing alt text describes how to make individual web-based images accessible and understandable for… Continue reading Alt Text: Not Always Needed

How to make interactive charts accessible

Interactive charts can transform data into compelling stories, offering valuable insights at a glance. But what happens when these visual tools are inaccessible to those with visual impairments? In this post, we’ll show you how to ensure your interactive charts are accessible to all users, regardless of their abilities. Before digging deeper, let’s establish what… Continue reading How to make interactive charts accessible

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

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 do I propose to improve the usability of Gymnasium.com

[unable to retrieve full-text content] Photo by Hal Gatewood on Unsplash I pretty much discovered UX Design through their UX fundamentals course while working as a Test Automation Engineer. Although the course material was excellent, covering the fundamentals of UX beautifully, the platform itself had some clear usability issues. Gymnasium features a clean and simple design… Continue reading How do I propose to improve the usability of Gymnasium.com

Distinguishing between ARIA and native HTML attributes

As a developer, you want to create more inclusive and accessible digital experiences for your users. Great! It’s possible, however, that you might be feeling a bit confused or overwhelmed by the element attributes that can affect the usability for users of assistive technology. ARIA (or WAI-ARIA, Web Accessibility Initiative-Accessible Rich Internet Applications) defines some… Continue reading Distinguishing between ARIA and native HTML attributes

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

Layouts in Astro — SitePoint

This introduction to layouts in Astro is excepted from Unleashing the Power of Astro, available now on SitePoint Premium. While each .astro page (route) has the potential to contain a fully-fledged HTML document, it’s inefficient to duplicate that structure, especially when certain elements—such as <meta> and <title> elements—may vary depending on the currently viewed page.… Continue reading Layouts in Astro — SitePoint

Layouts in Astro — SitePoint

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

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

10+ Best One Page HTML Landing Page Templates For 2024

One page HTML templates are ideal for landing pages. There are plenty of HTML templates made specifically for this purpose—let’s take a look! One Page HTML Landing Page Templates for 2024 Let’s have a look at some of the best one page HTML landing page templates on Envato Elements. 5. Stellar – One Page Multipurpose… Continue reading 10+ Best One Page HTML Landing Page Templates For 2024

30 Amazing Chrome Extensions for Designers and Developers

Compilations By Robert Reeve 2 days ago Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the HTML code of that fantastic color palette? Looking for a trick that will supercharge your productivity this year? We’ve got you covered. Chrome extensions are the bread and… Continue reading 30 Amazing Chrome Extensions for Designers and Developers

Why Unique ID Attributes Matter

Ambiguous IDs can cause both your developers and your users a lot of frustration, and may ultimately damage customer relations. A Little Background It’s one of the most common WCAG 4.1.1 violations reported by automated accessibility testing tools such as aXe, and it can cause a fair share of problems for your users. It happens… Continue reading Why Unique ID Attributes Matter

Introducing the Next Generation of Mobile Accessibility Testing

If you can run an app in iOS or Android, now you can test it for accessibility with us. Deque’s axe DevTools Mobile redefines mobile testing for digital accessibility for cross-platform apps, such as those built with React Native. It’s the easiest mobile testing solution to install and run. It also provides clear direction to… Continue reading Introducing the Next Generation of Mobile Accessibility Testing

WCAG 2.2 Removes 4.1.1 Parsing and How axe-core is Impacted

Earlier this year, for the first time ever the World Wide Web Consortium (W3C) proposed to remove a success criterion from WCAG 2. Success Criterion 4.1.1 Parsing ensures that pages written in markup languages like HTML and SVG are written in a way that allows browsers and assistive technologies to understand them consistently. Let’s take… Continue reading WCAG 2.2 Removes 4.1.1 Parsing and How axe-core is Impacted

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 Use Block Template Parts in a Classic WordPress Theme

Sometimes, it’s the unexpected features that make WordPress so powerful. Those little things that you didn’t know you need can end up having a big impact. WordPress 6.1 has brought about one of these hidden gems: the ability to use block template parts within a classic theme. It takes the capabilities of block themes and… Continue reading How to Use Block Template Parts in a Classic WordPress Theme

10 Best Gmail Email Templates (and How to Use Them)

Gmail is a popular email platform from Google that was introduced in 2004. While initially it had an HTML editor, that was quickly removed. This left Gmail with the WYSIWYG editor that makes it easy to compose and format your emails. However, Gmail still supports HTML emails which comes in handy if you want to… Continue reading 10 Best Gmail Email Templates (and How to Use Them)

Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

In this new tutorial we’ll discuss a straightforward approach for reducing spam from form submissions. This technique will use PHP and JavaScript to block form submission until the user provides the correct answer to a simple math CAPTCHA. Here’s a quick video that demonstrates the expected functionality: It’s important to note that this is just… Continue reading Create a Simple Math CAPTCHA for Your Forms With PHP and 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

2 Ways to Protect Your HTML Email Links (and Prevent SPAM)

In this tutorial we’ll describe two straightforward techniques for protecting HTML email links from being scraped by spammers. Although these techniques cannot guarantee full success, they’ll give you an extra layer of protection. Email Templates on Envato Elements Before we dive in, don’t forget that you can download unlimited email templates with your Envato Elements… Continue reading 2 Ways to Protect Your HTML Email Links (and Prevent SPAM)

Wordle is a masterclass in product design simplicity

Some of the most fun I’ve had this year is playing Wordle with my friends and family. But I’m a product designer and a programmer, so as I played, I couldn’t help but notice some strange things about how it was constructed. I was right in the middle of making my own product School Morning Routine,… Continue reading Wordle is a masterclass in product design simplicity