এই কোর্সটি CSS এর মৌলিক বিষয়গুলিকে পরিষ্কার, হজমযোগ্য টুকরোগুলিতে ভেঙে দেয়। পরবর্তী কয়েকটি মডিউলে, আপনি শিখবেন কীভাবে CSS-এর মূল দিকগুলি কাজ করে এবং কীভাবে সেগুলিকে আপনার প্রকল্পগুলিতে কার্যকরভাবে ব্যবহার করতে হয়। মডিউল নেভিগেট করতে "সিএসএস শিখুন" লোগো দ্বারা মেনু ফলকটি ব্যবহার করুন।
আপনি বক্স মডেল, ক্যাসকেড এবং নির্দিষ্টতা, ফ্লেক্সবক্স, গ্রিড এবং জেড-ইনডেক্সের মতো CSS মৌলিক বিষয়গুলি শিখবেন। আপনি ফাংশন, রঙের ধরন, গ্রেডিয়েন্ট, লজিক্যাল বৈশিষ্ট্য এবং উত্তরাধিকার সম্পর্কেও শিখবেন যাতে আপনাকে একটি সু-বৃত্তাকার ফ্রন্টএন্ড ডেভেলপার করতে হবে, যে কোনও ব্যবহারকারী ইন্টারফেস গ্রহণের জন্য প্রস্তুত।
আপনার জ্ঞান পরীক্ষা করার জন্য প্রতিটি মডিউল ইন্টারেক্টিভ ডেমো এবং স্ব-মূল্যায়নে পূর্ণ। পড়া এবং ডেমোর মাধ্যমে শেখার পাশাপাশি, প্রতিটি বিষয়ের সাথে একটি পডকাস্ট পর্ব রয়েছে যা শিখতে এবং আপনার জ্ঞানকে প্রসারিত করার আরেকটি উপায় হিসাবে রয়েছে।
এই কোর্সটি শিক্ষানবিস এবং উন্নত CSS ডেভেলপারদের জন্য তৈরি করা হয়েছে। আপনি উপরে থেকে নীচে CSS সম্পর্কে একটি সাধারণ বোঝার জন্য শুরু থেকে শেষ পর্যন্ত সিরিজের মধ্য দিয়ে যেতে পারেন, অথবা আপনি নির্দিষ্ট স্টাইলিং বিষয়গুলির জন্য একটি রেফারেন্স হিসাবে এটি ব্যবহার করতে পারেন। সামগ্রিকভাবে যারা ওয়েব ডেভেলপমেন্টে নতুন তাদের জন্য, কিভাবে মার্কআপ লিখতে হয় এবং আপনার স্টাইলশীট লিঙ্ক করতে হয় সে সম্পর্কে জানতে HTML শিখুন দেখুন।
আপনি যা শিখবেন তা এখানে:
বক্স মডেল
যেহেতু সিএসএস প্রদর্শন করে সবকিছুই একটি বক্স, সিএসএস বক্স মডেল কীভাবে কাজ করে তা বোঝা সিএসএসের মূল ভিত্তি।
নির্বাচক
একটি উপাদানে CSS প্রয়োগ করতে, আপনাকে এটি নির্বাচন করতে হবে। CSS আপনাকে এটি করার বিভিন্ন উপায় দেয় এবং আপনি এই মডিউলে সেগুলি অন্বেষণ করতে পারেন।
ক্যাসকেড
কখনও কখনও দুই বা ততোধিক প্রতিযোগী CSS নিয়ম একটি উপাদানে প্রযোজ্য হতে পারে। ব্রাউজার কোনটি ব্যবহার করবে তা কীভাবে বেছে নেয় এবং এই নির্বাচনটি কীভাবে নিয়ন্ত্রণ করতে হয় তা খুঁজে বের করুন।
বিশেষত্ব
এই মডিউলটি ক্যাসকেডের একটি মূল অংশ, নির্দিষ্টতার উপর গভীরভাবে নজর দেয়।
উত্তরাধিকার
কিছু CSS বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যায় যদি আপনি তাদের জন্য একটি মান নির্দিষ্ট না করেন। এই মডিউলে এটি কীভাবে কাজ করে এবং কীভাবে এটি আপনার সুবিধার জন্য ব্যবহার করবেন তা খুঁজে বের করুন।
রঙ
CSS-এ রঙ নির্দিষ্ট করার বিভিন্ন উপায় রয়েছে। এই মডিউলটি সর্বাধিক ব্যবহৃত রঙের মান পরীক্ষা করে।
সাইজিং ইউনিট
ওয়েবের নমনীয় মাধ্যমের সাথে কাজ করে কিভাবে CSS ব্যবহার করে উপাদানের আকার দিতে হয় তা খুঁজে বের করুন।
লেআউট
একটি উপাদান বা পৃষ্ঠা বিন্যাস তৈরি করার সময় আপনাকে বেছে নিতে হবে এমন বিভিন্ন লেআউট পদ্ধতির একটি ওভারভিউ।
ফ্লেক্সবক্স
ফ্লেক্সবক্স হল একটি লেআউট মেকানিজম যা এক মাত্রায় আইটেমগুলির গ্রুপগুলিকে সাজানোর জন্য ডিজাইন করা হয়েছে। এই মডিউলে এটি কীভাবে ব্যবহার করবেন তা শিখুন।
গ্রিড
CSS গ্রিড লেআউট একটি দ্বিমাত্রিক বিন্যাস ব্যবস্থা প্রদান করে, সারি এবং কলামে বিন্যাস নিয়ন্ত্রণ করে। গ্রিড অফার করে সবকিছু আবিষ্কার করুন।
যৌক্তিক বৈশিষ্ট্য
যৌক্তিক, প্রবাহ-সম্পর্কিত বৈশিষ্ট্য এবং মানগুলি পাঠ্যের প্রবাহের সাথে যুক্ত, পর্দার শারীরিক আকৃতির সাথে নয়। সিএসএস-এর এই নতুন পদ্ধতির সুবিধা কীভাবে নেওয়া যায় তা শিখুন।
ব্যবধান
আপনি যে লেআউট পদ্ধতিটি ব্যবহার করছেন এবং আপনি যে উপাদানটি তৈরি করছেন তার জন্য স্পেসিং উপাদানগুলির সেরা পদ্ধতিটি কীভাবে নির্বাচন করবেন তা সন্ধান করুন।
ছদ্ম-উপাদান
একটি ছদ্ম-উপাদান হল আরও এইচটিএমএল যোগ না করে একটি অতিরিক্ত উপাদান যোগ করা বা লক্ষ্য করার মতো। তাদের বিভিন্ন ভূমিকা রয়েছে এবং আপনি এই মডিউলে তাদের সম্পর্কে জানতে পারবেন।
ছদ্ম-শ্রেণী
সিউডো-ক্লাসগুলি আপনাকে রাজ্যের পরিবর্তনের উপর ভিত্তি করে CSS প্রয়োগ করতে দেয়। এর মানে হল আপনার ডিজাইন ব্যবহারকারীর ইনপুটে প্রতিক্রিয়া জানাতে পারে, যেমন একটি অবৈধ ইমেল ঠিকানা।
সীমানা
একটি সীমানা আপনার বাক্সগুলির জন্য একটি ফ্রেম প্রদান করে। সিএসএস ব্যবহার করে বর্ডারগুলির আকার, শৈলী এবং রঙ কীভাবে পরিবর্তন করবেন তা সন্ধান করুন।
ছায়া
CSS-এ পাঠ্য এবং উপাদানগুলিতে ছায়া যোগ করার অনেক উপায় রয়েছে। প্রতিটি বিকল্প কীভাবে ব্যবহার করতে হয় এবং তারা যে কাজগুলির জন্য ডিজাইন করা হয়েছিল তা শিখুন।
ফোকাস
আপনার ওয়েব অ্যাপ্লিকেশনগুলিতে ফোকাসের গুরুত্ব বুঝুন। আপনি শিখবেন কীভাবে ফোকাস পরিচালনা করতে হয় এবং কীভাবে নিশ্চিত করা যায় যে আপনার পৃষ্ঠার পথটি মাউস ব্যবহার করে এবং নেভিগেট করার জন্য কীবোর্ড ব্যবহারকারী উভয়ের জন্য কাজ করে।
Z-সূচক এবং স্ট্যাকিং প্রসঙ্গ
z-index এবং স্ট্যাকিং প্রসঙ্গ ব্যবহার করে একে অপরের উপরে উপাদানের স্তরটি কীভাবে নিয়ন্ত্রণ করবেন তা খুঁজে বের করুন।
ফাংশন
CSS-এর অন্তর্নির্মিত ফাংশনের একটি পরিসীমা রয়েছে। কিছু মূল ফাংশন এবং সেগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে জানুন।
গ্রেডিয়েন্ট
এই মডিউলে, আপনি CSS-এ উপলব্ধ বিভিন্ন ধরণের গ্রেডিয়েন্ট কীভাবে ব্যবহার করবেন তা খুঁজে পাবেন। গ্রেডিয়েন্টগুলি ইমেজ তৈরি করার জন্য গ্রাফিক্স অ্যাপের প্রয়োজন ছাড়াই দরকারী প্রভাবগুলির সম্পূর্ণ হোস্ট তৈরি করতে পারে।
অ্যানিমেশন
অ্যানিমেশন ইন্টারেক্টিভ উপাদানগুলিকে হাইলাইট করার এবং আপনার ডিজাইনগুলিতে আগ্রহ এবং মজা যোগ করার একটি দুর্দান্ত উপায়। সিএসএস দিয়ে অ্যানিমেশন প্রভাবগুলি কীভাবে যুক্ত এবং নিয়ন্ত্রণ করতে হয় তা সন্ধান করুন।
ফিল্টার
CSS-এ ফিল্টার মানে আপনি এমন প্রভাব প্রয়োগ করতে পারেন যা আপনি ভাবতে পারেন শুধুমাত্র একটি গ্রাফিক্স অ্যাপ্লিকেশনে সম্ভব। এই মডিউলে, আপনি কি উপলব্ধ আছে তা আবিষ্কার করতে পারেন।
ব্লেন্ড মোড
দুই বা ততোধিক স্তর মিশ্রিত করে রচনামূলক প্রভাব তৈরি করুন এবং ব্লেন্ড মোডে এই মডিউলে একটি সাদা পটভূমি সহ একটি চিত্রকে কীভাবে আলাদা করতে হয় তা শিখুন।
তালিকা
একটি তালিকা, কাঠামোগতভাবে, তালিকা আইটেম দ্বারা ভরা একটি তালিকা ধারক উপাদান দিয়ে গঠিত। এই মডিউলে, আপনি শিখবেন কিভাবে একটি তালিকার সমস্ত অংশ স্টাইল করতে হয়।
রূপান্তর
একটি উপাদানের অবস্থার মধ্যে রূপান্তর কিভাবে সংজ্ঞায়িত করতে হয় তা শিখুন। ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য ভিজ্যুয়াল ফিডব্যাক প্রদান করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে ট্রানজিশন ব্যবহার করুন।
উপচে পড়া
ওভারফ্লো হল আপনি এমন সামগ্রীর সাথে কীভাবে মোকাবিলা করেন যা একটি সেট প্যারেন্ট আকারের সাথে খাপ খায় না। এই মডিউলে, আপনি বাক্সের বাইরে চিন্তা করবেন এবং কীভাবে উপচে পড়া বিষয়বস্তুকে স্টাইল করবেন তা শিখবেন।
পটভূমি
সিএসএস ব্যবহার করে বক্সের ব্যাকগ্রাউন্ড স্টাইল করতে শিখুন।
পাঠ্য এবং টাইপোগ্রাফি
ওয়েবে টেক্সট স্টাইল করতে শিখুন।
উপসংহার এবং পরবর্তী পদক্ষেপ
আপনার পরবর্তী পদক্ষেপ নিতে সাহায্য করার জন্য আরও সংস্থান।
তো, আপনি কি সিএসএস শিখতে প্রস্তুত? চল শুরু করি .
,এই কোর্সটি CSS এর মৌলিক বিষয়গুলিকে পরিষ্কার, হজমযোগ্য টুকরোগুলিতে ভেঙে দেয়। পরবর্তী কয়েকটি মডিউলে, আপনি শিখবেন কীভাবে CSS-এর মূল দিকগুলি কাজ করে এবং কীভাবে সেগুলিকে আপনার প্রকল্পগুলিতে কার্যকরভাবে ব্যবহার করতে হয়। মডিউল নেভিগেট করতে "সিএসএস শিখুন" লোগো দ্বারা মেনু ফলকটি ব্যবহার করুন।
আপনি বক্স মডেল, ক্যাসকেড এবং নির্দিষ্টতা, ফ্লেক্সবক্স, গ্রিড এবং জেড-ইনডেক্সের মতো CSS মৌলিক বিষয়গুলি শিখবেন। আপনি ফাংশন, রঙের ধরন, গ্রেডিয়েন্ট, লজিক্যাল বৈশিষ্ট্য এবং উত্তরাধিকার সম্পর্কেও শিখবেন যাতে আপনাকে একটি সু-বৃত্তাকার ফ্রন্টএন্ড ডেভেলপার করতে হবে, যে কোনও ব্যবহারকারী ইন্টারফেস গ্রহণের জন্য প্রস্তুত।
আপনার জ্ঞান পরীক্ষা করার জন্য প্রতিটি মডিউল ইন্টারেক্টিভ ডেমো এবং স্ব-মূল্যায়নে পূর্ণ। পড়া এবং ডেমোর মাধ্যমে শেখার পাশাপাশি, প্রতিটি বিষয়ের সাথে একটি পডকাস্ট পর্ব রয়েছে যা শিখতে এবং আপনার জ্ঞানকে প্রসারিত করার আরেকটি উপায় হিসাবে রয়েছে।
এই কোর্সটি শিক্ষানবিস এবং উন্নত CSS ডেভেলপারদের জন্য তৈরি করা হয়েছে। আপনি উপরে থেকে নীচে CSS সম্পর্কে একটি সাধারণ বোঝার জন্য শুরু থেকে শেষ পর্যন্ত সিরিজের মধ্য দিয়ে যেতে পারেন, অথবা আপনি নির্দিষ্ট স্টাইলিং বিষয়গুলির জন্য একটি রেফারেন্স হিসাবে এটি ব্যবহার করতে পারেন। সামগ্রিকভাবে যারা ওয়েব ডেভেলপমেন্টে নতুন তাদের জন্য, কিভাবে মার্কআপ লিখতে হয় এবং আপনার স্টাইলশীট লিঙ্ক করতে হয় সে সম্পর্কে জানতে HTML শিখুন দেখুন।
আপনি যা শিখবেন তা এখানে:
বক্স মডেল
যেহেতু সিএসএস প্রদর্শন করে সবকিছুই একটি বক্স, সিএসএস বক্স মডেল কীভাবে কাজ করে তা বোঝা সিএসএসের মূল ভিত্তি।
নির্বাচক
একটি উপাদানে CSS প্রয়োগ করতে, আপনাকে এটি নির্বাচন করতে হবে। CSS আপনাকে এটি করার বিভিন্ন উপায় দেয় এবং আপনি এই মডিউলে সেগুলি অন্বেষণ করতে পারেন।
ক্যাসকেড
কখনও কখনও দুই বা ততোধিক প্রতিযোগী CSS নিয়ম একটি উপাদানে প্রযোজ্য হতে পারে। ব্রাউজার কোনটি ব্যবহার করবে তা কীভাবে বেছে নেয় এবং এই নির্বাচনটি কীভাবে নিয়ন্ত্রণ করতে হয় তা খুঁজে বের করুন।
বিশেষত্ব
এই মডিউলটি ক্যাসকেডের একটি মূল অংশ, নির্দিষ্টতার উপর গভীরভাবে নজর দেয়।
উত্তরাধিকার
কিছু CSS বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যায় যদি আপনি তাদের জন্য একটি মান নির্দিষ্ট না করেন। এই মডিউলে এটি কীভাবে কাজ করে এবং কীভাবে এটি আপনার সুবিধার জন্য ব্যবহার করবেন তা সন্ধান করুন।
রঙ
CSS-এ রঙ নির্দিষ্ট করার বিভিন্ন উপায় রয়েছে। এই মডিউলটি সর্বাধিক ব্যবহৃত রঙের মান পরীক্ষা করে।
সাইজিং ইউনিট
ওয়েবের নমনীয় মাধ্যমের সাথে কাজ করে কিভাবে CSS ব্যবহার করে উপাদানের আকার দিতে হয় তা খুঁজে বের করুন।
লেআউট
একটি উপাদান বা পৃষ্ঠা বিন্যাস তৈরি করার সময় আপনাকে বেছে নিতে হবে এমন বিভিন্ন লেআউট পদ্ধতির একটি ওভারভিউ।
ফ্লেক্সবক্স
ফ্লেক্সবক্স হল একটি লেআউট মেকানিজম যা এক মাত্রায় আইটেমগুলির গ্রুপগুলিকে সাজানোর জন্য ডিজাইন করা হয়েছে। এই মডিউলে এটি কীভাবে ব্যবহার করবেন তা শিখুন।
গ্রিড
CSS গ্রিড লেআউট একটি দ্বিমাত্রিক বিন্যাস ব্যবস্থা প্রদান করে, সারি এবং কলামে বিন্যাস নিয়ন্ত্রণ করে। গ্রিড অফার করে সবকিছু আবিষ্কার করুন।
যৌক্তিক বৈশিষ্ট্য
যৌক্তিক, প্রবাহ-সম্পর্কিত বৈশিষ্ট্য এবং মানগুলি পাঠ্যের প্রবাহের সাথে যুক্ত, পর্দার শারীরিক আকৃতির সাথে নয়। সিএসএস-এর এই নতুন পদ্ধতির সুবিধা কীভাবে নেওয়া যায় তা শিখুন।
ব্যবধান
আপনি যে লেআউট পদ্ধতিটি ব্যবহার করছেন এবং আপনি যে উপাদানটি তৈরি করছেন তার জন্য স্পেসিং উপাদানগুলির সেরা পদ্ধতিটি কীভাবে নির্বাচন করবেন তা সন্ধান করুন।
ছদ্ম-উপাদান
একটি ছদ্ম-উপাদান হল আরও এইচটিএমএল যোগ না করে একটি অতিরিক্ত উপাদান যোগ করা বা লক্ষ্য করার মতো। তাদের বিভিন্ন ভূমিকা রয়েছে এবং আপনি এই মডিউলে তাদের সম্পর্কে জানতে পারবেন।
ছদ্ম-শ্রেণী
সিউডো-ক্লাসগুলি আপনাকে রাজ্যের পরিবর্তনের উপর ভিত্তি করে CSS প্রয়োগ করতে দেয়। এর মানে হল আপনার ডিজাইন ব্যবহারকারীর ইনপুটে প্রতিক্রিয়া জানাতে পারে, যেমন একটি অবৈধ ইমেল ঠিকানা।
সীমানা
একটি সীমানা আপনার বাক্সগুলির জন্য একটি ফ্রেম প্রদান করে। সিএসএস ব্যবহার করে বর্ডারগুলির আকার, শৈলী এবং রঙ কীভাবে পরিবর্তন করবেন তা সন্ধান করুন।
ছায়া
CSS-এ পাঠ্য এবং উপাদানগুলিতে ছায়া যোগ করার অনেক উপায় রয়েছে। প্রতিটি বিকল্প কীভাবে ব্যবহার করতে হয় এবং তারা যে কাজগুলির জন্য ডিজাইন করা হয়েছিল তা শিখুন।
ফোকাস
আপনার ওয়েব অ্যাপ্লিকেশনগুলিতে ফোকাসের গুরুত্ব বুঝুন। আপনি শিখবেন কীভাবে ফোকাস পরিচালনা করতে হয় এবং কীভাবে নিশ্চিত করা যায় যে আপনার পৃষ্ঠার পথটি মাউস ব্যবহার করে এবং নেভিগেট করার জন্য কীবোর্ড ব্যবহারকারী উভয়ের জন্য কাজ করে।
Z-সূচক এবং স্ট্যাকিং প্রসঙ্গ
z-index এবং স্ট্যাকিং প্রসঙ্গ ব্যবহার করে একে অপরের উপরে উপাদানের স্তরটি কীভাবে নিয়ন্ত্রণ করবেন তা খুঁজে বের করুন।
ফাংশন
CSS-এর অন্তর্নির্মিত ফাংশনের একটি পরিসীমা রয়েছে। কিছু মূল ফাংশন এবং সেগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে জানুন।
গ্রেডিয়েন্ট
এই মডিউলে, আপনি CSS-এ উপলব্ধ বিভিন্ন ধরণের গ্রেডিয়েন্ট কীভাবে ব্যবহার করবেন তা খুঁজে পাবেন। গ্রেডিয়েন্টগুলি ইমেজ তৈরি করার জন্য গ্রাফিক্স অ্যাপের প্রয়োজন ছাড়াই দরকারী প্রভাবগুলির সম্পূর্ণ হোস্ট তৈরি করতে পারে।
অ্যানিমেশন
অ্যানিমেশন ইন্টারেক্টিভ উপাদানগুলিকে হাইলাইট করার এবং আপনার ডিজাইনগুলিতে আগ্রহ এবং মজা যোগ করার একটি দুর্দান্ত উপায়। সিএসএস দিয়ে অ্যানিমেশন প্রভাবগুলি কীভাবে যুক্ত এবং নিয়ন্ত্রণ করতে হয় তা সন্ধান করুন।
ফিল্টার
CSS-এ ফিল্টার মানে আপনি এমন প্রভাব প্রয়োগ করতে পারেন যা আপনি ভাবতে পারেন শুধুমাত্র একটি গ্রাফিক্স অ্যাপ্লিকেশনে সম্ভব। এই মডিউলে, আপনি কি উপলব্ধ আছে তা আবিষ্কার করতে পারেন।
ব্লেন্ড মোড
দুই বা ততোধিক স্তর মিশ্রিত করে রচনামূলক প্রভাব তৈরি করুন এবং ব্লেন্ড মোডে এই মডিউলে একটি সাদা পটভূমি সহ একটি চিত্রকে কীভাবে আলাদা করতে হয় তা শিখুন।
তালিকা
একটি তালিকা, কাঠামোগতভাবে, তালিকা আইটেম দ্বারা ভরা একটি তালিকা ধারক উপাদান দিয়ে গঠিত। এই মডিউলে, আপনি শিখবেন কিভাবে একটি তালিকার সমস্ত অংশ স্টাইল করতে হয়।
রূপান্তর
একটি উপাদানের অবস্থার মধ্যে রূপান্তর কিভাবে সংজ্ঞায়িত করতে হয় তা শিখুন। ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য ভিজ্যুয়াল ফিডব্যাক প্রদান করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে ট্রানজিশন ব্যবহার করুন।
উপচে পড়া
ওভারফ্লো হল আপনি এমন সামগ্রীর সাথে কীভাবে মোকাবিলা করেন যা একটি সেট প্যারেন্ট আকারের সাথে খাপ খায় না। এই মডিউলে, আপনি বাক্সের বাইরে চিন্তা করবেন এবং কীভাবে উপচে পড়া বিষয়বস্তুকে স্টাইল করবেন তা শিখবেন।
পটভূমি
সিএসএস ব্যবহার করে বক্সের ব্যাকগ্রাউন্ড স্টাইল করতে শিখুন।
পাঠ্য এবং টাইপোগ্রাফি
ওয়েবে টেক্সট স্টাইল করতে শিখুন।
উপসংহার এবং পরবর্তী পদক্ষেপ
আপনার পরবর্তী পদক্ষেপ নিতে সাহায্য করার জন্য আরও সংস্থান।
তো, আপনি কি সিএসএস শিখতে প্রস্তুত? চল শুরু করি .