Learn to code 20 HTML 5 web apps from scratch and make money

Sign up at Jasmine.com and save your work as you code; use Chrome for HTML5 support, then type along with the tutorial to practice and learn by doing.

Explore jsbin and its real-time rendering, and learn how short, trackable lessons let you test code quickly and resume anytime while building HTML5 apps.

Set up an html document from scratch by adding doctype, html, and body tags, and learn how nested tags work, closing tags, and why whitespace is irrelevant.

Learn to structure HTML with proper opening and closing tags, using paragraph and header tags (h1–h6), understanding nesting, case sensitivity, and how whitespace doesn't affect layout.

Apply inline styles in html using the style attribute to color text with color names like orange, set font-family, and change background colors on specific elements like paragraphs and headers.

Explore how to apply bold, italics, underline, and font size using HTML tags, including nesting tags and the importance of closing tags for clean formatting.

Explore basic HTML text formatting by using em, strong, sub, sup, and strikethrough tags, with proper closing tags, and practice creating paired tags to reinforce hands-on coding.

Learn to create a hyperlink in HTML using the anchor tag with an href attribute, label the link text, and test navigation to verify it points to the target page.

Copy an image from a site and insert it with img src, then adjust width and height to scale proportionally and avoid distortion.

Wrap the image tag with an a href to make the image a clickable link, and note that the image tag has no end tag.

Master HTML lists by building unordered, ordered, and definition lists with list items and nesting. Learn practical tagging with ul, ol, and dl to create versatile web content.

Learn how to build an HTML table, including setting a border, adding rows and cells with table row and table data tags, and using a table header for column titles.

Master inline styles to control color, font family, font size, and background in HTML tables and text, explore color wheel contrasts, and learn how specific styles override defaults through inheritance.

Create HTML forms from scratch by building a form with paragraphs and text inputs, naming fields for quest, color, and bird speed, and assign IDs for JavaScript.

Explore how to use input types like password, radio, and checkboxes within HTML forms, including form structure, naming, and the difference between radio buttons and checkboxes.

Add a submit button to a text input, set the button type to submit, and assign a value such as 'enter' or 'submit your email' for on-page forms.

Explore JavaScript basics within HTML, focusing on the script tag and simple examples like alert. Learn to place JavaScript in separate files for cleaner web pages.

Practice applying HTML styling, style tags, and tables learned in this course. Explore CSS in one hour with CSSA and discover affordable Mammoth Interactive courses to build apps and games.

Learn the basics of cascading style sheets (css) to design websites from scratch. Explore 3D design and 3D effects with css in a beginner-friendly web development series.

Learn to use JS Bin to render code as you type, see results on the fly, and prototype JavaScript projects, with Chrome recommended for compatibility.

Explore how HTML structures pages and how external CSS files separate styling from markup. Learn inline styling basics and key CSS properties like color, background-color, font-family, and font-size.

Style html elements with css by targeting h1 and p tags, setting color, background, font family and size, and organizing rules in a separate css file using curly braces.

Use style tags to embed CSS in an HTML document for quick, on-the-fly styling, with inline CSS acting as a temporary file.

Assign ids to HTML elements using the # id selector to customize specific headings and paragraphs, overriding global styles with a targeted font family and size.

Explore font families in CSS by applying serif, sans-serif, and monospace to headers and text. Learn how font choices impact style and readability in web design.

Explore font properties in HTML: set font style to normal or italic, and adjust font weight from normal to bold or values like 200, noting headers are bold by default.

Learn to color text using hex codes and rgb values, with tips to use off white and off black for subtle contrast and to avoid stock colors.

Learn to style hyperlinks with css, including hover, active, and visited states, by changing color, font family, and font size to demonstrate interactive link behavior.

build and style an HTML table with borders, rows, headers, and data cells, then use CSS to customize background and text colors such as orange, blue, red, and black.

