Mastering Web Design: HTML, CSS & Generative AI

Master the structure of an html document, including doctype, html, head with meta charset and description, title, and body with h1, and set up Visual Studio Code with live server.

Explore the basics of html by identifying elements, tags, and attributes, and see how opening and closing tags, inline and block types, and common attributes shape web pages.

Master text formatting and hyperlinks in HTML by using bold, strong, em, break, and superscript tags, and create accessible links that open in new tabs.

Explore inline and block-level HTML elements, from p and span to abbreviation (abbr), input and label, and how display properties shape layout across sections, divs, tables, and videos.

Learn practical HTML basics by creating multi-page sites with index, home, contact, and privacy pages, practice text formatting and linking with anchor tags, navigation bars, and simple routing concepts.

Explore creating lists and tables in HTML, including unordered and ordered lists, basic table structure with header and body cells, and simple CSS styling for borders and layout.

Explore how HTML forms collect user data through input fields, labels, and a submit button, and learn how form attributes and get and post methods connect to a database.

Master form creation with the form, input, textarea, and button tags, learning label usage, input types (text, password, email, file), radios, checkboxes, and submission via get or post.

Explore building basic user input forms with name, email, phone, and message fields, implement input types, text area, and email validation, add placeholders and styling, and handle form errors.

Master how css enhances html using internal, external, and inline styles to color text, adjust backgrounds, borders, margins, and padding, with hello world and bootstrap examples.

Explore inline, internal, and external CSS, using element, class, and id selectors in a linked style.css to see how styles are applied across HTML.

Explore css syntax and selectors, including universal, element, class, id, attribute, descendant, and child selectors, and apply practical styling to html elements.

Explore CSS typography by adjusting font size with rem units, applying color using hex, rgb, rgba, and hsl, and selecting font families with sensible fallbacks across devices.

Explore Google fonts and custom fonts, and learn to integrate them into html and css, including hosting options, embedding code, and using font families across projects.

Explore how to choose color schemes and background colors to optimize user experience, using HTML, CSS, RGB values, and AI-powered palette tools to generate and apply dark and light themes.

Explore how to apply background colors and images in css, including gradients, gradient directions, and responsive sizing. Learn to center content with flex and use background properties for versatile visuals.

Master layout and positioning in css by learning how to fix background images, control background properties, and manage text and image flow with effects like object-fit, flexbox, and grid.

Master the CSS box model including content, padding, border, and margin, and learn how each layer sets size, spacing, and style with top, right, bottom, and left values.

Explore how relative, absolute, and fixed positioning in CSS place elements using top, left, and percentages, and leverage sticky behavior to maintain layout during scroll.

See how websites adapt to laptops, desktops, mobiles, and tablets by testing viewport changes and breakpoints with a responsive check extension for device views like iPhone 12 Pro.

Learn to build a responsive HTML template with media queries that adapt colors, font sizes, and layout across breakpoints from small devices to desktops.

Design responsive layouts by building a navigation bar for sections such as students home, about, lessons, tutorials, resources, and contacts, using HTML, CSS, and JavaScript with ChatGPT prompts.

Explore a two-dimensional grid system that structures content with tracks and areas to create responsive layouts. Apply CSS properties like display, grid-template-columns, grid-gap, and media queries to develop adaptive designs.

Create responsive layouts with CSS grid and a grid system, generating HTML and CSS templates using ChatGPT. Explore how templates adapt across images and content.

Demonstrate applying CSS transitions and animations to a template to display a spinner loader on refresh, using classes like spinner and spinner two, with JavaScript as a fallback.

Explore the difference between CSS transitions and animations, and implement hover effects with color and background changes. Use keyframes to create spinner animations and infinite motion for engaging UI elements.

Create a login form with CSS transitions and animations, including a progress bar, gradient colors, and effects like bar filling, pulse, flashing, and shaking buttons, guided by AI prompts.

Explore how Sass enhances CSS with variables and mixins, and its inheritance; compare the original syntax with the Sass syntax using curly braces and semicolons in HTML templates.

Learn css development with tailwind and bootstrap, install via npm, and set up using the cli, cdn links, and framework guides for responsive, customizable styling.

Create a personal portfolio website using generative AI tools, build the HTML, CSS, and JavaScript files, apply fonts, colors, and responsive design with media queries.

Build an e-commerce product page using HTML and CSS, enhance with JavaScript for product options and AI-assisted customization, and explore responsive layouts and live previews.

Build an e-commerce page with HTML and CSS, extend with JavaScript and AI-assisted prompts, design responsive product cards, navigation, and image integration to enable user interactions like adding to cart.