Cascading Style Sheets (CSS) ওয়েব পেজ এবং অ্যাপ্লিকেশনের লেআউট এবং কাঠামো তৈরি করার জন্য ব্যবহৃত একটি টেকনিক্যাল ভাষা। CSS-সহ, আপনি একটি ওয়েবপেজের স্টাইল টেলর করতে পারেন এবং একটি রেসপন্সিভ ওয়েবপেজ ডিজাইন তৈরি করতে পারেন, যা একটি সাইটকে ডেস্কটপ এবং মোবাইল উভয় ইউজারের জন্য অ্যাক্সেসিবল করে।
Indeed অনুযায়ী, বর্তমানে CSS-এ স্কিলস চাইলে ৩৫,০০০-এরও বেশি জব উপলব্ধ। CSS-এ নলেজ থাকা সেরা ডিজিটাল স্কিলসের একটি, বিশেষ করে যেহেতু এটি অনেক ক্যারিয়ার ফিল্ডে ডিজায়ার্ড, যার মধ্যে ফ্রন্ট এন্ড ডেভেলপমেন্ট এবং গেম ডেভেলপমেন্ট অন্তর্ভুক্ত। এই আর্টিকেল কিছু সেরা CSS এক্সারসাইজ এবং বিগিনার-ফ্রেন্ডলি প্রজেক্ট কভার করে।
নিচে কিছু CSS প্র্যাকটিস এক্সারসাইজ দেওয়া হলো যাতে আপনাকে CSS-এ বেসিক নলেজ मिलে। আমরা আপনার বর্তমান প্রোগ্রামিং লেভেল বাড়াতে অতিরিক্ত সংস্থানও তালিকাভুক্ত করব। এইগুলো আপনার দিনের দিনের টাস্ক, আপনার CSS স্কিলস ডেভেলপ করতে, এবং টেকনিক্যাল CSS ইন্টারভিউ কুেশ্চনের উত্তর দিতে প্রস্তুত করতে সাহায্য করবে।
সমাধানসহ ১০টি CSS এক্সারসাইজ এবং প্র্যাকটিস প্রব্লেম
১. CSS লিংক কালার
CSS লিংক কালার ওয়েবসাইটে এম্বেড করা আঙ্কর লিংকের কালার প্রদান এবং নিয়ন্ত্রণ করে। এই ফাংশন এম্বেডেড লিংককে আপনার টেক্সট থেকে একটি অল্টারনেটিভ কালারে ডিফাইন করে যাতে সেগুলো স্পষ্ট দেখা যায়। এই কালার স্কিম পরিবর্তন করার উপায় এবং একজন ইউজারের অভিজ্ঞতার সময় একটি লিংক কী কী পর্যায় থেকে যায় সেটি শিখা জরুরি।
সমাধান: আপনি CSS লিংক কালার শিখতে একটি ধাপে ধাপ গাইড ব্যবহার করতে পারেন। CSS Tricks এবং W3schools-ও CSS লিংক কালার প্র্যাকটিস এক্সারসাইজ প্রদান করে আপনার স্কিলস চমকাতে।
২. CSS বক্স মডেল নিয়ে কাজ
একটি CSS বক্স মডেল उन নিয়মগুলোর উल्लेख করে যেগুলো CSS কম্পোনেন্টের সাইজ কীভাবে ক্যালকুলেট হবে প্যাডিং, বর্ডার, এবং মার্জিন যোগ করার সময় যা কন্টেন্টকে ঘিরে থাকে। অপর্যাপ্ত CSS বক্স মডেলিং অপর্যাপ্ত রেসপন্সিভনেস এবং ফ্র্যাজাইল লেআউটের কারণ হতে পারে।
সমাধান: CSS বক্স মডেলের ওপর একটি হাউ-টু গাইড ফলো করুন। আপনি MDN Web Docs-ও আপনার বক্স মডেলিং স্কিলস প্র্যাকটিস করতে পারেন।
৩. Font-Weight নিয়ে কাজ
ভুল font-weight ডিক্লেয়ার করা টেক্সটকে সেই রকম দেখাতে পারে যা আপনি ইচ্ছা করেননি। অথবা, কখনও কখনও, আপনার সঠিক CSS রুল থাকলেও টেক্সট উम्मीদ মতো কাজ করতে পারে না। এটি এলিমেন্টের ২D স্পেস থেকে ৩D স্পেসে বা তার বিপরীত পরিবর্তনের সমস্যা হতে পারে।
সমাধান: font-weight ব্যবহার করার ওপর একটি গাইড ফলো করুন। W3schools পাঁচটি এক্সারসাইজ প্রদান করে আপনার font-weight ক্ষমতা চমকাতে।
৪. CSS বেসিক সিনট্যাক্স বোঝা
CSS কোড বেসিক সিনট্যাক্স ব্যবহার করে তৈরি করা হয় যা CSS রুল ফলো করে। ডিজিটাল প্রোডাক্ট ডেভেলপমেন্ট ইন্ডাস্ট্রিতে CSS বেসিক সিনট্যাক্সের নলেজ ক্রিটিক্যাল। সঠিক সিলেক্টর বা সিলেক্টরের কম্বিনেশন ব্যবহার করা, যেমন চেইনিং সিলেক্টর বা এলিমেন্ট সিলেক্টর, এবং CSS ডিক্লেরেশন আপনার ডেভেলপমেন্ট লার্নিং অভিজ্ঞতার একটি চ্যালেঞ্জিং পার্ট হতে পারে।
সমাধান: একটি CSS সিনট্যাক্স গাইড পড়ুন যাতে আপনি CSS স্টাইল রুলস, CSS ডিক্লেরেশন, CSS সিলেক্টর, CSS কমেন্ট, এবং সিঙ্গল-লাইন এবং মাল্টি-লাইন কমেন্ট সম্পর্কে শিখতে পারেন।
৫. আপনার CSS3 স্কিলস ব্যবহার করে একটি বাটন তৈরি করুন
এই বাটন-ক্রিয়েটিং এক্সারসাইজ আপনার 다양한 দক্ষতা انجام দিতে পারার সামর্থ্য ইলাস্ট্রেট করবে। একটি বাটন তৈরি করার সময়, আপনাকে বিভিন্ন ফ্যাক্টর ইমপ্লিমেন্ট এবং বিবেচনা করতে হবে, যেমন একাধিক বর্ডার, কাস্টম ফন্ট ব্যবহার করা, এবং সাবটল টেক্সট-শ্যাডো পকড়ানো। আপনাকে এটিও বুঝতে হবে কীভাবে ব্যাকগ্রাউন্ডকে বাটনের প্রধান অংশ থেকে আলাদা করতে হয় এবং নেস্টেড বর্ডার-রেডিয়াসের সাথে প্রিসিশন কাজ করতে হয়।
সমাধান: প্র্যাকটিসই পারফেক্ট। Mobify-র এই বাটন-রিক্রিয়েটিং এক্সারসাইজ করুন আপনার CSS প্রফিশিয়েন্সি প্র্যাকটিস এবং বাড়াতে।
৬. একটি সাইডবার ফিক্স করুন যা পেজ কন্টেন্টের নিচে পড়ে গেছে
কল্পনা করুন একটি সাইডবার পেজ কন্টেন্টের নিচে পড়ে গেছে। এটি ঘটে কারণ টু-কলাম লেআউট ১০০ পার্সেন্ট যোগ করে না প্যাডিং-এর কারণে। তবে, এটিকে সংশোধন করার বিভিন্ন উপায় রয়েছে।
এই বেসিক প্রজেক্ট আপনাকে দেখাবে কীভাবে box-sizing ব্যবহার করতে হয়, কীভাবে calc() ব্যবহার করতে হয় CSS প্রোপার্টি মান নির্দিষ্ট করার সময় ক্যালকুলেশন করার জন্য, কীভাবে সংখ্যাগুলো এডজাস্ট করতে হয় যাতে ম্যাথ কাজ করে, এবং কীভাবে প্যাডিং একটি অ্যাডেড ইন্টারনাল র্যাপার এলিমেন্টে রাখতে হয়।
সমাধান: আপনি CodePen-এ আপনার স্কিলস এবং CSS-কোডেড সাইডবার নিয়ে জ্ঞান প্র্যাকটিস এবং বাড়াতে পারেন।
৭. রেসপন্সিভ ডিজাইন için Width Changes ফিক্স করুন
এই এক্সারসাইজের ডিজাইন ৮০০px চওড়া। একটি রেসপন্সিভ ডিজাইনের জন্য, কন্টেন্ট যেকোনো স্ক্রিন সাইজে ফিট হওয়া উচিত। আপনার CSS কোডিং যাত্রায়, আপনাকে পিক্সেল চওড়া পরিবর্তন করার প্র্যাকটিস করতে হবে, রেসপন্সিভ ইমেজ সলিউশন ব্যবহার করতে হবে, এবং গুরুত্বের হায়ারার্কি রিটেইন করতে হবে। আপনার ডিজাইন টেস্ট করা এবং নিশ্চিত করা মনে রাখবেন আপনার সলিউশন কাজ করছে।
সমাধান: CodePen-এ একটি প্র্যাকটিক্যাল এক্সারসাইজ আছে যা আপনি প্র্যাকটিস করে আপনার CSS-এ স্কিলস মাস্টার করতে পারেন।
৮. CSS সিলেক্টর নিয়ে ইস্যু সমাধান
CSS একটি নির্দিষ্ট ফরম্যাটে লিখা আবশ্যক ব্রাউজার সেটি বুঝতে পারার জন্য। এটি একটি CSS রুলের প্রথম অংশ, এলিমেন্টের প্যাটার্ন, এবং অন্যান্য টার্ম যেগুলো ব্রাউজারকে বলে কোন HTML কম্পোনেন্ট সিলেক্ট করতে হবে এবং CSS প্রোপার্টি মান অ্যাপ্লাই করতে হবে। এগুলোকে "subject of the selector" নামে জানা যায়।
সমাধান: একটি গাইড ফলো করে CSS সিলেক্টর ব্যবহার প্র্যাকটিস করুন। আপনার CSS রাইটিং চেক করা টাইম-কনসামিং হতে পারে, এবং সাহায্য করার জন্য বিভিন্ন বিনামূল্যে টুল আছে, যেমন {CSS}Portal। CodePen-ও আপনি অনলাইনে করতে পারেন এমন প্র্যাকটিক্যাল এক্সারসাইজ প্রদান করে।
৯. CSS Grid লেআউট
একটি CSS grid লেআউট আজকাল অনেক ইন্ডাস্ট্রিতে ব্যবহার করা হয়, আর্টিকেল এবং ব্লগ পোস্টের লেআউট সহ। এটি ওয়েবের জন্য একটি টু-ডাইমেনশনাল লেআউট। কন্টেন্টকে রো এবং কলামে সাজানো অনেক ফিচার সম্ভব করে দেয় যা জটিল লেআউট তৈরি করা সহজ করে। এটি CSS-এ সবচেয়ে চ্যালেঞ্জিং টপিকের একটি, বিশেষ করে আপনাকে রেসপন্সিভনেস অ্যাকাউন্ট করার সময়।
সমাধান: MDN Web Docs একটি কম্প্রিহেনসিভ এক্সারসাইজ অফার করে প্র্যাকটিস করার জন্য।
১০. CSS কোড প্র্যাকটিস করুন
একটি CSS ফাইল নিয়ে কাজ করা এবং CSS কোড লেখা জরুরি। খারাপ CSS কোড লেখা পুরো সিস্টেমকে খারাপ করতে পারে। উদাহরণস্বরূপ, মার্জিনস অদ্ভুত বिहেভ করতে পারে বা আপনি ভুল বা অপর্যাপ্ত অ্যানিমেশনের সাথে শেষ হতে পারেন। কিছু আসল কোডিং করা আপনার CSS কোড রাইটিং স্কিলস বুস্ট করার সেরা উপায়।
সমাধান: Flexbox Froggy, একটি কিডস ওয়েব অ্যাপ গেম, ২৪ এক্সারসাইজের সাথে বिगিনার থেকে ইন্টারমিডিয়েট পর্যন্ত প্র্যাকটিস করার একটি সহজ উপায়। Flexbox Froggy-এর অনলাইন গেম খেলুন CSS কোড লেখার জন্য।
CSS-এ সাহায্য কীভাবে পাবেন
অনলাইনে উপলব্ধ কোড সংস্থান ব্যবহার করে আপনি আপনার CSS কোডিং গোল মাস্টার করতে পারেন।
CSS-এ সাহায্য পাওয়া সব উপলব্ধ টুল এবং অসীম পরিমাণ সংস্থানের কারণে আপনি অনলাইনে পেতে পারেন সেটিיחסসহজ। আপনি এক্সপার্ট, রিপোর্ট, টিউটোরিয়াল, এবং আরও অনেক কিছু খুঁজে পেতে পারেন çeşitli CSS-স্পেসিফিক সমস্যা আপনি যেগুলো সম্মুখীন होছেন সেগুলোর জন্য।
আপনার একটি ব্লু ব্যাকগ্রাউন্ড কালার আছে যা লাল হওয়া উচিত, বা আপনি একটি ক্রস-অরিজিন ফন্ট কনসার্ন নিয়ে কাজ করছেন—অ্যাডভান্সড টপিক কভার করে প্রচুর অনলাইন সংস্থান উপলব্ধ যা আপনাকে আপনার CSS ইস্যু রিজলভ করতে সাহায্য করবে। নিচে আপনার জন্য সেরা কিছু সংস্থান দেওয়া হলো।
CSS এক্সারসাইজ
এই আর্টিকেলের এক্সারসাইজগুলো প্র্যাকটিসের মাধ্যমে CSS অভিজ্ঞতা প্রদান করে এবং আপনি অনলাইনে অনেক অনুরূপ এক্সারসাইজ খুঁজে পাবেন। এই এক্সারসাইজগুলো আপনার CSS নলেজ এবং স্পেসিফিক এবং সাধারণ CSS সমস্যা ডিল করার স্কিলসও বাড়ায়। এই এক্সারসাইজগুলো মাস্টার করা আপনাকে একটি এক্সিলেন্ট রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করবে, অ্যাডভান্সড CSS এক্সারসাইজ পর্যন্ত কাজ করার সময়।
"ক্যারিয়ার করমা আমার জীবনে তখন প্রবেশ করলো যখন আমার সেটি সবচেয়ে বেশি দরকার ছিল এবং দ্রুত আমাকে একটি বুটক্যাম্পের সাথে মিলিয়ে দিলো। গ্র্যাজুয়েট হওয়ার দুই মাস পর, আমার সপনোর চাকরি পেলাম যা আমার মূল্যবোধ এবং জীবনের লক্ষ্যের সাথে মিলে যাচ্ছে!"
ভেনাস, সফ্টওয়্যার ইঞ্জিনিয়ার, রকবট
আপনার বুটক্যাম্প ম্যাচ খুঁজুন
CSS প্রজেক্ট
CSS ওয়েবসাইট ডেভেলপমেন্টের জন্য সবচেয়ে বেশি ব্যবহৃত ফ্রন্ট এন্ড টেকনোলজির একটি এবং সাধারণত HTML-সহ ব্যবহার করা হয়। CSS প্রজেক্ট আপনাকে একটি পোর্টফোলিও বিল্ড করতে সাহায্য করে। এই পোর্টফোলিও আপনার CSS স্কিলস চমকাতে এবং আপনার প্রফিশিয়েন্সি লেভেল প্রস্পেক্টিভ ইমপ্লোয়ারকে ইলাস্ট্রেট করতে মূল্যবান প্র্যাকটিস প্রদান করতে পারে।
CSS কুইজ
আপনার CSS নলেজ এবং স্কিলস টেস্ট করা CSS-এ প্রফিশিয়েন্সি অর্জনের জন্য জরুরি। আপনি আপনার CSS স্কিলস টেস্ট করতে চান কিনা বা স্পেসifik টপিক কভার করা কুইজ দিতে চান, যেমন কীভাবে একটি অর্ডার্ড লিস্ট তৈরি এবং মডিফাই করবেন, একটি ব্যাকগ্রাউন্ড ইমেজ, একটি সেপারেট ফাইল, ক্লাস নেম, বা CSS গ্রেডিয়েন্ট—আপনি অনলাইনে অনেক CSS কুইজ খুঁজে পাবেন।
CSS ফোরাম এবং ব্লগ
ফোরাম এবং CSS কোডিং ব্লগ সাহায্যকারী সংস্থান হতে পারে, জটিল কনসার্নের জন্য সহায়তা এবং সমাধান প্রদান করে যেগুলো আপনি বুঝতে পারছেন না। এগুলো নতুন টেকনোলজি এবং ইন্ডাস্ট্রি-রিলেটেড ইনফরমেশনের আপডেটও প্রদান করে যেগুলো আপনার জন্য প্র্যাকটিক্যাল গুরুত্বের হতে পারে।
আমি কোথায় CSS প্র্যাকটিস করতে পারি?
এই আর্টিকেলে ইলাস্ট্রেট করা মতে, আপনি উপলব্ধ অনলাইন সংস্থান দিয়ে স্বাধীনভাবে CSS প্র্যাকটিস করতে পারেন। আপনি প্রজেক্টের মাধ্যমে CSS প্র্যাকটিস করতে পারেন এবং সেগুলো আপনার কোডিং পোর্টফোলিওতে যোগ করতে পারেন। আপনি CSS পড়ার সময়ও প্র্যাকটিস করতে পারেন বিনামূল্যে বা পেইড কোর্সের মাধ্যমে।
CSS প্র্যাকটিস করার ওয়েবসাইট
- freeCodeCamp। এটি CSS এবং অন্যান্য প্রোগ্রাম বিনামূল্যে শিখার সেরা সংস্থানগুলির একটি, ৭,০০০-এরও বেশি টিউটোরিয়াল এবং প্রচুর চ্যালেঞ্জের সাথে।
- Codewell। এই সাইট রিয়েল-ওয়ার্ল্ড Figma টেমপ্লেট প্র্যাকটিস করার জন্য প্রদান করে। এটি আপনার CSS স্কিলস লেভেল আপ করার একটি ভালো জায়গা। আপনি ওয়েবসাইটে বা স্ল্যাক কমিউনিটিতে সমাধান এবং ফিডব্যাকের ওপর মূল্যবান কথাবার্তায়ও জড়িত হতে পারেন।
- CSSBattle। এটি একটি CSS-স্পেসিফিক গেমিফিকেশন সিস্টেম যা আপনার প্রগ্রেস চেক এবং ট্র্যাক করার একটি এক্সিলেন্ট উপায়। এই ব্যাটলগুলো আপনাকে CSS কীভাবে কাজ করে সেটি বলবে না, কিন্তু এগুলো আপনাকে আরও ইন্টারমিডিয়েট CSS প্রোপার্টির সাথে CSS অভিজ্ঞতা অর্জন করতে সাহায্য করবে।
- CodePen। CodePen আপনাকে অনলাইনে করতে পারেন এমন CSS চ্যালেঞ্জ অফার করে। আপনি অন্যদের সাথে সমাধান শেয়ার করতে পারেন যারা অংশগ্রহণ করেছে, ফিডব্যাক পেতে পারেন, এবং লার্নিং ইনসাইটের জন্য অন্যদের কোড দেখতে পারেন।
- Frontend Mentor। এই ওয়েবসাইটে, আপনি রিয়েল-ওয়ার্ল্ড HTML, CSS, এবং JavaScript চ্যালেঞ্জ সমাধান করতে পারেন। ২৮০,০০০-এর বেশি ডেভেলপার প্রজেক্ট বানাচ্ছে, কোড রিভিউ করছে, এবং একে অপরের কাছ থেকে শিখছে।
CSS শিখার সেরা উপায় কী?
CSS শিখার সেরা উপায়ের একটি হলো কোডিং বুটক্যাম্প। কোডিং বুটক্যাম্প আপনাকে একটি ভালো স্ট্রাকচার্ড, হ্যান্ডস-অন লার্নিং প্রোগ্রাম দেয় যা ইন্ডাস্ট্রির ইমপ্লোয়ারদের দ্বারা স্বীকৃত। আপনি একটি অনলাইন কোর্সে এনরোল করতে পারেন, ভিডিও টিউটোরিয়াল দেখতে পারেন, বা বই পড়তে পারেন CSS শিখতে।
CSS এক্সারসাইজ FAQ
CSS কী জন্য ব্যবহৃত হয়?
CSS কোড HTML-সহ ওয়েব পেজ ডিজাইন তৈরি করতে ব্যবহৃত হয়।
কি CSS কোড জনপ্রিয়?
হ্যাঁ, CSS কোড জনপ্রিয়। W3Techs-র রিপোর্ট অনুযায়ী, আজকাল ৯৬.৩ শতাংশ ওয়েবসাইট CSS কোড ব্যবহার করে। সবচেয়ে বড় কোম্পানিগুলো CSS ব্যবহার করে, যেমন Google, YouTube, এবং Facebook।
কি আমি শুধু CSS কোডিং স্কিলস দিয়ে জব পেতে পারি?
আপনি CSS একল দিয়ে কাজ পেতে পারেন, কিন্তু CSS সাধারণত অন্যান্য সফ্টওয়্যারের সাথে ট্যান্ডেমে ব্যবহার করা হয়। আমরা পরামর্শ দিই আপনি HTML, CSS, এবং JavaScript স্কিলস অর্জন করুন, বিশেষ করে আপনি যদি একজন ওয়েব ডেভেলপার बनতে চান।
