CSS Grid complete Bangla (বাংলা) Tutorial - যেমন খুশি তেমন layout বানাও
152.5 هزار بار بازدید -
3 سال پیش
-
Modern Web Design Layout তৈরী
Modern Web Design Layout তৈরী করার জন্য খুব ই কার্যকরী একটি layout system হলো “CSS Grid”. এই জিনিসটা ভালভাবে জানলে এবং practice করলে, শুধুমাত্র Layout বানানোর জন্য আর কোন CSS Framework ব্যবহার করার প্রয়োজন পড়বেনা! এটা আরেকটি জনপ্রিয় Layout System - “CSS Flexbox” এর থেকে powerful কারণ এটার মাধ্যমে two-dimensional layout তৈরী করা সম্ভব মাত্র ২-১ লাইন CSS লিখে। এটার browser support ও যথেষ্ট ভাল। আমি মনে করি, একজন Front End Developer এবং Full Stack Web Developer এরও এটা ভাল করে জানা উচিৎ। তাহলে যেমন খুশি তেমন complex layout বানানো একেবারেই সহজ হয়ে যাবে।
এই video তে আমি CSS Grid সম্পর্কে একটা complete ধারণা দিয়েছি এবং শেষে একটা practical layout বানিয়ে দেখিয়েছি। যারা আমাকে অনবরত এই ভিডিও টির জন্য অনুরোধ করছিলেন, তাদের অনুরোধ পূরণ করার পাশাপাশি যারা নতুন করে এটা শিখতে চান তাদের অনেক উপকারে আসবে বলে আমার বিশ্বাস।
Note: This video is highly inspired and followed by Scrimba CSS Grid Tutorial - link below.
👍 Project Github Repository Link - https://github.com/learnwithsumit/css...
▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
0:00 - Intro
0:51 - What & why CSS Grid
06:58 - Grid System & your first grid
15:04 - Fractional Units & Repeat
19:55 - Positioning Items
30:29 - Grid Template areas
34:22 - auto-fit and minmax
40:08 - auto-fit vs auto-fill
42:08 - Implicit Rows
45:22 - Justify & align content
50:03 - Justify & align items
53:00 - Justify self
54:23 - Responsive image grid example
01:07:54 - Last words
01:08:41 - Outro
References:
👍 Scrimba Tutorial Link - https://scrimba.com/learn/cssgrid
👍 CSS Grid Browser Support - https://caniuse.com/#feat=css-grid
👍 CSS Flexbox Tutorial - CSS Flexbox Complete Guide - Bangla C...
কোন প্রশ্ন থাকলে comment section এ comment করতে পারেন। সেই সাথে আমাদের একটি Facebook Group আছে। সেখানেও আপনার প্রশ্ন করতে পারেন। সব প্রয়োজনীয় link নিচে দেয়া হলো -
👍 Facebook Group - Facebook: learnwithsumit
👍 Like our Facebook Page - Facebook: LetsLearnwithSumit
👍 Follow us at Instagram - Instagram: learnwithsumit
👍 Follow me at - Facebook: sumit.analyzen
** Images used inside the video was taken from https://unsplash.com
#css_grid #bangla_css_tutorial
এই video তে আমি CSS Grid সম্পর্কে একটা complete ধারণা দিয়েছি এবং শেষে একটা practical layout বানিয়ে দেখিয়েছি। যারা আমাকে অনবরত এই ভিডিও টির জন্য অনুরোধ করছিলেন, তাদের অনুরোধ পূরণ করার পাশাপাশি যারা নতুন করে এটা শিখতে চান তাদের অনেক উপকারে আসবে বলে আমার বিশ্বাস।
Note: This video is highly inspired and followed by Scrimba CSS Grid Tutorial - link below.
👍 Project Github Repository Link - https://github.com/learnwithsumit/css...
▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
0:00 - Intro
0:51 - What & why CSS Grid
06:58 - Grid System & your first grid
15:04 - Fractional Units & Repeat
19:55 - Positioning Items
30:29 - Grid Template areas
34:22 - auto-fit and minmax
40:08 - auto-fit vs auto-fill
42:08 - Implicit Rows
45:22 - Justify & align content
50:03 - Justify & align items
53:00 - Justify self
54:23 - Responsive image grid example
01:07:54 - Last words
01:08:41 - Outro
References:
👍 Scrimba Tutorial Link - https://scrimba.com/learn/cssgrid
👍 CSS Grid Browser Support - https://caniuse.com/#feat=css-grid
👍 CSS Flexbox Tutorial - CSS Flexbox Complete Guide - Bangla C...
কোন প্রশ্ন থাকলে comment section এ comment করতে পারেন। সেই সাথে আমাদের একটি Facebook Group আছে। সেখানেও আপনার প্রশ্ন করতে পারেন। সব প্রয়োজনীয় link নিচে দেয়া হলো -
👍 Facebook Group - Facebook: learnwithsumit
👍 Like our Facebook Page - Facebook: LetsLearnwithSumit
👍 Follow us at Instagram - Instagram: learnwithsumit
👍 Follow me at - Facebook: sumit.analyzen
** Images used inside the video was taken from https://unsplash.com
#css_grid #bangla_css_tutorial
3 سال پیش
در تاریخ 1400/01/06 منتشر شده
است.
152,557
بـار بازدید شده