Kids Coding - Introduction to HTML, CSS and JavaScript!

Explore the core web languages HTML, CSS, and JavaScript through kid-friendly lessons. Start with HTML, the easiest language to learn, and build foundational web projects.

Learn rapid prototyping by building a simple HTML document from scratch using a basic word processor, and discover how quick coding practice boosts skills.

Discover the differences between web languages, including HTML for page content, CSS for styling separated from HTML, and an introduction to JavaScript in this kid-friendly coding series.

Explore how JavaScript extends web pages by bridging native code concepts to the browser, while html and css shape content and style.

Learn how programming languages are compiled into web sites or apps, how to fix compile errors, and how breaks boost learning to balance technical skill with creativity.

Declare string variables to hold letters and learn how quotes or apostrophes define string literals. Compare strings and ints, and practice type conversion and printing to the screen.

Learn to read user input from the console, store it in a string variable, print it, and convert it to an integer for basic arithmetic.

Reassures young coders that you can be a great programmer without advanced math, emphasizing passion and logical thinking over current skill, with abilities growing over time.

Explore how computers do math with algebra, using variables as containers and substituting values to solve equations, including numbers on either side.

Explore modulo and exponents, learn that modulo returns the remainder of division, and that exponents involve multiplying a number by itself repeatedly.

Master the condition in the if statement by evaluating variables and objects, such as a mouse entering a button or a keyboard action.

Explore if statements and boolean variables, and learn how to use an else statement when conditions are not met. See how different code paths can yield the same result.

Learn how if statements and else if work, with a secondary condition and optional else, and how the compiler evaluates code from top to bottom using the score variable.

Explore the greater than operator and how conditions control code execution in if statements. Learn numeric comparisons with integers and floats, and extend to string comparisons and the greater-than-or-equal-to variant.

Discover how the less than and less than or equal to operators control if statements, and chain else if logic to handle numbers like 5 and 6 with practical examples.

Explore the equal operator in if statements, noting two equal signs set a variable to five, while JavaScript uses three equal signs and syntax varies across languages.

Learn about conditions and operators, including not equal and else if, and practice precise if-else logic to reduce bugs and produce expected results.

Explore conditions and operators using an if statement with an integer and a boolean, requiring variable >= 5 and boolean true, with brackets for grouping.

Explore the or operator in if statements, where either condition being true lets code run, with examples like equals four or boolean true, and else if blocks.

Explore using x and y coordinates to define conditions in if statements for game objects, including an and condition that destroys objects when x is less than 50.

Explore how the for loop powers code repetition by declaring a variable, counting iterations, and updating with i++, including the three sections separated by semicolons and variable scope.

Explore arrays as containers that hold multiple values, learn to declare and set two dimensional and three dimensional arrays, switch between numbers and strings, and understand rows and boxes.

Learn how to use an HTML editor across Mac and PC, preview code in real time, and insert the doctype declaration to define the HTML document type.

Add HTML and body tags, open and close them correctly. Place content inside the body and indent with spaces.

Explore how text formatting in the editor shapes the output, from headers on separate lines to tags behaving as returns, with undo restoring layout.

Learn how to add breaks in HTML by using break tags, adjust paragraph tags, and format text with indentation and sandboxing concepts to control how content appears on the page.

Learn how to format text in HTML by using the em tag to emphasize words, apply emphasis to entire paragraphs or headings, and close tags correctly.

Add strong text using the strong tag, combine it with emphasis, and learn how closing tags determine which words are affected.

Learn to apply bold, italics, and strikethrough formatting and practice basic text editing in HTML, CSS, and JavaScript.

Learn to add links using the a tag with an href attribute and quotes, typing the site as Google dot com so the link goes to Google.

Style link text using HTML tags just like paragraph text. Use underline and strong text to change how links appear and explore applying styles with these tags.

Learn how to add an image in HTML by using the image source attribute, paste a Google image into the editor, and adjust its display size.

Add the alt property to an image tag to provide fallback text when an image can't load, ensuring clear messaging like 'logo cannot be found'.

Wrap an image in a hyperlink with the a tag, close the link, and optionally add a border set to 1, 10, or 100.

Learn how to build a basic HTML table using the table tag, table rows (tr), and table data (td), and add columns to display multi-column data.

Learn how to add rows to HTML tables by inserting new tr elements with td cells, and understand how empty cells affect table structure.

