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) এর প্রাথমিক বিষয়গুলো জানতে পারলাম। যা যা জানলামঃ

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

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

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

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

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

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

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

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

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

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

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

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

১৩। পজিশনিং,

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

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

Module Two (মডিউল ২)

এইচ.টি.এম.এল (HTML)  ব্যাসিকস

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

১। HTML কি ?

২। কিভাবে একটি HTML পেইজ তৈরি ও ওপেন করা যায়,

৩। ডকটাইপ ও ব্যাসিক লে-আউট সম্পর্কে,

৪। VS Code এর Live Server এক্সটেনশন ব্যবহার করা,

৫। মেটা ট্যাগ ও সার্চ ইঞ্জিন,

৬। হেডিং, প্যারাগ্রাফ ও টাইপোগ্রাফি,

৭। লিঙ্কস, ইমেজ ও অ্যাট্রিবিউটস,

৮। লিস্ট ও টেবিল ট্যাগ,

৯। ফর্ম ও ইনপুট ট্যাগ,

১০। ব্লক ও ইনলাইন লেভেল ইলিমেন্টস,

১১। ডিভ ও স্প্যান ট্যাগ, ক্লাস ও আই.ডি,

১২। HTML এনটাইটিগুলো (<, >, &, "", $ ইত্যাদি),

১৩। HTML5 এর সিম্যান্টিক ট্যাগগুলো (হেডার, সেকশন, মেইন, আরটিক্যাল, ন্যাভ, ফুটার ইত্যাদি) ।

Module One (মডিউল ১)

সূচনা

এই পর্বে চারটি বিষয়ে ধারণা পেলাম। বিষয়গুলো হলোঃ

১। কি কি বিষয় শিখতে হবে ?

২। কিভাবে ওয়েব কাজ করে?

৩। এইচ.টি.এম.এল ও সি.এস.এস দিয়ে কিভাবে একটা সম্পূর্ণ ওয়েবসাইট বানানো হয়, তার ওভারভিও।

৪। ভি.এস.কোড, যেটি কিনা একটি কোড এডিটর এর সম্পর্কে ধারণা।

New Idea, New Thought (নতুন চিন্তা)

নতুন চিন্তা, নতুন সংযোজন

'ট্রাভারসি মিডিয়া' এর ইউটিউব চ্যানেল থেকে টপিক অনুযায়ী ভিডিও দেখার সময় যে বিষয়টা লক্ষ্য করলাম তা হল, কোন কোন ভিডিও বুঝতে সমস্যা হচ্ছে। এর একটা কারন এটা হতে পারে যে, ভিডিওগুলোতে তথ্যের শূন্যতা থাকে। দেখা যায়, কোন একটা টপিকসের সব কিছু একটা ভিডিও তে কভার করা যায় না কিংবা কভার করা হয় না। ফলে পরিপূর্ণভাবে টপিকস বুঝা যায় না। কখনও মনে হয়, অনেক দ্রুত শেষ হয়ে যাচ্ছে টপিকস।

এই সমস্যা থেকে মুক্তি পেতে নতুন একটি পরিকল্পনা করলাম। আর তা হল, অনলাইন কোর্স অনুসরন করা। ব্রাড ট্রাভারসি (যিনি ট্রাভারসি মিডিয়া পরিচালনা করেন) কিছু অনলাইন কোর্স করান ইউডেমিতে (Udemy)। সেই কোর্সগুলো থেকে বিগিনার-ফ্রেন্ডলি একটা কোর্স বাছাই করলাম, যার নাম "Modern HTML & CSS From The Beginning (Including Sass)" । এখন থেকে এই কোর্সের মডিউল অনুযায়ী এগিয়ে যাব, সেই সাথে প্রয়োজন অনুসারে অন্য কোর্স ম্যাটেরিয়ালও অনুসরণ করব।

আল্লাহ সহায়।

Web Challenge (Week 1)

The Building Blocks 

ওয়েব ডেভেলপমেন্ট শেখার প্রথম সপ্তাহে শেখা শুরু করলাম ওয়েবের একদম ব্যাসিক পর্যায়ের কিছু টপিকস। এগুলোকে বলা যায় বিল্ডিং ব্লকস। একটার ওপর একটা ব্লক/ইট রেখে যেভাবে বিল্ডিং স্ট্রাকচার দাড় করাতে হয়, সেভাবে এই টপিকস গুলোও একটা ওয়েবসাইট দাড় করাতে সহায়তা করে।

বিল্ডিং ব্লকস এর টপিকসঃ

১। HTML5 (Semantic Elements, Attributes, Doctype, etc..)

২। CSS Fundamentals (Colors, Fonts, Positioning, Box model)

৩। CSS Grid & Flexbox

৪। CSS Custom Properties (CSS Variables)

৫। CSS Transitions

টপিকসগুলো শিখতে অনেক সময় লাগলেও ভালভাবে শিখতে হবে। আমি দুইটা সোর্স থেকে মূলত সহায়তা নিয়েছি।

