08/10/2026

CSS Level 2 — Intermediate CSS Roadmap

এই সিরিজে আমরা beginner-level CSS-এর পরের গুরুত্বপূর্ণ conceptsগুলো step by step এবং practical examples-এর মাধ্যমে শিখব।

CSS Level 2 কী?

CSS-এর basic properties শেখার পর শুধু margin, padding, color, font-size জানা যথেষ্ট নয়। Real-world website তৈরি করতে হলে layout তৈরি করা, responsive design করা, elements-এর layering control করা, animation যোগ করা এবং CSS conflicts solve করা জানতে হয়।

এই কারণে CSS Level 2 — Intermediate CSS সিরিজটি তৈরি করা হয়েছে।

Learning Goal: এই সিরিজ শেষ করার পর আপনি responsive, modern এবং well-structured website layout তৈরি করতে আরও confident হবেন।

CSS Level 2 — Complete Roadmap

এই Level 2 সিরিজে মোট 13টি core topics থাকবে।

01. Flexbox — Complete Guide

Flexbox দিয়ে এক-dimensional layout তৈরি করা শেখা হবে।

What you will learn:

  • Flex Container & Flex Items
  • Main Axis & Cross Axis
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • gap
  • flex-grow
  • flex-basis
  • flex-shrink
  • flex
  • align-self
  • Real-world layout examples
    • Practice : Responsive Card Layout

02. CSS Grid — Complete Guide

CSS Grid দিয়ে complex two-dimensional layouts তৈরি করা শেখা হবে।

What you will learn:

  • Grid Container & Grid Items
  • grid-template-columns
  • grid-template-rows
  • gap
  • grid-column
  • grid-row
  • span
  • repeat()
  • minmax()
  • fr
  • auto-fit
  • auto-fill
  • Grid Areas
  • Responsive Grid
    • Practice : Responsive Product Grid

03. Responsive Web Design

বিভিন্ন screen size-এর জন্য website responsive করার concept শেখা হবে।

What you will learn:

  • Responsive Web Design কী
  • Mobile-first approach
  • Desktop-first vs Mobile-first
  • Flexible layouts
  • Fluid width
  • max-width
  • min-width
  • clamp()
  • Responsive images
  • Flexible typography
  • Flexbox & Grid দিয়ে responsive layout
    • Practice: Responsive Landing Page

04. CSS Media Queries

Different screen sizes অনুযায়ী CSS পরিবর্তন করা শেখা হবে।

What you will learn:

  • Media Query কী
  • min-width
  • max-width
  • Breakpoints
  • Mobile-first media queries
  • Multiple breakpoints
  • Orientation
  • hover
  • pointer
  • Responsive navigation
    • Practice: Multi-breakpoint Responsive Page

05. CSS Pseudo-Classes

User interaction এবং element-এর specific state অনুযায়ী styling করা শেখা হবে।

What you will learn:

  • :hover
  • :active
  • :focus
  • :focus-visible
  • :visited
  • :first-child
  • :last-child
  • :nth-child()
  • :nth-of-type()
  • :not()
  • :checked
  • :disabled
  • Form validation pseudo-classes
    • Practice: Interactive UI Elements

06. CSS Pseudo-Elements

HTML পরিবর্তন না করে elements-এর আগে বা পরে decorative content যোগ করা শেখা হবে।

What you will learn:

  • ::before
  • ::after
  • ::first-letter
  • ::first-line
  • ::selection
  • ::placeholder
  • content
  • Decorative shapes
  • Overlay effects
  • CSS icons and effects
    • Practice: Stylish Card & Button

07. CSS Variables / Custom Properties

একটি website-এর colors, spacing এবং অন্যান্য reusable values সহজে manage করা শেখা হবে।

What you will learn:

  • CSS Variables কী
  • Creating variables
  • --variable-name
  • var()
  • :root
  • Local variables
  • Fallback values
  • Color variables
  • Spacing variables
  • Typography variables
  • Theme structure
  • Basic dark mode concept
    • Practice: Simple Theme System

08. CSS Transform, Transition & Animation

Website-এ smooth interaction এবং animation তৈরি করা শেখা হবে।

What you will learn:

  • transform
  • translate()
  • scale()
  • rotate()
  • skew()
  • transform-origin
  • transition
  • Transition timing
  • @keyframes
  • Animation properties
  • Animation shorthand
  • Hover effects
  • Basic animation performance
    • Practice: Animated Card & Button

09. CSS Object-fit & Object-position

Images এবং videos-এর size ও positioning ভালোভাবে control করা শেখা হবে।

