সিএসএস শিখুন:ক্যাসকেডিং স্টাইল শীট শেখার জন্য একটি গাইড

কিভাবে CSS শিখবেন

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

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

HTML এবং CSS একসাথে কাজ করে। আপনি যখন একটি শিরোনাম দেখেন যা একটি ওয়েবসাইটে একটি নতুন ফন্ট ব্যবহার করে, তখন শিরোনামটি সংজ্ঞায়িত করতে HTML ব্যবহার করা হবে। তারপর, শিরোনামের জন্য ফন্ট সেট করতে CSS ব্যবহার করা হবে। পাঠ্যের একটি অনুচ্ছেদ বিবেচনা করুন। HTML পাঠ্য সংজ্ঞায়িত করতে ব্যবহার করা হবে। পাঠ্যের রঙ পরিবর্তন করতে CSS শৈলী ব্যবহার করা হবে।

এই নির্দেশিকাটি অনলাইনে CSS শেখার সর্বোত্তম উপায়ের মধ্য দিয়ে যাবে। দ্রুত এবং কার্যকরভাবে CSS শেখার জন্য আপনার যাত্রা শুরু করতে সাহায্য করার জন্য আমরা আপনাকে স্পষ্ট পদক্ষেপের একটি সেট দেব।

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

CSS সংজ্ঞায়িত করে কিভাবে একটি ওয়েব পৃষ্ঠায় একটি উপাদান উপস্থিত হওয়া উচিত। CSS মানে ক্যাসকেডিং স্টাইল শীট। একটি HTML নথিতে বা একটি পৃথক স্টাইলশীটে CSS ব্যবহার করে শৈলী প্রয়োগ করা যেতে পারে।

CSS ব্যবহার করে, বিকাশকারীরা শৈলীর নিয়ম লেখে, যা একটি ওয়েবসাইটকে বলে যে একটি নির্দিষ্ট HTML উপাদান একটি ওয়েবসাইটে কীভাবে উপস্থিত হওয়া উচিত। উদাহরণস্বরূপ, একটি শৈলী নিয়ম একটি ওয়েব পৃষ্ঠায় একটি চিত্রের জন্য উচ্চতা এবং প্রস্থ নির্ধারণ করতে পারে। অন্য একটি ওয়েব পৃষ্ঠায় পাঠ্যের আকার সেট করতে পারে৷

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

• ফন্ট-সাইজ একটি ওয়েব পেজে পাঠ্যের আকার নির্ধারণ করে।
• রঙ একটি ওয়েব পৃষ্ঠায় পাঠ্যের রঙ সেট করে।
• উচ্চতা একটি ওয়েব পৃষ্ঠায় একটি উপাদানের উচ্চতা সেট করে।

প্রতিটি CSS প্রপার্টির একটি মান বরাদ্দ করা হয়, যা ব্রাউজারকে বলে যে একটি নির্দিষ্ট উপাদান কীভাবে প্রদর্শিত হবে। উদাহরণস্বরূপ, ব্রাউজারকে সমস্ত পাঠ্য নীল করতে বলার জন্য CSS ব্যবহার করা যেতে পারে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

যখন আপনি CSS বৈশিষ্ট্যের মৌলিক বিষয়গুলি শিখবেন, তখন আপনি জটিল এবং জটিল ডিজাইন তৈরি করতে শিখেছেন এমন মৌলিক বিষয়গুলি ব্যবহার করতে পারেন৷

আপনি কেন CSS শিখবেন?

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

এবং আমরা CSS-এ কীভাবে কোড করতে হয় তা শেখার কেরিয়ারের সুবিধা নিয়েও আলোচনা করিনি। এমন নিয়োগকর্তার অভাব নেই যারা সক্রিয়ভাবে এমন লোক খুঁজছেন যারা CSS-এ কোড করতে পারে।