Learn to add and customize HTML table borders using the border attribute, adjusting width, solid or dashed style, and color, then target specific cells with IDs and CSS borders.

Learn to create and style HTML lists, using unordered and ordered lists, list-style-type options like circle, square, decimal, Roman numerals, and nested lists with CSS.

Explore how to use id and class attributes in HTML and CSS, apply unique selectors with # and ., and control styling across single or multiple elements.

Explore other uses for css by customizing the body tag, adjusting font family, font size, and color for html5 web apps.

Discover the basics of JavaScript and programming in one hour, learn easy-to-grasp concepts transferable to other languages, and build a highly marketable, in-demand skill.

Learn JavaScript basics in a beginner-friendly one-hour series, using Google Chrome and JS Bin to build HTML5 web apps and view code output in the browser console.

Explore the basics of HTML, CSS, and JavaScript, including real-time output, styling with CSS, and simple JavaScript alerts and code structure using semicolons, curly braces, and comments.

Add a button in HTML and link it to a JavaScript function with onclick, enabling real-time function calls and basic actions like alerts.

Master scaling functions by duplicating button handlers that call function one, function two, and function three, and extend to 100 buttons while respecting popup safety features.

Learn to manipulate the web page with JavaScript by changing paragraph text using document.getElementById, innerHTML, and clear function naming, showing practical DOM updates.

Explore how variables act as boxes of information in JavaScript, revealing booleans, integers, and strings, and demonstrate declaring, initializing, and using them in interactive examples.

Explore using variables in JavaScript to store numbers and strings, perform addition, and see how spaces and quotes affect display and concatenation. Note how semicolons and type separation are handled.

Capture user input in HTML 5 web apps using a text input with an id and update the text via a JavaScript function using document.getElementById and a change text variable.

Learn how variable scope controls visibility between global and local variables in JavaScript. See why variables inside functions or for loops stay private, while global variables are accessible across functions.

Save your project often by logging into your account, saving as templates, and opening the saved file as you transition to a new project in the next tutorial.

Learn to call functions within functions to modularize code, then apply a game loop update method that updates score, lives, and player logic.

Learn how if statements evaluate conditions, compare values with equals, and organize code blocks using curly brackets in HTML/JavaScript, with examples like cool number and indentation.

Learn how else statements extend if statements with curly braces and execute when conditions differ, while understanding variable scope inside if and else blocks.

Explore JavaScript variable scope, showing how a change text variable outside curly braces triggers scope errors and why writing error-free code matters for cross-browser reliability.

Learn to use else if statements in JavaScript, structuring if-else if-else blocks and ordering conditions for clarity, with examples like check for 1 or 2 and show alerts.

Learn how to change style tags with javascript by selecting elements via document.getElementById and updating element.style properties, such as color, for dynamic styling.

Encourage hands-on coding with JavaScript to improve quickly through constant practice. Learn about additional courses and exclusive deals that help beginners publish apps to the app store and achieve success.

Master Jay Querrey, a subset of JavaScript, in one hour to simplify web development tasks. I show you all the cool stuff in one hour.

Ensure internet access and use Chrome for this course. Sign up for a free online tool to render your code as you type and load the jQuery library.

Learn how the jQuery library extends JavaScript, why we reference rather than install, and how to include only the needed libraries with a script tag.

Discover how to add a jQuery environment alongside JavaScript, using the dollar sign and function braces with a semicolon, and note that one method is more secure.

Add a button in HTML and use JavaScript with a dollar-sign selector to trigger a function that fades out header one and header two, demonstrating basic interactivity.

Explore the jquery syntax by setting up the environment, using document ready, and wiring button clicks to functions. Learn to use semicolons, comments, curly brackets, and simple fade in/out effects.

Learn how HTML objects respond to events by wiring a button to actions, using click, double-click, mouse enter, and mouse leave, with plain-English explanations and comments.

