Build an Online Paint Website

Learn HTML basics online via Jaspin, accessible on Mac, PC, or mobile; this one-hour Udemy course builds the building blocks of the web with simple, short tutorials.

Use Jaspin for real-time, cross-device editing to preview your site instantly. Learn HTML as the foundation, CSS for styling, and JavaScript for functionality, bringing a building to life.

Learn how to set up a basic HTML document from doctype to body tag, including opening and closing tags, and understand how the browser reads code line by line.

Learn to structure HTML with header tags from h1 to h6 and paragraph tags, close tags properly, and optimize search engine visibility by using h1 for the title.

Learn how to apply inline styles to change text color, background color, and font family using style attributes, combine multiple styles with semicolons, and explore negative space design.

Add bold, underline, and italic HTML tags to paragraphs, and learn to close tags properly to keep styling clear and avoid confusion in code.

Learn how to add a hyperlink in HTML using the a tag and href attribute to link to a website, then preview its loading and display on a mobile-friendly page.

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.

Copy the image address from the source. Use the img tag (self-closing) to display it and adjust width and height in pixels.

Create and style lists in HTML, converting between unordered, ordered, and definition lists, and manage list items, bullets, indentation, and time-saving hotkeys.

Learn how to build and manipulate tables, including table borders, rows, data cells, and headers, manage additions and deletions, and see how responsive design reduces reliance on tables.

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

Add a submit button to your form by changing the date input to type submit, assign an id, and use JavaScript to handle the submission with name inputs.

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 efficient, live coding with Mammoth Interactive through a compact one-hour course that uses Jaspin to edit HTML, CSS, and JavaScript in real time.

Learn the basics of HTML structure and CSS styling in a crash course, covering tags, opening and closing syntax, inline styles, fonts, colors, and linking to a separate CSS file.

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.

Master CSS classes to style multiple tags and reuse formatting across paragraphs, while contrasting classes with IDs to apply consistent changes like font size, color, or italics.

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.

Learn to apply color in CSS using RGB values and hex codes, explore off-black and off-white contrasts, and understand RGB ranges 0–255, gray scales, RGBA transparency, and hue-saturation-brightness alpha concepts.

Explore css padding by setting top, right, bottom, and left values in pixels to control spacing around elements and align block titles.

Explore text alignment options such as left, center, right, and justify, and learn text transforms like uppercase, lowercase, and capitalize to enhance page aesthetics.

Learn to build responsive layouts by styling margins, widths, and padding for all devices, using auto margins, 90 percent width, 20px padding, centered text, and both relative and absolute positioning.

Center the page by setting body width to 70 percent with auto margins, then adjust header and paragraph colors and backgrounds to explore negative space and basic theming.

Explore how a Latin text generator serves as a template to populate a simple website with a title and body paragraphs while adjusting padding for layout.

Add a horizontal menu to the online paint website using an unordered list with an active link. Style with CSS margins, padding, overflow hidden, and hover colors.

Learn how to add a background image to a web page using public domain images, set no-repeat and fixed attachment, adjust the background position, and explain div tags as containers.

Experiment with css margins and padding, using auto margins and 30px padding, test large or negative values, and observe how spacing, background images, and orange against blue contrast affect layout.

Master core javascript concepts—variables, data types, operators, conditionals, functions, arrays, objects, and loops—and build a practical to-do list project to test your skills.

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 how JavaScript runs in browsers, set up a live server and HTML, and use let and const to create and control variables, with console logs for testing.

Explore how JavaScript uses dynamic typing to store data types like string, number, and boolean in variables, and how arrays and mixed-type clusters hold multiple values without explicit type definitions.

Explore variable mutation in JavaScript: update values of strings, numbers, booleans, and arrays, see how array mutations propagate via references and how push changes length.

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.

Complete the coding challenge by creating an array of integers, declaring strings as constants, adding them to the array, and console logging a prefixed message with the results.

Create an array of numbers, push constants and strings into it, and console log the results with a preceding message to test in the browser.

