CSS

CSS is essential for styling web pages. This Skill Tree presents a systematic approach to learning CSS. Perfect for web development beginners, it offers a clear roadmap to understand selectors, layout, and responsive design. Hands-on, non-video courses and coding exercises in an interactive CSS playground ensure you develop practical skills in creating visually appealing and responsive websites.

28 Skills|1 Course|49 Projects

Quick Start with CSS

Quick Start with CSS

Quick Start with CSS

Beginner

CSS

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.

0%

100 Labs

Start with Pet's House

Your First CSS Lab

CSS Basics and Selectors

CSS Box Model and Margins

Responsive Pet's House Website with Flexbox

Pet Service Showcase with CSS Grid

Animations and Transitions

CSS Fundamentals

Reset All Styles

Box-Sizing Reset in CSS

System Font Stack

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