কারণ প্রতিভাবান CSS ডেভেলপারদের চাহিদা রয়েছে, বেতনও বেশি। এই লেখার সময়, Glassdoor একজন ওয়েব ডিজাইনারের জন্য গড় বেতন $52,691 বলে জানিয়েছে—একটি চিত্তাকর্ষক যোগফল!

সিএসএস শিখতে কতক্ষণ লাগে?

CSS শেখার আগে, আমরা আপনাকে HTML অনুশীলন করার জন্য কয়েক সপ্তাহ ব্যয় করার পরামর্শ দিই। এটি আয়ত্ত করতে বেশি সময় লাগবে না, এবং আপনি প্রোগ্রামিং জগতে একটি দৃঢ় পদক্ষেপ নিয়ে পৌঁছাবেন। HTML আপনাকে মৌলিক সিনট্যাক্সের অনুভূতি পেতে সাহায্য করতে পারে, যা CSS শেখার সময় কাজে আসবে।

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

সিএসএস শেখা কি কঠিন?

CSS একটি মৌলিক স্তরে শেখার জন্য একটি সহজ প্রোগ্রামিং ভাষা। CSS প্রযুক্তিটি অ্যাক্সেসযোগ্য হওয়ার জন্য ডিজাইন করা হয়েছে যাতে যে কেউ ইন্টারনেটে তাদের নিজস্ব স্টাইল করা ওয়েব পেজ তৈরি করতে পারে।

আপনি যখন HTML এর মৌলিক ধারণাগুলি শিখবেন তখন আপনি CSS-এ যে সিনট্যাক্স দেখছেন তার অনেকগুলি খুব পরিচিত হবে৷

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

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

কিভাবে সিএসএস ফ্রি শিখবেন

এখন পর্যন্ত, আমরা CSS এর ব্যাকগ্রাউন্ড এবং CSS ব্যবহার করে কোড করার সুবিধাগুলি বিবেচনা করে সময় ব্যয় করেছি। কিন্তু এখন, আমাদের এই প্রশ্নের উত্তর দিতে হবে:আপনি কিভাবে CSS এ কোড করতে শিখবেন?

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

ধাপ 1:মৌলিক বিষয়গুলি আয়ত্ত করুন

CSS শিখতে সক্ষম হওয়ার জন্য, আপনাকে প্রাথমিক বিষয়গুলি আয়ত্ত করে শুরু করতে হবে। অবশ্যই, আপনি কীভাবে বিস্তৃত ওয়েবসাইট ডিজাইন তৈরি করবেন তা নিয়ে গবেষণা শুরু করতে প্রলুব্ধ হতে পারেন। মৌলিক বিষয়গুলো ভালোভাবে উপলব্ধি না করে, আপনার কোডে যখন সেগুলি আসে তখন আপনাকে আরও উন্নত ধারণাগুলি বুঝতে কষ্ট করতে হবে।

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

আপনাকে শুরু করতে সাহায্য করার জন্য, এখানে প্রধান বিষয়গুলির একটি তালিকা রয়েছে যা আপনাকে জানতে হবে:

সিএসএস সিনট্যাক্স এবং নির্বাচক

প্রথম জিনিসটি প্রথমে, আপনাকে CSS এর সিনট্যাক্স জানতে হবে। এই হল মৌলিক নিয়ম যা CSS প্রোগ্রামিং ভাষা ব্যবহার করার সময় আপনি লিখবেন এমন সমস্ত শৈলী নিয়ন্ত্রণ করে। আপনি যখন সবে শুরু করছেন, তখন আপনাকে কোথায় এবং কীভাবে CSS নিয়ম লিখতে হবে সে সম্পর্কেও শিখতে হবে।

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

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

বক্স মডেল

আমরা আগেই বলেছি, HTML ব্যবহার করা হয় ওয়েব পেজের গঠন নির্ধারণ করতে। কিন্তু, HTML একটি সাইটের গঠন তৈরি করতে ডিফল্ট মানগুলির একটি সেট ব্যবহার করে। আপনি যদি উপাদানগুলি কীভাবে উপস্থিত হয় তা কাস্টমাইজ করতে চান, আপনাকে CSS বক্স মডেলটি ব্যবহার করতে হবে।

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

