Web Development Wizardry: HTML & CSS Course for Beginners.

Explore what HTML stands for and how hypertext markup language powers links to graphics, video, and sound; distinguish HTML from XHTML as a markup language, not a programming language.

Learn html structure by declaring the doctype for html5 and using html, head, and body tags, noting that head content is not visible and comments in body are not rendered.

Explore how the head section stores metadata, including meta tags, the title, and utf-8 encoding in HTML5, and learn to describe your webpage with a meta description.

Identify how comments describe code and hide notes from the browser, showing that adding comments in HTML or XHTML keeps explanations invisible while the page content displays.

Explore the six heading levels from H1 to H6, learn their size order, and apply proper heading structure for accessible web content.

Master underlined text with the u tag and quoted text with the q tag, plus displaying code text in HTML.

Discover HTML inputs and the 23 input types, from text and email to date, color, checkbox, file, url, tel, time, and reset.

Explore input attributes for the input tag, including file input with multiple selection and accept types, plus placeholder, size, and minimum length and maximum length constraints.

Learn how the HTML line break element, the br tag, creates a new line between tags and lets you place bold text, images, or other content on separate lines.

Learn to connect a label to an input with the for attribute and the id in HTML, using a password field as an example and optional line breaks.

Explore radio input basics by building a color selector form with labeled radio options for blue, red, and green, using input and label attributes.

Connect a datalist to an input with the list attribute, use option tags in the data list, and label the input with the for attribute linking to its id.

Explore how to create HTML tables using the table tag, style borders and colors, and organize data with the table head, table body, and table foot.

Explore how to create ordered and unordered lists in HTML, use description lists with dl, dt, and dd, and combine lists to organize content for beginners.

Learn how to insert images in HTML from your computer or the internet using input and img tags, and adjust width and height to 100% and 500 pixels.

Learn what a form is and how the form tag groups labels and inputs. Build a simple email and password form with submit and reset buttons.

Learn how to use the style attribute to apply CSS properties to HTML elements, including background color, font family and size, width, height, text-align, and font color.

Learn how to use the span tag to mark parts of text and apply styling with the style attribute, adjusting color and font size for red and blue words.

Learn the division tag in HTML, how to group elements with divs using the style attribute and the class attribute, and apply properties like background color and font size.

Understand how block elements start on a new line and take width, with paragraph, div, and table, and how inline elements flow on the same line with span, bold, italic.

Learn how borders, padding, and margins control spacing in HTML and CSS. See how padding creates space between content and border, while margins create space outside the border.

Discover how the id attribute targets a single HTML element, differentiate it from the class attribute, and style with a hash selector for background color and font size.

Learn how to create hyperlinks with the a tag and href attribute, and use abbr and dfn tags to define abbreviations with titles and definitions in HTML.

Explore the hyperlink tag's target attribute, including _blank and _self, and learn how links open in a new tab or the same tab.

Explore the basics of HTML layout using header, nav, main, section, aside, and footer tags. Include the center tag to center elements, and apply style attributes for color and alignment.

Master the iframe tag to embed content within a page. Set the iframe's title and src, adjust width and height, and place a website or image inside the frame.

Explore how to use fieldset and details in HTML to group elements, customize with a legend and summary, and create expandable sections with styled boxes and social links.

Discover how to add a favicon, a small icon displayed beside the title, by inserting a link tag in the head with the rel and href attributes.

Discover how to insert emojis in emails using numeric character references like 💗 and ⚽, and control their size with the style attribute's font-size in HTML.

Learn to make your website responsive for mobile and tablets by using the viewport and content attributes, including setting the scale to 1.0.

Learn how to implement audio and video elements in HTML, add source tags for files, set width and height, and apply attributes like controls, loop, muted, and autoplay.

Explore semantics in HTML by contrasting semantic elements like header, footer, navigation, aside, and section with non semantic elements such as div and span.

Explore object, embed, and iframe tags for embedding pdfs, images, and videos. Object uses the data attribute; embed and iframe use the crc attribute, with width and height controls.

Explore CSS, short for cascading style sheets, and learn how to improve your website’s appearance by controlling colors, fonts, sizes, spacing, borders, and other styling properties.

Learn how to connect a css file to html by creating a .css file, saving it, and linking it in the html head with rel and href attributes.

