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

Your browser renders every HTML element as a rectangular box according to the standard CSS box model. Each HTML element on your web page consists of a **content area**, **padding**, a **border**, and a **margin**.  

Learning how to manipulate the CSS properties within the box model will be helpful with laying out content on your web pages. 

# Relative vs. absolute measurements

We can manipulate the parameters for sizing the "box" that makes up an element with many different CSS properties. Often times, you will want to specify the length of the content area, padding, margins, etc. 

But how do we specify these lengths? The most common units used are percentages, `%`, and the number of pixels, `px`.  

Percentages are a **relative** measure of length. When specifying length using the `%` unit, the length is measured as *relative to the parent element's length*:


body * {
  border: 3px solid black;
  border-radius: 10px;
}

#halfWidthContainer {
  width: 50%
}

.half {
  width: 50%;
}

.quarter {
  width: 25%;
}

<html>
 <head>
   <title>Relative Length Measurements</title>
 </head>
 <body>
   <div>
     <h1 class="half">Half-width of parent element.</h1>
     <h1 class="quarter">Quarter-width of parent element.</h1>
   </div>
   <div id="halfWidthContainer">
     <h1 class="half">Half-width of parent element.</h1>
     <h1 class="quarter">Quarter-width of parent element.</h1>
   </div>
 </body>
</html>

codemirror

Since we used `%`, a relative unit of measurement, the length of the `h1` elements in the second `div` are half that of the `h1` elements in the first `div` even though these elements have the same CSS properties.  

Specifying the number of pixels, on the other hand, yields an absolute measure of length. **Absolute** measurements are fixed and do not rely on measurements from other HTML elements.  



Understand how every HTML element is just a box.

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

The Box Model

Relative vs. absolute measurements