1
Introduction to CSS
Get started with CSS by understanding what it is, how it works with HTML, and the different ways to apply styles to your web pages.
Locked
Please enroll in this course to access the modules.
Learning objectives:
• • Understand what CSS is and why it's important
• • Learn the three types of CSS (Inline, Internal, External)
• • Master CSS syntax and structure
• • Use different selectors (element, class, id)
• • Link external CSS files with HTML
2
Colors, Text & Fonts
Learn how to style text, apply colors, and use fonts to make your content visually appealing and readable.
Locked
Please enroll in this course to access the modules.
Learning objectives:
• • Apply colors using different methods
• • Set background colors
• • Align text properly
• • Use different font families
• • Control font size and weight
• • Integrate Google Fonts
3
Box Model
Master the CSS box model to understand spacing, borders, and how elements are sized and positioned on the page.
Locked
Please enroll in this course to access the modules.
Learning objectives:
• • Understand the CSS box model
• • Use margin for outer spacing
• • Apply padding for inner spacing
• • Add borders to elements
• • Control width and height
• • Use box-sizing property
4
CSS Positioning
Learn different positioning methods to control where elements appear on the page and how they interact with other elements.
Locked
Please enroll in this course to access the modules.
Learning objectives:
• • Understand static positioning (default)
• • Use relative positioning
• • Master absolute positioning
• • Apply fixed positioning
• • Use sticky positioning
• • Control element stacking with z-index
5
Flexbox
Master Flexbox, a powerful layout system that makes it easy to create flexible and responsive layouts.
Locked
Please enroll in this course to access the modules.
Learning objectives:
• • Use display: flex
• • Control flex direction
• • Align items with justify-content
• • Align items with align-items
• • Use gap for spacing
• • Create common layouts using Flexbox
6
Responsive Design
Learn to create websites that look great on all devices using media queries and responsive design techniques.
Locked
Please enroll in this course to access the modules.
Learning objectives:
• • Use media queries effectively
• • Apply mobile-first design approach
• • Create responsive layouts
• • Make images responsive
• • Test on different screen sizes
7
Transitions & Effects
Add smooth animations and interactive effects to make your websites more engaging and professional.
Locked
Please enroll in this course to access the modules.
Learning objectives:
• • Create hover effects
• • Use CSS transitions
• • Apply transform properties
• • Create basic animations
• • Enhance user experience with effects
8
Mini Project
Apply all your CSS knowledge by building a complete responsive website - either a landing page or a portfolio website.
Locked
Please enroll in this course to access the modules.
Learning objectives:
• • Build a complete styled website
• • Apply all CSS concepts learned
• • Create a responsive landing page OR a portfolio website
• • Use Flexbox for layouts
• • Implement responsive design
• • Add transitions and effects