Discover the essentials of HTML, CSS, and JavaScript to build interactive web applications through hands-on exercises, creating modules like an image carousel and a to-do list.

This course will teach you the fundamentals of creating web applications, from the basics of creating web pages with HTML, stylizing content with CSS, all the way to building interactivity into a page using JavaScript in the browser. 
Instead of watching tedious videos and wondering how to translate those videos into real code, you'll be practicing what you learn through interactive, test-based exercises within minutes. 

Along the way, you'll be able to produce functional modules, including an image carousel and a to-do list application. No prior knowledge is needed.

Learn HTML, CSS, and JavaScript from Scratch

There are many CSS properties we can use on text-based elements to give the text different stylizations. 

# Changing font styles
You can change the font of your text using the `font-family` property. 

.Arial {
  font-family: Arial;
}

.TimesNewRoman {
  font-family: "Times New Roman"; 
}

.Verdana {
  font-family: Verdana;
}

<html>
 <head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script>
 </head>
 <body>
 Default font.
 Arial
 Times New Roman
 Verdana
 </body>
</html>

$(document).ready(function () {
$('#content').html('Hello World!');
});

codemirror

If a font name contains spaces, then it *must* be wrapped in quotation marks (e.g. `"Times New Roman"`) in order to be rendered properly. 

## Web-safe fonts
When a browser loads a web page, it will apply the font specified in `font-family` *only if the font is loaded on the system*. What do we mean by this? Running the same web page on a Windows desktop, an Android mobile device, or a Mac OS X laptop may yield different results because each platform has a different set of fonts loaded by default. 

One way around this is to use **web-safe** fonts. Web-safe fonts are a set of fonts which are consistent across platforms, meaning you can expect to achieve the same result no matter what device your user is on. Common fonts that are safe across most platforms include:
- Arial 
- Times/Times New Roman
- Helvetica 
- Courier New/Courier 
- Verdana 
- Georgia 

# Font stacking
Say we want to use a font that isn't available on every system. The `font-family` property accepts multiple font names, separated by commas. 
```css
p {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}
```

This list of fonts is referred to as a **font stack**. CSS will apply fonts by priority in the font stack. If the first font is not available, it will drop down to the next font in the stack until it finds one it can apply. 

It is best practice to specify fonts from the one you most desire to a generic one supported by all systems. In the example above, the last font listed is referred to as a **generic-family font**. 

Learn to use typefaces in CSS and load new typefaces into the browser.

Semantic Web Page Layout with HTML

Stylizing HTML Content using CSS

Introduction to JavaScript, Basic Data Types and Operators

JavaScript Program Flow and Data Structures

Building Interactivity with DOM Manipulation

Create a To-do List Application using HTML, CSS, and JavaScript

Wrap Up

Font Styling and Web Fonts

Changing font styles

Web-safe fonts