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


We're now going to use several of the concepts we've learned in the lessons covering JavaScript and the DOM to create the image carousel below. 

.imageCarousel {
  height: 50%;
  width: 50%;
  margin: 20px auto;
}

.imageCarousel > img {
  width: 100%;
}

#prev-button, #next-button {
  display: inline-block;
  padding: 8px 12px;
  width: auto;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  outline: none;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;

  cursor: pointer;

  /* colors */
  color: white;
  background-color: rgba(0,0,0,0.8);

  /* border */
  border-radius: 50%;

  /* CSS Transitions */
  transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;

  transition: color 0.5s ease;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
}

#prev-button:hover, #next-button:hover {
  color: black;
  background: white;
}

/* Positioning */
#prev-button {
  position: absolute;
  top: 25%;
  margin-left: 5px;
}

#next-button {
  position: absolute;
  top: 25%;
  right: 25%;
  margin-right: 10px;
}

<head>
  <title>Image Carousel</title>
</head>
<body>
  <div class="imageCarousel">
    <button id="prev-button"><</button>
    <button id="next-button">></button>
  </div>
</body>

codemirror

# Setup
Let's start with the HTML. We will need three main elements: an `<img>` and two `<button>` elements to click to the next photo or the previous photo. We will place these three elements in a `<div>` that will serve as a container to style the carousel. 

<head>
  <title>Image Carousel</title>
</head>
<body>
  <div class="imageCarousel">
    <img src="/udata/DErqVR5q0Pv/longexposurewaterfall1.jpg">
    <button id="prev-button"><</button>
    <button id="next-button">></button>
  </div>
</body>

Let's also add some CSS to style and position the `<img>` and `<button>` elements: 

.imageCarousel {
  height: 50%;
  width: 50%;
  margin: 20px auto;
}

.imageCarousel > img {
  width: 100%;
  opacity: 1;

  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
}

#prev-button, #next-button {
  display: inline-block;
  padding: 8px 12px;
  width: auto;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  outline: none;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;

  cursor: pointer;

  /* colors */
  color: white;
  background-color: rgba(0,0,0,0.8);

  /* border */
  border-radius: 50%;

  /* CSS Transitions */
  transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;

  transition: color 0.5s ease;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
}

#prev-button:hover, #next-button:hover {
  color: black;
  background: white;
}

/* Positioning */
#prev-button {
  position: absolute;
  top: 25%;
  margin-left: 5px;
}

#next-button {
  position: absolute;
  top: 25%;
  right: 25%;
  margin-right: 10px;
}

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


As you may notice, the buttons don't currently do anything. In order to build a properly functioning image carousel, we must *tie* Javascript code to user input.  

For instance, when a user clicks the *next* or *previous* button, it should show the next or previous photo in a list of photos. In this example, we will store this list of photos as an array of image URLs:



Get an understanding of how you can use your knowledge towards functional applications. 

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

Building an Image Carousel

Setup