Discover how to comment effectively in code by using the two minus signs, how to comment out lines, and how comments clarify tables and table rows.

Learn to display information with lists in markup, using unordered and ordered lists, the ul tag and li items, and apply text emphasis such as bold, strong, and underline.

Learn to create and manage ordered lists in HTML by using the ol and li tags, mirroring unordered lists, adding multiple items, and ensuring proper closing tags.

Nest unordered lists inside ordered lists in HTML with proper closing tags and indentation, and learn to add nested lists and manage formatting across editors.

Explore definition lists in HTML, using items and definitions to structure content with dt and dd semantics and automatic indentation, as Apple is defined as a fruit.

Learn how to add and close the title tag to set your page name that appears at the top of the browser, using a simple example.

Learn how the div tag helps organize a web page into sections and style those sections with CSS, using background colors, headers, and paragraphs to demonstrate layout.

Compare block level div tags with inline level span tags, showing how divs shape the layout and spans colorize text inside a paragraph.

practice HTML by composing an h1, a paragraph, and an image, then review the result in the next tutorial.

Practice setting up a simple HTML document in a test, review the steps shown, and reinforce how to recreate the HTML setup.

Master the basic HTML page structure by setting the doctype, adding HTML with a head and title, and a body with content and proper closing tags and indentation.

Practice building a simple HTML page by creating an h1 heading, placing two paragraphs, adding an h3 heading with a following paragraph, and inserting a link.

Learn how to create a simple HTML page by adding paragraphs, an H3 header, and a link to Google with proper opening and closing tags.

Students create an ordered list with many items and add an h3 header for the Hatter, reinforcing HTML list and header basics.

Learn to build HTML lists by adding unordered and ordered lists with list items, closing tags, and reusing copied items, as demonstrated in this lesson.

Create an 86 header and add a definition list, and review the material if you’re unsure before typing it out.

Create an h1, insert a paragraph, and add a table to practice basic HTML elements.

Add an h1 header, a paragraph, and a table with rows and cells to build a basic HTML page. Close each tag to complete the structure.

Practice adding a 3x3 table in HTML during a test, with guidance to review the material if needed.

Write a basic HTML table by declaring a table with three rows and three columns using tr and td, and add a border, then copy and paste the snippet.

Practice building an html table with one row and three columns, add a header to the table, and place an unordered list with three items in each cell.

Practice building a simple HTML table with one row and three columns, and insert an image into each cell as the final test.

Create a basic HTML table by adding rows and cells, applying a border, and inserting an image with a src attribute and a height attribute to complete the test solution.

Learn how to use the password input type in HTML, building a form with a name field and a password field. Add line breaks to place additional fields as needed.

learn how to add an html date input field with input type date and name birthday, and how the selected date is stored in Birthday.

Learn to add a file input to a form using input type='file', giving the input a specific name such as video file or resume upload to manage file uploads.

Add a submit button with input type and name set to search, then wire the button to submit the form as a search action.

Explore styling in HTML by applying styles to elements such as h1 headers, paragraphs, and divs to enhance the appearance and presentation of a web page.

Learn how to add a checkbox input in HTML by defining input type=checkbox with name and value attributes, inserting breaks, and duplicating the element to create multiple checkboxes.

Copy and paste code to create multiple radio buttons, set the name and value attributes, and use the editor to ensure only one option can be checked at a time.

Explore paragraph styles by applying color to text using the paragraph tag and color property, experimenting with red, blue, and maroon, and mastering the fundamentals of styling paragraphs.

Apply background color and multiple CSS attributes to HTML elements using inline styles. Learn to use quotes and semicolons to separate attributes and extend styles from headers to other tags.

Explore how HTML tags organize content and apply styles, including style tags that color sections blue or orange, and learn why tags and styles power web page design.

Experiment with text alignment by applying text-align with center, right, and left defaults, using colons, dashes, and the semicolon to format attributes like color and alignment.

Apply the margin-right and margin-left properties in CSS to move a box by pixel values, explore 50px, 150px, and 250px, and observe alignment as you center or left-align content.

Learn how to add styles to a table using properties such as border, border color, background color, and text color, with a simple four-cell table example.

Clean up the project formatting, set a header with the Impact font and an exclamation point, underline the title, and apply color codes using hex values to create dynamic colors.

Build a three-column web layout using a simple table, creating left, middle, and right columns, adjusting width to 100% or 90% and centering, then clean up borders with styles.

