Skip to Content

Syllabus
Roadmaps
Flashcards
Cheatsheets

⁰
⁰
Sign in
Meet Advisor

⁰
⁰

Sign in
Meet Advisor

CSS Checklist

CSS Checklist

24 September 2026 by

Veer

| No comments yet

Start writing here...

CSS CHECKLIST

Add as preferred on Google

CSS Basics
- CSS Introduction: What is CSS, Why use CSS, CSS Syntax Overview, Selector
  30 minutes
- CSS Syntax: Declaration Block, Properties and Values, Simple Selectors
  45 minutes
- CSS Selectors: Combinator Selectors, Pseudo-class Selectors, Attribute Selectors
  1.5 hours
- CSS How To: External Style Sheet, Internal Style Sheet, Inline Styles
  30 minutes
- CSS Comments: Syntax and Usage, Single-line Comments, Multi-line Comments
  15 minutes
- CSS Errors: Syntax Errors, Invalid Property Values, Debugging Tools & Inspector
  45 minutes
- CSS Colors: Color Names & Hex Codes, RGB and RGBA Values, HSL and HSLA Values
  1 hour
- CSS Backgrounds: Background Color & Image, Background Repeat & Position, Background Attachment & Size
  1 hour
- CSS Borders: Border Style, Width & Color, Border Sides, Border Radius
  45 minutes
- CSS Margins: Margin Side Properties, Margin Auto & Centering, Margin Collapse
  45 minutes
- CSS Padding: Padding Side Properties, Padding Shorthand, Padding and Element Size
  45 minutes
- CSS Height / Width: Height and Width Values, Max-width and Min-width, Max-height and Min-height
  45 minutes
- CSS Box Model: Content Area, Padding and Border, Margin and Box-Sizing
  1.5 hours
- CSS Outline: Outline Style, Width & Color, Outline Offset, Outline vs Border
  30 minutes
- CSS Text: Text Alignment & Direction, Text Decoration & Transformation, Text Spacing & Shadow
  1 hour
- CSS Fonts: Font Family & Web Safe Fonts, Font Size & Weight, Font Style & Google Fonts
  45 minutes
- CSS Icons: Font Awesome Icons, Bootstrap Icons, Google Material Icons
  45 minutes
- CSS Links: Link States (:hover, :visited, :active), Styling Links as Buttons, Text Decoration on Links
  45 minutes
- CSS Lists: List Item Markers, List Image Markers, List Position & Shorthand
  30 minutes
- CSS Tables: Table Borders & Border Collapse, Table Alignment & Padding, Responsive & Striped Tables
  1 hour
- CSS Display: display: block, display: inline, display: inline-block, display: none
  1.5 hours
CSS Layout & Selectors
- CSS Max-width: width vs max-width, Responsive design benefits, Center aligning with margin auto
  30 minutes
- CSS Position: static, relative, fixed, absolute, sticky
  1 hour
- CSS Position Offsets: top property, right property, bottom property, left property
  30 minutes
- CSS Z-index: Stacking order, Z-index values, Overlapping elements
  30 minutes
- CSS Overflow: overflow: visible, overflow: hidden, overflow: scroll, overflow: auto
  30 minutes
- CSS Float: float: left/right, clear property, Clearfix hack
  45 minutes
- CSS Inline-block: inline vs inline-block, Layout creation, Removing spacing gaps
  30 minutes
- CSS Align: Text alignment, Center elements with margin, Vertical alignment
  45 minutes
- CSS Combinators: Descendant selector, Child selector, Adjacent sibling selector, General sibling selector
  45 minutes
- CSS Pseudo-classes: Link/state pseudo-classes, Structural pseudo-classes, Form pseudo-classes
  1 hour
- CSS Pseudo-elements: ::before and after, ::first-letter and first-line, ::selection
  45 minutes
- CSS Opacity: Opacity property (0.0-1.0), Image transparency, RGBA color values
  30 minutes
- CSS Navigation Bars: Vertical navigation bar, Horizontal navigation bar, Active/current link styling, Responsive navigation menu
  1.5 hours
- CSS Dropdowns: Basic dropdown menu, Hoverable dropdown, Dropdown content alignment
  1 hour
- CSS Image Gallery: Grid/Flexbox Gallery Layout, Responsive Image Styling, Image Hover & Modal Effects
  1.5 hours
- CSS Image Sprites: Image Sprite Concept, background-image & background-position, Hover States with Sprites
  45 minutes
