Create Typing Effect: HTML, CSS, JavaScript Tutorial

By Faraz - October 11, 2023

Learn how to create a realistic typing effect on your website using HTML, CSS, and JavaScript. Perfect for beginners in web development.

Join us on Telegram

Create Typing Effect HTML, CSS, JavaScript Tutorial.jpg

Read Also Implementing Product Filtering with HTML, TailwindCSS, and JavaScript.jpg

Implementing Product Filtering with HTML, TailwindCSS, and JavaScript

Are you looking to add a touch of magic to your website? Well, here's a little secret - the typing effect can do just that. It's the kind of enchanting feature that makes text appear as if it's being typed in real-time, instantly capturing your visitor's attention.

In this tutorial, we'll hold your hand through the entire process of creating this captivating typing animation. The best part? You don't need to be a coding guru to pull this off. Whether you're a total beginner or a seasoned pro, we've got you covered.

We won't just focus on the technical nitty-gritty; we'll also explore the creative side of things. By the end of this tutorial, you'll have the skills to not only implement this cool typing effect but also make it uniquely yours, matching your website's style and personality.

So, if you're ready to breathe life into your web content and keep your audience glued to the screen, let's dive right in and discover the magic of the typing effect.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our typing effect.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break down each part of the code:

1. <!DOCTYPE html>: This is the document type declaration, indicating that the document is an HTML5 document. It's the very first line in an HTML document.

2. <html>: This tag encloses the entire HTML document and serves as the root element.

3. <head>: The head section of the HTML document contains metadata and information about the web page. This information is typically not displayed on the web page itself but is important for browsers and search engines.

<meta charset="utf-8">: This meta tag specifies the character encoding for the document, which is set to UTF-8. UTF-8 is a character encoding that supports a wide range of characters and is commonly used for web content.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is typically used for Internet Explorer and instructs it to use the latest rendering engine available, ensuring better compatibility with modern web standards.
<title>Typing Effect Text</title>: The title tag sets the title of the web page, which is displayed in the browser's title bar or tab. In this case, the title is "Typing Effect Text."
<meta name="description" content="">: This meta tag can be used to provide a brief description of the web page's content. However, in your code, it's empty, so no description is provided.
<meta name="viewport" content="width=device-width, initial-scale=1">: This meta tag is often used for responsive web design. It sets the viewport properties, specifying that the page should be displayed at the device's width with an initial scale of 1.
<link rel="stylesheet" href="styles.css">: This line links an external CSS (Cascading Style Sheet) file called "styles.css" to the HTML document. It's used to apply styles and formatting to the content on the page.

4. <body>: The body section contains the visible content of the web page that users will see in their browsers.

<p id="typing"></p>: This line creates a paragraph element (<p>) with an id attribute set to "typing." The id is used to uniquely identify this element. However, there is no text content inside the paragraph, so it's initially empty.
<script src="script.js"></script>: This line includes an external JavaScript file called "script.js." JavaScript is a programming language often used to add interactivity and functionality to web pages. By including this file, you can write JavaScript code that interacts with the HTML content.

This is the basic structure of our typing effect using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Typing Effect Text</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p id="typing"></p>
  <script src="script.js"></script>
</body>
</html>

Read Also Create a Stunning Food Delivery Website HTML & CSS.jpg

Create a Stunning Food Delivery Website: HTML & CSS

Step 2 (CSS Code):

Once the basic HTML structure of the typing effect is in place, the next step is to add styling to the typing effect using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our typing effect. Let's break down each part of the code:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");: This line is an @import rule that imports a font from Google Fonts. It fetches the "Poppins" font with specific weights (200, 400, and 600) and requests it to be displayed using the "swap" strategy. The font-family property is set to "Poppins" to use this imported font for the text content of the web page.

* { box-sizing: border-box; }: This is a universal selector (*) that applies the box-sizing property to every element on the web page. It sets box-sizing to "border-box." This CSS rule ensures that when specifying the width or height of an element, it includes the element's padding and border within that width or height calculation. This can help with consistent layout and sizing in your web page.