Discover css syntax by placing a selector inside curly brackets and pairing a property with its value, such as the background color and its color value.

Discover how css selectors target elements to style pages, including the element, class (dot syntax), and id (hash syntax) selectors with color examples.

Explore how CSS priorities shape styling by comparing font sizes across classes, internal styles, and inline styles; inline styles take precedence, then internal styles, then class rules by order.

Discover how to set colors in CSS using three methods: color names (over 140 options), hex codes with a hash, and RGB values including RGBA for alpha.

Explore CSS background properties, including color, background image via url, size with width and height, and control repetition, attachment, position (top, right, center, bottom), and horizontal and vertical values.

Learn to style text in HTML and CSS by adjusting color, letter spacing, and line height, then set width, background color, direction (left-to-right or right-to-left), and alignment.

Explore five text styling properties in HTML and CSS, including text-decoration (line-through, overline, underline) and span usage; text-indent with fixed values; text-transform (capitalize, uppercase, lowercase); white-space control; and word-spacing.

Learn how to use CSS comments with the syntax /* ... */ and see that comments have no value, illustrated by examples with and without a comment.

Learn to use font-family with quotes for multiword font names and fallbacks, set font-style, adjust font-weight from 400 to bolder, and control font-size with keywords or numeric values.

Explore hover and active states in CSS by styling a link, changing color and removing underline on hover, and applying active effects like color, background, font size, and weight.

Learn how to style HTML lists with CSS by adjusting list style type (disk or square), list style position (outside or inside), and list style image via a URL.

Explore the box model by building a container with a child div, adjusting width and height, applying background colors, and using class and paragraph selectors to understand layout.

Master border properties in HTML and CSS by adjusting width, style, and color; apply borders to all sides or individually, using four-value shorthand for top, right, bottom, and left.

Explore the CSS margin property and how it creates space outside an element's border, including top, right, bottom, and left margins, four-value shorthand, zero margins, and centering with auto margins.

Learn how padding creates space between content and the border in CSS, and how to set margins and padding values such as 20 pixel, 100 pixel, and 160 pixel.

Explore the width and height properties in CSS, using pixel values and auto sizing to control container and content dimensions, with examples of minimum and maximum width and height.

Explore the CSS display property by converting divs and spans between inline and block, applying images as block elements, and using display: none to hide elements.

Discover how the CSS position property works, exploring static, fixed, relative, and absolute values, and use top, bottom, left, and right to position elements within the page or a parent.

Explore how the CSS float property lets elements float left or right, and how the clear property with values none, left, right, and both clears floats.

Group multiple CSS classes to share properties across elements, then rely on bottom-placed groups to override styles; extend grouping to tags like p, strong, and span for consistent styling.

Explore css selectors to style html elements by using an element selector and a class selector to set font size and color for paragraphs.

Explore the CSS overflow property and how content outside a container's width and height behaves. Learn how visible, hidden, scroll, and auto control overflow with a live demo.

Learn how the css visibility property controls an element's display with visible and hidden values. Compare that with display: none, which removes the element's original box.

Z-index property and how it sets stacking priority for absolutely positioned divs with different colors, using practical examples ranging from 10 to 1000 and auto defaults.

Learn how the CSS outline property works, compare it to borders, and see how a blue outline (25px, solid) sits outside the element without affecting layout, unlike the green border.

Learn how to use the cursor property to control cursor appearance by selecting from multiple shapes, including alias, save, run, cell, pointer, and none, with the cursor returning to normal.

Learn CSS selectors from the universal star selector to class-based, direct-child, and structural selectors like span + paragraph and paragraph ~ span.

Learn to use CSS pseudo classes to style the first letter and first line, and to insert before and after text with the content property.

Learn how to style images and inputs in CSS using attribute selectors. Explore applying properties like outline, width, height, border, and padding based on element attributes.

Learn to use CSS media attributes to tailor styles for screen and print. Apply @media rules with screen or print to adjust properties based on the medium.

Explore CSS units in CCIS, including px, percent, root font size, parent font size, vw, vh, cm, and mm, with examples like a 150px container and 50% equaling 75px.

Build a styled login page with a container and email and password inputs, sign-up links. Use HTML and CSS to set background, borders, placeholders, hover effects, and a submit button.