HTML, CSS, and JS – Ben's Tutorials

Validate your HTML and CSS with the W3C Validation Service

Just because your website displays the way that you intended does not mean that your code is valid. Browsers are great at making do with bad code and they won’t throw an error if your HTML or CSS is off. Clean code is easier for browsers to process and to read and modify for development purposes. There are a number of web page validation services, but this tutorial will cover how to use the W3C Validation Service.

Go to the the W3C Validation Service.
If the file that you would like to validate is already on the web, you can input the URL of the file in the “address” field. Otherwise, change the tab to “By file upload” or “By direct input” and either browse for the file locally for paste the contents of the file. Click the “Check” button.
W3C Validation Service choose validation method
The Validation Service will generate a list of errors, warnings, and validated CSS. Taking care of the errors is the most important step but you may also want to address the warnings.
W3C Validation Service error example

W3C Validation Service warning example

W3C Validation Service valid CSS example
In order to take care of the errors and warnings, use the line numbers to find the code in your file.

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>