Learn how to add a second button and differentiate its behavior using element ids, assign button one and button two, and toggle fade in and fade out with click events.

Master the distinction between id and class in HTML, using an id for a single element like button 1 and a class for many elements such as multiple buttons. Learn to apply CSS selectors with a period for classes, ensure proper syntax, and recap why IDs are unique while classes can be shared.

Apply CSS classes across multiple tags to reduce code, implement fade out and fade in effects, and label prototype buttons for easier testing in HTML5 apps.

Explore how brackets in properties control fade out and fade in timing, using milliseconds to set durations. Adjust headers and buttons to observe fade effects and timing in scripts.

Learn to implement a toggle button in HTML5 by referencing an id (not a class), wiring a JavaScript function, and applying fade in/out effects to show or hide content.

Explore toggle parameters in JavaScript, observe how true, false, slow, fast behave, and understand why JavaScript and jQuery are forgiving for beginners compared with other languages.

Learn how to select elements in JavaScript, using the star selector to affect all tags, and implement simple fade-out effects while understanding pitfalls of broad selections.

Learn to implement hide and show functionality in HTML5 apps using JavaScript, with buttons to toggle visibility and best practices for readable, well-indented code.

Place JavaScript inside script tags to run inline code and verify outputs, and note that you can paste the script directly, though using an external file is best practice.

Learn to create an orange 75px square div with inline styles, position it absolutely, and animate its left movement across the page.

Change the right property to slide, duplicate and adjust code, and use absolute positioning to move an element back 100 pixels in a web app.

Adjust html 5 web apps by adding a comma and two quotes after a curly brace, then type slow or fast to control slide back.

Learn how to grow a div by a button, expanding height and width to 200 pixels using curly brackets for multiple animation commands.

Add a new button to shrink and grow a div, adjust parameters, and use a backslider to slide it back for a dynamic HTML 5 demo.

Implement incremental grow for html 5 web apps by applying 20-pixel steps with plus equals and minus equals, enlarging or shrinking an element until it disappears at zero.

Use id attributes to target divs, animate height, apply fadeout, and drive jQuery animations with buttons to toggle orange and blue blocks.

Practice daily to become a better web developer and programmer, since hands-on coding accelerates learning. It also promotes a more in-depth Jay Querrey course with discounted access through Mammoth Interactive.

Explore script tags and JavaScript files in HTML, placing scripts at the end of the body, and use inline or external files for tasks like customer information and payments.

Add a button in HTML and wire it to a JavaScript function using on click. Call the function to display an alert, demonstrating front-end and back-end interaction.

Explore how javascript functions organize code by defining multiple callable blocks, printing results with alerts, and calling one function from another, while noting case sensitivity and browser behavior.

Change html tags by id using javascript, updating header and paragraph text with innerHTML. Learn to implement a reset function that restores the app to its initial state.

Learn how to declare and initialize variables in JavaScript, including number, string, and boolean types. Explore integers versus decimals, and why semicolons and clear variable naming improve readability.

Learn to use variables to perform math and increment scores, manage resets, and apply dynamic values like player name and power ups, while understanding how code runs line by line.

Print variables to the screen using JavaScript by concatenating strings with the plus operator, including variables like player name and score. Learn how spaces and case sensitivity affect the output.

Master how to pass variables through functions in JavaScript, call functions with arguments, and understand variable scope for interactive web apps.

Learn how variable scope controls visibility across a program, distinguishing global variables accessible app-wide from local variables inside functions, and how to pass and reuse variables between functions.

Organize and declare multiple variables efficiently, using numeric and string examples, single-line or multi-line declarations, and zero-based counting to scale from small scripts to real-world projects.

Create arrays to store multiple data types, use var to declare number arrays and string arrays, access items by zero-based indices, print arrays, and handle undefined when indexing beyond range.

Learn how arrays and their length property work in JavaScript, explore pushing elements, converting to strings, and counting items across string and number arrays with practical trial and error.

