HTML & CSS For Beginners - From zero to hero

Explore the HTML and body sections, and learn to add elements to a page by examining headings, links, elements, attributes, and ordered lists, plus images on the web page.

Learn how to structure HTML with opening and closing tags, use the head element for meta data, and set the page title with the title tag seen in the browser.

Add a body element to render content in the browser, using opening and closing tags, and use br for line breaks and p tags for text.

Learn how heading elements structure a web page using h1 to h6, improve accessibility, and boost SEO by using headings for document hierarchy rather than styling text.

Learn how paragraphs act as block level elements that start on a new line and take full width, while spans stay inline on one line and can color text.

Understand the differences between strong and em versus b and i tags, including semantics vs styling, default browser rendering, and how CSS can override these defaults.

Learn to embed images with the image tag using src, height, width, and descriptive alt text for accessibility and SEO, and wrap images in links to make them clickable.

Explore Brackets extensions that boost front-end development with a live preview and an extension manager, featuring three free tools—Emmet, Beautify, and Brackets Icons—for html tagging and indentation.

Learn to present tabular data with HTML tables by creating a table and adding rows. Use table headings with thead and th to describe columns, and label cells for context.

Learn the basics of css, including why we use cascading style sheets, how to style elements by selectors, classes, and ids, and how to apply multiple selectors to an element.

Learn how cascading style sheets style web pages, control colors, fonts, sizes, shadows, and positioning, and how linking an external CSS file updates the entire site with one file.

Explore three CSS methods—inline styles, internal style sheets, and external style sheets—demonstrating inline styling with color red and 20px font size, and linking external styles for broader control.

Master css syntax by learning selectors and declaration blocks, using curly braces and semicolons to define property-value pairs; apply element selectors to style elements by name.

Use the id selector to target a unique element by its id attribute and override conflicting class styles with a hash before the id name.

Explore how element name selectors, class selectors, and id selectors differ and override one another, and apply specificity rules to style headings and paragraphs.

Learn how chaining selectors in CSS combine multiple selectors to target specific elements, such as h1 and b with the center class, to apply text-align center and color red.

Learn HTML and CSS basics by adjusting font, color values, and background; explore height and weight properties, padding, margins, borders, and simple element positioning and display.

Explore font family and font size properties, using Georgia with fallbacks on an H1 selector, and master px, em, and rem sizing for headings and body text.

Learn the css color property and how named colors cover many scenarios. Use hexadecimal and rgb color values to achieve precise hues, from red to purple.

Learn to set the background color with the color property using named colors or hexadecimal values, and to display images with background-image via urls for local or external files.

Learn how CSS height and width control an element's size using auto, pixels, and percent values. Use min-width, max-width, min-height, and max-height to keep content legible across screens.

Learn how to select elements nested inside other elements using descendant selectors in css, then target divs and nested b elements and apply a yellow background.

Master css text properties to style typography, including text-align, text-decoration, text-transform, and letter-spacing and word-spacing, with left, center, and right alignment, underline, and line-through examples.

Explore how the box model wraps every element with content, border, and margin, and how the background color affects the entire box.

Explore how the css border property defines an element’s outer edge using thickness, type, and color. Practice with solid, dotted, and dashed borders in red, hex, and rgb colors.

Learn how padding creates space between an element's content and its border using top, right, bottom, and left properties and the shorthand padding syntax.

Discover how the border radius property rounds a box's corners, set all four corners to five pixels, and form a circle using height or 100 percent.

Learn how CSS margins create space around elements, using shorthand and individual properties to control top, right, bottom, and left. Explore centering with auto margins and how width affects centering.

Explore how borders, padding, and margins shape boundaries and space, and learn to position elements using static, relative, absolute, and fixed layouts with offsets and z-index.

Explore how the CSS display property uses inline, block, and inline-block to control layout, convert elements between block and inline, and set dimensions with width and height.

Use the float property to position images left or right so text wraps around them. Explore how the clear property clears floats on left, right, or both to control layout.