Tag: 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

Create a JavaScript tab component with an adaptive stepper UI

In the past, I’ve shown you how to create different tabbed interfaces. Today, we’ll build another responsive JavaScript tab component where the clickable tabs will appear as a stepper component. If you aren’t familiar with stepper components, their primary goal is to improve the user experience by organizing large logical content blocks into smaller sequential… Continue reading Create a JavaScript tab component with an adaptive stepper UI

How to create a scratch card effect with vanilla JavaScript

Let’s begin by taking a look at what we’re creating. By the end of this tutorial, you will have something like this (move your mouse cursor over the scratch panel and watch a uniquely generated code reveal itself): OverView In HTML, the <canvas> element is a powerful tool for directly rendering 2D graphics, such… Continue reading How to create a scratch card effect with 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 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

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

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