প্রমাণিত ব্যায়াম এবং কুইজ সহ মাস্টার সিএসএস

ক্যাসকেডিং স্টাইল শীট (সিএসএস) হল একটি প্রযুক্তিগত ভাষা যা ওয়েব পেজ এবং অ্যাপ্লিকেশনের বিন্যাস এবং কাঠামো তৈরি করতে ব্যবহৃত হয়। CSS-এর সাহায্যে, আপনি একটি ওয়েবপৃষ্ঠার শৈলী তৈরি করতে পারেন এবং একটি প্রতিক্রিয়াশীল ওয়েবপেজ ডিজাইন তৈরি করতে পারেন, একটি সাইটকে ডেস্কটপ এবং মোবাইল উভয় ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য করে তোলে৷

প্রকৃতপক্ষে, CSS-এ দক্ষতা প্রয়োজন এমন 35,000-এর বেশি চাকরি এই মুহূর্তে উপলব্ধ। CSS-এর জ্ঞান হল সেরা ডিজিটাল দক্ষতাগুলির মধ্যে একটি, বিশেষ করে যেমন এটি ফ্রন্ট এন্ড ডেভেলপমেন্ট এবং গেম ডেভেলপমেন্ট সহ অনেক ক্যারিয়ার ক্ষেত্র জুড়ে কাঙ্ক্ষিত। এই নিবন্ধটি সেরা কিছু CSS অনুশীলন এবং শিক্ষানবিস-বান্ধব প্রকল্প কভার করে। 

আপনাকে CSS-এ প্রাথমিক জ্ঞান প্রদান করার জন্য নিচে কিছু CSS অনুশীলন অনুশীলন রয়েছে। আপনার বর্তমান প্রোগ্রামিং স্তর উন্নত করতে আমরা অতিরিক্ত সংস্থানগুলিও তালিকাভুক্ত করব। এগুলি আপনার প্রতিদিনের কাজগুলিতে সাহায্য করবে, আপনার CSS দক্ষতা বিকাশ করবে এবং প্রযুক্তিগত CSS ইন্টারভিউ প্রশ্নের উত্তর দিতে আপনাকে প্রস্তুত করবে। 

10 CSS ব্যায়াম এবং অনুশীলনের সমস্যা (সমাধান সহ)

1. CSS লিঙ্ক রঙ

CSS লিঙ্কের রঙগুলি ওয়েবসাইটে এম্বেড করা অ্যাঙ্কর লিঙ্কগুলির রঙগুলি প্রদান করে এবং নিয়ন্ত্রণ করে। এই ফাংশনটি এম্বেড করা লিঙ্কগুলিকে আপনার পাঠ্যের বিকল্প রঙে সংজ্ঞায়িত করে যাতে সেগুলিকে আলাদা করে তোলা যায়। এই রঙের স্কিমগুলি কীভাবে পরিবর্তন করতে হয় এবং ব্যবহারকারীর অভিজ্ঞতার সময় একটি লিঙ্ক কোন পর্যায়ে যায় তা শেখা অত্যাবশ্যক৷

সমাধান: আপনি সিএসএস লিঙ্ক রঙ শিখতে একটি ধাপে ধাপে নির্দেশিকা ব্যবহার করতে পারেন। CSS ট্রিকস এবং W3schools আপনার দক্ষতা বাড়াতে CSS লিঙ্ক কালার অনুশীলন অনুশীলনও প্রদান করে।

2. CSS বক্স মডেলের সাথে কাজ করা

একটি সিএসএস বক্স মডেল প্যাডিং, সীমানা এবং বিষয়বস্তুকে ঘিরে মার্জিন যোগ করার সময় সিএসএস উপাদানগুলির আকার কীভাবে গণনা করা হয় তা নির্ধারণ করে এমন নিয়মগুলিকে বোঝায়। অপর্যাপ্ত CSS বক্স মডেলিং অপর্যাপ্ত প্রতিক্রিয়াশীলতা এবং ভঙ্গুর লেআউটের কারণ হতে পারে।

