CSS

Description

Course Title: CSS

Duration: 8 Weeks

🎨 CSS Course Syllabus
🟢 Module 1: Introduction to CSS
What is CSS?
Types of CSS:
Inline CSS
Internal CSS
External CSS
Basic syntax and selectors
Setting up environment (browser + editor like Visual Studio Code)
🟢 Module 2: CSS Selectors
Element selector
Class selector (.class)
ID selector (#id)
Group selector
Universal selector (*)
Attribute selectors
🟢 Module 3: Colors & Backgrounds
Color formats (name, HEX, RGB)
Background color
Background image
Background properties (repeat, position, size)
🟢 Module 4: Typography
Font family
Font size
Font weight
Line height
Text alignment
Text decoration
🟢 Module 5: Box Model
Content, padding, border, margin
Box sizing
Border styles
Margin collapsing
🟢 Module 6: Layout Basics
Display property (block, inline, inline-block)
Visibility vs display
Overflow handling
🟢 Module 7: Positioning
Static, relative, absolute, fixed, sticky
Z-index
Positioning elements on the page
🟢 Module 8: Flexbox
Flex container & flex items
flex-direction
justify-content
align-items
flex-wrap
Building layouts with Flexbox
🟢 Module 9: CSS Grid
Grid container
Rows & columns
Grid areas
Gap spacing
Responsive layouts using Grid
🟢 Module 10: Responsive Design
Media queries
Breakpoints
Mobile-first design
Viewport units
🟢 Module 11: Units & Measurements
px, %, em, rem
vw, vh
When to use which unit
🟢 Module 12: Transitions & Animations
CSS transitions
Keyframes
Animation properties
Timing functions
🟢 Module 13: Pseudo-classes & Pseudo-elements
:hover, :focus, :active
::before, ::after
Styling based on state
🟢 Module 14: CSS Variables (Custom Properties)
Declaring variables
Using variables
Benefits of CSS variables
🟢 Module 15: Advanced Styling
Shadows (box-shadow, text-shadow)
Gradients
Filters
🟢 Module 16: CSS Frameworks (Intro)
Overview of frameworks like Bootstrap
Utility-first CSS basics
🟢 Module 17: Best Practices
Writing clean CSS
Naming conventions (BEM basics)
Avoiding redundancy
Using tools like Chrome DevTools
🟢 Module 18: Projects
Responsive webpage
Landing page design
Portfolio styling
Navigation bar & layout design