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.

Create your first simple web page by typing basic HTML tags such as head, body, header, and p, then close each tag to build a basic page.

Congratulations on completing your first program; you’ll feel accomplished as you keep building, tackle bigger projects, and get better at building them, with more to come in the next tutorial.

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.

Master variables as containers by declaring and changing integers, naming them with underscores or two-word styles, and using equals sign and defaults, with memory considerations and decimals in next lesson.

Explore integer variables as positive and negative whole numbers, and introduce float variables for decimals, then declare five float variables and set each to a fantastic value.

Learn about boolean variables that are true or false, how to declare them with bool, and update values with an equals sign, plus brainstorming uses in games or apps.

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.

Explore how to input and output data using a console, by declaring variables for text and numbers and printing them, including simple addition for scores.

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.

Explore x and y coordinates to position game objects using pixels, learn the origin, and practice vector2 variables to set and add coordinates in code.

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.

Learn how if statements work by pairing a condition with an action, using braces and comments, illustrated with a score example where reaching 10 ends the game via ==.

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.

Master conditional statements in the kids coding course on HTML, CSS, and JavaScript by evaluating conditions, variables, and booleans in if statements, guided by brackets to determine when code runs.

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.

Discover how loops power code execution and computer cycles from boot to animation, and why frames per second matter for time-driven ideas in interactive apps.

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.

Learn how do while loops execute code while a condition is true, with examples like kicking a ball near the net. Understand the do statement, curly braces, and the semicolon.

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 to find and use a real-time HTML editor in the Chrome browser to begin coding with HTML, CSS, and JavaScript.

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.

learn how the paragraph tag works in html, why we use lowercase p tags, and how it enables styling later with attributes.

Explore how header tags like h1 to h6 create different text sizes and meanings compared to paragraphs. Learn how to plan styling with CSS later.

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.

Learn to edit the height and width of an image with the image tag, and see how scaling preserves proportions; note the image tag has no closing tag.

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 to use HTML comments to document and temporarily disable code, using single-line and multi-line formats. Comments help you remember intent when code becomes complex or you step away.

Learn how to build a simple HTML table with table, tr, and td, add a border of 10 to display the table, and close all tags correctly.

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.

This lecture shows that code can be easier than it looks, especially when reading line by line and using copy and paste to build tables with rows and data.

Learn to add table headers with th inside a table row, distinguish header from data cells, and edit header text with basic inline tags like underline, italics, and strike.

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 unordered lists inside a definition list and nest an ordered list within it, using proper closing tags and list items.

Practice makes better in programming, just like sports, so you can play around with HTML elements such as definition lists and tables, adding rows, data cells, and borders to experiment.

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.

Add an h1 header, a paragraph, and an img with a src; set the height to 100 to scale the image proportionally.

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.

Learn to add a definition list in HTML using dt and dd elements, define an item, close the list, and ensure the structure works as a simple example.

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.

Create a basic HTML page with an h2 header, a table with rows and data cells, a border of two, then an unordered list and an ordered list with items.

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.

Explore how forms work by using the form tag, adding a text input, and naming the input to capture user entries on a webpage.

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 implement the HTML input type color to let users pick a color, previewing a color swatch and the color picker dialog across mac, pc, and linux.

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 range input in HTML using the range type, name it awesome level, and set its minimum to 1 and maximum to 10 to render a slider.

Add a search input and a search button with input type 'search' and name 'search'. Emphasize naming the input correctly and finalize the form with a proper closing tag.

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.

Add radio button input types using input type='radio' with a shared name, duplicating options like option 1 and option 2. Highlight labels and consider text size for accessibility.

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.

Learn how to align a table to the center or to the right, using a simple method demonstrated in the lesson.

Learn how to add a margin to the table using CSS with pixel values like 50 or 60 through a style block, including margin-right 50 pixels.

Learn how to change a table's width with pixel values, resizing the table from 100 to 200 or 400 pixels, and center the table to demonstrate the effect.

discover how to change the header font by setting the font-family in the style, trying Verdana, Arial, or Courier and seeing instant changes.

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.

Change the colors of the table columns back to the original color by adjusting the background color, removing borders, and reapplying gray across all columns using copy-paste.