সমাধান: সিএসএস বক্স মডেলের জন্য একটি নির্দেশিকা অনুসরণ করুন। আপনি MDN ওয়েব ডক্সের সাথে আপনার বক্স মডেলিং দক্ষতা অনুশীলন করতে পারেন।  

3. ফন্ট-ওজন নিয়ে কাজ করা

ভুল ফন্ট-ওজন ঘোষণা করলে পাঠ্য এমনভাবে প্রদর্শিত হতে পারে যা আপনি যা চেয়েছিলেন তার বিপরীত। বিকল্পভাবে, কখনও কখনও, আপনি সঠিক CSS নিয়ম রাখতে পারেন এবং পাঠ্যটি এখনও এটির মতো কাজ করবে না। এটি একটি 2D স্থান থেকে একটি 3D স্থান পরিবর্তন, বা তদ্বিপরীত উপাদান সঙ্গে একটি সমস্যা হতে পারে. 

সমাধান: ফন্ট-ওজন ব্যবহার করার জন্য একটি নির্দেশিকা অনুসরণ করুন। W3schools পাঁচটি ব্যায়াম প্রদান করে যা আপনি আপনার ফন্ট-ওজন ক্ষমতা বাড়াতে করতে পারেন। 

4. CSS বেসিক সিনট্যাক্স বোঝা

CSS কোড মৌলিক সিনট্যাক্স ব্যবহার করে তৈরি করা হয় যা CSS নিয়ম অনুসরণ করে। ডিজিটাল পণ্য উন্নয়ন শিল্পের মধ্যে CSS বেসিক সিনট্যাক্সের জ্ঞান গুরুত্বপূর্ণ। সঠিক নির্বাচক বা নির্বাচকদের সংমিশ্রণ ব্যবহার করা, যেমন একটি চেইনিং নির্বাচক বা উপাদান নির্বাচক, এবং CSS ঘোষণা আপনার বিকাশ শেখার অভিজ্ঞতার একটি জটিল অংশ হতে পারে।

সমাধান: একটি CSS সিনট্যাক্স গাইড পড়ুন যাতে আপনি CSS শৈলী নিয়ম, CSS ঘোষণা, CSS নির্বাচক, CSS মন্তব্য এবং একক-লাইন এবং বহু-লাইন মন্তব্য সম্পর্কে জানতে পারেন। 

5. আপনার CSS3 দক্ষতা

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

সমাধান: অনুশীলন নিখুঁত করে তোলে। অনুশীলন করতে এবং আপনার CSS দক্ষতা বাড়াতে Mobify থেকে এই বোতাম-পুনরুদ্ধার অনুশীলন করুন। 

কল্পনা করুন যে একটি সাইডবার পৃষ্ঠার বিষয়বস্তুর নীচে পড়েছে। এটি ঘটে কারণ প্যাডিংয়ের কারণে দুই-কলামের লেআউট 100 শতাংশ পর্যন্ত যোগ করে না। যাইহোক, এটি সংশোধন করার বিভিন্ন উপায় আছে। 

এই মৌলিক প্রকল্পটি আপনাকে দেখাবে কিভাবে বক্স-সাইজিং ব্যবহার করতে হয়, সিএসএস সম্পত্তির মান নির্দিষ্ট করার সময় গণনা সম্পাদন করার জন্য কীভাবে ক্যালক() ব্যবহার করতে হয়, গণিত কাজ করার জন্য কীভাবে সংখ্যাগুলি সামঞ্জস্য করতে হয় এবং কীভাবে একটি অতিরিক্ত অভ্যন্তরীণ র্যাপার উপাদানে প্যাডিং রাখতে হয়।