১। ট্রাভারসি মিডিয়া এর ইউটিউব চ্যানেল (https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)।

২। ডাব্লিউ থ্রী স্কুলস ডট কম এর ওয়েবসাইট
(https://www.w3schools.com/)।

এভাবে প্রথম মডিউল শেষ হল।

New News (নতুন সংবাদ)

আবার বাধা 

অনেক আশা নিয়ে ভর্তি হয়েছিলাম কমপ্লিট ওয়েব ডেভেলপার কোর্সটিতে । কিন্তু ট্রান্সেকশনজনিত সমস্যার কারনে কোর্সটির এনরোল হওয়া ক্যানসেল হয়ে গেল ! ফলে আর কন্টিনিউ করা গেল না। 

সমস্যার সমাধান

যাই হোক, এখন থেকে নিজে নিজে শেখা শুরু করব, আবার আগের মতো। তবে, এখন নিজেই হবো নিজের মেন্টর, নিজেই হবো নিজের গাইড ! পথ হারানো চলবে না !

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

বাংলা ভিডিওটির লিংক (https://www.youtube.com/watch?v=iPn31qRmb1A&list=PL_XxuZqN0xVCoT_76jGfgVjFolFg69uRQ&index=3&t=0s), এটি 'স্টেক লার্নার' এর সৌজন্যে  এবং ইংরেজি ভিডিওটির লিংক (https://www.youtube.com/watch?v=0pThnRneDjw), এটি আমার অন্যতম প্রিয় একটি ইউটিউব চ্যানেল 'ট্রাভারসি মিডিয়া' এর সৌজন্যে।

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

Before Starting (শুরুর আগে)

কাজ শুরুর আগে কিছু পূর্ব-প্রস্তুতি

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

Basic Computer & Environment Setup

ওয়েব ডেভেলপার চ্যালেঞ্জ শুরুর আগে কম্পিউটারের প্রাথমিক সেট-আপ সম্পন্ন করলাম। ডেভেলপমেন্ট কাজের জন্য পিসির মিনিমাম রিকয়ারমেন্টঃ- ডুয়াল কোর প্রসেসর, ৪ জিবি র‍্যাম, ১৯ ইঞ্চি মনিটর (ল্যাপটপ হলে ১৫ ইঞ্চি) এবং সাথে ভালো গতির (১/২ এমবিপিএস) ইন্টারনেট সংযোগ। মজার ব্যাপার হলো, আমার পিসির কনফিগারেশন হুবুহু একই!

আমরা ওয়েব ডেভেলপমেন্টে জাভাস্ক্রিপ্ট নিয়ে কাজ করব, তাই জাভাস্ক্রিপ্টের প্যাকেজ ম্যানেজার npm এবং NodeJS এর লেটেস্ট ভার্শন (এই লিঙ্ক থেকে ডাউনলোড করা যাবে) ইন্সটল করতে হবে। তাই, এটি ইন্সটল করে নিলাম। ইন্সটল খুবই সহজ। এই টিওটরিয়ালটি থেকে কিছু সাহায্য নিয়েছিলাম।

কোডিং করার জন্য অবশ্যই একটি কোড এডিটরের প্রয়োজন হবে। তার জন্য বেছে নিলাম ভিজুয়াল স্টুডিও কোড (VS Code) , যেটি ডাউনলোড করা যাবে এই ঠিকানা থেকে। অত্যন্ত চমৎকার একটি কোড এডিটর এটি। তবে, এটি ইন্সটল করতে আমার  কিছুটা ভোগান্তি পোহাতে হয়েছিল, কোন একটা কারনে। পরবর্তীতে VS Code এর ডকুমেন্টেশন এবং ইউটিউব থেকে সহায়তা নিয়ে সমাধান করতে পেরেছিলাম।


ব্যাসিক সেট-আপ শেষ করলাম।

About (ব্লগ সম্পর্কে)

কেন এই ব্লগ ?

অনেক দিনের (আসলে, বছরের !) ইচ্ছা ওয়েব ডিজাইনার কিংবা ডেভেলপার - এই টাইপ কিছু হব, ওয়েব নিয়ে কাজ করব। এর জন্য বিভিন্ন সময়ে শেখা শুরু করেছিলাম, বিভিন্ন রিসোর্স থেকে, অনলাইন-অফলাইন। কিন্তু সে চেষ্টাগুলো ছিল অনেকটাই বিক্ষিপ্ত! ফলে কখনই বেশি দূর যেতে পারতাম না! একবার শুরু করে কিছুদিন কাজ শিখে আবার একটা গ্যাপ হয়ে যেতো এবং এরপর আবার শুরু থেকে শুরু করতে হতে, অন্য কোন পদ্ধতিতে, অন্য কোন রিসোর্স থেকে! এভাবে অনেক বছর কেটে গেলো! ওয়েব নিয়ে কাজ শেখা, কাজ করা আর হলো না। কিন্তু ইচ্ছাটা থেকে গিয়েছিল এবং মাঝে-মাঝে সুযোগ পেলে আবার চেষ্টা অব্যহত থাকতো! 

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