Summary: As a UI design style, neobrutalism focuses on raw, unrefined elements like bold colors, simple shapes, and intentionally “unfinished” aesthetics. Emerging as a reaction against sleek, minimalistic designs, neobrutalism creates a striking (almost rebellious) visual style. But while neobrutalism draws attention, designers must carefully balance its distinctive look with usability to avoid ending up… Continue reading Neobrutalism: Definition and Best Practices
Tag: HTML
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
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
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
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
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
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