ওয়েব ডিজাইন

দ্বিতীয় পর্বঃ- সহজেই শিখুন ব্যাসিক সিএসএস

Things To Learn For Basic Web Design Part 2

দ্বিতীয় পর্বের আলোচ্য বিষয়ঃ- ব্যাসিক সিএসএস

১২০ দিনের ব্যাসিক ওয়েব ডিজাইন শেখার ফ্রি চ্যালেঞ্জের সিরিজ পোষ্টের দ্বিতীয় পর্বে আপনার সাথে আলোচনা করতে যাচ্ছি ওয়েব ডিজাইনের জন্য একটি গুরুত্বপূর্ণ বিষয় সি এস এস নিয়ে। আজ আলোচনা করব সি এস এস কি? কেন? কি কি শিখব? কতটুকু শিখব ইত্যাদি বিষয়গুলো নিয়ে।
প্রশ্নগুলোর গঠনমূলক উত্তর সহ বিস্তারিত আলোচনা করার চেষ্টা করব ইনশাআল্লাহ। চলুন শুরু করি
চাইলে প্রথম পর্ব পড়ে আসতে পারেন। পূর্বেকার মতো এবারেও শুরুতেই বলে নিচ্ছি এই পোষ্টে কোনো প্রতিষ্ঠানকে প্রোমোট করা হবে না বা এটা কোন ব্যাবসায়িক চিন্তা ধারার পোষ্ট নয়।
ওয়েব ডিজাইন ও ডেভেলপমেন্ট শেখার আগ্রহ প্রায় সবার মধ্যে থাকলেও অনেকসময় নানাবিধ সমস্যার কারণে হয়ত কেউ দক্ষ মেন্টর পান না কিংবা ভালো কোনো ট্রেইনিং ইন্সটিটিউটে ভর্তি হতে পারেন না। তাই, তাদের জন্য দ্রুত এবং সহজেই নিজে নিজেই ব্যাসিক ওয়েব ডিজাইন শেখার সুযোগ করে দেয়াই আমার উদ্দেশ্য। আমি নিজেও শুধু মাত্র গুগল এবং ইউটিউব থেকেই ব্যাসিক হতে শুরু করে এডভান্স পর্যায়ের কাজ শিখেছি এবং এখনো শিখছি।
ওয়েব ডিজাইন এর ক্ষেত্রে একটি ওয়েবসাইটকে তৈরি করার জন্য প্রথমে এর স্ট্রাকচার বা কাঠামো কিংবা সহজ ভাষায়, এর কঙ্কাল তৈরি করা হয়। আর এই স্ট্রাকচার তৈরির জন্য এইচ টি এম এল অর্থাৎ, হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ এর ব্যাবহার করতে হয়। এইচ টি এম এল সম্পর্কে পূর্বের পোষ্ট গুলোতে যথেষ্ট ধারণা দেয়া হয়েছে। আজকের পোষ্টে শুধুমাত্র ব্যাসিক সি এস এস অর্থাৎ, ক্যাসকেডিং স্টাইল শিট সম্পর্কে বিস্তারিত ধারণা দেয়া হবে।
ওয়েবসাইট ডিজাইন এর জন্য এইচ টি এম এল ব্যবহার করে ওয়েবসাইটের স্ট্রাকচার তৈরি করা হয়ে গেলে ওয়েবসাইট টির লেআউট আরো সুন্দর এবং দৃষ্টিনন্দন করার জন্য সি এস এস এর ব্যাবহার করা হবে। একটি ওয়েবসাইটকে মানব দেহের সাথে তুলনা করলে, মানব দেহের কঙ্কাল হলো ওয়েবের ক্ষেত্রে একটি ওয়েবসাইটের স্ট্রাকচার বা কাঠামোর মত। অপরদিকে, কংকালের ওপর মাংস, চামড়া দিয়ে ঢেকে দিয়ে মানব দেহকে আরো সুন্দর, আকর্ষনীয় করে দেয়াকে আমরা সি এস এস এর সাথে তুলনা করতে পারি। শুধুমাত্র এইচ টি এম এল ব্যাবহার করে তৈরি করা ওয়েবসাইটকে দেখতে বেশী আকর্ষনীয় বলে মনে হয় না। তাই, ওয়েবসাইটের সম্পূর্ণ চেহারা বদলে দিয়ে প্রফেশনাল এর মতো দেখানোর জন্য আমরা সি এস এস ব্যাবহার করতে পারি।
দ্বিতীয় পর্বঃ- ব্যাসিক সি এস এস
আমাদের ১২০ দিনের চ্যালেঞ্জের ০৭ দিনে ব্যাসিক এইচ টি এম এল শেখা শেষ হলে পরবর্তী ১৫ দিন ব্যাসিক সি এস এস শেখার জন্য ব্যয় করতে হবে। ব্যাসিক সি এস এস শেখার জন্যে প্রথমেই গুগল এবং ইউটিউব থেকে এর সম্পর্কে একটু আধটু জেনে নিতে হবে। ব্যাসিক শেখার জন্য দশ থেকে পনেরো দিনই যথেষ্ট। একদম ফ্রিতেই সব কিছু গুগল এবং ইউটিউবে পেয়ে যাবেন এবং ব্যাসিক অবস্থাতেই ইংরেজি ভাষার কোনো আর্টিকেল পড়বেন না বা ভিডিও টিউটোরিয়াল দেখতে যাবেন না, ব্যাসিক অবস্থায় সব বাংলা টিউটোরিয়াল গুলো দেখবেন। গুগলে সার্চ করতে পারেন,
  • css মানে কি?
  • css কত প্রকার?
  • কেন css ব্যবহার করবেন?
  • css দিয়ে কি কি করা যায়?
  • সিএসএস কেনো প্রয়োজন?
