In this course, you will try to understand the basics of CSS and how to use it to style your web pages. At the end of this course, you will be able to create a simple web page with CSS.
100 labs
Start with Pet's House
CSS Fundamentals
Layout and Positioning
CSS Clearfix Technique
Responsive Flexbox Centering Techniques
Centered Grid Layout Mastery
Vertically and Horizontally Center Elements
Display Table Centering
Evenly Distributed Children
Creating Responsive Tiled Layouts
Fundamentals of CSS Styling
Responsive Container Aspect Ratio CSS
Constant Width to Height Ratio
Fit Image in Container
List with Sticky Section Headings
Responsive Layout with Sidebar
Accessible Offscreen Element Hiding
Fullscreen Element Styling with CSS
Text and Typography
Truncate Text with CSS Overflow
Trim Multiline Text
Stylized Quotation Marks
Crafting Etched Text Effects with CSS
Responsive Fluid Typography with CSS
Creating Gradient Text with CSS
Custom Text Selection
Stylish Drop Cap Technique
Truncate Multiline Text
Pretty Text Underline
Disable Content Selection with CSS
Nested List Counters with CSS
Visual Effects and Patterns
Beginner's Guide to CSS Fundamentals
CSS Styling Techniques for Web Development
Border with Top Triangle
Checkerboard Background Pattern
Stripes Background Pattern
Polka Dot Background Pattern
Zig Zag Background Pattern
Creating Shape Separators with CSS
Dynamic CSS Shadows Creation
Overflow Scroll Gradient
Hide Scroll Bars
Customizing Scrollbar Styles with CSS
Image Text Overlay
Zebra Striped List
Sibling Fade CSS Effect
CSS Fundamentals for Visually Appealing Web
Crafting Visually Appealing Web Layouts
Responsive Image Mosaic
Advanced Interactions and Animations
Create Interactive CSS Popout Menu
Horizontal Scroll Snap
Vertical Scroll Snap
Scroll Progress Bar
Enhancing Form Interactivity with CSS Focus-Within
Show Additional Content on Hover
Button Fill Animation
Button Grow Animation
Button Shrink Animation
Crafting Pulsing CSS Loader Animation
CSS Techniques for Visually Appealing Designs
Zoom in Zoom Out Animation
Button Border Animation
Hover Shadow Box Animation
Image Rotate on Hover
Smooth Transition of Dynamic Heights
Perspective Transform on Hover
CSS Fundamentals for Web Styling
Squiggle Link Hover Effect
Responsive Web Design with CSS
Staggered CSS Animation for List Elements
Create CSS Toggle Switch
Image Gallery with Vertical Scroll
Card with Image Cutout
Button Swing Animation
Create Rotating Card with CSS
Image Gallery with Horizontal Scroll
Hover Underline Animation
Menu on Image Hover
Navigation List Item Hover and Focus Effect
Custom Radio Button
Mouse Cursor Gradient Tracking
Creating Typewriter Effect with HTML CSS JavaScript
List with Floating Section Headings
Bouncing CSS Animation Loader
3D Rotating Cube
Image Overlay on Hover
Animated Social Sharing Buttons with CSS
Animated Checkbox Styling with CSS
Responsive Masonry Layout with CSS
Image with Text Overlay
Shake on Invalid Input
Fallback for Images That Fail to Load
Input with Prefix
Hide Empty Elements
Style Links with No Text
Explore Related Skill Trees
Web Development
Join Our Discord and Learn Together
Join Now
