Tutsplus Code
1,180 FOLLOWERS
Thousands of free tutorials and online courses to help you learn software development from mobile devices to web applications and everything in between. Follow this blog to improve your coding skills and workflow.
Tutsplus Code
1M ago
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
Tutsplus Code
1M ago
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
Tutsplus Code
1M ago
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
Tutsplus Code
1M ago
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
Tutsplus Code
1M ago
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
Tutsplus Code
1M ago
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
Tutsplus Code
1M ago
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
Tutsplus Code
1M ago
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
Tutsplus Code
3M ago
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
Tutsplus Code
3M ago
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