এই বিষয়ে অগণিত উত্তর পেয়ে যাবেন। ইউটিউব থেকে সি এস এস শেখার জন্য সার্চ করতে পারেন,
  • css tutorial in bangla
  • bangla css full tutorial
  • css bangla tutorial for beginners full
  • css3 bangla tutorial
এলোমেলো ভিডিওতে ঘোরাঘুরি না করে প্লে লিস্ট খুঁজে নিয়ে সেখান থেকে শিখুন। তাহলে দ্রুত শেখা হবে এবং সময় বেঁচে যাবে। সার্চ রেজাল্টে শুধু প্লে লিস্ট দেখার জন্য কীওয়ার্ড দিয়ে সার্চ করার পরে FILTER এ ক্লিক করে TYPE এর কলাম থেকে Playlist সিলেক্ট করলেই হয়ে যাবে।
ভিডিও দেখে শেখার আগে নিচে লেখা গাইডলাইন মনোযোগ সহকারে পড়ে নিন। শেখার ক্ষেত্রে চাইলে এই গাইডলাইন অনুসরণ করতে পারেন। পরবর্তী পোষ্টে জাভাস্ক্রিপ্ট এর গাইডলাইন নিয়ে আলোচনা করা হবে।
ওয়েবসাইটের যেকোনো সেকশন, এলিমেন্ট ইত্যাদি ডিজাইন করে ওয়েবসাইটকে আরো সুন্দর ভাবে উপস্থাপনের জন্য আমরা সি এস এস শিখব।