- CSS Attribute Selectors: Basic Attribute Selectors ([attr], [attr=val]), Substring Matching ([attr^=val], [attr\$=val], [attr*=val]), Case-Insensitive Matching ([attr=val i])
  30 minutes
- CSS Forms: Input, Select, & Textarea Styling, Custom Checkboxes & Radio Buttons, Focus States & Validation Styling
  1.5 hours
- CSS Counters: counter-reset & counter-increment, Printing Counters with content: counter(), Nested Counters with counters()
  30 minutes
- CSS Units: Absolute Units (px, pt, cm), Relative Units (em, rem, %, vh, vw), Choosing the Right CSS Unit
  45 minutes
- CSS Inheritance: Inherited vs Non-Inherited Properties, Controlling Inheritance (inherit, initial), The unset and revert Keywords
  45 minutes
CSS Advanced Styling
- CSS Specificity: Specificity Hierarchy & Point System, Inline Styles vs IDs vs Classes vs Elements, Calculating Specificity Scores
  1 hour
- CSS Important: How !important Works, Overriding Specificity with !important, Best Practices & When to Avoid
  20 minutes
- CSS Math Functions: calc() Function, min() and max() Functions, clamp() Function
  45 minutes
- CSS Optimization: Minification & File Compression, Removing Unused CSS, Efficient Selectors & Critical CSS
  1 hour
- CSS Accessibility: Accessible Focus States (:focus-visible), High Contrast & Colors, Screen Reader Classes & prefers-reduced-motion
  1 hour
- CSS Website Layout: Header, Navigation, & Sidebar, Responsive Multi-Column Structures, Sticky & Fixed Layout Elements
  2 hours
- CSS Rounded Corners: The border-radius Property, Corner-Specific Values, Creating Circles and Ellipses, Percentage and Pixel Units
  45 minutes
- CSS Border Images: border-image-source, border-image-slice, border-image-width and outset, border-image-repeat
  1.5 hours
- CSS Backgrounds: background-color and background-image, background-repeat and background-position, background-size and background-attachment, Multiple Background Layers
  2 hours
- CSS Colors: Color Keywords and Hex Codes, RGB and RGBA Formats, HSL and HSLA Formats, Opacity and Transparency
  1 hour
- CSS Gradients: Linear Gradients, Radial Gradients, Conic Gradients, Repeating Gradients and Color Stops
  1.5 hours
- CSS Shadows: text-shadow Property, box-shadow Property, Offset, Blur, and Spread, Shadow Colors and Multiple Shadows
  1 hour
- CSS Text Effects: text-overflow and white-space, word-break and overflow-wrap, writing-mode, text-stroke and text-fill-color
  1 hour
- CSS Custom Fonts: @font-face Rule, Font Formats (WOFF, WOFF2, TTF), font-display Property, Google Fonts and Web Fonts
  1 hour
- CSS 2D Transforms: translate() and rotate(), scale() and skew(), matrix() Function, transform-origin Property
  1 hour
- CSS 3D Transforms: rotateX(), rotateY(), and rotateZ(), translate3d() and scale3d(), perspective and perspective-origin, backface-visibility Property
  1.5 hours
- CSS Transitions: transition-property and transition-duration, transition-timing-function, transition-delay, Shorthand transition Property
  1 hour
- CSS Animations: @keyframes Rule, animation-name and animation-duration, animation-iteration-count and animation-direction, animation-fill-mode and animation-play-state
  2 hours
- CSS Tooltips: Creating Tooltip Structure, Positioning Tooltips, Tooltip Arrows using Pseudo-elements, Fade-in Effects with Transitions
  45 minutes
CSS Images & Properties
- CSS Image Styling: Responsive Images, Rounded and Circular Images, Image Borders and Shadows, Overlay Effects and Hover Styles
  1 hour
- CSS Image Modal: Modal Layout and Container, Displaying Full-Size Image, Close Button and Backdrop, Open and Close Animations
  1.5 hours
- CSS Image Centering: Centering with margin: auto, Centering with Flexbox, Centering with CSS Grid., Absolute Positioning and Transform
  45 minutes
- CSS Image Filters: filter Property Overview, blur(), brightness(), and contrast(), grayscale(), sepia(), and invert(), drop-shadow() Function
  45 minutes
- CSS Image Shapes: border-radius Shapes, clip-path Property, shape-outside Property, Image Masks
  1 hour
- CSS object-fit: fill and contain Values, cover Value, scale-down and none Values, Aspect Ratio Maintenance
  30 minutes