Apply the style attributes to the table by setting the background color to gray, a 1px solid black border, orange text, and the courier font family, then explore column spacing.

Learn how to color each of three table cells using the td tag and inline style attributes, testing colors like black, red, and maroon, and widening the middle column.

Learn how to format table columns by adjusting padding, spacing, and width using percent values and fixed pixel values.

Examine how enlarging text shifts the left and middle columns and why images don’t resize automatically, and adjust column widths around 200 for a better layout.

Add a header row to a table using a table header, copy header cells for left column sections like links, social media, and blog, and adjust bold styling.

Prototype a basic blog layout with a middle blog column, left links, and right social media, using unordered and ordered lists, headers, and paragraphs.

Prototype a website quickly by building a template with a header, a six-cell table, and unordered lists. Experiment with background color and text to create a site from scratch.

Save your HTML website from a text editor and save it on the desktop. On PC, use .hvm; on Mac, save as a web site to view in a browser.

Apply basic HTML and CSS by styling a heading h-3 with the Impact font in red on black, and a paragraph in Courier with orange text on gray.

Create an h3 header with inline style, font family Impact, color red, background black, and a paragraph with Courier, orange text, gray background; finish with a blue background.

Explore cascading style sheets as the styling language for HTML, learning how CSS edits page style and how JavaScript adds functionality with a web editor and console.

Build a simple html page with an h1 and a paragraph, apply css to the body for orange color, and learn to separate styling into css files for cleaner code.

Discover how to style a page with CSS by setting background colors and paragraph colors, using braces and semicolons, and organizing CSS into separate files for readability.

Discover how to set colors using color names, hex codes, and rgb values in HTML, with rgb values ranging from 0 to 255 to create black, white, and yellow.

Learn to add a background image with css using background-image, ensure the image is in the same folder, and observe how the image can repeat across the page.

Learn how to add a background image and control its display using background-repeat, no-repeat, and background-position options to tailor visuals for different resolutions.

Learn how to indent text using text indent in CSS, adjusting the first line with pixel values to left, center, or right align as needed.

Learn how to apply CSS text-decoration features, including underline, overline, line-through, and none, and adjust font size to style paragraphs and headers.

Learn how to change fonts in CSS by setting font-family for the body and elements, using Georgia, Verdana, and Courier, and adjusting the font size to 40.

Explore serif fonts like Times New Roman, sans-serif fonts such as Vergano, and monospace fonts like Courier; learn their traits and how to find fonts via Google Fonts or CSS.

Explore font styles in CSS, applying font-style to create italic, oblique, or normal text for headers and body content.

discover how to specify a fallback plan for fonts by listing backup fonts like Arial so the site remains usable when a font file is missing or fails to load.

Apply CSS styling to HTML lists by targeting unordered and ordered lists with selectors, adjusting font size, font family, color, and background color to customize list appearance.

Learn how to customize unordered list markers using CSS list-style-type with options like square, circle, and disc. Understand how to apply and spell the values correctly.

Learn how to customize ordered lists by changing the list-style-type, using options like lower latin, lower roman, georgeann, and kadar cana for various numbering styles.

Learn how to create and style tables in css, including table rows, table data, borders, colors, and font size, with a focus on table headers.

Add a background image to a table by pasting a URL. See how the background appears in the table header and data, and how spacing affects it.

Create hyperlinks using the a tag, linking to destinations like Google, and customize their appearance with color, background color, and font family such as Impact.

Learn to customize element borders with CSS border style, exploring dashed, double, and groove options, and changing colors like maroon to refine border appearance.

Explore how to customize borders with border and border-width properties, set left, right, top, and bottom widths, and create visual effects such as a shadow look by mixing different values.

Master CSS margins by setting top, right, bottom, and left values in that order, using numeric inputs like 60, 70, and 80 to adjust spacing quickly.

Learn how to use the class attribute to target specific headings with css. Create multiple h1 elements with the same class and apply color and background color changes.

Explore how div tags and the class attribute power CSS styling, applying color, font family, and layout changes to p, h1, and other elements.

Explore how span tags and span classes apply inline CSS, using color, background-color, and font-family such as Georgia, then reuse spans across HTML.

Apply practical table styling with green backgrounds, adjust header colors and row height, and use the Impact font for headers through simple copy-paste steps.

Add a class to a table cell to apply styling, then customize font family, font size, text alignment, color, and background color, and reuse the tag across tables.

