Scribd
Upload
4 views1 page

CSS Full Course Lessons

The document outlines a comprehensive 25-day course on CSS, covering essential topics such as selectors, box model, flexbox, grid, animations, and responsive design. Each day focuses on a specific aspect of CSS, providing a structured approach to learning. The course culminates in a project where learners apply all concepts to build a small website.

Uploaded by

uthmanayaba
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views1 page

CSS Full Course Lessons

The document outlines a comprehensive 25-day course on CSS, covering essential topics such as selectors, box model, flexbox, grid, animations, and responsive design. Each day focuses on a specific aspect of CSS, providing a structured approach to learning. The course culminates in a project where learners apply all concepts to build a small website.

Uploaded by

uthmanayaba
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS Full Course – Lesson-by-Lesson Breakdown

Day 1: Introduction to CSS – What CSS is, how to add CSS (inline, internal, external).

Day 2: CSS Selectors – Element, ID, Class, Universal, Grouping, Attribute selectors.

Day 3: Colors & Text Styling – color, background-color, font-family, font-size, font-weight, text-align.

Day 4: Box Model – margin, border, padding, width, height, box-sizing.

Day 5: CSS Units – px, %, em, rem, vh, vw.

Day 6: Backgrounds – background-color, background-image, background-size, background-repeat,


background-position.

Day 7: Borders & Shadows – border, border-radius, box-shadow, text-shadow.

Day 8: Display & Visibility – display (block, inline, inline-block, none), visibility.

Day 9: Positioning – static, relative, absolute, fixed, sticky, z-index.

Day 10: Flexbox Basics – display: flex, justify-content, align-items, flex-wrap.

Day 11: Flexbox Advanced – flex-grow, flex-shrink, flex-basis, align-content.

Day 12: Grid Basics – display: grid, grid-template-columns, grid-template-rows, gap.

Day 13: Grid Advanced – grid-template-areas, justify-items, align-items, place-items.

Day 14: CSS Transitions – transition-property, transition-duration, transition-timing-function.

Day 15: CSS Animations – @keyframes, animation-name, animation-duration, iteration, direction.

Day 16: Transformations – rotate, scale, translate, skew.

Day 17: Responsive Design – media queries, relative units, mobile-first design.

Day 18: Pseudo-classes – :hover, :focus, :active, :nth-child().

Day 19: Pseudo-elements – ::before, ::after, ::first-letter, ::first-line.

Day 20: CSS Variables – var(), custom properties.

Day 21: CSS Functions – calc(), min(), max(), clamp().

Day 22: Advanced Effects – gradients, filters (blur, brightness), backdrop-filter.

Day 23: Typography – line-height, letter-spacing, word-spacing, text-transform.

Day 24: CSS Best Practices – shorthand, naming conventions, reusability.

Day 25: Project Practice – build a small website using all concepts.

You might also like