এখানে বক্স মডেলের প্রধান উপাদানগুলি রয়েছে যা আপনাকে শিখতে হবে:

এলিমেন্ট ডিসপ্লে

HTML উপাদানগুলিকে বাম থেকে ডানে এবং উপরে থেকে নীচে রেন্ডার করে। তবে, আপনি উপাদানগুলিকে একটি নির্দিষ্ট উপায়ে অবস্থান করতে চাইতে পারেন। হতে পারে আপনি আপনার ওয়েব পৃষ্ঠার নীচের বাম দিকের কোণায় একটি বক্স দেখতে চান, উদাহরণস্বরূপ৷

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

রঙ এবং হরফ

রঙ এবং ফন্ট দুটি উপায় যা আপনি একটি ওয়েবসাইটকে আরও নান্দনিকভাবে আনন্দদায়ক করে তুলতে পারেন। অনেক ওয়েবসাইট স্টাইল গাইডে এগুলোকে অপরিহার্য বলে মনে করা হয়।

CSS অনেকগুলি বৈশিষ্ট্য অফার করে যা আপনি একটি ওয়েব পৃষ্ঠায় উপাদানগুলির রঙ নিয়ন্ত্রণ করতে এবং পাঠ্য কীভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে ব্যবহার করতে পারেন। CSS রঙ এবং ফন্টের ক্ষেত্রে আপনার যে বিষয়গুলি সম্পর্কে শিখতে হবে তার কয়েকটি এখানে রয়েছে:

• পটভূমি এবং অগ্রভাগের রঙ
• হেক্সাডেসিমেল, RGB, এবং HSL রং
• সিএসএস অস্বচ্ছতা
• সিএসএস টাইপোগ্রাফি
• ফন্ট পরিবার, ফন্ট শৈলী, এবং ফন্ট ওজন
• অক্ষরের ব্যবধান, লাইনের উচ্চতা, এবং পাঠ্য প্রান্তিককরণ
• বাহ্যিক ফন্ট ব্যবহার করে

গ্রিড

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

এখানে আপনি প্রধান CSS গ্রিড কভার করতে চান প্রধান বিষয়:

• সিএসএস গ্রিড গঠন
• গ্রিড কলাম এবং সারি
• কলাম এবং সারি তৈরি করা হচ্ছে
• গ্রিড ফাঁক এবং গ্রিড লাইন
• গ্রিড আইটেম এবং এলাকা

আপনি flexbox সম্পর্কে শেখার জন্য কিছু সময় ব্যয় করতে চাইতে পারেন। ফ্লেক্সবক্স হল আরেকটি প্রযুক্তি যা একটি ওয়েব পৃষ্ঠায় উপাদান স্থাপন করতে ব্যবহৃত হয়।

অনলাইনে CSS শেখার সর্বোত্তম উপায়

এখন আপনি জানেন যে সিএসএস-এ কোড করার জন্য আপনাকে কী জানতে হবে, আপনি হয়তো জিজ্ঞাসা করছেন:আমি এই বিষয়গুলি সম্পর্কে কোথায় শিখতে পারি? যেহেতু CSS হল ওয়েব ডেভেলপমেন্টে ব্যবহৃত একটি গুরুত্বপূর্ণ টুল, সেখানে হাজার হাজার রিসোর্স রয়েছে যা আপনি ব্যবহার করতে পারেন।

আপনি যে সংস্থানগুলি ব্যবহার করবেন তা আপনার শেখার শৈলীর উপর নির্ভর করবে। সুতরাং, আপনি সংস্থানগুলি সন্ধান শুরু করার আগে, নিজেকে জিজ্ঞাসা করুন:আপনি কীভাবে সেরা শিখবেন? আপনি কি টিউটোরিয়াল পছন্দ করেন? নাকি অনলাইন কোর্স আপনার গতি বেশি?

