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

# The `Element.style` property
The easiest way to change CSS styles on an HTML element using Javascript is to access individual styles in the `Element.style` property. Since `Element.style` is *also* an object, there are many sub-properties that target specific CSS properties. For instance, we could add a border to an element using `Element.style.border`:

<html>
 <head>
   <title>Modifying CSS with Element.style</title>
 </head>
 <body>
   <h1>This element should have a border.</h1>
 </body>
</html>

var h1 = document.querySelector('h1');
h1.style.border = "3px dashed black";

codemirror

We could also change the text alignment with `Element.style.textAlign`: 

<html>
 <head>
   <title>Modifying CSS with Element.style</title>
 </head>
 <body>
   <h1>This element should be centered and have a border.</h1>
 </body>
</html>


var h1 = document.querySelector('h1');
h1.style.border = "3px dashed black";
h1.style.textAlign = "center";

There are many, many CSS properties that can be accessed within `Element.style`. A full list can be found on the [Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference). Browse through the list to get a sense of the different properties you can target using Javascript. 

## Exercise 
Use `Element.style` to change the width of the `h1` element to half that of its parent container. 

Getting an overview of properties that facilitate dynamic CSS changes in JavaScript, allowing precise control over individual style properties and enabling streamlined management of multiple CSS properties through class manipulation.

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

Modifying CSS

The `Element.style` property

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

Modifying CSS

The Element.style property

The `Element.style` property