Learn to add and style table headers using consistent classes like table header, color headers with blueish, navy, and other colors, and apply the same header styles across multiple tables.

Learn to apply class IDs to unordered lists and combine with ordered lists, then customize appearance with color, background color, font family, and font size to preview changes.

Learn to create ordered lists and apply CSS classes to style them differently. Practice setting colors, font family, and font size for each list.

Apply a shared class to list items in both unordered and ordered lists. See how color, font family, and font size styles apply consistently across list types.

Explore the JavaScript console to experiment with string indexing and 0-based positions, typing names and retrieving characters with charAt to understand how indexes begin at zero.

Call and create methods with brackets to pass variables, master rounding with Math.round, and explore practical examples like bank money and burger scripts to illustrate method usage.

Learn to generate random numbers in code using the math function, produce 0 to 1, scale to 1 to 10 or 1 to 100, and apply rounding for whole numbers.

Learn how to round numbers in JavaScript using floor to round down and ceiling to round up, with practical examples.

Print text to the screen by using document and simple HTML formatting with headings like h1 and h2, and learn to output variables by defining them and printing them later.

Declare a javascript function with the function keyword, define parameters in curly braces, and call it on a click to change text. Note how commenting out code alters behavior.

Explore how JavaScript handles multiple functions with the same name, and learn best practices for using script tags, naming, and commenting to debug and organize main and secondary scripts.

Learn to change text by selecting an element with an id and updating its innerHTML using JavaScript, demonstrated with a single button and a paragraph.

Learn to change a header text by wiring a button to an h2 element with an id, using a single function to update the text on click.

Explore how white spaces in code don't affect output, and learn to format with indentation and spacing around equal signs for readability and personal style.

Learn how variables act as containers for data, storing strings and numbers, and updating values by adding numbers. Practice changing variable values to see live changes in the display.

Learn how to declare multiple variables per line using var, assign multiple values in one line, mix variable types, and add comments to group properties like car speed and color.

Learn how to use variables, simple functions, and button-driven interactions to perform math operations and print numbers to the screen, with hands-on coding examples.

change the text color with inline styles and a css class, using green for gains and red for losses, and apply a money class to manage styling.

Add an income calculator with a new button and function, wire up DOM elements to show your income, total income, and monthly debt in JavaScript.

Apply a simple income calculator: define gross income, initialize bank account to zero, set monthly debt, add income to the bank account, then subtract debt to reveal savings.

Extend the income calculator by adding income input, updating the bank account, calculating monthly debt, and commenting the code to track the balance and gross income.

Explore creating a simple budget calculator by declaring variables for rent, car, food, and entertainment, and use classes like money lost to style the output and show remaining money.

Learn how to build a simple income and taxes calculator in JavaScript by adding income, calculating taxes, and updating the display with DOM manipulation.

Learn to finalize a money app by calculating net income after taxes using two approaches—tax amounts and percent-based calculations—updating the page with the final income.

Explore if statements in JavaScript by building a function triggered by a button, updating a paragraph element when a time variable equals 1, and modifying the DOM with getElementById.

Discover how an if statement works in javascript: structure with if, then, and a condition; use triple equals (===) for comparison; code runs only when the condition is met.

Explore how an else statement works within an if structure, using not equal to 1 as the condition. See how the else branch executes when a differs from 1.

Learn how else if statements extend an if by adding more conditions, using variables and equal-to checks inside curly brackets, and providing an else fallback when none match.

Explore using greater than and less than operators in if statements, and learn how equality and numeric precision behave in JavaScript, including why 1 and 1.0 are not the same.

Master greater than or equal to comparisons by using less than or equal to and greater than or equal to 10 in code; simplify logic and debugging by reducing mental math.

Learn how the not equal to operator works, using examples like 3 not equal to 1 to demonstrate truth. See how changing numbers affects the result.

Explore how multiple conditions drive decision making in JavaScript using if and else if statements, including combining conditions with and, with examples using variables a and b.

Explore the or operator with examples where A equals 1 or B equals 2, showing that at least one condition must be true and how else if uses this logic.

Explore how strings work with if statements in JavaScript, including case sensitivity and mixing types, and see how variables like a, b, and c compare without errors.

Explore programming objects by comparing them to real world items and their properties, and learn to create a new object with apple equals new object.

Create a function and explore updating object properties such as color, size, and weight by interacting with a button to modify ball objects in JavaScript.