Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make the HTML/CSS typing effect.
Nathanielx3rd

Wassup my fellow replers. How's it hanging. I have been asked at least 10 times about the typing effect on my website and today I will be showing you guy's how to make it yourself.

@CodingElf66 since you asked :D

Before starting you want to create a new repl with HTML/CSS/JS because it will give you a subdomain. Inside this repl there will be 3 files. index.html, style.css, script.js.

We will be focusing on HTML and CSS today and no javascript. The one on my website is mainly javascript oriented but it's a bit complicated to understand. This is incredibly simple and good luck.

HTML

Inside your index.html file right after the <body> tag type the following lines of code :

In this code there are 2 <div> elements. The first one is classed to main-container and we will set some overall css to it. We have to do this because we can't set them to the second <div>.

If you have done everything correct so far then your index.html file should look something like this, if not just copy paste from here :


Setting up the CSS

Now that we have completed the HTML part of this tutorial we can now move on to the CSS part. (Entire CSS can be seen at the bottom or in the repl below.)

We will first import our font and set some root css for the HTML, body, and main-container. I don't feel the need to explain each selector one by one so the code is here :

On the first line of code we imported a font called Anonymous Pro, you don't have to use this font, you can add your own font of choice. Simply go to https://fonts.google.com/ and find any font there and add it. If you need help adding your own font let me know in the comments and I will guide you step by step.

In the next 2 parts I have specified the width and height to 100%. The second part of code is the styling all the HTML that will affect every element on the page. The next part is the body, here we set the font-family aswell as the background-color.

The last part is the main-container we made earlier. To this we have once again added the width and height to 100% aswell as setting the text color to #fff which is hexadecimal for plain white. The next is positioning (see my article on the subject) we use flexbox in this tutorial and. The horizontal alignment set using justify-content and set to center, the vertical alignment is set using align-items and set to center.

Typing CSS

If you made it this far I salute you. Now that we have set the main CSS we need to put CSS for the typewriter effect. (Entire CSS can be seen at the bottom or in the repl below.)

Type this into your your style.css folder after what we just added :

To our typewriter-text we have position: relative; along with a width of 18 em. We have 2 animations here. One called typewriter which is the text being typed as a empty element just gets bigger and the blinkTextCursor which is just flashing.


This is the end of my typewriter text effect tutorial. I hope you learned something and if you need help with it just fork my repl or leave a comment with the link to ur repl.

Keep on coding 🙃

Voters
sn236
CodingElf66
ch1ck3n
Nathanielx3rd
Comments
hotnewtop
AngelaEvans

A good article, a good book can change the fate of many people. Thank you for your sharing, it has opened up many ideas in me, so that I can learn more about many valuable things. taming io