🎨 Complete CSS Practice Checklist
এখানে CSS শেখার সব প্রয়োজনীয় বিষয় ধাপে ধাপে সাজানো হয়েছে। এগুলো শেষ করলে আপনার ডিজাইন স্কিলের ভিত্তি মজবুত হবে এবং বিভিন্ন প্রজেক্টে সুন্দর লেআউট ও স্টাইল যোগ করতে পারবেন।।
0
Completed
0
Total Items
0
Sections Done
0%
Progress
1
CSS Basics
0/8
CSS কি এবং কেন ব্যবহার করা হয়
CSS লেখার তিনটি পদ্ধতি (Inline, Internal, External)
CSS Syntax এবং Structure
Comments লেখা (
/* */)CSS Reset এবং Normalize
Browser Developer Tools ব্যবহার
CSS Validation
CSS Best Practices
2
Selectors & Specificity
0/10
Element Selector (
h1, p, div)Class Selector (
.class-name)ID Selector (
#id-name)Universal Selector (
*)Descendant Selector (
div p)Child Selector (
div > p)Adjacent Sibling (
h1 + p)General Sibling (
h1 ~ p)Attribute Selectors (
[href], [class*="nav"])CSS Specificity এবং
!important3
Colors & Typography
0/12
Color Values (Hex, RGB, RGBA, HSL, HSLA)
Color Properties (
color, background-color)Opacity এবং Transparency
Font Properties (
font-family, font-size, font-weight)Font Style (
font-style, font-variant)Text Properties (
text-align, text-decoration, text-transform)Line Height এবং Letter Spacing
Text Shadow
Google Fonts ব্যবহার
Web Safe Fonts
Font Loading এবং Performance
Typography Best Practices
4
Box Model & Layout
0/11
CSS Box Model বুঝা
Margin Properties
Padding Properties
Border Properties
Width এবং Height
Box-sizing Property
Display Property (
block, inline, inline-block, none)Visibility Property
Overflow Property
Min/Max Width এবং Height
Margin Collapsing
5
Positioning & Float
0/8
Position Property (
static, relative, absolute, fixed, sticky)Top, Right, Bottom, Left Properties
Z-index এবং Stacking Context
Float Property
Clear Property
Clearfix Technique
Centering Elements
Creating Layouts with Position
6
Flexbox
0/12
Flexbox কি এবং কেন ব্যবহার করা হয়
Flex Container (
display: flex)Flex Direction
Justify Content
Align Items
Align Content
Flex Wrap
Flex Grow, Shrink, Basis
Align Self
Order Property
Flexbox Layout Examples
Flexbox vs Grid কখন কোনটা ব্যবহার করবেন
7
CSS Grid
0/15
CSS Grid কি এবং কেন ব্যবহার করা হয়
Grid Container (
display: grid)Grid Template Columns
Grid Template Rows
Grid Gap
Grid Lines এবং Grid Tracks
Grid Area
Grid Template Areas
Grid Column/Row Start/End
Justify Items এবং Align Items
Justify Content এবং Align Content
Auto-fit এবং Auto-fill
Minmax() Function
Repeat() Function
Complex Grid Layouts তৈরি করা
8
Responsive Design
0/10
Responsive Design কি এবং কেন প্রয়োজন
Viewport Meta Tag
Media Queries
Breakpoints এবং Mobile First Approach
Flexible Units (%, em, rem, vw, vh)
Responsive Images
Responsive Typography
CSS Functions (calc(), clamp(), min(), max())
Container Queries
Testing Responsive Design
9
Pseudo Classes & Elements
0/12
Pseudo Classes কি
Link States (
:link, :visited, :hover, :active)Form States (
:focus, :disabled, :checked)Structural Pseudo Classes (
:first-child, :last-child, :nth-child)Other Pseudo Classes (
:not(), :empty, :target)Pseudo Elements কি
::before এবং ::after::first-line এবং ::first-letter::selection::placeholderCreative Uses of Pseudo Elements
CSS Counters
10
Backgrounds & Gradients
0/10
Background Color
Background Image
Background Repeat
Background Position
Background Size
Background Attachment
Multiple Backgrounds
Linear Gradients
Radial Gradients
Conic Gradients
11
Transforms & Animations
0/12
CSS Transforms কি
2D Transforms (translate, rotate, scale, skew)
3D Transforms
Transform Origin
CSS Transitions
Transition Properties
Transition Timing Functions
CSS Animations
Keyframes
Animation Properties
Performance Considerations
Complex Animation Examples
12
Advanced CSS
0/15
CSS Variables (Custom Properties)
CSS Functions (var(), calc(), clamp())
CSS Filters
CSS Masks
CSS Shapes
CSS Blend Modes
CSS Clip Path
CSS Scroll Behavior
CSS Logical Properties
CSS Subgrid
CSS Aspect Ratio
CSS Containment
CSS Houdini
CSS Architecture (BEM, OOCSS, SMACSS)
CSS Preprocessors (Sass, Less)
🎉 অভিনন্দন!
আপনি CSS Practice Checklist সম্পূর্ণ করেছেন!
এখন আপনি CSS Expert! 🎨