Course Content
1. Introduction
Introduction to CSS
What is CSS, Why it is important, CSS vs HTML.
CSS Setup & Syntax
Inline, Internal, External CSS, and Syntax.
2. CSS Basics
CSS Selectors
Universal, Class, ID, Group, Attribute selectors.
CSS Colors & Backgrounds
Hex, RGB, HSL, Background images and gradients.
CSS Text & Fonts
Fonts, Alignments, Decoration, Spacing.
CSS Box Model
Margin, Padding, Border, Content, Box-sizing.
CSS Units & Measurement
px, %, em, rem, vh, vw units explained.
CSS Display & Visibility
Block, Inline, Inline-block, None, Visibility.
CSS Positioning
Static, Relative, Absolute, Fixed, Sticky.
3. CSS Layouts
CSS Layout – Flexbox
Master Flexbox container and items properties.
CSS Layout – Grid
CSS Grid layout, columns, rows, and areas.
CSS Images & Media
Object-fit, filters, responsive images.
CSS Links & Lists
Styling hyperlinks and lists.
CSS Tables
Table borders, spacing, alignment.
CSS Forms
Styling inputs, buttons, checkboxes.
4. Advanced CSS
CSS Pseudo-Classes & Elements
Hover, focus, before, after.
CSS Transitions
Smooth state changes and timing functions.
CSS Animations
Keyframes and infinite animations.
CSS Transformations
Rotate, Scale, Skew, Translate 2D/3D.
Responsive Web Design
Media queries, mobile-first design.
CSS Variables
Custom properties for dynamic theming.
CSS Advanced Selectors
:is(), :where(), :has(), calc().
CSS Performance
Minification, Critical CSS, Optimization.
5. Professional CSS
CSS Architecture
BEM, OOCSS, SMACSS methodologies.
CSS Preprocessors
Sass basics, nesting, mixins.
CSS Modern Features
Container queries, Subgrid, Logical properties.
CSS Debugging
Using DevTools to fix layout issues.
CSS Interview Questions
Top CSS questions for interviews.
CSS Project Examples
Real-world layout examples.
CSS Summary & Next Steps
Roadmap and what to learn next.
6. Bootstrap Framework
Introduction to Bootstrap
What is Bootstrap and why use it?
Bootstrap Setup
CDN, NPM, and folder structure.
Bootstrap Grid System
Containers, rows, columns, breakpoints.
Bootstrap Typography
Headings, colors, utilities.
Bootstrap Components
Buttons, Cards, Navbar, Modals.
Bootstrap Forms
Form controls, validation, input groups.
Advanced Bootstrap Layouts
Nested grids, auto-layout, flexbox combination.
Bootstrap JS Components
Modal, Tooltip, Carousel, Toasts.
Customizing Bootstrap
Overriding variables and themes.
Advanced Bootstrap Customization
Sass integration, themes, advanced overrides.
Advanced Components
Creating and extending custom components.
Finalizing Your Project
Optimization, documentation, and deployment.
Bootstrap Project Examples
Building real layouts with Bootstrap.