কোনটি সবচেয়ে ভাল কাজ করে তা দেখতে আপনি কয়েকটি ভিন্ন ফর্ম্যাট ব্যবহার করে দেখতে চাইতে পারেন। তারপর, একবার আপনি একটি খুঁজে পেলে, আপনি আপনার মনোযোগ সেই সম্পদগুলিতে ফোকাস করতে পারেন যা শেখার বিন্যাস ব্যবহার করে যার সাথে আপনি সবচেয়ে স্বাচ্ছন্দ্য বোধ করেন।

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

অনলাইন CSS কোর্স

Codecademy দ্বারা CSS শিখুন

• খরচ:বিনামূল্যে
• শ্রোতা:নতুনরা

সিএসএস শেখার জন্য 490,000 এরও বেশি লোক এই কোর্সে নথিভুক্ত হয়েছে। এই 20-ঘন্টা-দীর্ঘ কোর্সে, আপনি নির্বাচক, বক্স মডেল, রঙ, টাইপোগ্রাফি এবং আরও অনেক কিছু সম্পর্কে শিখবেন।

খান একাডেমি দ্বারা HTML/CSS-এর ভূমিকা

• খরচ:বিনামূল্যে
• শ্রোতা:নতুনরা

এই বিনামূল্যের কোর্সটি HTML এবং CSS-এর একটি চমৎকার ভূমিকা। আপনি একটি ওয়েব পৃষ্ঠার গঠন সম্পর্কে শিখতে শুরু করবেন। তারপরে, আপনি একটি পৃষ্ঠা এবং CSS পাঠ্য বৈশিষ্ট্যগুলিকে স্টাইল করতে CSS ব্যবহার করার মতো বিষয়গুলি কভার করবেন। কোর্সের শেষের দিকে, আপনি পৃষ্ঠা লেআউট এবং উন্নত CSS নির্বাচকদের নিয়ে আলোচনা করবেন।

Udacity দ্বারা HTML এবং CSS এর ভূমিকা

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

অনলাইন CSS বই

HTML এবং CSS:Jon Duckett দ্বারা ওয়েবসাইট ডিজাইন এবং তৈরি করুন

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

জেনিফার নিডারস্ট রবিন্সের ওয়েব ডিজাইন শেখা

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

সিএসএস:এরিক মেয়ার এবং এস্টেল ওয়েলের দ্বারা নির্ধারিত নির্দেশিকা

এই বইটির প্রচ্ছদে যা বলা হয়েছে তা হল:এটি CSS-এর সম্পূর্ণ নির্দেশিকা। এই বইটি, অন্য অনেকের মত নয়, শুধুমাত্র CSS এর উপর ফোকাস করে। আপনি CSS রঙ, মান, নির্বাচক, বক্স লেআউট এবং আরও অনেক কিছু সম্পর্কে শিখবেন।

অনলাইন CSS সম্পদ

Mozilla দ্বারা CSS ব্যবহার করে HTML স্টাইল করতে শিখুন

Mozilla, Mozilla Web Browser-এর নির্মাতা, ওয়েবপেজে কিভাবে CSS যোগ করতে হয় তার একটি সম্পূর্ণ টিউটোরিয়াল আছে। এই অনলাইন টিউটোরিয়ালটি মৌলিক CSS সিনট্যাক্স, CSS-এর বিল্ডিং ব্লক, কিভাবে টেক্সট স্টাইল করতে হয় এবং পেজ লেআউট কভার করে।

কোডপেন

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

ক্যারিয়ার কর্ম CSS টিউটোরিয়াল

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

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

টিউটোরিয়াল সহ অনলাইনে CSS শিখুন