Use the reverse method to reverse arrays and strings, noting it's a native code function; reversing twice briefly flips order, while most languages require uniform array types, unlike JavaScript.

Combine and join arrays by concatenating number and string arrays, then print the results. See how combined vs joined yields different outputs.

Sort arrays in JavaScript by numbers or strings using sort, demonstrate ascending and descending order with a custom comparator, and explore string array sorting and reverse to achieve descending order.

Master array manipulation by using push to add items at the end and splice to insert at a start index and remove a specified count, including adding multiple items.

Explore the toString() method in JavaScript, converting numbers to strings and understanding string versus number behavior with concatenation and math restrictions.

Explore lastIndexOf to find the last occurrence in arrays or strings, returning -1 when not found, and learn how shift adds elements to the beginning.

Learn to capture user text input with a text input and a button, then use a function to read the value via document.getElementById and update the h1 element’s innerHTML.

Discover how to organize variables in JavaScript using an onload function to initialize and sync text inputs, declare variables inside the function, and reuse the setup across multiple buttons.

Learn to handle numeric input in HTML5 by taking numbers through a text box, enabling practical web app functionality across twenty HTML5 projects.

Learn to enforce numeric input in a text field by converting strings to numbers, using parse to integer, and validating with a key-press check and an int check function.

Explore how if statements use a condition to trigger actions, with examples of single, double, and multiple conditions using and/or logic.

Master if, else, and else if statements by evaluating conditions and handling multiple branches. Learn to simplify verbose code and apply these constructs across practical input checks and comparisons.

Discover objects in code, contrast them with arrays, declare objects with curly braces, name properties like item A and item B, and update the page using document.getElementById.

Learn to define objects with curly braces, use properties like name, top speed, range, and weight, and print object data to the screen using string concatenation and variables.

Explore how to define functions inside objects, handle scope and return values, and call object properties such as name and speed on an electric skateboard example.

Learn how to generate random numbers in JavaScript with Math.random, adapt the range using Math.floor or Math.ceil, and use variables for reusable, flexible ranges.

Explore math module capabilities by computing min and max, applying negative values, and rounding with ceiling and floor. Use exponents, signs, and pi for practical numerical expressions.

Explore HTML5 date handling by creating a date, showing the current date and time, and extracting day, hours, minutes, and month, plus zero-based counting and epoch milliseconds.

Explore adding days, hours, and seconds to dates and setting the full year to 2030, demonstrating how dates update in your app.

Set up a for loop by initializing i to zero, testing i < 5, and incrementing with i++, plus equals to update variable and print 0 1 2 3 4.

Use break to exit a for loop when a condition is met, then use array.length to safely iterate a dynamic array without undefined elements.

Explore while loops in JavaScript, learn how to control flow with conditions, break out of loops, and use increment and decrement operators while avoiding infinite loops.

Master boolean variables in JavaScript, using true and false, understand triple equals (===) and null handling, and apply booleans to simple logic like purchases and lives.

Discover how to read screen width, screen height, available width, and available height in JavaScript, and check screen pixel depth, to adapt games and websites to hd and 4k displays.

Learn how to read the browser window’s width and height using inner width and inner height, resize the window, and apply these values to adjust elements in a web app.

Learn how JavaScript prototypes help you create reusable player objects with properties like name, age, gender, strength, and dexterity, instantiate multiple players, and access their values efficiently.

Learn to style a button with JavaScript and CSS to improve its appearance. Set background color, border, border radius, font size, padding, full width, and a hover color change.

Learn to style a button with CSS, including background color, border, padding, font size, line height, border radius, color, and 100 percent width, plus a hover state.

Improve the text box by applying flat design with simple CSS: set background color, border to none, font size 17px, width 100%, padding, border radius 60px, and focus styles.

learn to build a simple tip calculator with html, css, and javascript that runs on mobile and desktop, using beginner-friendly styling to look great.

