ProgramGuru

CSS

Learn CSS. See every change you make.

Start with selectors, color and the box model, then build responsive layouts, styled components and real projects.

Choose your starting point

New to CSS? Start with Foundations. You can switch anytime.

Foundations

Start learning →

No account or installation needed. Your progress stays on this device.

Mallikarjuna Mallisetty, author
About the author

Mallikarjuna Mallisetty

General programming

Mallikarjuna shares practical programming tutorials and foundational concepts designed to help developers learn by building and experimenting.

View LinkedIn profile ↗

Your learning path

All lessons

87 lessons362 visual CSS examples87 quiz questions

Your progress is saved on this device.

Estimated time includes reading, exploring code and answering quizzes. Learn at your own pace.

Getting Started with CSS

6 lessons · 43 min
  1. Introduction to CSS4visual CSS examples1quiz questions7minutes estimated learning time
  2. How CSS Works4visual CSS examples1quiz questions7minutes estimated learning time
  3. CSS Syntax and Rules4visual CSS examples1quiz questions7minutes estimated learning time
  4. Inline, Internal, and External CSS4visual CSS examples1quiz questions7minutes estimated learning time
  5. CSS Comments and Stylesheets4visual CSS examples1quiz questions7minutes estimated learning time
  6. Your First CSS Example4visual CSS examples1quiz questions8minutes estimated learning time

CSS Selectors and Cascade

8 lessons · 56 min
  1. Element, Class, and ID Selectors4visual CSS examples1quiz questions7minutes estimated learning time
  2. Universal and Grouping Selectors4visual CSS examples1quiz questions7minutes estimated learning time
  3. Descendant, Child, and Sibling Selectors4visual CSS examples1quiz questions7minutes estimated learning time
  4. Attribute Selectors4visual CSS examples1quiz questions7minutes estimated learning time
  5. CSS Pseudo-classes4visual CSS examples1quiz questions7minutes estimated learning time
  6. CSS Pseudo-elements4visual CSS examples1quiz questions7minutes estimated learning time
  7. CSS Cascade and Inheritance4visual CSS examples1quiz questions7minutes estimated learning time
  8. CSS Specificity and !important4visual CSS examples1quiz questions7minutes estimated learning time

CSS Colors, Backgrounds, and Units

7 lessons · 49 min
  1. CSS Colors (HEX, RGB, HSL)4visual CSS examples1quiz questions7minutes estimated learning time
  2. Background Colors and Images4visual CSS examples1quiz questions7minutes estimated learning time
  3. Background Size, Position, and Repeat4visual CSS examples1quiz questions7minutes estimated learning time
  4. CSS Gradients4visual CSS examples1quiz questions7minutes estimated learning time
  5. CSS Units (px, %, em, rem)4visual CSS examples1quiz questions7minutes estimated learning time
  6. Viewport Units (vw, vh, dvh)4visual CSS examples1quiz questions7minutes estimated learning time
  7. CSS Functions (calc(), min(), max(), clamp())4visual CSS examples1quiz questions7minutes estimated learning time

CSS Box Model and Visual Styling

8 lessons · 56 min
  1. Understanding the CSS Box Model4visual CSS examples1quiz questions7minutes estimated learning time
  2. Width, Height, and Min/Max Dimensions4visual CSS examples1quiz questions7minutes estimated learning time
  3. CSS Margin and Padding4visual CSS examples1quiz questions7minutes estimated learning time
  4. CSS Borders and Border Radius4visual CSS examples1quiz questions7minutes estimated learning time
  5. CSS Box Sizing4visual CSS examples1quiz questions7minutes estimated learning time
  6. CSS Box Shadow and Outline4visual CSS examples1quiz questions7minutes estimated learning time
  7. CSS Overflow and Visibility4visual CSS examples1quiz questions7minutes estimated learning time
  8. CSS Opacity and Filters4visual CSS examples1quiz questions7minutes estimated learning time

CSS Text, Fonts, and Elements

7 lessons · 55 min
  1. CSS Font Family, Size, and Weight4visual CSS examples1quiz questions8minutes estimated learning time
  2. CSS Text Alignment and Decoration4visual CSS examples1quiz questions7minutes estimated learning time
  3. Line Height, Spacing, and Text Transformation4visual CSS examples1quiz questions7minutes estimated learning time
  4. Text Wrapping, Overflow, and Ellipsis4visual CSS examples1quiz questions8minutes estimated learning time
  5. Web Fonts and @font-face5visual CSS examples1quiz questions9minutes estimated learning time
  6. Styling Links, Lists, and Images4visual CSS examples1quiz questions8minutes estimated learning time
  7. Styling Buttons and Form Elements4visual CSS examples1quiz questions8minutes estimated learning time

CSS Display and Positioning

7 lessons · 56 min
  1. CSS Display Property4visual CSS examples1quiz questions7minutes estimated learning time
  2. Block, Inline, and Inline-block Elements4visual CSS examples1quiz questions8minutes estimated learning time
  3. CSS Position: Relative and Absolute4visual CSS examples1quiz questions8minutes estimated learning time
  4. CSS Position: Fixed and Sticky5visual CSS examples1quiz questions9minutes estimated learning time
  5. CSS Z-index and Stacking4visual CSS examples1quiz questions8minutes estimated learning time
  6. CSS Float and Clear4visual CSS examples1quiz questions8minutes estimated learning time
  7. Centering Elements with CSS4visual CSS examples1quiz questions8minutes estimated learning time

