Course Curriculum — 14 Modules
01
Introduction to CSS
- What is CSS and why use it — Separation of concerns, history, evolution, and modern CSS specifications.
- CSS syntax and structure — Anatomy of style rules, declarations, properties, and values.
- Inline, internal, and external stylesheets — Integration methods, linking styles, and browser stylesheet parsing.
- CSS selectors and specificity basics — Introduction to selectors, cascading order, and priority calculations.
02
Selectors & Combinators
- Basic, grouping, and universal selectors — Targeted styling using elements, classes, IDs, and style grouping.
- Attribute selectors — Selecting elements dynamically based on HTML attributes and values.
- Combinators — Defining relationship selectors: descendant, direct child, adjacent sibling, and general sibling.
- Pseudo-classes — Interactive states and structural styling with :hover, :active, :focus, :nth-child, and :first-of-type.
- Pseudo-elements — Generating virtual markup and decorative assets with ::before, ::after, and ::placeholder.
- CSS architecture & BEM methodology — Writing modular, conflict-free selectors with Block-Element-Modifier styling conventions.
03
Colors, Backgrounds & Borders
- Color formats — Color representation systems including HEX, RGB, RGBA, HSL, and HSLA.
- Background images, gradients, and patterns — Linear, radial, and conic gradients, background sizing, and positioning.
- Border styles, rounded corners, and outlines — Border customization, border-radius geometry, and outline offsets.
- Box shadows and text shadows — Adding depth and dimension using offset, blur, spread, and inset shadow layers.
04
Text & Fonts
- Font properties — Customizing typography using font-family, font-size, font-weight, line-height, and style.
- Web-safe fonts and Google Fonts — Loading custom typography, fallbacks, and utilizing Google Fonts CDN.
- Text alignment, spacing, and decoration — Text alignments, letter-spacing, word-spacing, and text-decorations.
- Responsive typography with em, rem, % — Calculating relative scale typography across screen sizes.
- Modern font assets & wide-gamut colors — Ultra-efficient WOFF2 delivery, wide-gamut spaces (OKLCH, LAB), and color-mix().
05
The Box Model
- Content, padding, border, and margin — Core box architecture, spacing rules, and margins.
- Width, height, and min/max constraints — Sizing elements and preventing overflows with structural boundaries.
- Overflow handling — Managing visible, hidden, scroll, and auto behaviors for clipped content.
- Box-sizing (content-box vs border-box) — Element sizing calculations, reset practices, and layout sizing.
06
Positioning & Layout
- Positioning models — Static, relative, absolute, fixed, and sticky positioning rules and offsets.
- Float and clear layout controls — Traditional float behaviors, clearfixes, and layout columns.
- Display types — Differentiating block, inline, inline-block, and none display properties.
- Z-index & stacking contexts — Controlling overlay depth, layering, and stacking context rules.
- Logical properties — Modern multi-directional logical properties (margin-inline, padding-block) replacing physical rules.
07
Flexbox
- Introduction to Flexbox — Creating flexible containers, flex directions, and flex-wrap settings.
- Axis alignment — Distributing items along the main and cross axes with justify-content and align-items.
- Flex item controls — Fine-tuning element sizing dynamically using flex-grow, flex-shrink, and flex-basis.
- Responsive Flexbox designs — Constructing navbars, split screens, and responsive card layouts with Flexbox.
08
CSS Grid
- Introduction to CSS Grid — Two-dimensional grid container setup, row/column templates, and fractional units (fr).
- Grid areas and templates — Visual layouts, item naming, and explicit grid-template-areas.
- Alignment and spacing in Grid — Aligning tracks, items, and using row-gap/column-gap rules.
- Hybrid layouts (Grid + Flexbox) — Combining Flexbox for 1D alignments and CSS Grid for 2D page layouts.
- CSS subgrid column & row inherits — Inheriting grid track sizes from parents for unified layout components alignment.
09
Responsive Design
- Media queries & viewport settings — Media query syntax, logical operators, and responsive break-points.
- Mobile-first vs desktop-first design — Layout flow strategies, progressive enhancement, and viewport config.
- Relative sizing units — Designing layouts using fluid units: em, rem, percentage, vh, vw, and clamp().
- Modern responsive controls — Element-scoped Container Queries (@container) and functional math boundaries (clamp, min, max).
10
Transitions & Animations
- CSS transitions — Transitioning properties, duration, delays, and custom cubic-bezier timing curves.
- CSS animations with @keyframes — Creating timeline sequences, iteration counts, and fill modes.
- 2D & 3D transforms — Interactive layouts using translate, scale, rotate, and skew transformations.
- Performance best practices — Hardware acceleration (will-change) and optimizing for Core Web Vitals.
- Scroll-driven animations — Setting animation timelines bound directly to scrollbars using scroll-timeline and view-timeline.
11
Advanced Styling
- Custom properties & functional math — Declaring variables, scoping theme values, and applying calculated trigonometry functions (sin, cos, tan).
- Advanced selectors — Dynamic selecting filters like :not(), :nth-of-type(), :checked, and :has().
- Clipping and masking — Reshaping layouts with clip-path, SVG masks, and image overlays.
- Filters & blend modes — Applying graphics effects (blur, opacity, drop-shadow) and overlay blend-modes.
12
Bootstrap & Tailwind CSS
- Bootstrap grid & utilities — Rapid UI building with Bootstrap columns, layouts, components, and templates.
- Tailwind CSS utilities & v4.0 config — Tailwind utility-first coding, theme variables, and CSS-first configuration files.
- Framework customization — Extending config structures, compiling utility layers, and overriding styling defaults.
13
Modern UI Design Trends
- Modern UI designs — Glassmorphism, card shadows, neo-brutalism, and clean flat designs.
- Dark mode architecture — Implementing light/dark mode triggers, system color schemes, and local storage state.
- Modern CSS features — CSS Nesting syntax rules, Subgrid layouts, and scroll-driven timeline animations.
14
Capstone Projects & Portfolio
- Production layouts — Building 8+ fully functional landing pages, layouts, and designs from scratch.
- Deployment & optimization — Uploading projects to GitHub Pages, caching, custom domains, and SEO headers.
- Final portfolio build — Your final capstone project showcasing animations, layouts, and responsive designs.
🏗️
Design Premium UIs
Build beautiful, highly animated layouts using premium designs and hover effects
📱
Responsive Layouts
Master media queries, flexbox, CSS grid, and container queries for cross-device consistency
🎨
Modern Styling
Leverage wide-gamut OKLCH colors, variables, custom elements, and blend modes
🎓
Unisoft Certificate
Earn a recognised certificate on successful course completion
💼
Placement Support
Interview prep & referrals to 10+ hiring partner companies
🚀
Strong Foundation
Ready to advance to JavaScript, frameworks, and backend full-stack development
Tools & Technologies Covered
CSS3
Bootstrap 5
Tailwind CSS v4.0
VS Code
Chrome DevTools
Figma Basics
GitHub Basics
W3C & a11y Standards
CSS Course — Official Syllabus