Explore variables, data types, variable mutation, type conversions, and arrays in JavaScript, with detailed explanations. Preview operators in the next section.

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.

Master JavaScript operators across assignment, arithmetic, string, comparison, logical, modulus, and exponentiation, plus increment and decrement, and the typeof operator for building an online paint website.

Explore how JavaScript operator precedence controls evaluation order, from brackets and dot access to arithmetic and function calls, with examples showing when operations group or precede each other.

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.

This coding challenge solution guides you through building a JavaScript expression with x1, x2, and x3, fixing operator precedence, using exponentiation, arrays, and console logging.

Master basic JavaScript operators and operator precedence through hands-on examples and a coding challenge, reinforcing core programming fundamentals essential for building an online paint website.

Explore conditional statements in JavaScript, including boolean logic, ternary operators, switch statements, truthy and falsey values, and the quality operators.

Master conditional statements and if-else chains using boolean values, comparisons, and logical operators to control code flow in building an online paint website.

Explore boolean logic in JavaScript by evaluating true and false with equals and not equals, mastering and, or, and not operators, and using parentheses to build complex conditions.

Explore switch statements as a simple alternative to if-else logic, using case and default blocks, break controls, and improved readability for scenarios like menus in backend code.

Explore truthy and falsey values in JavaScript, including non-empty strings as truthy, and empty strings, zero, minus zero, and null or undefined as falsey, to understand conditional behavior.

Explore the equality operator in JavaScript, including single equal (assignment), double equal, and triple equal, with examples showing array reference behavior and how types affect comparisons.

Tackle a coding challenge that uses ternary operators, switch statements, and boolean logic in JavaScript to reinforce conditional statements and equality operator concepts.

Solve a coding challenge that consolidates conditional statements, a nested switch, and a ternary operator to build multi-part logic, while breaking code into clear components with console logs.

Explore conditional statements, boolean logic, ternary operators, and truthy and falsy values in JavaScript, and review equality operators to prepare for moving toward functions in the next section.

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

Define and call functions in JavaScript, return values, and pass arguments for reusable, modular code. Delve into function statements and arrow functions.

Explore functional statements and expressions in JavaScript, comparing function declarations with function expressions, and learn how execution order and arrow functions affect when a function runs, using console.log as example.

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 a function that returns the first three characters of any string in JavaScript, using substring from index 0 to 3, test it in the terminal, and learn function usage.

Explore core JavaScript concepts, including function declarations and expressions, their differences and limitations, and how arrays and data types offer built-in functionalities, and prepare for objects next.

Explore objects, their properties and methods in JavaScript, and strengthen your programming skills with a practical coding challenge designed to test your understanding.

Explore how JavaScript objects organize data into properties like first name and age. Create objects with object literals, the new keyword, or object constructors; add, delete, and modify properties.

Explore objects and methods in JavaScript, including this for referencing object properties, a car example, and using the object constructor with new to create distinct objects.

Compare primitives and objects in JavaScript by immutability and reference, noting primitives are by value while objects are by reference, with strings, booleans, and arrays as examples.

Tackle a coding challenge by building a tree object with an array of branches and a grow function that adds a new branch, using constructor method from the last video.

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.

Explore objects, properties, and methods, learn to manipulate and box up functionality with reusable objects, complete simple coding challenges, and preview loops in the next section.

Explore loops and iterations to unlock powerful coding patterns in building an online paint website. See why loops matter in programming and how they enable more creative functionality.

Explore the three loop types: while, do while, and for loops, showing syntax, infinite loop risks, and how to convert between them, including nested loops, with practical examples.

Explore iterators for efficiently iterating objects and arrays, compare for loops and looping patterns, and use array functions like reverse and find to keep code concise and readable.

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.

solve a coding challenge with nested loops and conditionals in JavaScript, printing a five-line star pattern and its inverted version, with step-by-step debugging.

Explore loop types and iterations, including while and do while loops, and apply iterative methods using arrays. Complete a coding challenge to reinforce the basic building blocks of JavaScript.