যেভাবে শুরু করতে পারি ব্যাসিক সি এস এস শেখাঃ-

  • প্রথম দিনঃ- ব্যাসিক সি এস এস শেখার প্রথম দিন আপনি শিখবেন, কিভাবে একটি এইচ টি এম এল ডকুমেন্টে সি এস এস লিংক করা হয়, সি এস এস এ ব্যবহৃত সিনট্যাক্স কি? প্রপার্টি কি? ভ্যালু ইত্যাদি কি সেসব সম্পর্কে ধারণা অর্জন করা দিয়ে। । প্রথম দিন এগুলো সম্পর্কে ধারণা নিতে পারলেই যথেষ্ট।
  • দ্বিতীয় দিনঃ- এই দিনে আপনি শিখবেন কিভাবে একটি সি এস এসডকুমেন্টে কমেন্ট লিখতে হয়, সিলেক্টর কাকে বলে, সিলেক্টর কত প্রকার বা কত ভাবে একটা ট্যাগকে সিলেক্ট করা যায়, কত উপায়ে একটি ওয়েবসাইটে সি এস এস স্থাপন করা যায়।
  • তৃতীয় দিনঃ- এই দিনে কিভাবে সি এস এস দিয়ে কালার ব্যাবহার করা যায়, ব্যাকগ্রাউন্ড কি, মার্জিন কি, প্যাডিং কি? এগুলো নিয়ে প্র্যাক্টিকালী শেখা শুরু করে দেবেন।
  • চতুর্থ দিনঃ- এই দিনে কিভাবে কোনো এলিমেন্ট এ বর্ডার ব্যাবহার করা যায়, কোনো এলিমেন্টের দৈর্ঘ, প্রস্থ কিভাবে লেখা হয়, কিভাবে আউটলাইন তৈরি করা যায় ইত্যাদি শিখবেন।
  • পঞ্চম দিনঃ- এই দিনে শুধু টেক্সট এবং এসম্পর্কিত কাজ গুলো শিখবেন। ফন্ট কি, ফন্টের সাইজ কিভাবে বাড়ানো-কমানো যায়, ফন্ট কিভাবে বদলাতে হয়, টেক্সটের এলাইনমেন্ট কি, টেক্সট এর বিভিন্ন স্টাইলিং যেমন বোল্ড টেক্সট, স্ট্রাইক টেক্সট, ইটালিক টেক্সট , আন্ডারলাইন টেক্সট ইত্যাদি সম্পর্কে ব্যাপক ধারণা অর্জন করবেন।
  • ষষ্ঠ দিনঃ- এই দিনে এইচ টি এম এল এর কোনো লিংক কে কিভাবে স্টাইল করতে হয়, কিভাবে ওয়েবসাইটে আইকন ব্যাবহার করতে হয়, কিভাবে একটি লিস্ট কে স্টাইল করতে হয় শিখবেন।
  • সপ্তম দিনঃ- ওয়েবসাইটে মাঝে মাঝেই টেবিল তৈরি করার দরকার হয়। তাই এই দিনে কিভাবে একটি টেবিলকে স্টাইল করা যায়, টেবিলে কিভাবে বর্ডার ব্যবহার করতে হয়, টেবিলে ব্যবহৃত রো কি, কলাম কি, টেবিলের সাইজ কিভাবে বড় করা যায় ইত্যাদি শিখবেন।
  • অষ্টম দিনঃ- এই দিনে একটু বেশী কিছু টপিক শিখতে হবে। সি এস এস এর ডিসপ্লে প্রপার্টি কি, এটা কেনো ব্যবহৃত হয়, পজিশন প্রপার্টি কি, কিভাবে এটিকে ব্যবহার করা হয়, ইনলাইন ব্লক প্রপার্টি কি, ওভার ফ্লো প্রপার্টি কি, ফ্লোট প্রপার্টি কি? এই বিষয় গুলো খুবই গুরুত্ব সহকারে শিখবেন।
  • নবম দিনঃ- এই দিনে যেকোনো এলিমেন্ট এর এলাইনমেন্ট কিভাবে করে, এলাইনমেন্ট কত ধরণের, কম্বিনেটর কি, যেকোনো এলিমেন্টের opacity কিভাবে বাড়াতে হয় ইত্যাদি সম্পর্কে ব্যাপক ধারণা অর্জন করবেন।
  • দশম দিনঃ- এই দিনে বেশ কিছু আকর্ষনীয় কাজ শিখবেন। কিভাবে একটি নেভিগেশন বার বা মেইন মেনু তৈরি করে সেটা সি এস এস ব্যাবহার করে আরো সুন্দর এবং নান্দনিক করবেন, কিভাবে একটি ড্রপডাউন মেনু তৈরি করে স্টাইল করবেন এবং কিভাবে একটি টেবিল অব কন্টেন্ট তৈরি করে স্টাইল করা যায় এগুলো অত্যান্ত গুরুত্বের সাথে শিখবেন।
  • একাদশ তম দিনঃ- এই দিনে বর্ডার রেডিয়াস কি, গ্রেডিয়েন্ট কালার কিভাবে ব্যাবহার করে, শ্যাডো ব্যাবহার করে কিভাবে, কিভাবে একটি পেজিনেশন তৈরি করে স্টাইল করবেন এবং বক্স সাইজিং কি ইত্যাদি প্র্যাক্টিকালী শেখার চেষ্টা করবেন।
  • দ্বাদশ তম দিনঃ- ওয়েবসাইটে ফর্ম একটি গুরুত্বপূর্ণ জিনিশ। তাই কিভাবে একটি ফর্ম কে এবং এর বিভিন্ন ইনপুটকে স্টাইল করা যায়, কিভাবে চেক বক্স স্টাইল করা যায়, কিভাবে একটি টুল টিপ তৈরি করা যায় এসব প্র্যাক্টিকালী শিখবেন।
  • ত্রয়োদশ তম দিনঃ- শেষ তিন দিন অন্তত তিনটি প্রজেক্ট তৈরি করার মাধ্যমে আপনার ব্যাসিক সি এস এস শেখার সমাপ্তি ঘটাবেন। তাই, এই দিনে একটি সাধারণ কন্টাক্ট ফর্ম এবং একটি সাইন ইন ফর্ম শুধুমাত্র এইচ টি এম এলসি এস এস ব্যাবহার করে।
  • চতুর্দশ তম দিনঃ- এই দিনে সি এস এসব্যাবহার করে সি এস এস কার্ড ডিজাইন করবেন, একটি রেজিস্ট্রেশন ফর্ম ডিজাইন করবেন শুধুমাত্র এইচ টি এম এলসি এস এস ব্যাবহার করে।
  • পঞ্চদশ তম দিনঃ- সর্বশেষ দিনে একটি খুব সাধারণ মানের নিজের প্রথম এক পেইজের পোর্টফোলিও ওয়েব সাইট ডিজাইন করবেন যেখানে হেডার অংশে থাকবে একটি লোগো এবং নেভিগেশন বার, এর পরের বডি অংশে থাকবে একটি হেডলাইন সমৃদ্ধ কিছু সাধারণ লেখা, এর পরের অংশে একটি কন্টাক্ট ফর্ম থাকবে এবং সর্বশেষ অংশে বা ফুটার অংশে থাকবে আপনার নাম এবং আপনার সোশাল মিডিয়া প্রোফাইলের লিংক গুলো।

এভাবেই সফল প্রজেক্টের মাধ্যমে শেষ করবেন ব্যাসিক সি এস এস শেখা।

আজ এপর্যন্তই। তৃতীয় পর্বঃ ব্যাসিক জাভাস্ক্রিপ্ট পড়ুন এখান থেকেই
সবাই ভালো থাকুন, সুস্থ থাকুন এবং সফল ফ্রিল্যান্সার এর সাথেই থাকুন। সবসময় অধ্যাবসায় চালিয়ে যান, শেখার প্রতি লেগে থাকুন। শুভ কামনা এবং ভালোবাসা রইলো সবার প্রতি।
লেখালেখি তে আমি একেবারেই নতুন। তাই সকল প্রকার ভুল ক্ষমার দৃষ্টিতে দেখার অনুরোধ রইলো।
আপনাদের অগণিত অনুপ্রেরণামূলক এবং নতুন পোষ্ট লেখার জন্য অনুরোধমূলক কমেন্ট এর জন্য অসংখ্য ধন্যবাদ। কোনো প্রকার সমস্যার জন্য কমেন্ট করবেন।
ধন্যবাদ
Al Nahian

Author

Al Nahian

Leave a comment

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না। * চিহ্নিত বিষয়গুলো আবশ্যক।