সেখানে বেশ কিছু প্রকাশনা রয়েছে যা চমৎকার CSS টিউটোরিয়াল দেয়। W3Schools এবং Mozilla Developer Network দরকারী কারণ আপনি প্রোগ্রামিং ভাষার ধারণাগুলো শিখতে পারেন। এই সম্পদগুলি প্রতিটি ধারণার অনুশীলনের সাথে অনলাইনে স্ট্যান্ডার্ড টিউটোরিয়াল সরবরাহ করে।

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

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

টিউটোরিয়াল অনুসরণ করা HTML শেখার একটি দুর্দান্ত উপায়। আপনি এটি সম্পর্কে পড়ার পরিবর্তে HTML করে বিকাশ শিখবেন। সৃজনশীলতার মাত্রা জড়িত থাকার কারণে সামনের দিকের ওয়েব ডেভেলপমেন্টের ক্ষেত্রে হাতে-কলমে শেখা অত্যন্ত গুরুত্বপূর্ণ।

একটি প্রকল্প তৈরি করুন

আপনি যে তত্ত্বটি শিখেছেন তা বাস্তবে তুলে ধরার এবং আপনি সম্পূর্ণরূপে আগ্রহী এমন কিছুতে কাজ করার জন্য প্রকল্পগুলি একটি দুর্দান্ত উপায়৷ এটা ঠিক৷ আপনি যখন কাজ করার জন্য একটি প্রজেক্ট বেছে নেন, তখন আপনাকে আর টিউটোরিয়াল যা তৈরি করতে বলে তা তৈরি করতে হবে না৷

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

আমি কি নির্মাণ করা উচিত? এটি সব নতুনদের দ্বারা সম্মুখীন একটি সাধারণ প্রশ্ন. প্রকৃতপক্ষে, কোন সঠিক উত্তর নেই—আপনি যা চান তা তৈরি করতে পারেন!

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

আপনাকে কী তৈরি করতে হবে তা নির্ধারণ করতে, এখানে কয়েকটি ধারণা দেওয়া হল:

• একটি সামাজিক নেটওয়ার্কিং সাইট
• একটি রেস্টুরেন্ট ম্যানেজমেন্ট সিস্টেম
• একটি কুইজ খেলা
• একটি অনলাইন শপিং ওয়েবসাইট
• আপনার ওয়েব ডিজাইন পোর্টফোলিও
• একটি ওয়েব ব্লগ
• স্থানীয় বেকারি বা গ্রিনগ্রোসারের জন্য একটি ওয়েবসাইট

এই তালিকাটি আপনার বিকল্পগুলিকে সীমাবদ্ধ করতে দেবেন না। আপনার যদি অন্য কোনো ধারণা থাকে, তাহলে এগিয়ে যান এবং এটি তৈরি করুন!

নতুন শৈলী নিয়ে পরীক্ষা করুন

অন্বেষণ করার জন্য CSS এর অনেক বৈশিষ্ট্য আছে! ফলস্বরূপ, আপনি একবার একটি ওয়েবসাইট ডিজাইন করার পরেও, আপনি আপনার দক্ষতা পরিমার্জন করতে পারেন এমন অনেক উপায় রয়েছে৷

আপনার দক্ষতা অনুশীলন করার একটি ভাল উপায় হল বিভিন্ন শৈলী ব্যবহার করে একই সাইট তৈরি করা। বিভিন্ন ফন্ট সাইজ দিয়ে একটি ওয়েবসাইট দেখতে কেমন তা দেখার চেষ্টা করুন। একটি ওয়েব পৃষ্ঠায় পাঠ্যের নির্দিষ্ট অনুচ্ছেদের জন্য বিভিন্ন রং ব্যবহার করে পরীক্ষা করুন। আপনি যখন একটি চিত্রের আকার পরিবর্তন করেন তখন কী ঘটে তা দেখুন৷

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

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

মাস্টার ব্রাউজার সমর্থন

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

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

ব্রাউজার সমর্থন আয়ত্ত করতে, নিম্নলিখিত সংস্থানগুলি দেখুন:

একটি বিকাশকারী সম্প্রদায়ে যোগ দিন

