একজন ভাল ফ্রন্ট-এন্ড ডেভেলপার হওয়ার জন্য রেসপন্সিভ ওয়েব ডিজাইন ভালোভাবে জানাটা অত্যন্ত গুরুত্বপূর্ণ। যে কোন CSS ফ্রেমওয়ার্ক নিয়ে কাজ শুরু করার আগে, CSS এর Flexbox, Grid, এবং Media Queries ব্যবহার করে কিভাবে একটি রেসপন্সিভ ওয়েবসাইট ডিজাইন করা যায় তা জানা বেশি জরুরি।

তাই freeCodeCamp Bengali ইউটিউব চ্যানেল এর প্রথম ভিডিও কোর্স হিসেবে আমরা নিয়ে এসেছি "বিগিনারদের জন্য রেসপন্সিভ ওয়েব ডিজাইন - ৭ ঘন্টার একটি পূর্ণাঙ্গ কোর্স" সম্পূর্ণ ফ্রী।

কোর্সের ইন্সট্রাক্টর Joy Shaheb একজন অভিজ্ঞ ওয়েব ডিজাইনার এবং ডেভেলপার যিনি ইতিপূর্বে freeCodeCamp English চ্যানেলে একাধিক কোর্স পাবলিশ করেছেন।

কোর্সটিতে CSS এর বেসিক থেকে শুরু করে, Flexbox, Grid এবং Media Queries এর গুরুত্বপূর্ণ কাজগুলি শেখানো হয়েছে।

এই ভিডিওতে যেসব টপিক কভার করা হয়েছে সেগুলি হলঃ

Introduction

  • Course Introduction
  • CSS Basics

Flexbox

  • flexbox
  • flexbox architecture
  • flex-direction
  • justify-content
  • align-content
  • place-content
  • align-items
  • align-self
  • order
  • gap
  • flex-grow & flex-shrink
  • flex-basis
  • flex-wrap
  • flex
  • flex-flow

Flexbox Exercise

  • Flexbox Exercise
  • Level - 1
  • Level - 2
  • Level - 3
  • Level - 4
  • Level - 5

Grid

  • Grid
  • Grid Architecture
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas & grid-template
  • column & row gaps
  • grid/ grid-gap
  • justify-items || justify-content
  • align-items || align-content
  • place-items || place-content
  • grid-column : start/end
  • grid-row : start/end
  • grid-area
  • justify-self || align-self
  • place-self

Grid Exercise

  • Grid Exercise
  • Level - 1
  • Level - 2
  • Level - 3
  • Level - 4
  • Level - 5

Media Query

  • Media Query
  • Project setup - level 1
  • @ media rule
  • And operator
  • Media Type
  • Max-Width
  • Min-Width
  • Desktop vs Mobile first
  • Project-2 Desktop
  • Project-2 Mobile
  • Project-3 Desktop
  • Project-3 Mobile

CSS Units

  • CSS Units
  • REM units
  • Responsive website with REM units
  • EM units
  • VW Units
  • VH Units
  • % Units

সম্পূর্ণ কোর্সটি দেখুন freeCodeCamp Bengali ইউটিউব চ্যানেল এ (৭ ঘন্টার ভিডিও)।