Module Nine (মডিউল ৯)

আরও সি.এস.এস(More CSS):

এই মডিউলে যা যা জানলামঃ

১। বিভিন্ন এলিমেন্ট কে সিলেক্ট করার বিভিন্ন প্রকার,

২। স্যুডো সিলেক্টর,

৩। বিফোর ও আফটার,

৪। বক্স শ্যাডো, টেক্সট শ্যাডো,

৫। সি.এস.এস ভ্যারিয়েবলস,

৬। কী-ফ্রেম (এনিমেশন),

৭। সি.এস.এস ট্রাঞ্জিশন,

৮। ট্রান্সফরম প্রপারটিস

এই মডিউলে সি.এস.এস এর প্রয়োজনীয় এবং অপেক্ষাকৃত জটিল কিছু বিষয় সম্পর্কে অবগত হলাম।

Module Eight (মডিউল ৮)

ওয়েবসাইট লাইভ করা (Website Deployment):

বিভিন্ন প্রকার ওয়েব হোস্টিং এর সাথে পরিচিত হলাম, যা নিচে উল্লেখিত হলঃ

১। শেয়ারড হোস্টিং,

২। ভি.পি.এস হোস্টিং,

৩। ডেডিকেটেড হোস্টিং,

৪। রিসেলার হোস্টিং,

৫। ক্লাউড হোস্টিং ও

৬। স্ট্যাটিক হোস্টিং।

এদের সম্পর্কে একটা সংক্ষিপ্ত ধারণা পেলাম। প্রাথমিক অবস্থায় স্ট্যাটিক হোস্টিং দিয়ে শুরু করাই ভালো এবং এটি ফ্রি। 

এই মডিউলে শেয়ারড হোস্টিং এর মাধ্যমে কিভাবে একটি ওয়েবসাইট লাইভ করা যায়, তা দেখলাম। মডিউলে যা যা ছিলঃ

১। প্রথমে ইনমোশন হোস্টিং সাইট থেকে বিজনেস হোস্টিং এর একটি লো-প্রাইজ হোস্টিং নির্বাচন করা হলো। এই সাইট থেকে ডোমেইনও কিনতে পাওয়া যায়।

২। ইমেইল সেটিং করা।

৩। এফ.টি.পি (F.T.P.) এর মাধ্যমে ওয়েবসাইটকে আপলোড করা।

৪। কন্টাক্ট ফর্ম সাবমিট করা।

Module Seven (মডিউল ৭)

এজলেজার ওয়েবসাইট (EdgeLedger Website):

মডিউল ৭ এ এসে অপেক্ষাকৃত জটিল একটি ওয়েবসাইট নিয়ে কাজ করলাম। ওয়েবসাইটের একটি কাল্পনিক নাম দিলাম EdgeLedger. এটি তৈরিতে বেশ কয়েকদিন সময় লাগিয়েছিলাম, যাতে কোনটা কিভাবে কাজ করছে, তা বুঝতে পারি।

ওয়েবসাইট এ যা যা ছিলঃ

১। প্রথমে লোগোসহ একটি ন্যাভবার, যা স্টিকি করা হয়েছিল। এটি একটি স্ট্যাটিক ওয়েবসাইট, প্রত্যেকটি মেন্যুতে ওয়েবসাইটের বিভিন্ন সেকশনের আইডি লিঙ্ক আপ করা হয়েছে, যাতে মেন্যুতে ক্লিক করে সেই সেকশনে যাওয়া যায়। স্মুথভাবে কাজ করার জন্য জেকুয়েরি ব্যবহার করা হয়েছে, যা তেমন কঠিন কিছু ছিল না।

২। ফন্ট হিসাবে ফন্ট-অসাম থেকে রোবোটো ব্যবহার করা হয়েছে।সো-কেস সেকশনে একটি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা হয়েছে, সাথে একটা বড় হেডিং।

৩। পরবর্তী সেকশনে 'আমরা কি করি (What We Do)' তা বলা হয়েছে তিনটি সেকশন তৈরি করে।

৪। পরের সেকশনে 'আমাদের পরিচয়' ও একটি গ্রুপ-ফটো দেওয়া হয়েছে।

৫। ক্লায়েন্টস সেকশনে কিছু কোম্পানির লোগো ব্যবহার করা হয়েছে।

৬। তারপর একটি কন্টাক্ট ফর্ম ও গুগল ম্যাপ ব্যবহার করা হয়েছে। গুগল ম্যাপের জন্য কিছু জাভাস্ক্রিপ্ট ব্যবহার করা হয়েছে।

৭। সর্বশেষে ফুটার সেকশন।

ওয়েবসাইটটি রেস্পন্সিভ করার লক্ষ্যে widescreen.css ও mobile.css নামে অতিরিক্ত ২ টি আলাদা সি.এস.এস ফাইল ব্যবহার করা হয়েছে, যাতে করে ট্যাবলেট ও মোবাইল ফোনেও ওয়েবসাইটটি ভালভাবে দেখা, ভিজিট করা যায়।

