Tag: Build

Build a Bootstrap light/dark toggle switch component

Bootstrap, in the current latest version, v5.3.0, has started supporting color modes. This means that in your Bootstrap layouts you can choose from its default light or dark mode, or even create a new one.  In the Bootstrap docs, they have implemented a dropdown color mode toggle that can work as a starting point for… Continue reading Build a Bootstrap light/dark toggle switch component

Build a light/dark mode toggle switch component with CSS & JavaScript

In this new tutorial, we’ll use previous knowledge and learn how to build a light/dark mode toggle switch component. This is a handy feature available in many sites and apps nowadays because it can help reduce eye strain and therefore improves accessibility. MDN’s color modes Slack’s color modes It’s also worth noting that more and… Continue reading Build a light/dark mode toggle switch component with CSS & JavaScript

15 UX research deliverables to convince stakeholders

In this article, we’ll explore 15 essential UX research deliverables that can help you effectively communicate user insights and drive alignment across teams. Key Takeaways 👉 UX research deliverables help connect user needs with stakeholder goals, making it easier to align teams and improve designs. 👉 Clear, simple deliverables show real user insights, helping stakeholders… Continue reading 15 UX research deliverables to convince stakeholders

Build a website page configurator with CSS & JavaScript

To build our page configurator, we’ll combine old-school CSS techniques with modern CSS features like custom properties and container queries.  What We’re Building Without further ado, let’s take a look at the final project. Click the setting icon to the left of the screen to access the controls panel: 1. Begin with the panel… Continue reading Build a website page configurator with CSS & JavaScript

Access High Growth and Build a Sustainable Career with Coding Bootcamps

Why are coding bootcamps rising? Coding remains a cornerstone skill in today’s job market, and it is resilient amid economic shifts. However, misconceptions often obscure its true nature as software expert coders play an essential role in technology-driven industries. Businesses depend on them to create operational solutions that drive innovation and efficiency. Coders must be… Continue reading Access High Growth and Build a Sustainable Career with Coding Bootcamps

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

Build a JavaScript Dropdown Filter Component With Shareable URLs

In this new tutorial, we’ll learn how to create a JavaScript dropdown filter component where each filtering option will have a unique shareable URL. Once we filter for a specific option, the page URL will change. Then, if we grab that URL and open it in another browser/window, only the associated boxes will appear. What… Continue reading Build a JavaScript Dropdown Filter Component With Shareable URLs

90% of designers are unhirable?

Or why your cookie-cutter portfolio doesn’t cut it and how to fix it Image by Matej Latin (Author) Here’s the harsh truth: I’ve reviewed more than 1,000 portfolios in my design career so far, and I turned 90% of them down because of one thing — the linear design process. By “linear design process” I mean cookie-cutter case studies that… Continue reading 90% of designers are unhirable?

UX leadership is failing, multi-brand design systems, proxies in UX

Weekly curated resources for designers — thinkers and makers. “What is the effect of constant exposure to information on our attention? Who benefits from a dramatic change in our attention, and when and why has this happened? One hypothesis is that companies have created an ecosystem to encourage continual consumption of information, and they profit from our addiction… Continue reading UX leadership is failing, multi-brand design systems, proxies in UX

How to Build a Design System Repository

Design systems can actively make life easier for designers and developers alike. They’re like your favorite recipe book, but instead of lasagna and chocolate chip cookies, it’s packed with color palettes, typography, and UI components that everyone on the team can whip up into stunning interfaces. Having everything related to design in one place —… Continue reading How to Build a Design System Repository

Learn How to Build a Career as a Freelance Presentation Designer

What Is a Freelance Presentation Designer? What is a PPT designer, and what does it mean to be a freelance PowerPoint designer? Freelance presentation designers may offer their services for hire. They might also build presentation products for sale.  Many freelance PPT designers have left behind full-time presentation designer jobs. It’s common to “hang up… Continue reading Learn How to Build a Career as a Freelance Presentation Designer

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

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 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)

Name/Role/Value – Whose Role Is It Anyway?

Welcome to the next edition of my Design Strategy blog series. Today, I’m sharing a client story with the hope that y’all will focus on thinking about WHY you should do things differently so that your program can rapidly mature and scale quickly. I will once again skip the “how-to” article formula and dry laundry… Continue reading Name/Role/Value – Whose Role Is It Anyway?

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

How to Build a Pricing Table With a Monthly/Yearly CSS Toggle Switch

Toggle button switches are a classic UX trend often met in different parts of a website or an app. In a previous tutorial, we discussed how to build a CSS-only switch component for a simple to-do checklist. Today, we’ll create another switch: a monthly/yearly switch that will let visitors go through different pricing plans.  Our… Continue reading How to Build a Pricing Table With a Monthly/Yearly CSS Toggle Switch

10+ Best HTML Templates for NFT Websites 2022

Everything related to cryptocurrency and NFTs are extremely popular right now, which has motivated a lot of people to jump into the industry quickly. Because of this, the desire to make a website for promoting or selling NFTs is strong. Perhaps you want to make your own NFT marketplace? Or maybe you simply wish to… Continue reading 10+ Best HTML Templates for NFT Websites 2022