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

# Context

How can we customize the look and feel of our content? One way is to use the `style` attribute on an HTML element: 

<html>
 <head>
 <title>Using the "style" HTML attribute</title>
 </head>
 <body>
 This text will be colored blue.
 This text will also be colored blue.
 </body>
</html>

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

codemirror

The above approach would work just fine if working with a small number of elements. But once you're dealing with large pages with lots of moving pieces, it will quickly become extremely tedious to apply a separate `style` attribute to each element. In software development, we are often interested in reducing repetition. We can achieve this through the use of **Cascading Style Sheets (CSS)**. CSS specifically deals with the layout and customization of HTML elements. 



# Creating a CSS rule

Let's take a quick look at how we would take the previous example and apply the same style to the `p` elements using CSS: 

<html>
 <head>
 <title>Using CSS to apply styles</title>
 <style>
 p {
 color: blue;
 }
 </style>
 </head>
 <body>
 This element will be colored blue.
 This element will also be colored blue.
 </body>
</html>

Let's deconstruct the above example. CSS files comprise a set of rules, each of which consists of a **selector** (to indicate which elements you are trying to modify), followed by a **declaration block** that contains a set of *properties* and those properties' *values*. 





Notice the use of the `style` HTML element nested in the `head`. `style` can be used to place CSS rules inline with an HTML document, like in the example above. Although this is a perfectly valid way of adding CSS to your web pages, it would be better to separate concerns by putting content structure and content stylization in separate files. 

Loading a separate CSS file into an HTML page can be accomplished by placing a `link` element within the `head`, like so:
```css
<link href="styles.css" rel="stylesheet" type="text/css">
```

## Exercise
Use the `style` element to create a CSS rule that makes an `h1` element's text green. Then add an `h1` element to your HTML page.

<html>
 <head>
 <title>Exercise: Using CSS to Apply Styles</title>
 
 </head>
 <body>
 
 </body>
</html>

Get an overview of CSS and how to use it to make your pages look aesthetically better. 

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

What is CSS?

Context

Creating a CSS rule

Exercise