Fateh Chandra CSS Course Outline
Introduction to CSS:
o What is CSS?
o Inline, internal, and external CSS.
o Selectors and declaration blocks.
2. Basic Styling:
o Changing text colour, font, size, and style.
o Setting background colour and images.
o Styling borders, margins, and padding.
3. Box Model:
o Understanding the box model: content, padding, border, margin.
o Box-sizing property.
4. Layout:
o Display property: block, inline, inline-block.
o Positioning: static, relative, absolute, fixed.
o Floats and clear.
5. Selectors and Combinators:
o Type selectors, class selectors, ID selectors.
o Descendant, child, adjacent sibling, and general sibling
combinator
Advanced Topics in CSS
6. Advanced Selectors:
o Attribute selectors.
o Pseudo-classes and pseudo-elements.
o CSS combinators: :not(), :nth-child(), etc.
7. Flexbox:
o Introduction to Flexbox layout model.
o Flex container and flex items.
o Properties: justify-content, align-items, flex-grow, etc.
8. Grid Layout:
o Introduction to CSS Grid layout.
o Grid container and grid items.
o Properties: grid-template-columns, grid-template-rows, grid-
column, grid-row, etc.
9. Responsive Design:
o Media queries.
o Fluid layout techniques.
o Viewport meta tag.
Become an Expert in CSS
1. CSS Preprocessors:
o Introduction to CSS preprocessors (e.g., Sass, Less).
o Variables, mixins, nesting, inheritance.
2. CSS Architecture:
o BEM (Block Element Modifier) methodology.
o SMACSS (Scalable and Modular Architecture for CSS).
o OOCSS (Object-Oriented CSS).
3. Animations and Transitions:
o CSS transitions.
o CSS animations.
o Keyframes and animation properties.
4. CSS Frameworks:
o Bootstrap.
o Tailwind CSS
5. CSS Optimization:
o Minification.
o Concatenation.
o Browser prefixes.
6. CSS-in-JS:
o Introduction to CSS-in-JS libraries (e.g., styled components,
emotion).
o Benefits and drawbacks.