body { ... }: This CSS block contains styling rules specifically for the <body> element of the HTML page:

background-color: #ffd791;: This property sets the background color of the entire web page's body to a pale yellow color with the hexadecimal value "#ffd791."
font-size: 3rem;: This property sets the font size for text within the <body> to 3 rem units. "rem" is a relative unit of measurement based on the font size of the root element, which in this case is the <html> element. So, this text will be three times the size of the default font size set at the <html> level.
display: flex;: This property, set to "flex," makes the body element a flex container. Flexbox is a layout model that allows you to arrange and align child elements within a container with flexibility. It's often used for centering content both vertically and horizontally.
align-items: center;: This property aligns the content vertically to the center within the flex container. In this case, content inside the <body> will be vertically centered.
justify-content: center;: This property aligns the content horizontally to the center within the flex container. It ensures that content is centered both vertically and horizontally.
font-family: 'Poppins', sans-serif;: This property sets the font family for text within the <body>. It uses the "Poppins" font imported from Google Fonts (as mentioned in the @import rule) and falls back to a generic sans-serif font if the imported font is unavailable.
margin: 0;: This property removes any margin around the body element. This ensures that there is no spacing at the edges of the web page.
min-height: 100vh;: This property sets the minimum height of the body to 100 viewport height units (vh). This makes sure that the body is at least as tall as the viewport height, providing a full-page layout.

This will give our typing effect an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
    box-sizing: border-box;
}

body {
    background-color: #ffd791;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    min-height: 100vh;
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. Let's break down each part of the code:

1. const text = "Hello World!";: This line defines a constant variable named text and assigns it the value "Hello World!" This is the text that will be gradually typed out on the web page.

2. let index = 0;: This line declares a variable named index and initializes it with a value of 0. The index variable is used to keep track of which character in the text string is currently being displayed.

3. let speed = 150;: Another variable named speed is declared and set to 150. This variable represents the speed at which the characters will be typed on the web page. Specifically, it's the time interval (in milliseconds) between typing each character.

4. function writeText() { ... }: This is a JavaScript function named writeText. This function is responsible for updating the content of an HTML element with the id "typing" to create the typing effect.

document.getElementById("typing").innerHTML = text.slice(0, index);: This line updates the content of the HTML element with the id "typing" using the innerHTML property. It sets the inner HTML of the element to a substring of the text variable, starting from the beginning (index 0) and ending at the current index position. This effectively displays the characters from the beginning of the text up to the current character being typed.
index++;: After updating the displayed text, this line increments the index variable, indicating that the next character should be typed on the next function call.
if (index > text.length) { index = 0; }: This conditional statement checks if the index has exceeded the length of the text string. If it has (meaning all characters have been typed), it resets the index back to 0, allowing the typing effect to start from the beginning.

5. setInterval(writeText, speed);: This line sets up a repeating timer using the setInterval function. It calls the writeText function every speed milliseconds, which was set to 150 milliseconds earlier. This interval creates the effect of characters being typed one after the other on the web page.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

const text = "Hello World!";

let index = 0;
let speed = 150;

function writeText() {
  document.getElementById("typing").innerHTML = text.slice(0, index);
    index++;
    if (index > text.length) {
        index = 0;
    }
}
setInterval(writeText, speed);

Final Output:

Create Typing Effect HTML, CSS, JavaScript Tutorial.gif

Read Also Creating a Responsive News Card Slider with HTML, CSS, JavaScript, and Swiper.jpg

Creating a Responsive News Card Slider with HTML, CSS, JavaScript, and Swiper

Conclusion:

Now you know how to create a typing effect on your website using HTML, CSS, and JavaScript. Customize it to match your site's style and captivate your audience.

Incorporate this typing effect into your website to enhance user experience and make your content more engaging. Don't forget to experiment and explore additional web development tricks to level up your skills. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