সমাধান: আপনি CodePen-এর সাথে CSS-কোডেড সাইডবার সম্পৃক্ত করে আপনার দক্ষতা এবং জ্ঞানের অনুশীলন এবং উন্নতি করতে পারেন।

7. প্রতিক্রিয়াশীল ডিজাইনের জন্য প্রস্থ পরিবর্তনগুলি ঠিক করুন 

এই অনুশীলনের নকশাটি 800px চওড়া। একটি প্রতিক্রিয়াশীল ডিজাইনের জন্য, বিষয়বস্তু যেকোনো পর্দার আকারের সাথে মানানসই হওয়া উচিত। আপনার সিএসএস কোডিং যাত্রায়, আপনাকে পিক্সেল প্রস্থ পরিবর্তন করার অনুশীলন করতে হবে, প্রতিক্রিয়াশীল চিত্র সমাধানগুলি ব্যবহার করতে হবে এবং গুরুত্বের শ্রেণিবিন্যাস বজায় রাখতে হবে। আপনার নকশা পরীক্ষা করতে মনে রাখবেন এবং নিশ্চিত করুন যে আপনার সমাধান কাজ করে।  

সমাধান: কোডপেনের একটি ব্যবহারিক অনুশীলন রয়েছে যা আপনি CSS-এ আপনার দক্ষতা আয়ত্ত করতে সাহায্য করতে পারেন। 

8. CSS নির্বাচক

একটি ব্রাউজার বোঝার জন্য CSS একটি নির্দিষ্ট বিন্যাসে লিখতে হবে। এটি একটি সিএসএস নিয়মের প্রথম অংশ, উপাদানগুলির প্যাটার্ন এবং অন্যান্য পদ যা ব্রাউজারে যোগাযোগ করে যে এইচটিএমএল উপাদানগুলি সিএসএস সম্পত্তি মানগুলি নির্বাচন করতে এবং প্রয়োগ করতে পারে৷ এগুলি "নির্বাচকের বিষয়" হিসাবে পরিচিত।

সমাধান: একটি নির্দেশিকা অনুসরণ করে CSS নির্বাচক ব্যবহার করে অনুশীলন করুন। আপনার CSS লেখা পরীক্ষা করা সময়সাপেক্ষ হতে পারে, এবং সাহায্য করার জন্য বিভিন্ন বিনামূল্যের টুল রয়েছে, যেমন {CSS}পোর্টাল৷ কোডপেন ব্যবহারিক অনুশীলনও প্রদান করে যা আপনি অনলাইনে করতে পারেন।

9. CSS গ্রিড লেআউট 

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

সমাধান: MDN ওয়েব ডক্স অনুশীলন করার জন্য একটি ব্যাপক ব্যায়াম অফার করে। 

10. CSS কোড অনুশীলন করুন 

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

সমাধান: বাচ্চাদের ওয়েব অ্যাপ গেম Flexbox Froggy-এর সাথে অনুশীলন করার একটি সহজ উপায় রয়েছে, যেখানে শিক্ষানবিস থেকে মধ্যবর্তী পর্যন্ত 24টি ব্যায়াম রয়েছে। CSS কোড লিখতে Flexbox Froggy এর অনলাইন গেম খেলুন। 

কিভাবে CSS-এর সাহায্য পেতে হয়

আপনি অনলাইনে খুঁজে পেতে পারেন এমন সমস্ত উপলব্ধ সরঞ্জাম এবং অফুরন্ত পরিমাণে সংস্থানগুলির সাথে CSS-এর সাহায্য পাওয়া তুলনামূলকভাবে সহজ। আপনি বিভিন্ন CSS-নির্দিষ্ট সমস্যার সম্মুখীন হতে পারেন সেই বিষয়ে বিশেষজ্ঞ, প্রতিবেদন, টিউটোরিয়াল এবং আরও অনেক কিছু খুঁজে পেতে পারেন। 