Create a tip calculator UI in HTML by adding div containers and labeled inputs for income, meal cost, and tip percentage, plus calculate and clear buttons.

Change the font to a more stylish look by applying CSS font-family and font-size adjustments, trying fonts like Futura and Courier to enhance button styling.

Set background colors and style a div in HTML5 web apps, using a color picker to create an off-black and gray monochrome palette for a cleaner design.

Learn to style a div with CSS by setting max-width to 500px and min-width to 400px, applying box-sizing, padding, border-radius, and centering via transforms for a responsive tip calculator UI.

Modify header styling for a tip calculator by styling h1 and h2 with white color, large font sizes, centered text, and selective uppercase text to improve visual appeal.

Style text boxes by applying a white background, no borders, and a 20px font size, with 100 percent width, 10px padding, 60px border radius, and orange text.

Style the buttons with orange hues, using ids to set font size 60px, padding 30x15, border radius 60px, and differentiate calculate and clear with lighter and darker orange.

Set up a label with css by applying background color and font size, then adjust box-sizing border-box, padding, display block, and relative positioning; also margin top negative and z-index.

Learn to style interactive inputs with focus and valid states in css, animating labels with transform and translating positions, and create color and layout changes for a meal-cost tip calculator.

Learn to add hover button logic to HTML 5 web apps by applying hover states that change text or background color, with white, gray, or yellow options.

Implement a button focus state by changing the text to orange and optionally adding a 1px orange border, then adjust padding and enlarge the input button for better layout.

Set up JavaScript click handlers and define calculation functions, using proper brackets, and implement a function named VTAM clear for resetting results.

Add and reference ids for the input fields, read their values with document.getElementById, and parse them as floats. Calculate meal cost plus tip, then update the tip total display.

Implement tip logic by computing total tip from meal cost and a tip percentage, converting percent to decimal (0.01) and keeping code concise with a single-line calculation.

Format numbers to two decimal places by using fixed and floats to produce a rounded result. This tutorial explains why rounding after calculations keeps backend precision consistent.

Add a clear button that resets the input fields by setting their values to empty strings using document.getElementById in JavaScript, enabling repeated clears and quick calculations.

Explore a minimal, user-friendly tip calculator that emphasizes readability and quick use. Learn design choices like off-black, gray panels, bold font, and orange/yellow highlights, with a yellow calculate button.

Start by building a simple sports scoreboard web app that works across devices, using a standard process and adding JavaScript at the end to tally scores for many sports.

Learn to build a sports counter UI by structuring HTML with divs, using IDs and classes for buttons, and styling with CSS to align two teams and a reset.

Set a global font family, such as Futura, and apply an off-black background; then build a centered, responsive box with max and min widths, padding, border radius, and cross-browser transforms.

Apply button class logic to create two halves of the side: left button class 1, 200px wide, red, fixed, left; right button class 2, 200px wide, blue, float right.

Learn how to design and style HTML buttons, including 90% width, centered alignment, large font, padding, and border radius, plus separate styles for team one, team two, and reset.

Learn to customize a reset button in HTML/CSS by adjusting border-radius, font-size, padding, and margins to position it correctly.

Learn to format fonts in HTML 5 projects by centering headers, applying text transform to uppercase, and tuning font sizes for responsive headings.

Learn to customize a web app's colors by selecting color codes, applying background colors, adjusting white and off-white text, and changing button and header colors to improve user experience.

Implement button focus by changing background to navy blue and text color to white, then copy and adapt code for a reset button to ensure consistent behavior.

Set up the interactive buttons by wiring on click events to between Team 1 and between Team Two, and reset. Paste the JavaScript functions to implement these actions in tutorial.

Add button functionality to an HTML5 web app that tracks two team scores, updates on clicks, and displays results using document.getElementById and innerHTML.

