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

Apart from `green` or `black`, we sometimes want to use a wider palette of colors. How can we do that?

We can expand the range of colors that we can use to style HTML elements by using RGB, Hex, and HSL values.

`rgb` values refer to using red, green, and blue parameters to define a color. You can specify a color by indicating the intensity of each color attribute from a range of `0` to `255`. Click the sliders below to see the range of colors you can specify using RGB values:

div h3 {
	font-size: 3em;
  text-align: center;
}

#colorBox {
  height: 100px;
  width: 100%;
  background-color: rgb(0,0,0);
  border-radius: 10px;
} 

#sliderBox {
  margin: 10px 20px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  border: 1px solid black;
  border-radius: 20px;
  margin: 10px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}

#redSlider::-webkit-slider-thumb {
  background: rgb(255,0,0);
}

#redSlider::-moz-range-thumb {
  background: rgb(255,0,0);
}

#greenSlider::-webkit-slider-thumb {
  background: rgb(0,255,0);
}

#greenSlider::-moz-range-thumb {
  background: rgb(0,255,0);
}

#blueSlider::-webkit-slider-thumb {
  background: rgb(0,0,255);
}

#blueSlider::-moz-range-thumb {
  background: rgb(0,0,255);
}

$(document).ready(function () {
	
});

// get DOM nodes
let redSlider = document.getElementById('redSlider');
let greenSlider = document.getElementById('greenSlider');
let blueSlider = document.getElementById('blueSlider');
let redOutput = document.getElementById('r');
let greenOutput = document.getElementById('g');
let blueOutput = document.getElementById('b');
let colorBox = document.getElementById('colorBox');

let setColor = function(){
  colorBox.style.backgroundColor = "rgb(" + redSlider.value + "," + greenSlider.value + "," + blueSlider.value + ")";
}

// input event listeners
redSlider.oninput = function(){
  redOutput.innerHTML = this.value;
	setColor();
}

greenSlider.oninput = function(){
  greenOutput.innerHTML = this.value;
  setColor();
}

blueSlider.oninput = function(){
  blueOutput.innerHTML = this.value;
  setColor();
}

codemirror

As you can see, using `rgb` values gives access to a much wider selection of color values. Let's use an RGB color value to make a border: 

Learn about the vast variety of colors used to style HTML elements. 

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

Color

`rgb` and `rgba` values

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

Color

rgb and rgba values

`rgb` and `rgba` values