আপনার একটি নীল পটভূমির রঙ লাল হওয়া উচিত, বা আপনি একটি ক্রস-অরিজিন ফন্টের সমস্যা নিয়ে কাজ করছেন কিনা, আপনার CSS সমস্যাগুলি সমাধান করতে আপনাকে সাহায্য করার জন্য উন্নত বিষয়গুলি কভার করে প্রচুর অনলাইন সংস্থান উপলব্ধ। নীচে আপনার ব্যবহারের জন্য সেরা কিছু সংস্থান রয়েছে৷ 

সিএসএস ব্যায়াম

এই নিবন্ধের অনুশীলনগুলি অনুশীলনের মাধ্যমে CSS অভিজ্ঞতা প্রদান করে এবং আপনি অনলাইনে অনেক অনুরূপ অনুশীলন খুঁজে পেতে পারেন। এই অনুশীলনগুলি নির্দিষ্ট এবং সাধারণ CSS সমস্যাগুলি মোকাবেলায় আপনার CSS জ্ঞান এবং দক্ষতা বাড়ায়। এই ব্যায়ামগুলি আয়ত্ত করা আপনাকে একটি চমৎকার প্রতিক্রিয়াশীল ডিজাইন তৈরি করতে সাহায্য করবে, যখন উন্নত CSS ব্যায়াম পর্যন্ত কাজ করবে। 

"ক্যারিয়ার কর্ম আমার জীবনে প্রবেশ করেছিল যখন আমার এটির সবচেয়ে বেশি প্রয়োজন ছিল এবং দ্রুত আমাকে একটি বুটক্যাম্পের সাথে মেলাতে সাহায্য করেছিল৷ স্নাতক হওয়ার দুই মাস পরে, আমি আমার স্বপ্নের চাকরি পেয়েছি যা আমার মূল্যবোধ এবং জীবনের লক্ষ্যগুলির সাথে সামঞ্জস্যপূর্ণ!"

ভেনাস, রকবটের সফটওয়্যার ইঞ্জিনিয়ার

আপনার বুটক্যাম্প ম্যাচ

সিএসএস প্রকল্পগুলি

CSS হল ওয়েবসাইট ডেভেলপমেন্টের জন্য সবচেয়ে বেশি ব্যবহৃত ফ্রন্ট এন্ড প্রযুক্তি এবং সাধারণত HTML এর সাথে ব্যবহার করা হয়। CSS প্রকল্প আপনাকে একটি পোর্টফোলিও তৈরি করতে সাহায্য করে। এই পোর্টফোলিওটি আপনার সিএসএস দক্ষতাকে সম্মানিত করার জন্য এবং সম্ভাব্য নিয়োগকর্তাদের কাছে আপনার দক্ষতার স্তরকে তুলে ধরার জন্য মূল্যবান অনুশীলন প্রদান করতে পারে।

সিএসএস কুইজ

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

সিএসএস ফোরাম এবং ব্লগ

ফোরাম এবং সিএসএস কোডিং ব্লগগুলি সহায়ক সংস্থান হতে পারে, সাহায্য এবং সমাধান প্রদান করে জটিল উদ্বেগের জন্য যা আপনি খুঁজে বের করতে সংগ্রাম করছেন। তারা নতুন প্রযুক্তি এবং শিল্প-সম্পর্কিত তথ্যের আপডেটও প্রদান করে যা আপনার জন্য ব্যবহারিক গুরুত্বপূর্ণ হতে পারে। 

আমি কোথায় CSS অনুশীলন করতে পারি?

এই নিবন্ধের মধ্যে চিত্রিত হিসাবে, আপনি উপলব্ধ অনলাইন সংস্থানগুলির সাথে স্বাধীনভাবে CSS অনুশীলন করতে পারেন। আপনি প্রকল্পের মাধ্যমে CSS অনুশীলন করতে পারেন এবং সেগুলিকে আপনার কোডিং পোর্টফোলিওতে যুক্ত করতে পারেন। আপনি ফ্রি বা পেইড কোর্সের মাধ্যমে CSS পড়ার সময়ও অনুশীলন করতে পারেন। 

