HTML – Ben's Tutorials

Add typing animations to your website with TypeIt

TypeIt creates the illusion that text is typing itself out on your webpage. I used this jQuery plugin in my consulting website and I’ll likely use it again in the future. Here is a tutorial on how use TypeIt.

It is easy to implement TypeIt. All you need to do is reference jQuery and the TypeIt Javascript file in your HTML file like so:

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 

<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>

Once your webpage has those references all you need to do is assign the typeIt function to one of the elements on your page with the following code:

<p id="element">
Type this text!
</p>

<script>
$('#element').typeIt({
 // options
});
</script>

See this code live here: https://jsfiddle.net/xxek9k3p/

The code above demonstrates the most basic TypeIt animation possible. There are a number of ways you can customize TypeIt. Checkout the following documentation to change the speed of the animation, delete text, and more: TypeIt Docs.

Changing the mouse cursor with CSS

For some reason I always forgot the CSS code required to change the mouse cursor. You can switch cursors for any reason, but I like to change the cursor when a user hovers over a submit button. This affirms that clicking the button will trigger an action. Here is a quick tutorial on how to use CSS to change the cursor altogether or only for on-hover events.

Changing the cursor for the entire page
This is very simple to do. Put the following CSS in your style sheet:

html {
cursor: crosshair;
}

See this code running here: https://jsfiddle.net/45nvntgf/

There are a number of cursors that you can use. Checkout the following reference for a list: cursor

Changing the cursor for on hover events
HTML:

<input type="submit">

CSS:

input[type="submit"]:hover {
cursor: pointer;
}

Checkout the result here: https://jsfiddle.net/aub7s8ea/

Adding icons to your site with Font Awesome

Interested in using icons on your site but don’t want to host any images? Get away from image files by using Font Awesome‘s CSS icons. Here is a guide on how to download and use Font Awesome icons.

Go to Font Awesome and click the “Download” button in the middle of the screen.
Font Awesome Download button
A popup will appear asking if you would like use Font Awesome Pro (for a cost). I chose to stick with the basic version of Font Awesome, so I clicked the “No thanks, just download Font Awesome 4” button. This will download font-awesome-4.7.0.zip.
Download Font Awesome 4
Once font-awesome-4.7.0.zip has been downloaded, unzip its contents into the directory of your choice (locally or on your web server).
Font Awesome files
Now that you have the files in place, you just need to add a reference to Font Awesome in your HTML. Use the following code (assuming your HTML file is one directory above/ outside of the Font Awesome “css” folder:
```
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
```
Once you have created the link to font-awesome.min.css, adding icons is simple. Here is example code that would show a dollar bill icon:
```
<i class="fa fa-money" aria-hidden="true"></i>
```
You can see and search for all of the available icons here: The Icons.
There are numerous ways to enhance and customize the Font Awesome icons. Checkout the following documentation for that information: Examples.

How to add Google Fonts to your webpage

While you can set the text on your webpage to use any font you desire (using CSS’s font-family property), it won’t guarantee that your users will see your text the same way. This is because your visitors may not have the same font installed on their device. This is why Web Safe Font conventions exist and the reason that font-family uses a backup system.

Luckily, you can get around this issue by including CSS font references in your HTML. This approach makes it so when your visitors open your website, a font is loaded in the background. Then your visitors will be able to render the font whether or not they have it installed.

Google Fonts is one service that hosts CSS font files. Here is a quick tutorial on how to use Google Fonts.

Go to Google Fonts and find a font that you like. You can do this by scrolling through the available fonts, looking at the FEATURED fonts, or searching. If you have already have a font in mind you may want to try What’s the Closest Google Font which has a list of popular fonts and their Google Font doppelgangers.
Once you have found the font of your dreams, click on the red plus icon to the upper right of said font.
Selecting a GoogleFont
A small dialog will appear at the bottom of the screen, containing your selection. Click on this dialog so that it expands.
Google Font selected
Once the dialog has been expanded you will see the code that needs to be added to your site in order for the font to display.
Google Font selection expanded

Here is an example of how you would use this code in your HTML file:

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
p {font-family: 'Roboto', sans-serif;}
</style>
</head>

<body>
<p>I'm using Roboto, a Google Font</p>
</body>