Learn the basics of HTML, styling with CSS, and JavaScript fundamentals with practical implementation.

Android Development with Ionic and React

In this module, we'll learn to code and create our own web pages using HTML, CSS, and JavaScript. Instead of watching tedious videos and wondering how to translate those videos into real code, we'll be practicing what we learn through interactive, test-based exercises within minutes. We'll go through a semantic web page layout with HTML, styling the HTML using CSS, and the fundamentals of JavaScript.

Along the way, we'll have the chance to produce functional modules, including an image carousel and a to-do list application.

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 + Operators

Javascript Program Flow + Data Structures

Building Interactivity with DOM Manipulation

Conclusion

Font Styling + Webfonts

Changing font styles

Web-safe fonts