CSS Styling & Layouts – Syllabus

CSS Styling & Layouts – Syllabus

Chapter 1: Introduction to CSS
What is CSS, CSS Syntax, Inline Internal External CSS, Selectors and Declarations, CSS Comments, How Browsers Render CSS, CSS Priority Rules
Chapter 2: CSS Selectors
Element Selector, Class Selector, ID Selector, Universal Selector, Grouped Selectors, Attribute Selectors, Pseudo-classes, Pseudo-elements
Chapter 3: Colors, Backgrounds & Borders
Color Formats (HEX RGB HSL), Background Images, Gradients, Border Styles, Border Radius, Box Shadows, Outline vs Border
Chapter 4: CSS Text & Fonts
Font Family Importing Fonts, Font Weight, Line Height, Word Spacing, Text Alignment, Text Decoration, Responsive Typography, Google Fonts
Chapter 5: Box Model & Display Types
Content Padding Border Margin, Box-sizing, Block Inline Inline-block elements, Overflow Control, Visibility vs Display
Chapter 6: CSS Units & Measurements
px em rem %, vh vw, calc() Function, Responsive Units, Best Practices for Typography Scaling
Chapter 7: Flexbox Layout
Flex Container, Flex Direction, Justify Content, Align Items, Flex Wrap, Order Property, Align Content, Flex Grow Shrink Basis, Creating Responsive Components
Chapter 8: CSS Grid Layout
Grid Template Rows Columns, Grid Gap, Grid Areas, Placing Items, Nested Grids, Responsive Grids, Auto-fit and Auto-fill Techniques
Chapter 9: Positioning & Layout Techniques
Static Relative Absolute Fixed Sticky Positioning, Stacking Context, z-index, Creating Overlays, Float & Clear, Clearfix Method
Chapter 10: CSS Lists & Tables
Custom List Styles, Icons as Bullet Points, Table Borders and Spacing, Striped Tables, Responsive Table Patterns
Chapter 11: CSS Forms Styling
Styling Inputs Buttons Select Dropdowns, Placeholder Styling, Custom Checkboxes & Radio Buttons, Form Layouts, Error & Success Styles
Chapter 12: CSS Transitions & Animations
Transition Timing Functions, CSS Transformations, Keyframe Animations, Hover Effects, Animation Delays & Durations, Scroll Animations
Chapter 13: CSS Effects & Components
Shadows & Glows, Image Filters, Clip-path Designs, Styled Cards, Tooltip Design, Badges, Buttons, Navigation Bars, Breadcrumbs
Chapter 14: Responsive Web Design (RWD)
Mobile First Design, Grid & Flexbox Responsive Patterns, Breakpoints, Responsive Images, Responsive Navbar, Orientation Queries
Chapter 15: CSS Variables & Advanced Features
Custom Properties (--var), Variable Scope, Using calc() with Variables, Dark Mode Design, Theming with CSS Variables
Chapter 16: Advanced CSS Concepts
Specificity & Cascade Advanced Rules, Inheritance, Vendor Prefixes, CSS Resets & Normalize.css, Layered Stylesheets, Using !important Properly
Chapter 17: Advanced Selectors & Patterns
Advanced Pseudo-class Selectors, Attribute Value Selectors, :nth-child Patterns, Selectors for UI Components, State-based Styling
Chapter 18: CSS Architecture & Methodologies
BEM (Block Element Modifier), SMACSS, Atomic CSS, Component-based Styling, Scalable Stylesheet Structure, Naming Conventions
Chapter 19: CSS Performance Optimization
Minification, Reducing Reflows/Repaints, Optimizing Animations, Avoiding Heavy Selectors, Critical CSS, Lazy Loading CSS
Chapter 20: CSS Frameworks & Preprocessors
Bootstrap Tailwind Foundation Overview, When to Use Frameworks, Customizing Frameworks, Introduction to SASS SCSS, Variables Mixins Nesting Partials
Chapter 21: CSS Projects & UI Elements
Build Hero Sections, Navigation Bars, Footers, Pricing Table, Cards Grid, Testimonial Designs, Image Gallery, Contact Form UI
Chapter 22: Final CSS Projects
Responsive Portfolio Website, Modern Landing Page, Multi-section Company Website, Dashboard UI, Fully Styled Blog Layout