সিএসএস অনুশীলন করার জন্য ওয়েবসাইটগুলি

• freeCodeCamp । এটি 7,000 টিরও বেশি টিউটোরিয়াল এবং প্রচুর চ্যালেঞ্জ সহ বিনামূল্যে CSS এবং অন্যান্য প্রোগ্রাম শেখার সেরা সম্পদগুলির মধ্যে একটি৷
• কোডওয়েল । অনুশীলন করার জন্য এই সাইটটি বাস্তব-বিশ্বের ফিগমা টেমপ্লেট সরবরাহ করে। আপনার সিএসএস দক্ষতা সমতল করার জন্য এটি একটি ভাল জায়গা। আপনি ওয়েবসাইট বা স্ল্যাক সম্প্রদায়ের মধ্যে সমাধান এবং প্রতিক্রিয়া সম্পর্কে মূল্যবান কথোপকথনে জড়িত থাকতে পারেন।  
• CSSBব্যাটেল । এটি একটি CSS-নির্দিষ্ট গ্যামিফিকেশন সিস্টেম যা অগ্রগতি পরীক্ষা এবং ট্র্যাক করার একটি চমৎকার উপায়। এই যুদ্ধগুলি আপনাকে CSS এর সাথে কীভাবে কাজ করতে হবে তা বলবে না, তবে তারা আপনাকে আরও মধ্যবর্তী CSS বৈশিষ্ট্যগুলির সাথে CSS অভিজ্ঞতা অর্জন করতে সহায়তা করবে। 
• কোডপেন । কোডপেন আপনাকে অনলাইনে করার জন্য CSS চ্যালেঞ্জ অফার করে। আপনি অন্যান্য যারা অংশগ্রহণ করেছেন তাদের সাথে সমাধান শেয়ার করতে পারেন, প্রতিক্রিয়া পেতে পারেন এবং অন্তর্দৃষ্টি শেখার জন্য অন্যদের কোড দেখতে পারেন।  
• ফ্রন্টএন্ড মেন্টর । এই ওয়েবসাইটে, আপনি বাস্তব-বিশ্বের HTML, CSS, এবং JavaScript চ্যালেঞ্জগুলি সমাধান করতে পারেন৷ এখানে 280,000 টিরও বেশি বিকাশকারী প্রকল্প তৈরি করে, কোড পর্যালোচনা করে এবং একে অপরের কাছ থেকে শেখে। 

সিএসএস শেখার সর্বোত্তম উপায় কী?

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

CSS ব্যায়াম FAQ

সিএসএস কিসের জন্য ব্যবহৃত হয়?

CSS কোড HTML এর পাশাপাশি ওয়েব পেজ ডিজাইন তৈরি করতে ব্যবহৃত হয়।

সিএসএস কোড কি জনপ্রিয়?

হ্যাঁ, CSS কোড জনপ্রিয়। W3Techs-এর রিপোর্ট অনুযায়ী, CSS কোড আজ সব ওয়েবসাইটের 96.3 শতাংশ ব্যবহার করে। কিছু বড় কোম্পানি CSS ব্যবহার করে, যেমন Google, YouTube, এবং Facebook।

আমি কি একা CSS কোডিং দক্ষতার সাথে চাকরি পেতে পারি?

যদিও আপনি একা CSS এর সাথে কাজ পেতে পারেন, CSS সাধারণত অন্যান্য সফ্টওয়্যারের সাথে মিলে ব্যবহার করা হয়। আমরা সুপারিশ করছি যে আপনি HTML, CSS এবং JavaScript দক্ষতা অর্জন করুন, বিশেষ করে যদি আপনি একজন ওয়েব ডেভেলপার হতে চান।