Responsive Web Development With HTML5 & CSS3

Learn how HTML defines the structure of a web page, using tags, doctype, head, body, meta, and a first hello world example in Visual Studio Code.

Explore essential HTML tags, including p, pre, and comments, learn how block level elements affect line breaks, and practice headings h1–h6 and the air tag for horizontal rules.

Learn to format text in HTML using common tags such as strong, b, br, i, em, del, sub, sup, ins, and p for emphasis, line breaks, and basic styling.

Explore how elements define the structure and content of an HTML document, including opening and closing tags and self-closing tags, and how attributes modify them with name-value pairs.

Learn how the img tag inserts images with the required src attribute and an alt description, and verify loading and accessibility for users when images load or fail.

Learn how HTML links connect pages using the anchor tag and href to navigate between resources, with the title attribute providing tooltips and image links for clickable navigation.

Explore HTML lists, focusing on ordered and unordered lists, their li items, and how to control numbering and markers with type attributes and list style types.

Learn how HTML tables organize data with table, thead, tbody, tfoot, tr, and td, including headers and data cells. Illustrate borders and colspan and rowspan in practical, CSS-driven tables.

Create your first HTML table project, building a table with caption, thead, tbody, and tfoot, and populate it with sample data. Later, apply CSS styling to the same table.

Explore HTML forms and the form element, including input types such as text, email, checkbox, radio, and password, with attributes like name, id, placeholder, and required.

Build a two-part form project with HTML and CSS basics. Create labeled inputs, email, job role select, checkbox groups, radio buttons, a textarea, and a submit button.

Explore HTML5 semantic elements like header, nav, section, article, footer, and main to describe content precisely and build diverse, powerful web pages.

Explore how CSS, the Cascading Style Sheets language, enhances HTML by controlling color, size, and spacing, and compare inline, internal, and external styling methods while learning about CSS specificity.

Master css syntax by learning selectors, declarations, and properties; understand type, id, and class selectors, specificity, combinators, grouping, and pseudo selectors to craft precise styles.

Master CSS formatting to shape your page’s layout and appearance, covering font weight, font family, color, size, line height, decorations, shadows, and transforms.

Explore css background properties, including color, image, position, size, repeat, attachment, and the shorthand, with examples of rgb color values and formats such as jpeg, png, svg, and gif.

Explore the CSS box model, detailing content, padding, border, and margin, and learn how width, height, and pattern values shape layouts with pixels, percentages, and border radius practices.

Explore how the box sizing property affects width and height calculations by comparing content box and border box, including padding and margins, with practical HTML and CSS examples.

Explore CSS positioning in depth, comparing static, relative, absolute, fixed, and sticky methods, using offset properties and z-index to place elements relative to the document, containing block, or viewport.

Learn how the z-index controls the stacking order of positioned elements, using an absolute positioned green and blue box example; higher values place a box on top, default is zero.

Explore building and styling a responsive HTML table with CSS3, including linking style.css, resetting margins, centering the table, and using the nth-child selector for zebra stripes, borders, and shadows.

Apply media queries to create responsive designs by using the at media rule with width, height, and device features, including max-width, min-width, and the end keyword to set breakpoints.

Learn how CSS animations use keyframes and animation property to animate HTML elements with duration, delay, iteration count, and timing functions like ease and infinite, demonstrated by a pulsating circle.

Explore flexbox to build responsive layouts by defining a flex container and its flexible items, controlling direction, wrapping, and alignment with justify-content and align-items.

Create a responsive photo gallery with flexbox, wrapping images in a gallery container and using justify-content for spacing, built with HTML and CSS and external image links.

Learn the CSS grid fundamentals: define a grid container, create rows and columns, adjust gaps, use grid template and placement properties, and compare with flexbox.

Create a responsive news grid layout using CSS grid, styling a header and four news items with grid columns, rows, gaps, and spanning for emphasis.

Develop and style a form project part 2 with HTML and CSS, including resets, border-box sizing, a gradient background, centered layout using flexbox and grid, and focus and hover effects.

Learn how CSS variables, or custom properties, enable reuse of values with the var function across stylesheets. Define root-level variables with fallbacks to simplify maintenance and effortless updates.

Explore CSS units for responsive design, comparing absolute pixels with relative units like em and rem, and viewport units, to support accessible typography.