What you will learn:

  • object-fit
  • cover
  • contain
  • fill
  • none
  • scale-down
  • object-position
  • Image aspect ratio
  • Fixed image containers
  • object-fit vs background-size
    • Practice: Responsive Image Cards

10. CSS Z-index & Stacking Context

একাধিক element যখন একে অপরের উপর থাকে, তখন কোন element উপরে থাকবে তা control করা শেখা হবে।

What you will learn:

  • z-index
  • Layering
  • Positive & negative z-index
  • position and z-index
  • Stacking Context
  • Why z-index sometimes doesn't work
  • opacity
  • transform
  • Nested stacking contexts
  • Common layering problems
    • Practice: Modal & Dropdown

11. CSS Cascade, Specificity & Inheritance

CSS rules conflict করলে browser কীভাবে কোন style apply করে তা বুঝতে শেখা হবে।

What you will learn:

  • CSS Cascade
  • Specificity
  • Specificity hierarchy
  • Element selector
  • Class selector
  • ID selector
  • Attribute selector
  • Pseudo-class specificity
  • Inline styles
  • !important
  • Inheritance
  • inherit
  • initial
  • unset
  • revert
  • Specificity calculation
  • Common CSS conflicts
    • Practice: Fixing a Broken Stylesheet

12. Responsive Navbar

এখানে আমরা আগের concepts ব্যবহার করে একটি real-world responsive navbar তৈরি করব।

What you will learn:

  • Navbar structure
  • Desktop navbar
  • Mobile navbar
  • Flexbox
  • Media queries
  • Hamburger menu
  • Menu toggle
  • Hover & focus states
  • CSS transitions
  • JavaScript menu toggle
  • Basic accessibility
    • Practice: Fully Responsive Navbar

13. Responsive Layout Project

এটি হবে CSS Level 2-এর final project।

আগের topicsগুলো একসাথে ব্যবহার করে একটি complete responsive webpage তৈরি করা হবে।

Project sections :

  • Header
  • Responsive Navbar
  • Hero Section
  • About Section
  • Services/Cards
  • Image Section
  • Blog Cards
  • CTA Section
  • Footer
    • Skills we will use: 
                Flexbox 
            CSS Grid 
            Media Queries 
            Mobile-first Design 
            CSS Variables 
            clamp() 
            Responsive Images 
            Pseudo-elements 
            Transitions 
            Animations 
            Z-index 
            CSS Specificity 
            Responsive Typography

How to Learn This CSS Level 2 Series

প্রতিটি blog-এ আমরা শুধু CSS property-এর definition মুখস্থ করব না।

          প্রতিটি topic-এ চেষ্টা থাকবে:
          Concept → Syntax → Example → Real-world Use → Common Mistakes → Practice

উদাহরণ হিসেবে Flexbox শেখার সময় শুধু justify-content কী তা জানলেই শেষ নয়। আমরা দেখব এটি কখন ব্যবহার করতে হবে, কীভাবে ব্যবহার করতে হবে এবং real project-এ কোথায় প্রয়োজন হয়।

CSS Level 2 শেষ করার পর কী করতে পারবেন?

এই সিরিজ সফলভাবে শেষ করলে আপনি আরও confidently:

  • Responsive layouts তৈরি করতে পারবেন
  • Flexbox এবং Grid ব্যবহার করতে পারবেন
  • Mobile এবং desktop layout তৈরি করতে পারবেন
  • Interactive UI তৈরি করতে পারবেন
  • CSS animation যোগ করতে পারবেন
  • Images-এর layout control করতে পারবেন
  • Layering এবং z-index problems solve করতে পারবেন
  • CSS specificity conflicts বুঝতে পারবেন
  • Reusable CSS variables ব্যবহার করতে পারবেন
  • Real-world responsive components তৈরি করতে পারবেন

সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো, আপনি শুধু CSS syntax জানবেন না—কোন CSS technique কোথায় ব্যবহার করতে হয় সেটাও বুঝতে শুরু করবেন।

Before You Start

এই সিরিজ শুরু করার আগে আপনার CSS-এর basic concepts জানা থাকা ভালো।

আপনি যদি CSS একদম নতুন হন, তাহলে আগে CSS Level 1 — Beginner CSS সম্পূর্ণ করার পর এই সিরিজ শুরু করুন।

আর যদি basic CSS already জানা থাকে, তাহলে সরাসরি Level 2 শুরু করতে পারেন।

Start Learning CSS Level 2

আপনার CSS journey এখান থেকে আরও practical হবে।

Start with: Flexbox — Complete Guide

তারপর একে একে 13টি topic complete করে শেষ করুন Responsive Layout Project দিয়ে।

          Learn → Practice → Build → Improve

এটাই CSS শেখার সবচেয়ে useful approach।