Mastering HTML5 and CSS3 (Part 2 - Intermediate Level)

Master HTML tables by using table, tr, td, and th to display headers and data, and refine them with CSS borders, border-collapse, padding, and colspan and rowspan.

Learn to build and style HTML tables with th and td inside tr, include captions, and group header with thead, tbody, tfoot, applying borders, backgrounds, zebra stripes, and hover effects.

Explore how to create and customize HTML lists, including ordered (ol), unordered (ul), and description (dl) lists, with list items (li, dt, dd) and optional CSS styling and start numbering.

Create a top navigation menu from an unordered list, link items to bookmarks with id anchors, and style with CSS to display inline, remove markers, and add hover effects.

Embed web pages with iframes in HTML by setting src, title, and size with CSS, including width, height, and borders. Explore sandbox options and why some sites block embedding.

Explore CSS gradients, including linear, radial, and conic gradients, learn how to define color stops, set directions or angles, and preview gradients in HTML and CSS.

Explore radial and conic gradients in CSS, control shape (circle vs ellipse), colors, and angles, create pie charts, adjust center and start angles, and handle browser support with practical examples.

Discover how to create image maps by defining a map with clickable areas in HTML, using img with usemap, and detailing shapes, coordinates, hrefs, and alternatives.

Discover how browsers render elements as block or inline, and control display with the display property, including inline-block, plus how visibility and display none differ for hiding elements.

Discover how flexbox layout enables responsive design with a flex container and properties like flex-direction, flex-wrap, justify-content, align-items, and align-content, using only HTML and CSS.

Apply text shadow in CSS to create attractive text by configuring horizontal and vertical offsets, blur radius, and color; combine multiple shadows for neon effects.

Apply box-shadow to HTML elements and master its horizontal and vertical offsets, blur radius, spread, color, and inset versus outset. Combine multiple shadows for richer effects.

Learn to change fonts on web pages using web safe fonts with fallbacks, and embed custom fonts via font-face, organizing files in assets/fonts and applying font-family with quotes.

Explore font properties in HTML and CSS, including font-style (italic, oblique, normal) and responsive sizing with px, em, percent, and vw. Learn about font-weight and font-variant small caps.

Learn how to set line height and use font shorthand to control style, variant, weight, size, line height, and family, with proper syntax and quotes for multi word names.

Learn to integrate Google fonts and Google icons into HTML templates by embedding or linking fonts, applying them with CSS, and using static icon fonts with customizable size and color.

Learn to control horizontal and vertical text alignment in HTML with CSS, using text-align, text-align last, direction (ltr/rtl), and vertical-align in practical examples.

Explore text decoration in html and css, including text decoration line, color, style, and thickness, plus the text decoration shorthand, with examples of line through, overline, and underline.

Explore CSS text spacing properties, including text indent, letter spacing, word spacing, line height, and whitespace, with practical examples and live styling that demonstrate layout control.

Master semantic elements in HTML5, including header, nav, section, article, aside, figure, and figcaption, to create meaningful layouts and boost search engine ranking.

Learn to use semantic elements like header, main, aside, and footer to add meaning to HTML, replacing divs. See how CSS selectors target these tags and how renaming affects styling.

Discover how to structure content with section and article inside the main, using article for posts and sections for page parts, and add details with summary for expandable content.

Use semantic elements like nav and figure to structure the page, place a header menu, add figcaption with images, and improve accessibility and search engine understanding.

Explore the head element of an html document, including title, style, meta, link, script, and base. Learn how metadata, styles, and links support search engine optimization and proper rendering.

Define the title element in the head of an HTML5 document and see how its text appears in the browser, and distinguish it from the title attribute.

Add a high-contrast favicon to the browser tab by placing favicon.ico at the root and linking it with the correct image type, then refresh with Ctrl+F5.

Explore the meta element in the head, including charset, name, content, and http-equiv attributes. Learn how meta tags define keywords, descriptions, viewport, and refresh for search engine optimization and display.

The base element in the head defines the base URL for all relative links on a page, affecting the href and src attributes and the target behavior.

Continue your HTML5 and CSS3 journey by exploring advanced topics, including working with forms, designing beautiful forms, and adding multimedia with audio and video.