CSS & Bootstrap – 8 Week Syllabus
Week 1: CSS Foundations & Visual Thinking
- CSS Syntax & Selectors
- Colors, Backgrounds, Borders
- Typography (Fonts, Google Fonts, Text effects)
- Box Model (margin, padding, border, content)
- Mini Task: Style a “Profile Card”
Week 2: Layout Mastery with CSS
- Display (inline, block, inline-block, flex)
- Positioning (relative, absolute, fixed, sticky)
- Float vs Flexbox vs Grid
- Z-index & layering tricks
- Creative Lab: Build a 3-column layout using Flexbox & Grid
Week 3: Transitions, Animations & Interactions
- CSS Transitions & Hover Effects
- CSS Animations (keyframes, transforms)
- Pseudo-classes & Pseudo-elements (::before, ::after)
- CSS Variables & Custom Properties
- Lab: Create a “Landing Page Banner” with smooth animation
Week 4: Responsive Design with CSS
- Media Queries & Breakpoints
- Mobile-first Design Approach
- Fluid typography & responsive images
- CSS Units (em, rem, vw, vh)
- Workshop: Recreate a simple responsive portfolio
Week 5: Introduction to Bootstrap
- Why Bootstrap? Advantages & Limitations
- Bootstrap Grid System & Containers
- Breakpoints & Responsive Layouts
- Basic Components (Buttons, Navbar, Alerts, Cards)
- Task: Build a responsive Navbar & Hero Section
Week 6: Advanced Bootstrap Components
- Forms & Input Styling
- Modals, Carousels, Collapse, Accordions
- Utility Classes (spacing, sizing, alignment)
- Icons & Integration with Font Awesome
- Workshop: Multi-section website (Header + Services + Testimonials)
Week 7: Customization & Real-world UI
- Overriding Bootstrap styles with CSS
- Theme Customization & Bootstrap Variables
- Bootstrap 5 Utilities (flex, grid, spacing, shadow, borders)
- Lab: “E-commerce Product Card Grid” with filters
Week 8: Capstone Project & Performance
- Mini Project: Complete Responsive Website (Portfolio, Blog, or E-commerce landing page)
- CSS & Bootstrap Best Practices
- Optimizing CSS for performance
- Debugging layouts & browser compatibility checks
- Final Demo + Feedback
