Demo Web Site - Top Page

Chapter 1. AI-Powered HTML and CSS Coding Basics

Generative AI for Coding

Chapter 2. Review and Improve Your HTML and CSS Skills with AI

Embed and Style Images and Links in HTML & CSS with AI Prompt

Basic CSS Code for Standard Styling

Display Property CSS with AI Prompt

Styling Components with AI: Buttons, Cards, and More

Chapter 3. Enriching Web Content

Embed Video in HTML Code with AI

Embedding Google Map in HTML Code with AI Prompt

Inserting Icons in HTML Code with AI Prompt

CSS Filter Blur, Drop-Shadow, Brightness, Grayscale, and More

Box-Shadow vs. Drop-Shadow: How They Are Different?

Create Gradient Graphic: AI as CSS Gradient Generator

Blend Modes Explained: Creating Blend Mode CSS Code with AI

Create Custom Shapes with Clip Path CSS Generator

Chapter 4. Advanced CSS Techniques

Attribute Selector in CSS

Pseudo Elements in CSS

Pseudo Class in CSS

nth-child

Position Property in CSS: Position Absolute and Relative

Position Sticky vs Fixed

Translate() Function in CSS: Repositioning HTML Elements

Rotate() Function in CSS: Rotating HTML Elements

Scale() Function in CSS: Adjusting Scale of HTML Elements

Z-Index to Manage Layers in CSS

CSS Overflow and Creating Horizontal Scroll

Chapter 5. Building Responsive Website

CSS Media Queries and Breakpoints

Responsive Design Example: Two Column Layout

Responsive Design Example: CSS Display Grid

CSS Calc() Function for Responsive Design

Chapter 6. Dynamic Website Design Using CSS

Transition Property in CSS

Keyframes and Animation Property in CSS

Mouse Over Tooltip CSS

CSS Scroll-Behavior

CSS Scroll-Snap

Chapter 7. Optimize CSS Coding

CSS Variable: Creating CSS Custom Properties

Dark Mode Design: Creating Dark Color Palette in CSS

What Is SCSS and How To Use It?