When working as a web designer, it’s totally expected that you might develop tunnel vision after some time. That is, you only listen to other web designers for tips and tricks of the trade. But you can seriously up your game by peeking into the toolbox of mobile app developers. You see, it’s not just about making sure your site looks good on a phone. These app creators have been nailing user experience – making apps that folks love to use because they’re smooth, intuitive, and downright handy. Ready to get into it? Let’s take a look at what you can learn from the app developers’ playbook to ..read more

As WordPress developers, many times we want to grab different info (ID, title, URL) for standard WordPress/WooCommerce pages like the Blog and My Account pages. Surprisingly, all this useful stuff is stored in the *_options table, and we can access it using the get_option() function. There’s also the wp_load_alloptions() that we can use to print them all on the page. Let’s see it in action! Get Static WordPress Pages Imagine that, on our site, we’ve registered static pages as front and blog pages.  WordPress stores the ID of these pages as values of the page_on_front and page_for_posts ..read more

If you’ve ever wanted to reuse a page’s layout or settings to create a new one, you might’ve been surprised to find that WordPress doesn’t have a simple out-of-the-box solution.  You could use a keyboard shortcut to Copy All, but that will only copy the text from the page. To carry over images, metadata, custom effects, and page settings, you need a more powerful solution that enables you to duplicate or clone a page in WordPress. In this tutorial, we’ll show you how to duplicate a page in WordPress using three different methods: How to Duplicate a Page in WordPress with a Plugin Ho ..read more

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. Our AI Demo This demo requires an API key to work. You can get yours via the OpenAI website. HTML Structure The HTML structure will consist of the following elements: A button at the top right will open a modal that lets users add their OpenAI API key. An input that lets users add a custom mood Several options populated with categories A button which, when clicked, wil ..read more

Webflow is making it easier than ever to collaborate on projects with a team—including your clients. Let’s explore how to make the most of these useful features. What work looks like has changed a lot in recent years. In fact, there’s been a dramatic shift, with a staggering 44% increase in the use of collaboration tools since 2019, as reported by Gartner. With more people working from home, this surge underscores the tools’ critical role in ensuring productivity amidst the transition to remote teams.  As organizations navigate towards a hybrid workforce model, the reliance on cloud-ba ..read more

In this new tutorial, I’ll explain how to use Carbon Fields, a WordPress custom fields library, to create a Theme Options/Settings page.  What is Carbon Fields? Carbon Fields is a free WordPress library developed by 2create. It helps WordPress theme and plugin developers create additional fields for post types, navigation menus, widgets, etc., or even register custom Gutenberg blocks without touching JavaScript.  As we’ll see, along the way, it comes with various fields like checkboxes, repeaters (complex), texts, etc.  An important note is that we don’t install it as a ..read more

This tutorial will cover how to convert text into speech using JavaScript using WebSpeechAPI. It will feature a simple interface where the user adds the text to be spoken, then clicks a button to generate the corresponding speech. Our Text-to-Speech Demo Here’s what we’re going to build. Type anything you want in the textarea, select the language you’ve written it in, and click the button to hear the result! A Quick Introduction to the WebSpeechAPI Before we build anything, let’s quickly get acquainted with the API we’ll be using. The WebSpeechAPI is a JavaScript API that allows developers ..read more

Don’t limit your design options to preset fonts! Learn how to add fonts to Figma to create unique designs.  Learn how to add fonts to Figma to create unique web designs. Choosing the right font for our design can be a game changer. Good typography not only makes your message readable, but it can define the personality of your brand. As Adi Purdilla says: “If your typography looks bad, that’s going to translate to the whole thing.” If you’re getting started, I recommend you to follow our beginner’s guide to web design. All that being said, you don’t have to limit your options to the pre ..read more

First impressions are everything in business. That’s why no ordinary WordPress theme will do when building a site for one. With thousands of free and premium business WordPress themes available, how do you choose the right one?  In this post, we’ve rounded up 19 of the best WordPress themes for business in 2024: Astra Avada BeTheme Bizmax Enfold Essentials Haswell Infinite Kalium OceanWP Pearl Qwery Salient Startbox The7 uDesign Uncode Unify X + Show more What to Look for When Choosing a Business WordPress Theme What makes a WordPress theme one of the best for busine ..read more

A freelance web design business doesn’t thrive solely because of your creative talents. While that’s a huge part of it, the way you set up and manage your business matters a good deal, too. You might not have given it much thought up until this point. Or perhaps you have, but you find that the logistics of managing your freelance business keep getting in the way of you doing actual design work.  Tuts+ is chock-full of guides and tutorials that can help you become a better web designer. But this site also contains useful resources to help you get your web design business in order.  ..read more