আজকে ওয়েবসাইট এর লেআউট এবং সিম্পল Responsive (মডিউল ৮)

#module_release #landing_page_milestone #module_8

একটা ওয়েবসাইট এর জিনিসপত্র কোথায় কোথায় থাকে বা কিভাবে রাখতে হয় সেটা নিয়ে আজকের আলোচনা ওয়েবসাইট লেআউট। তার সাথে আছে ছোট করে রেস্পন্সিভ বানানোর চেষ্টা। আজকের জাস্ট তিনটা টপিক ঘুরিয়ে পেঁচিয়ে বলা হবে। একটা হচ্ছে flexbox, আরেকটা গ্রিড আর লাস্টেরটা ছোট করে মিডিয়া কুয়েরি। আজকে ভিডিও যার মধ্যে প্রথমেই আছে flexbox নিয়ে ধারণা। সেটা দিকে সিম্পল কি কি জিনিস করা যায়। তার মধ্যে দুইটা খুবই কমন কাজের কথা বলা হয়েছে।

এক, কিভাবে এক বা একাধিক জিনিস কে কোন একটা বক্সের মধ্যে কিভাবে horizontal and vertical সেন্টার করা যাবে। এইটা প্রায়ই ইন্টারভিউতে জিজ্ঞেস করে বসে। এই blog টা follow করতে পারো, তাহলে full concept নিয়ে একটা idea হয়ে যাবে https://dev.to/chayti/hack-the-ways-to-center-align-any-text-image-element-in-css-4e10

সেকেন্ড কেইস হচ্ছে কিভাবে এক সাইডে একটা ফিক্সড মেন্যুবার আরেক সাইডে একটা রেস্পন্সিভ কনটেন্ট এর জিনিস। সেটার কিছু অংশ লাষ্ট ভিডিওতেও দেখানো হয়েছে।

ফ্লেক্সবক্স আরো কিছু কমন ইউজ কেইস দিয়ে একটা লগইন ফর্ম এবং মেনুবার এর মধ্যে ফন্ট অসাম দিয়ে আইকন বসিয়ে দুইটা দুই সাইডে পাঠিয়ে দেয়ার কাজও দেখানো হয়েছে। এরপর আমরা চলে গেছি গ্রিড লেআউট এর কাছে। সেখানে আমরা ছোট করে ফ্লেক্স এবং গ্রিড এর মধ্যে পার্থক্য নিয়ে আলোচনা করেছি। তবে তুমি এইটা আরেকটু ভালোভাবে গুগল করে দেখো। এইটা প্রায়ই ইন্টারভিউতে জিজ্ঞেস করে বসে।

গ্রিড অল্প একটু শেখার পর আমরা চলে গেছি গ্রিড দিয়ে একটা ক্যালেন্ডার বানানোর কাছে। তারপর আমরা ছোট করে মিডিয়া কুয়েরি দেখছি।

আর লাস্টের দিকে আমরা ডিটেইলভাবে মোটামুটি যত css এর স্টাইল আছে সব ভাজাভাজা করে ফেলছি। মানে কি স্ট্র্যাটেজিতে ভাজা ভাজা করতে হবে সেটা দেখিয়েছি।

আজকের সামারি।

আজকের তিনটা জিনিস এর মধ্যে বেসিক কয়েকটা জিনিস কয়েকবার প্রাকটিস করতে হবে। জেক ১০০% সব ক্লিয়ার হবে না। তারপরেও নিচের জিনিসগুলা ক্লিয়ার করতে হবে- ১০০% না হলেও মিনিমাম ৭০-৮০% ক্লিয়ার করতে হবে। প্লাস এই জিনিসগুলা এখন থেকে আজীবন প্রায় সব প্রজেক্ট এ ই টুকটাক করে রিপিট হতে থাকবে। সো, হালকা কিছুটা ঘাটতি থাকলে সেটা ধীরে ধীরে পুষিয়ে নিতে হবে।

• ১. flexbox দিয়ে horizontal ভাবে কোন কোন পজিশন এ রাখা যায়। এবং কিছু space দেয়া যায়। সেগুলা প্রাকটিস করতে হবে
• ২. flexbox দিয়ে vertical ভাবে কোন কোন পজিশন এ কিভাবে রাখা যায়। সেগুল দেখতে হবে
• ৩. flex direction এবং flex wrap জিনিসটা বুঝতে হবে। মিডিয়া কুয়েরি একটু ছোট করে দেখানো হয়েছে। তবে রেস্পন্সিভ করার কাজটা
• ৪. grid এবং flex এর মধ্যে বেসিক কিছু ডিফারেন্স আছে। সেগুলা কি কি
• ৫. grid লেআউট এর কলাম টেমপ্লেট কিভাবে সেট করে
• ৬. grid এর মধ্যে gap কিভাবে দেয়
• ৭. breakpoint জিনিসটা কি
• ৮. মিডিয়া কুয়েরি এর min-width এবং max-width এই কনসেপ্ট হালকা একটু ভেজাল করবে তারপরেও এইটা নিয়ে কিছুটা চিন্তা করতে হবে
• ৯. দুই কলাম ওয়ালা জিনিস কিভাবে রেস্পন্সিভ করে। তিন বা তার বেশি সংখ্যক জিনিস কিভাবে রেস্পন্সিভ করে।
• ১০. রেস্পন্সিভ করার ৭ টা জিনিস। সেখানে মূলত ইমেজ রেস্পন্সিভ করার এবং রিলেটিভ CSS ইউনিট এবং মেটাট্যাগ সম্পর্কে কিছুটা ধারণা নিতে হবে।

এই জিনিসগুলাই ডিফারেন্ট একটা উদাহরণ দিয়ে আগামীকাল রিক্যাপ করা হবে।

শেষ কথা হচ্ছে-

জিনিসটা কিন্তু 'মিডিয়া কুয়েরি'। পিয়েরি কুরি, মাদার কুরি বা নতুন কুঁড়ি না।

#responsive #webdesigner #freelancing #webdevelopment #onlinecourse