Build an Online Paint Website

Learn how to insert an image into a page using the img tag (self-closing), copy the image address, and set width and height to control display.

Explore HTML5 input types, including text, password, color, email, checkbox, radio, and date, and learn to name inputs with strings, reference them later.

Explore how html, javascript, and css evolved from inline script and style tags to separate files, and why web development uses distinct script and style files for functionality and presentation.

Learn how to add and style css for headers and paragraphs, using curly braces, color, background color, font family, font size, and semicolons, with practical debugging tips.

Learn how to assign ids to paragraphs, reference them with #id in css, and override base styles with id-specific rules; understand case sensitivity and the one-id-per-tag best practice.

Explore font families, including serif, sans serif, cursives, and monospaced, and learn how letter widths and readability influence web design with examples like Arial, Verdana, Georgia, and Impact.

Explore variables and data types in JavaScript, covering basic language components, variable mutation, and type coersion, and learn how to define them for building an online paint website.

Explore type coercion in JavaScript, where numbers, booleans, and strings interconvert. Observe how true maps to one, false to zero, and how arrays may become strings.

Explore basic JavaScript operators and operator precedence, then test your understanding with a coding challenge. Prepare for deeper practice as the next video covers the fundamentals of JavaScript operators.

Practice a JavaScript coding challenge reinforcing variables, operators, and boolean logic by comparing x1 and x2. Create variables with values 1, 2, and 3, and push them into an array.

Explore how functions, functional statements, and expressions differ, and learn how to use them within structuring to build your online paint website.

Discover how to work with JavaScript arrays using destructuring and the spread syntax, and leverage built-in array methods like push, sort, reverse, and slice to manipulate data efficiently.

Create an object tree with the branches array and a growth function that pushes new branches. Use a constructor to instantiate trees and verify growth in the console.

Join this coding challenge to test your understanding of loops and iterators in Lupe's, using if statements to build and print a single combined string rather than multiple console logs.