Coding for Kids - Create Website using HTML and CSS

Learn how heading tags from h1 to h6 determine text size in HTML, with hands-on examples showing opening and closing tags and how each level scales from biggest to smallest.

Learn how to use the paragraph tag in HTML, including opening and closing tags, inserting content such as welcome messages, navigation, and contact prompts inside a paragraph.

Explore basic html formatting tags for a kid-friendly website: bold with the b tag, italic with the i tag, and highlighted text with the mark tag.

Learn to create and format ordered and unordered lists in XHTML, using ol, ul, and li tags, with examples like family members and cake flavors and basic headings.

Learn to build a simple HTML table using table, tr, th, and td to organize time slots and topics from Monday to Friday, with CSS styling introduced later.

Discover how to insert images using the img tag with the src attribute to build an image gallery, add horizontal rules, and organize multiple images with captions and dates.

Practice building a web page using a live preview to refine the navigation, expand the image gallery of nine images with added paragraphs, and insert a horizontal line for layout.

Learn to build a basic HTML form with input tags, including text and email types, placeholders, names, checkboxes, and a submit button.

Learn how the div tag divides a page into regions, acts as a container for elements, and enables CSS styling of sections such as header, image gallery, and contact form.

Learn how to add hidden notes in html using comments, using the <!-- and --> syntax to annotate images, divs, and future styling tasks without affecting output.

Learn what css is and how cascading style sheets apply one or more styles to an XHTML document. See how applying css makes the website colorful, better, and clear.

Explore how the class selector and class attribute group elements and apply styles across multiple tags, using the same class name for a nav bar, images, and image galleries.

Learn to link an external CSS file in the head with a link tag, rel=stylesheet, and href; some tools auto-link the CSS, so manual linking may be unnecessary.

Learn to change text color in HTML and CSS using the color property, with examples of white and black text and guidance on semicolon usage in declarations.

Master how to set width and height with CSS using pixels and percent, including max-width and max-height, and preview changes in a new tab.

Discover how CSS margins define space around elements, set body margins to zero, and apply margins to inputs and forms, with auto margins adapting across devices.

This lecture demonstrates how to adjust text size using the font-size property in CSS, showing how to apply size values like small, medium, large, and specific pixel values via selectors.

Understand the font-weight property, including the 400 value, to control text heaviness, and compare bold, normal, and lighter styles.

Explore how to style text with the CSS font-style property, choosing between normal, italic, and oblique, demonstrated on HTML tags like h5.

Learn to use the font-family property to set a prioritized font stack in the body tag, ensuring cross-browser compatibility with fallbacks like Arial, humor, and sans-serif.

Explore how to decorate text with the text-decoration property, applying underline to elements, removing decorations with none, and using line-through to style text.

Students learn practical CSS techniques to style a nav bar with class selectors, anchor tags, and hover effects, including removing underline, adjusting padding, and color transitions.

Learn to style an HTML table by targeting an id with #timetable, applying borders, padding, background color, text alignment, and font size to create clean, customizable layouts.

Apply inline css by using the style attribute to center or align elements like a contact form, learning how property value declarations control presentation directly on the tag.

The lecture demonstrates applying inline CSS to certain a tags to center text and set font size 25px with font-weight 400, while other a tags without inline styles stay left-aligned.

Explore how opacity controls image transparency from 0 to 1 and affects contrast. Apply hover effects to gallery images with CSS selectors to lighten on mouseover and set height auto.

Set the form's maximum width to 90 percent and adjust line height. Fix the header using position: fixed and top: 0 to keep the navigation visible while scrolling.

Learn how to implement internal css by placing a style tag within the header, paste css rules from an external file, and compare internal versus external css approaches.

Add a pipe symbol, a vertical line, to separate header anchors and learn to edit header color, navigation, images, and content, practicing changes to your HTML and CSS.