CSS Flexbox Complete Guide - Bangla CSS Flexbox Tutorial

Modern Web Design Layout তৈরী করার জন্য কার্যকরী একটি layout system হলো “CSS Flexbox”. এই জিনিসটা ভালভাবে জানলে এবং practice করলে, Layout বানানো Front-end Web Designer দের জন্য অনেক সহজ হয়ে যাবে! এই video তে আমি CSS Flexbox সম্পর্কে একটা complete ধারণা দিয়েছি এবং শেষে একটা practical layout বানিয়ে দেখিয়েছি। যারা আমাকে অনবরত এই ভিডিও টির জন্য অনুরোধ করছিলেন, তাদের জন্য এটা আমার পক্ষ থেকে নববর্ষের একটা উপহার হিসেবে থাকলো। যারা নতুন করে এটা শিখতে চান তাদের অনেক উপকারে আসবে বলে আমার বিশ্বাস।

এই video এর একদম শেষে, আমি এটার সাথে আরেকটি জনপ্রিয় Layout System - “CSS Grid” এর পার্থক্য দেখিয়েছি। সেই সাথে "Grid নাকি Flexbox কোনটা ব্যবহার করবো ?" - এই প্রশ্নের উত্তরও আমি দিয়েছি এই video তে এবং উদাহরণ সহ আমার মতামত ব্যাখ্যাও করেছি।আশা করি video টি Front-end Designer দের Flexbox layout system এর concept পরিষ্কার করার ক্ষেত্রে একটা গুরুত্বপূর্ণ ভূমিকা রাখবে।

👍 Project Github Repository Link - https://github.com/learnwithsumit/css...

▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬

0:00 - Intro
00:31 - Background - Why Flexbox
09:11 - What is Flexbox
11:06 - Overview
13:13 - Container Properties
32:18 - Item Properties
40:47 - Flexbox Example Layout
48:36 - CSS Grid Example Layout
52:30 - Grid or Flexbox
55:18 - Final words
55:49 - Outro

References:

👍 CSS Box Model - https://www.w3schools.com/css/css_box...
👍 CSS Float w3schools- https://www.w3schools.com/css/css_flo...
👍 CSS Flexbox w3schools - https://www.w3schools.com/css/css3_fl...
👍 CSS Grid Bangla Tutorial -    • CSS Grid complete Bangla (বাংলা) Tuto...  
👍 My React Series -    • #1 What is React and How it works - R...  
👍 My Node.js Series -    • Node.js Tutorial Bangla | Express.js ...  
👍 Learn with Sumit Official VS Code Theme - https://marketplace.visualstudio.com/...

কোন প্রশ্ন থাকলে comment section এ comment করতে পারেন। সেই সাথে আমাদের একটি Facebook Group আছে। সেখানেও আপনার প্রশ্ন করতে পারেন। সব প্রয়োজনীয় link নিচে দেয়া হলো -

👍 Facebook Group -   / learnwithsumit  
👍 Like our Facebook Page -   / letslearnwithsumit  
👍 Follow us at Instagram -   / learnwithsumit  
👍 Follow me at -   / sumit.analyzen  
👍 Learn with Sumit Official VS Code Theme - https://marketplace.visualstudio.com/...

👍 Theme Used: Learn with Sumit VS Code Theme (Peace of the Eye color variant)

#css_flexbox #bangla_css_tutorial