Align the text vertically to the top by adjusting line breaks and vertical line techniques, demonstrating practical code changes for clean top alignment in html css javascript.

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.

Practice testing your knowledge by applying color styling to a web page, setting the background to yellow, paragraph text to orange, and heading background to an orange red.

Set the page background to yellow using body style background-color, style paragraphs with color, and create a header with an orange background color; refresh if it doesn't render.

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.

Explore how css styles web pages by editing the body and headers, using font family and font size to control color, typography, and layout, with a practical build approach.

Learn how to use the JS Bin website, including registering with a username and password, and saving templates to the cloud or downloading progress to prevent loss from power outages.

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.

Learn how CSS applies font sizes to headers and paragraphs, and how a maroon background rule updates all paragraphs at once, demonstrating CSS's efficiency over inline styles.

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 the text-align property sets header and paragraph alignment, and how p tags can override body alignment to create left, center, or right text.

Explore the CSS text-transform property to capitalize, lowercase, or uppercase text. Learn how to copy and paste transformed text between sections.

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 two additional font types, cursive and fancy, and compare them with sans serif fonts like Arial. Use Impact for headers and consider cursive styling.

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

Learn to use the font-family property to apply serif, monospace, oblique, and fantasy fonts in CSS, experiment with font names, and prototype your preferred options.

Illustrate how to apply bold weight in CSS using font-weight, with options like normal, bold, lighter, and numeric values from 100 to 900, and see bold text in the body.

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.

Add image bullets to lists by using list-style-image: url('your image URL'); upload the image to your server so the bullets display in the tutorial.

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.

Adjust the width and height of the table, table head, and td cells with pixels or percentages to control layout.

Learn to style HTML tables by adding headers and data cells, adjusting fonts and borders with CSS, and applying global table properties for consistent borders.

Learn how to change a table’s background color and its header using CSS, overriding colors for the table and th with gray, black, blue, or yellow.

Explore how adding padding affects table cells and headings. Adjust top, bottom, left, and right values to shape the table's appearance.

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.

Explore how visited links change color in HTML, and demonstrate that CSS syntax and tag order read the same regardless of brace placement.

Learn to create and style links with the a tag, including break tags, visited, active, and hover states, and apply css colors like blue and orange to match your theme.

Explore how padding, borders, and margins shape layout by adjusting pixel values and border styles, including dashed borders, to control spacing around text and blocks.

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.

Learn to set class attributes on table elements, define table rows, and customize the table background color with colors like white, green, and black.

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 see how input becomes output, using strings in quotes and numbers, and practice operations like addition, division, and multiplication.

Clear the console, then explore string length by typing a planet name and using the .length property; note that spaces count, and combine Mars and Jupiter lengths to see eleven.

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.

Practice using the console to convert text to uppercase and lowercase, and learn about brackets and the semicolon.

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.

Explore how to find the minimum and maximum of numbers using math min and math max, and learn to compare values with variables in a kid-friendly coding lesson.

Learn about exponents in JavaScript by computing powers with Math.pow, exploring two to the power of three, and understanding how to apply the power function in code.

Embed JavaScript in HTML using the script tag and edit JavaScript directly within the HTML to run in the browser console.

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.

Create interactive buttons that trigger JavaScript prompts and alerts on click, capture user input, and display messages. Explore copying button code, adding JavaScript functions, and previewing future function concepts.

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.

Use comments to remind yourself what's going on, mark notes with two backslashes that don't execute, and explain what writes to the screen.

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 to declare and initialize variables at the top, name them clearly, and understand javascript's loose typing with numbers (ints), strings, and booleans like true; anticipate debugging surprises.

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.

Explore math with variables by incrementing and decrementing in code, print updates to the screen, and apply these concepts to game-style scoring with score and health variables.

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.

Build a realistic budget by setting income to 2000 per month and tracking a bank account, then compute debt as the sum of rent, car, food, and entertainment.

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.

Add functionality by renaming rent to total rent and tracking totals for rent, car, food, and entertainment in a simple income calculator.

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 objects and assign properties like color, taste, weight, and size for apples and balls using dot notation and quoted strings; explore using objects or arrays across languages.

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.