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

In this tutorial, we’ll cover the challenges when working with the classic 100vh unit for making full-screen sections and discuss some great alternative CSS units. Hero or full-screen sections are an integral part of UI design. They exist in different kinds of websites, from landing pages to portfolio websites, and aim to grab visitors’ attention in the first place. Common parts of a hero section are slideshows, images, videos, headlines, texts, call-to-action links, etc.  100vh Over recent years, the easiest way to create a full-screen section has been to give it a height of 100vh, a ..read more

Today, I’ll cover Chart.js, a very popular JavaScript library, and teach you how to incorporate charts of this library into Bootstrap 5 tabs/pills. The idea is that each time we click on a Bootstrap tab, the target chart will be reconstructed and hence reanimated. Bear in mind that this technique can work for embedding such a chart into a tab component of any front-end framework. Get up to Speed With Charts In previous tutorials, I’ve shown you how to create different kinds of charts utilizing either only CSS or a JavaScript charting library like HighCharts.js. Dive in and find your favouri ..read more

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. Our Currency Converter Demo To create your own currency converter, you’ll need to register your own API key from exchangerate-api.com. I based this design loosely on the excellent Crypto exchange platform by Yev Ledenov on Dribbble.  HTML Structure Our currency application will have a simple interface containing : A ..read more

Building a JavaScript calendar is the best way to understand date functionalities in JavaScript. This tutorial will create a real-time calendar similar to the one in your digital devices. By the end, you’ll have something like this: HTML Structure We will start our JavaScript calendar by building the structure with HTML and CSS. Once the interface is done, we will replace the functionality with JavaScript. The HTML structure will contain a header showing the current month and year. Then, we will have arrows to navigate to the next or previous month, and lastly, we will have a grid showing ..read more

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 or company landing page, to highlight brands, or names, places, and so on. 1. Begin With the HTML Markup Inside a container, we’ll define a wrapper element that will hold some text with well-known brands, like this: 1 <div class ..read more

One minute your website is working. The next, you see an error message that looks like this:  “500 Internal Server Error” Or: “This page isn’t working.” Or:  “HTTP ERROR 500” Unfortunately, this is one of those error codes that provides no information on the source of the problem. That said, troubleshooting and fixing a 500 internal server error in WordPress is a straightforward process.  This post breaks down 10 steps to resolve this error and get your site back online: Refresh Your Browser Clear the WordPress Cache Repair a Corrupted .htaccess File Deactivate Your Theme ..read more

In this step-by-step WordPress tutorial, we’re going to show you how to use WordPress even if you’ve never built a website with it before (or built a website, in general). No professional design or coding skills are required! WordPress has long been the #1 platform for building websites in the world. At first glance, however, it might not appear to be as easy to use as other website builder options out there that overly simplify things. Don’t let initial appearances fool you though. WordPress is the best and easiest way to build an amazing looking and feature-rich website that visitors and ..read more

If you’re unsure about what a static website is (or how you might build one) you’ve come to the right place. Allow us to be your guide to the world of static vs dynamic websites. Picture this: you’re flipping through a photo album. Every snapshot captures a moment frozen in time. It’s unchanging and unmoving. It just exists, as is, in perpetuity. That’s similar to the experience a static website offers. It’s a no-fuss, what-you-see-is-what-you-get site that can be updated, of course, but its content will largely stay the same day in and day out. Today, we’re going to unpack the details surr ..read more

Staff Pick Kidko A vibrant and professional HTML template, offering a responsive design, 3 unique homepages, and tons of features tailor-made for kindergartens, daycares, and other child-related businesses. Staff Pick Jadusona This is a modern and responsive eCommerce HTML5 template, designed specifically for baby shops, featuring multiple unique homepages, eCommerce-specific features, and a colorful design. Baby & Kids Store This template provides a comprehensive solution for an online kid’s store, with a responsive design, RTL support, and numerous features an ..read more