Reset the app by zeroing team scores and updating the dom elements by id. Explore focus versus active states and click-to-reset on the div for a simple sports counter.

Create a mobile-friendly sports counter app that counts up scores, offers reset, and branding options (blue and white) with logo, ads, and a simple nonstandard counting system.

Learn how to use if statements, including the else and the l statement, through practical exploration to master conditional logic for web apps.

Learn to write a basic if statement by pairing a condition with an action, using variables, the double equals, and simple expressions. See examples like raincoat for rain.

Explore document.write usage to output text and variables, perform simple math, and learn how if statements drive logic in a basic, non-visual, logic-based approach to html5 app development.

Master if and else if statements by coding conditional logic, handling equal and not equal conditions, using brackets, and printing results with document statements.

Learn how JavaScript uses equal operators: assign with a single equals sign, compare with double equals, and use triple equals for strict type equality, examples like a, b, and John.

Master conditionals and operators by learning does not equal, the double equals sign, and using if statements to guide simple HTML5 app logic.

Learn how greater than and less than or equal to conditions work in if and else if blocks, avoid overlaps, and how statement order determines the executed branch.

Explore greater than, less than, and greater than or equal to operators to shape conditional logic, and learn to avoid overlapping ranges that cause confusion in your code.

Learn to compare strings in JavaScript using the double equal operator, with conditionals that trigger else blocks when strings differ.

Explore using different variables in if statements, comparing a string and a number, and how else-if chains evaluate conditions in order, demonstrating flexible condition checks.

Learn how to build multi-condition if statements using the and operator (&&), ensuring all conditions are true, with examples like A = 1 and B = 5 and optional parentheses.

Apply the logical or operator to combine conditions, making an if statement true when either A equals two or B equals five, and explore combining with other operators.

Explore how to compose complex if statements using or and, use brackets for readability, and master else if patterns for real-world checks like hardware, video game disconnects, and voice recording.

Master the not operator in programming by negating conditions with exclamation marks, using not equal logic in if statements, and applying it to scenarios like microphone selection.

Learn how to create nested if statements in JavaScript, including multiple levels, conditions, and curly bracket structure, with debugging tips using alerts.

Explore how nested else statements attach to the correct if blocks, using else if and else with curly braces, and see examples with A, B, and C values.

Demonstrate how nested else if and else blocks govern program flow by adjusting a, b, and c, and emphasize reading every line to avoid errors when copying code.

Conclude the if tutorial series by highlighting the frequent use of if statements in programming and apps, and invite learners to explore more courses at Mammoth interactive dot com.

Discover how to use for loops to repeat actions, from counting 1 to 10 to checking game collisions, with Mammoth live code and themes like metal.

Master setting up a JavaScript for loop by typing syntax and experimenting, initializing i to zero, using i < 3 with i++, and writing output with document.write inside curly braces.

Explore how a for loop initializes a variable, tests a condition, and increments, producing outputs 0, 1, and 2 before exiting.

Explore how a for loop initializes i at zero, iterates through each cycle, and prints values, including how changing the loop count affects output.

Master zero-based counting and its impact on loops and arrays, learn why starting at zero simplifies programming concepts like binary.

Explore how a for loop executes, with code before and after the loop, initialize i to 0, iterate while i < 3, and increment to reveal three iterations.

Learn how to use variables to replace hard-coded numbers, create flexible code, and update values in one place, with practical examples of numbers, loops, and reusability.

Learn to skip numbers in a for loop with increment and decrement operators. See how pre- and post-increment affect even and odd outputs and how negative decrement works.

Explore variable scope in multiple for loops, using local indices like i, j, x, and y; learn why i isn't accessible outside its loop and how breaks affect flow.

Explore nested for loops by coding a for loop inside another, using variables like j and k, and printing outputs to show loop execution.

Wrap up the for loops tutorial and preview upcoming arrays tutorials, highlighting the creative part of how all this code is used.