Module Six (মডিউল ৬)

ফ্লেক্সবক্স পরিচিত (Intro to Flexbox)

এই মডিউলে ফ্লেক্সবক্স সম্পর্কে জানলাম, যা সি.এস.এস-৩ এর নতুন একটি বিষয়। এটি কিছুটা কমপ্লেক্স হলেও অনেক কাজকে সহজ করে দিয়েছে।

ফ্লেক্সবক্সের তিনটা মূল প্রপারটিস ঃ

১। justify-content: আনুভূমিকভাবে, ফ্লেক্স আইটেম এর এলাইনমেন্ট নিয়ে কাজ করে। এর উল্লেখযোগ্য ভ্যাল্যুগুলো হলঃ center, flex-start, flex-end, space-around, space-between...etc.

২। align-items: উলম্বভাবে, ফ্লেক্স আইটেম এর এলাইনমেন্ট নিয়ে কাজ করে। এর উল্লেখযোগ্য ভ্যাল্যুগুলো হলঃ center, flex-start, flex-end, stretch, baseline...etc.

৩। align-content: ফ্লেক্স লাইনের এলাইনমেন্ট নিয়ে কাজ করে। এর উল্লেখযোগ্য ভ্যাল্যুগুলো হলঃ center, flex-start, flex-end, space-around, space-between, stretch...etc.

Module Five (মডিউল ৫)

Introduction to Responsive Layouts

মডিউল ৪ এ 'রেস্পন্সিভ লে-আউট' সম্পর্কে পরিচিত হলাম। যা যা জানলামঃ

১। মিডিয়া কুয়েরি সম্পর্কে ধারণা,

২। ই.এম ও রেম একক,

৩। ভি.এইচ ও ভি.ডব্লিও একক,

৪। আমাদের পূর্বে করা 'হোটেল ওয়েবসাইট' কে রেস্পন্সিভ করা।

Module Four (মডিউল ৪)

Hotel Website (হোটেল ওয়েবসাইট) 

মডিউল ৪ এ এসে হাতে-কলমে ৩ পেইজের একটি সম্পূর্ণ হোটেল ওয়েবসাইট তৈরি করা শিখলাম, এতদিন যা যা শিখে এসেছি তার প্রায় সবগুলো একটি প্রজেক্টে ব্যবহার করলাম।

যা যা ছিল প্রজেক্টটিতেঃ

১। ওয়েবসাইটের হোম পেইজে হোভার ইফেক্টসহ নেভিগেশন বার, শো-কেস সেকশন, ইনফো সেকশন, ফিচারস সেকশন ও ফুটার ছিল।

২। ওয়েবসাইটের এবাউট পেইজে 'এবাউট হোটেল' সেকশন, টেস্টিমনিয়াল সেকশন ছিল।

৩। আর, ওয়েবসাইটের কন্টাক্ট পেইজে কন্টাক্ট করার জন্য একটি পেইজ ছিল।

 এই সাধারন ওয়েবসাইট তৈরি করতে আমার কয়েক দিন লেগে গেল! আমি প্রতিটা সেকশন ও পেইজ আলাদা আলাদা করে HTML ও CSS লিখে প্র্যাকটিস করেছি। তারপরও বিষয়টা জটিল লাগছে। আশা করছি, ধীরে ধীরে এটা ঠিক হয়ে যাবে।

Module Three (মডিউল ৩)

সি.এস.এস (CSS)  ব্যাসিকস

এই পর্বে সি.এস.এস (CSS) এর প্রাথমিক বিষয়গুলো জানতে পারলাম। যা যা জানলামঃ

১। সি.এস.এস পরিচিতি,

২। এইচ.টি.এম.এল এর সাথে সি.এস.এস সংযুক্ত করার নানা উপায়,

৩। ব্যাসিক সি.এস.এস সিলেক্টর,

৪। ডেভ টুলস পরিচিতি,

৫। সি.এস.এস ফন্ট,

৬। কালার টাইপ,

৭। ব্যাকগ্রাউন্ড ও বর্ডার,

৮। বক্স মডেল, মার্জিন ও প্যাডিং,

৯। ফ্লোট ও এলাইনমেন্ট,

১০। লিঙ্কের বিভিন্ন অবস্থা ও বাটন স্টাইলিং,

১১। ন্যাভিগেশন মেন্যু স্টাইলিং,

১২। ইনলাইন, ব্লক ও ইনলাইন-ব্লক,

১৩। পজিশনিং,

১৪। ফর্ম স্টাইল,

১৫। ডিসপ্লে, ভিজিবিলিটি, অর্ডার ও নেভিগেইট মার্জিন।