CSS Flexbox

6 lessons · 46 min
  1. Introduction to Flexbox4visual CSS examples1quiz questions8minutes estimated learning time
  2. Flex Direction and Wrapping4visual CSS examples1quiz questions7minutes estimated learning time
  3. Justify Content and Align Items4visual CSS examples1quiz questions8minutes estimated learning time
  4. Flex Grow, Shrink, and Basis4visual CSS examples1quiz questions8minutes estimated learning time
  5. Flex Gap, Order, and Alignment4visual CSS examples1quiz questions7minutes estimated learning time
  6. Building Layouts with Flexbox4visual CSS examples1quiz questions8minutes estimated learning time

CSS Grid

6 lessons · 47 min
  1. Introduction to CSS Grid4visual CSS examples1quiz questions8minutes estimated learning time
  2. Grid Rows, Columns, and fr Units4visual CSS examples1quiz questions8minutes estimated learning time
  3. CSS Grid Gap and Alignment4visual CSS examples1quiz questions8minutes estimated learning time
  4. Grid Item Placement and Grid Areas4visual CSS examples1quiz questions8minutes estimated learning time
  5. CSS repeat(), minmax(), and Auto-fit4visual CSS examples1quiz questions7minutes estimated learning time
  6. Building Responsive Grid Layouts4visual CSS examples1quiz questions8minutes estimated learning time

Responsive Web Design

7 lessons · 51 min
  1. Introduction to Responsive Design4visual CSS examples1quiz questions8minutes estimated learning time
  2. Viewport and Mobile-first Design4visual CSS examples1quiz questions7minutes estimated learning time
  3. CSS Media Queries and Breakpoints4visual CSS examples1quiz questions7minutes estimated learning time
  4. Fluid Widths and Responsive Typography4visual CSS examples1quiz questions7minutes estimated learning time
  5. Responsive Images4visual CSS examples1quiz questions7minutes estimated learning time
  6. Responsive Flexbox and Grid4visual CSS examples1quiz questions7minutes estimated learning time
  7. CSS Container Queries4visual CSS examples1quiz questions8minutes estimated learning time

CSS Animations and Best Practices

7 lessons · 49 min
  1. CSS Variables (Custom Properties)4visual CSS examples1quiz questions7minutes estimated learning time
  2. CSS Nesting and Stylesheet Organization4visual CSS examples1quiz questions7minutes estimated learning time
  3. CSS Transforms4visual CSS examples1quiz questions7minutes estimated learning time
  4. CSS Transitions and Hover Effects4visual CSS examples1quiz questions7minutes estimated learning time
  5. CSS Animations and Keyframes4visual CSS examples1quiz questions7minutes estimated learning time
  6. CSS Accessibility and Reduced Motion4visual CSS examples1quiz questions7minutes estimated learning time
  7. CSS Debugging and Browser Compatibility4visual CSS examples1quiz questions7minutes estimated learning time

CSS Styling Examples

12 lessons · 108 min
  1. CSS Button Styling and Hover Effects4visual CSS examples1quiz questions7minutes estimated learning time
  2. CSS Navigation Bar Examples4visual CSS examples1quiz questions7minutes estimated learning time
  3. CSS Dropdown Menu Examples4visual CSS examples1quiz questions8minutes estimated learning time
  4. CSS Form and Input Styling4visual CSS examples1quiz questions8minutes estimated learning time
  5. CSS Table Styling16visual CSS examples1quiz questions24minutes estimated learning time
  6. CSS Card Designs4visual CSS examples1quiz questions8minutes estimated learning time
  7. CSS Image Gallery and Hover Effects4visual CSS examples1quiz questions8minutes estimated learning time
  8. CSS Badges and Tooltips4visual CSS examples1quiz questions8minutes estimated learning time
  9. CSS Loading Spinners and Progress Bars4visual CSS examples1quiz questions7minutes estimated learning time
  10. CSS Pricing Table Examples4visual CSS examples1quiz questions8minutes estimated learning time
  11. CSS Flexbox Layout Examples4visual CSS examples1quiz questions7minutes estimated learning time
  12. CSS Grid and Responsive Layout Examples4visual CSS examples1quiz questions8minutes estimated learning time

CSS Projects

6 lessons · 48 min
  1. Personal Profile Page4visual CSS examples1quiz questions8minutes estimated learning time
  2. Responsive Navigation Menu4visual CSS examples1quiz questions8minutes estimated learning time
  3. Login and Registration Page4visual CSS examples1quiz questions8minutes estimated learning time
  4. Responsive Product Landing Page4visual CSS examples1quiz questions8minutes estimated learning time
  5. Blog Page Layout4visual CSS examples1quiz questions8minutes estimated learning time
  6. Admin Dashboard Layout4visual CSS examples1quiz questions8minutes estimated learning time