- CSS object-position: Default Positioning, Keyword Values (center, top, right), Length and Percentage Offsets, Combining object-fit and object-position
  30 minutes
- CSS Masking: mask-image Property, mask-mode and mask-repeat, Luminance vs Alpha Masks, Clipping vs Masking
  1.5 hours
- CSS Buttons: Button Styling Basics, Hover, Focus, and Active States, Rounded and Borderless Buttons, Disabled and Loading States
  1.5 hours
- CSS Pagination: Basic Pagination Layout, Active and Hoverable Links, Bordered and Rounded Pagination, Responsive Pagination Alignment
  1.5 hours
- CSS Multiple Columns: column-count and column-width, column-gap and column-rule, Controlling Column Breaks, Spanning Columns with column-span
  2 hours
- CSS User Interface: The resize Property, outline-offset and Custom Outlines, Accent Color and appearance, User Feedback and Cursor Styling
  1 hour
- CSS Variables: Custom Property Declaration, Using the var() Function, Scoping and Inheritance, Setting Fallback Values
  2.5 hours
- CSS @property: Syntax and Property Declaration, The syntax Descriptor, Set inherits and initial-value, Animating Custom Properties
  2 hours
- CSS Box Sizing: The Content-Box Value, The Border-Box Value, Calculating Total Width and Height, Universal Box-Sizing Reset
  1 hour
- CSS Functions: Math Functions (calc, min, max, clamp), Color Functions (rgb, hsl), Image Functions (linear-gradient, url), Custom Property Functions (var)
  2.5 hours
- CSS Media Queries: Media Types and Features, Responsive Breakpoints, Logical Operators in Media Queries, Viewport Sizing and Orientation
  2.5 hours
CSS Flexbox, Grid & RWD
- Flexbox Intro: What is Flexbox, Advantages of Using Flexbox, Enabling Display Flex
  15 minutes
- Flex Container: flex-direction and flex-wrap, justify-content and align-items, align-content and gap
  30 minutes
- Flex Items: flex-grow, flex-shrink, and flex-basis, order property, align-self property
  30 minutes
- Flex Responsive: Responsive Grids with Flex Wrap, Combining Flexbox with Media Queries, Flexible Navigation Bars
  45 minutes
- Grid Intro: What is CSS Grid, Grid Terminology, Grid vs Flexbox
  45 minutes
- Grid Container: grid-template-columns & rows, grid-template-areas, gap properties, justify-items & align-items
  2 hours
- Grid Items: grid-column & grid-row, grid-area, justify-self & align-self
  1.5 hours
- Grid 12-column Layout: 12-Column Grid Setup, fr Unit & repeat() Function, Column Spanning & Responsive Layouts
  2 hours
- CSS @supports: @supports Syntax & Feature Queries, Logical Operators (and, or, not), Progressive Enhancement & Fallbacks
  1 hour
- RWD Intro: What is Responsive Web Design, Benefits of Responsive Web Design, Core Principles of RWD
  45 minutes
- RWD Viewport: What is the Viewport, Setting the Viewport Meta Tag, Viewport Sizing Units (vw, vh, vmin, vmax)
  1 hour
- RWD Grid View: Introduction to CSS Grid, Grid Columns, Rows, and Tracks, Responsive Grids with minmax() and auto-fit
  2.5 hours
- RWD Media Queries: Media Query Syntax and Types, Choosing Responsive Breakpoints, Mobile-First vs. Desktop-First Design
  2 hours
- RWD Images: Scaling Images with max-width and height auto, Responsive HTML Images using picture and srcset, Controlling Image Aspect Ratio and object-fit
  1.5 hours
- RWD Videos: Fluid Videos with max-width: 100%, Maintaining Video Aspect Ratio, Responsive Video Containers
  1 hour
- RWD Frameworks: Introduction to RWD Frameworks, Popular CSS Frameworks (Bootstrap, Tailwind CSS, Foundation), Responsive Grid Systems in Frameworks, Utilizing Responsive Utility Classes and Components
  2.5 hours
- RWD Templates: Responsive Layout Patterns, Free & Premium RWD Templates, Customizing RWD Templates
  1.5 hours

Progress Dashboard

Pending:

Completed:

Total Tasks:

in Syllabus

Sign in to leave a comment

Read Next

JavaScript Checklist

Likheshwar Prasad Kewat

An #introvert building ‘NevEmpire’. I'm not just in the business of Tech, Design, or marketing. I'm in the business of transforming ideas into extraordinary creations.

#Founder #consultant #author