HTML5 & CSS3 for Beginners | The Ultimate Guide

Explore the head and body sections and learn to add headings, divs, links, attributes, and ordered and unordered lists, with images and basic page structure practice.

Use the head element and a title tag to declare meta data and set the browser title; include opening and closing tags so the page title appears in the tab.

Add a body element between opening and closing body tags to display content such as text, images, and buttons, and use self-closing elements like br for line breaks.

Learn to structure a webpage with headings from h1 to h6, boosting SEO and accessibility, by creating an orchid flowers page with main and subheadings, paragraphs, and sections.

Explore the difference between paragraphs and spans in HTML5, learning how block level paragraphs start on a new line and fill width, while inline spans target specific text for styling.

Explore the difference between strong and em tags in HTML5, focusing on semantic emphasis versus styling, and how CSS can customize bold or italic text.

Use the div tag as a container that divides a page into sections, grouping text, links, images, and videos. Structure content into introduction, habitat, and media sections to improve readability.

Use whitespace and indentation to visualize element relationships, improving readability since the browser ignores whitespace. Recognize that W3C recommends two-space indentation to show nesting of elements, body, divs, and paragraphs.

Understand how HTML documents form a hierarchy of parent and child elements, with the body as the root and headings, divs, and paragraphs as children, siblings, and attribute inheritance.

Discover how html attributes attach to elements via opening tags, using id and title to provide information and enable styling, with abbr tag (abbreviation) and id examples and hover displays.

Learn how the anchor tag creates hyperlinks using the href attribute to link text, images, or blocks of content, and how the target attribute opens links in new tabs.

discover how to organize text with ul and ol lists, create list items with li tags, and customize markers with the type attribute to display numbers, letters, or roman numerals.

Learn to embed images with the image tag using src, height, and width, add descriptive alt text for accessibility and seo, and wrap images in links with href.

Learn to fix a live preview not updating due to html syntax errors by ensuring spaces between attributes, avoiding spaces in opening tags, and matching opening and closing tags.

Learn how to embed video on a web page with the HTML5 video element using src, controls, and height and width attributes, and how to embed YouTube videos with iframes.

Discover the Brackets extensions Emmet, Beautify, and Brackets icons to accelerate HTML and CSS workflows, install them via Extensions Manager, and leverage automatic tag creation, attribute insertion, and improved indentation.

Master linking within and between pages using relative and absolute paths, organize files in a root directory, and use anchors to scroll to specific sections.

Learn how to use HTML comments with <!-- and --> to document code, ignore content in the browser, and safely experiment by commenting out sections like paragraphs or list items.

Practice test for building a restaurant site using HTML5 structure, including doctype, html, head, body, title, h1, h2, and paragraphs with images and links.

Practice test Part 2 guides building a restaurant website with HTML5: organize content with divs and IDs, create images folder with image elements, and anchors for introduction, menus, and events.

Discover html fundamentals, including title, body, headings, paragraphs, emphasis, images, and videos, and build orchids website and delicious food websites. Then learn to link css to your html document.

Explore cascading style sheets, their purpose, and how to use CSS to style elements by tag, class, and id. Learn applying multiple selectors to a single element for versatile styling.

Css styles web pages by controlling colors, fonts, sizes, and layout. Linking an external css file lets you change the look of an entire website by modifying just one file.

Explore three CSS methods—inline, internal, and external—gain hands-on examples for applying color and font size, and learn how to link external style sheets for consistent design.

Learn CSS syntax with selectors and declaration blocks, including properties, values, and semicolons. See how element selectors style h1 and p by font family, color, and size.

Discover how to use the css class selector and class attribute to target elements, combine multiple classes, and apply reusable styles across headings and paragraphs.

Learn how the id selector targets a unique element via its id attribute to override class styles, then apply color blue, center text, and uppercase transformation.

Explore how element name, class, and id selectors differ and how specificity and override rules determine styles, with tips on grouping selectors and using id sparingly.

Explore chaining selectors in CSS by combining multiple selectors to target elements with the center class, enabling centered text and color changes for h1 and b elements.

Learn to style html elements by adjusting fonts, colors, and backgrounds. Position elements and complete a styling quiz for a delicious food website.

Explore how to use font-family and font-size properties to style web text, implement fallback fonts, and apply px, em, and rem units across headings (h1–h3) and paragraphs.

Explore the CSS color property, including named colors, hexadecimal and RGB values, and apply precise color choices to elements using style rules demonstrated with a color picker.

Apply the CSS background color property with named colors or hex values to style the body and div elements, and add a background image using url, cover, and fixed attachment.

Explore CSS height and width properties, including min-width, max-width, min-height, and max-height, and how auto and percentage values affect layout for responsive, readable designs.

Learn to select nested elements with a space separated selector, targeting divs and inner elements like b, and apply background color yellow, anchor font size, and bullet removal.

Learn how to style text using CSS text properties such as alignment, decoration, transform, and spacing, including centering text, removing underlines from links, and adjusting letter and word spacing.

Explore the CSS box model, where each element forms a box with a content area, bedding, border, and margin, and changing a background color affects the entire box.

Master the CSS border property by defining thickness, style, and color; explore solid, dotted, and dashed borders, and learn to apply them to headings in page layouts.

Explore css padding properties and the shorthand to control the space between an element's content and its border, with examples on divs, headings, images, and hover effects.

Learn how the border-radius property transforms a box’s corners, enabling rounded shapes and perfect circles by setting the radius to the box height or 100 percent.

Learn to apply text shadow and box shadow in CSS by specifying horizontal and vertical offsets, color, and blur values.

Explore how margins create space around elements in CSS using top, right, bottom, and left values. Master the shorthand margin property and centering with margin auto.

Learn how borders, padding, and margins control boundaries and space; position elements with static, relative, absolute, and fixed, use top/left/right/bottom offsets and z-index to prevent overlaps and pin navigation bars.

Explore how the CSS display property governs inline, block, and inline-block elements to arrange text, anchors, images, and lists, with practical examples in nav bars and item layouts.

Master the float property in css to position elements left or right and wrap text around images, using clear to control wrapping and practical examples.

Style the delicious food website using this HTML5 and CSS3 practice test, learning to structure pages with header, container, and description sections and linked images.

Practice test demonstrates building and styling a food-themed web page with a hero header, typography, navigation, image sizing, borders, centering, floating sections, and responsive descriptions using CSS properties.

Learn to present tabular data with the HTML table element, add rows and data cells, and use th headers with scope to label row and column headings.

Learn how to style table borders with CSS, moving away from the deprecated border attribute, and extend a table with additional data using a CSS-based approach.

Explore how the colspan attribute lets a table cell span multiple columns, using an integer value of two to denote span, with Monday and Tuesday data spanning across two headers.

Explore how the rowspan attribute makes data span multiple rows, using examples where events extend over several hours and select cells across four rows.

Learn how to structure long tables using tbody, thead, and tfoot, move headings to the thead, and add a footer with totals.

Learn to style tables with css by adding borders, adjusting font color, and increasing the font size to 18px for all table headings and data.

Create and structure HTML tables with the table element, add headings, and use colspan and rowspan to span cells; organize content into thead, tbody, and tfoot.