আপনি যখন কোড শিখছেন, তখন আপনি "বিচ্ছিন্নভাবে কোড" করতে প্রলুব্ধ হতে পারেন। এর মানে হল যে আপনি আপনার সময় কোডিং ব্যয় করবেন, কিন্তু আপনি অন্যদের সাথে আপনার কাজ শেয়ার করতে পারবেন না। এটি নতুনদের দ্বারা করা একটি সাধারণ ভুল৷

সেখানে হাজার হাজার মানুষ আছে যারা CSS এ কোড করতে জানে। ওয়েব প্রোগ্রামাররা প্রায়শই বিকাশকারী সম্প্রদায়গুলিতে যোগদান করে, যা নতুনদের থেকে বিশেষজ্ঞদের মধ্যে প্রোগ্রামারদের একত্রিত করে।

সম্প্রদায়গুলি নতুন বিকাশকারীদের সাথে দেখা করার জন্য একটি দুর্দান্ত জায়গা যার সাথে আপনি চ্যাট করতে পারেন৷ তারা আপনাকে এমন একটি জায়গা দেয় যেখানে আপনি প্রতিক্রিয়া চাইতে পারেন এবং আপনার প্রয়োজন হলে সাহায্য পেতে পারেন। এখানে কয়েকটি সম্প্রদায় রয়েছে যা CSS বিকাশকারীদের জন্য ভাল:

• Dev.to:সফটওয়্যার ডেভেলপারদের একটি সম্প্রদায় যারা একে অপরকে সাহায্য করে। Dev.to-তে CSS ডেভেলপার এবং ওয়েব ডিজাইনের জন্য ডেডিকেটেড চ্যানেল রয়েছে যা আপনি CSS শেখার অন্যান্য লোকেদের সাথে চ্যাট করতে ব্যবহার করতে পারেন।
• স্ট্যাক ওভারফ্লো:ডেভেলপারদের একটি সম্প্রদায় প্রশ্ন জিজ্ঞাসা করে এবং উত্তর দেয়।
• GitHub:আপনার কোড শেয়ার করতে এবং অন্যদের সাথে প্রকল্পে সহযোগিতা করার জন্য একটি সম্প্রদায়৷

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

আপনার দক্ষতা অনুশীলন করুন

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

আপনি CSS অনুশীলন করতে পারেন এমন অনেক উপায় আছে যে এটি না করার জন্য কোন অজুহাত নেই। আপনাকে শুরু করতে সাহায্য করার জন্য এখানে কয়েকটি ধারণা রয়েছে:

• কোডপেন ব্যবহার করুন। কোডপেনে আপনার পছন্দের একটি স্টাইল খুঁজুন এবং এটিকে আরও ভালো করার চেষ্টা করুন৷
• কোডকাডেমিতে একটি চ্যালেঞ্জ নিন। Codecademy-এর মতো সাইটে একটি টিউটোরিয়াল অনুসরণ করুন, তারপর নিজের উন্নতি করুন৷
৷
• একটি সম্প্রদায়ের লোকেদের সাহায্য করুন। Dev.to বা স্ট্যাক ওভারফ্লোতে একটি থ্রেড খুঁজুন যা আপনার কাছে আকর্ষণীয় মনে হয় এবং অন্যান্য সম্প্রদায়ের সদস্যদের সাহায্য করার চেষ্টা করুন৷

অথবা, অবশ্যই, আপনি আরও প্রকল্পে কাজ করতে পারেন! এটি সর্বদা আপনার দক্ষতা অনুশীলন করার একটি দুর্দান্ত উপায়।

র্যাপিং আপ

আপনার সিএসএস শেখার পথ উত্থান-পতনে পূর্ণ হবে। দীর্ঘমেয়াদে, সিএসএস-এ কীভাবে কোড করতে হয় তা জানলে আপনি অনেক সুযোগের সূচনা করতে পারেন।

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

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

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