[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
Tag: JavaScript
How Can a ReactJS Development Company Enhance Your Web Application?
In today’s digital landscape, the performance and functionality of web applications are paramount. As businesses strive to deliver superior user experiences, choosing the right technologies and expertise becomes crucial. ReactJS, a widely acclaimed JavaScript library for building user interfaces, has emerged as a leading tool for web application development. Collaborating with a ReactJS development company… Continue reading How Can a ReactJS Development Company Enhance Your Web Application?
Build an asymmetric JavaScript slideshow with CSS Grid & GSAP
Without further ado, here’s what we’re going to create: Please note that the slideshow isn’t optimized for mobile devices. The asymmetric/broken layout works best on large screens, so be sure to view the demo from a large device. For mobile devices, you can choose to have a standard slideshow with a single image and… Continue reading Build an asymmetric JavaScript slideshow with CSS Grid & GSAP
Build an animated JavaScript accordion component, with overlapping panels
In this new tutorial, we’ll learn how to build an animated JavaScript accordion component with overlapping panels. We won’t focus so much on accessibility in this tutorial, so exploring how to make this component more accessible would be a valid next step. Our accordion component Here’s what we’re going to create (click on a panel… Continue reading Build an animated JavaScript accordion component, with overlapping panels
Better Web Security Means Less Convenience – For Now
The web makes our lives more convenient. We can order a T-shirt or a pizza with a few clicks. We can conduct global research without leaving our seats. It has changed the way we do just about everything. As web designers, we seek to add even more convenience. We employ systems to “remember” users. We… Continue reading Better Web Security Means Less Convenience – For Now
How to Create an “AI Quotes Generator” With OpenAI and JavaScript
In this tutorial, we’ll learn how to create an “AI Quotes Generator” app with JavaScript. This app will demonstrate how to fetch data from the OpenAI API and generate engaging quotes for different categories or custom moods. HTML Structure The HTML structure will consist of the following elements: A button at the top right will… Continue reading How to Create an “AI Quotes Generator” With OpenAI and JavaScript
How to Create an “AI Quotes Generator” With OpenAI and JavaScript
In this tutorial, we’ll learn how to create an “AI Quotes Generator” app with JavaScript. This app will demonstrate how to fetch data from the OpenAI API and generate engaging quotes for different categories or custom moods. HTML Structure The HTML structure will consist of the following elements: A button at the top right… Continue reading How to Create an “AI Quotes Generator” With OpenAI and JavaScript
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
Create a Rotating Text Animation Effect With CSS Variables and JavaScript
In this new tutorial, we’ll learn how to create a rotating text animation effect using CSS variables and JavaScript. Although we can certainly build a simple text-changing animation in pure CSS, we’ll put in the loop JavaScript to make things more maintainable and effective. Basic Text Rotating Animation We’ll define a h1 element where we’ll… Continue reading Create a Rotating Text Animation Effect With CSS Variables and 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
Largest Contentful Paint: What It Is and How To Optimize It
In this guide, I’ll explain how to optimize Largest Contentful Paint using HTML and CSS. I’ll explain what LCP is, then before going into the details, I’ll quickly recap the most important things you need to know about LCP. So, What is Largest Contentful Paint (LCP)? Largest Contentful Paint (LCP) is one of the three… Continue reading Largest Contentful Paint: What It Is and How To Optimize It
Three Ways to Handle Events in JavaScript
JavaScript is a versatile and powerful programming language that is widely used for creating dynamic and interactive web pages and applications. One essential aspect of building these applications is handling events. Events are actions that take place in the browser, such as mouse clicks, keyboard inputs, or the loading of a webpage. By handling events,… Continue reading Three Ways to Handle Events in JavaScript
Event Bubbling and Event Capturing in JavaScript
Events are bound to happen all the time in a web application or web page. Events tell the page how to behave when something happens. For instance, if a user clicks a button, the web page should react, and events are used to define this reaction. Events can be anything, but here are the most… Continue reading Event Bubbling and Event Capturing in JavaScript
How To Build a Website Search Bar with JavaScript
A search bar is one of the most common features on any website. So common in fact, that you’d be hard-pressed to find a website that deals with data in one form or another and doesn’t have a search bar. Even the most visited webpage in the world consists almost entirely of a search bar:… Continue reading How To Build a Website Search Bar with JavaScript
Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)
In this tutorial, you’ll learn how to make an element enter fullscreen mode in any browser using the JavaScript FullScreen API. “The Fullscreen API adds methods to present a specific element and its descendants in fullscreen mode, and to exit fullscreen mode once it is no longer needed” – MDN Fullscreen mode removes… Continue reading Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)
Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)
In this tutorial, you’ll learn how to make an element enter fullscreen mode in any browser using the JavaScript FullScreen API. “The Fullscreen API adds methods to present a specific element and its descendants in fullscreen mode, and to exit fullscreen mode once it is no longer needed” – MDN Fullscreen mode removes… Continue reading Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)
Learn Functional Programming in JavaScript
JavaScript is one of the most interesting programming languages, simply because you can write software in a variety of different ways. We primarily live in an object-oriented world, but we’re not bound to that paradigm. We can also take a functional programming approach. This course is 1 hours 35 minutes long, and it’s split into… Continue reading Learn Functional Programming in JavaScript
JavaScript for Web Designers (Free Course)
We’ll start off simple by discussing variables, data types, and loops. Then, we’ll move on to more complicated concepts like functions, selectors, and events. You’ll even get a chance to apply the skills you’ve learned by putting together some examples – perfect for any web designer! What You’ll Learn What JavaScript is and how it… Continue reading JavaScript for Web Designers (Free Course)
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
Lazy Loading Images Using HTML and JavaScript
I have previously written a tutorial that discusses how to preload images on a webpage using HTML, CSS, or JavaScript. The reason we went to the trouble of preloading images was to provide a better browsing experience to users so that they don’t have to wait for an image to load. The same philosophy of… Continue reading Lazy Loading Images Using HTML and JavaScript
Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript
In this new tutorial, we’ll learn how to create an infinite blinking/flashing text effect with CSS animations and a bit of JavaScript. Specifically, selected text parts will switch colors after a certain period. After that, the animation will reinitialize. Our Text Effect Here’s what we’re going to create. It’s a great addition to a portfolio… Continue reading Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript
Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript
In this new tutorial, we’ll learn how to create an infinite blinking/flashing text effect with CSS animations and a bit of JavaScript. Specifically, selected text parts will switch colors after a certain period. After that, the animation will reinitialize. Our Text Effect Here’s what we’re going to create. It’s a great addition to a portfolio… Continue reading Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript
Understanding Python Regex Functions, with Examples
Regular expressions (regex) are special sequences of characters used to find or match patterns in strings, as this introduction to regex explains. We’ve previously shown how to use regular expressions with JavaScript and PHP. The focus of this article is Python regex, with the goal of helping you better understand how to manipulate regular expressions… Continue reading Understanding Python Regex Functions, with Examples
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