CSS Grid complete Bangla (বাংলা) Tutorial - যেমন খুশি তেমন 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-grid-tutorial
▬ 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 - https://www.youtube.com/watch?v=kRS5ficucNM
কোন প্রশ্ন থাকলে comment section এ comment করতে পারেন। সেই সাথে আমাদের একটি Facebook Group আছে। সেখানেও আপনার প্রশ্ন করতে পারেন। সব প্রয়োজনীয় link নিচে দেয়া হলো -
? Facebook Group - https://www.facebook.com/groups/learnwithsumit
? Like our Facebook Page - https://www.facebook.com/LetsLearnwithSumit
? Follow us at Instagram - https://www.instagram.com/learnwithsumit
? Follow me at - https://www.facebook.com/sumit.analyzen
** Images used inside the video was taken from https://unsplash.com
#css_grid #bangla_css_tutorial
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «CSS Grid complete Bangla (বাংলা) Tutorial - যেমন খুশি তেমন layout বানাও», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.