"সিএসএস দিয়ে কীভাবে ভাল করবেন" এর একটি উত্তর

টিপ - এটি অনুশীলন নেয়, তবে সামগ্রিক চিত্রেরও বোঝা।

আপনি সম্ভবত কোওরার কথা শুনেছেন, জ্ঞান অর্জন এবং ভাগ করে নেওয়ার জন্য এটি একটি দুর্দান্ত প্ল্যাটফর্ম। এখানে কয়েকশো সক্রিয় বিভাগ রয়েছে যেখানে আপনি মনে মনে যে কোনও কিছু জিজ্ঞাসা ও উত্তর দিতে পারেন।

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

ভাল প্রশ্নগুলি এবং আরও বিশেষত, কোওরার উত্তরগুলি "স্ক্রোল করার সময় আমি কীভাবে আমার পটভূমি ধরেছি" বা "কীভাবে আমি আমার বোতামের জন্য নরম সীমানা সেট করি" তা নয়। আমাকে এখানে ভুল করবেন না, এর মতো প্রশ্ন রয়েছে তবে সেগুলি খুব মূল্যবান নয়।

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

এবং এটাই আমার লক্ষ্য - সহজ প্রশ্নের উত্তর দেওয়ার জন্য "কীভাবে ভাল হতে হবে"। এগুলি গুরুত্বপূর্ণ নয় বলে আমি প্রযুক্তিগত বিবরণে যাব না।

ধারণাগুলি বুঝতে

এটা গুরুত্বপূর্ণ। বৃহত্তর ছবি ক্যাপচার করুন।

আপনি সম্ভবত জানেন যে পটভূমি রঙটি কী, আপনি জানেন যে ট্রান্সফর্মএক্স কী করে, ভাসমান, ফ্লেক্সবক্স এবং গ্রিড। আপনি এটি কীভাবে ব্যবহার এবং প্রয়োগ করতে পারেন সে সম্পর্কে পড়তে পারেন। এটি হার্ড অংশ নয়। (+ গুগল সাহায্যের জন্য রয়েছে))

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

আপনাকে বুঝতে হবে যে আপনি আরও বা কম শুরু করার মাধ্যমে প্রকল্পের সামগ্রিক কাঠামো সংজ্ঞায়িত হয়। এই কারণে, আপনার সম্ভাব্য সমস্যা এবং সেগুলি কীভাবে সমাধান করা যায় তা আপনি বুঝতে পেরেছেন তা নিশ্চিত করা দরকার।

আসুন কিভাবে বেসিকগুলি সঠিকভাবে অ্যাঙ্কর করব তা দিয়ে শুরু করা যাক।

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

তবে আপনি তাদের অসংখ্যবার ব্যবহারের পরে মনে রাখবেন। আপনি যদি কিছু ব্যবহার করবেন তা নিশ্চিত না হন - গুগল এটি। তারপরে এটি নিজে লিখুন, সেটিংসের সাথে খেলুন এবং ফলাফলটি দেখুন।

কয়েক মাস কঠোর পরিশ্রমের পরে এটি আপনার মাতৃভাষায় লেখার মতো হবে।

এটি গুরুত্বপূর্ণ কারণ আপনার প্রায়শই দ্রুত সরবরাহ করতে হয়। প্রজেক্ট ম্যানেজার / ম্যানেজার আপনার কাছে যা দাবি করে তা এটি। আপনি খুব দীর্ঘ জন্য বেসিক সম্পত্তি খুঁজছেন করা উচিত নয়।

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

https://xkcd.com/1350/

আপনাকে প্রচুর কোড লিখতে হবে

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

ঠিক কী লিখব?

আপনি যদি কোনও এজেন্সিতে বা ফ্রিল্যান্সার হিসাবে কাজ করেন তবে আপনার সম্ভবত কিছু করার দরকার রয়েছে। যদি তা না হয় তবে এখানে কয়েকটি টিপস রয়েছে:

বড়রা এটি কী করে তা দেখুন

যদি এটি প্রথম হয়, আপনার সম্ভবত প্রচুর সময় পাবে। এবং এটি ভাল, যার অর্থ আপনি যা খুশি করতে পারেন।

এবং এটি দুর্দান্ত অনুভব করে, অনেকে আপনাকে vyর্ষা করবে।

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

কী সন্ধান করবেন সে সম্পর্কে কিছু নির্দেশাবলী:

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

কিন্তু এটি সব বিরক্তিকর হয়। আপনি কেবল পড়লে আপনি ভাল হতে পারবেন না, আপনাকে কিছু করতে হবে। এবং আপনি প্রতিবার তা করতে পারেন:

তারপরে এটি নিজে করার চেষ্টা করুন

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

কেন? কারণ এটি দেখতে দুর্দান্ত দেখাচ্ছে এবং আপনি কীভাবে এটি কাজ করেন তা দেখে আপনি দুর্দান্ত বোধ করেন।

এটি কেবল এটি ব্যবহার করবেন না যেন এটি আপনার নিজের ডিজাইন, এটি দুর্দান্ত হবে না। এটিকে আপনার স্থানীয় বিকাশকারী পরিবেশে সঞ্চয় করুন বা আপনি যদি এটির সাথে কিছু করতে চান তবে ডিজাইনারকে লিখুন।

আপনি এটি এখানে খুঁজে পেতে পারেন: https://dribbble.com/shots/3466131- প্রস্ম- ওয়েব -Theme-Template-designerbundle-com

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

কেন? কারণ এটা কঠিন। আপনি কীভাবে আপনার মার্কআপগুলি এবং শৈলীগুলি সংগঠিত করবেন সে সম্পর্কে আপনি আরও অনেক কিছু ভাবেন। এটি পিক্সেল নিখুঁত করার চেষ্টা করুন! অ্যানিমেশন জন্য বোনাস পয়েন্ট।

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

প্রায় ২৪ ঘন্টার মধ্যে লাইভ স্ট্রিমিংয়ে এনকোড করে দুই ঘণ্টারও কম সময়ে সম্পন্ন হয়।

আপনি এখানে বাস্তবায়িত সংস্করণ দেখতে পারেন। এটি প্রতিক্রিয়া জানায় না কারণ এটি মূল পরিকল্পনার অংশ ছিল না। আপনি পুরো প্রক্রিয়াটির সময়সীমাও দেখতে পারেন।

আপনার কোড পরীক্ষা করুন

এটি কেবল কাজের পরিমাণ সম্পর্কে নয়, এটি গুণমান সম্পর্কেও। আপনার পুরানো কোডটি পরীক্ষা করুন এবং সম্ভাব্য উন্নতিগুলি সন্ধান করুন।

আপনাকে এর অংশগুলি আবারও লিখতে উত্সাহিত করেছিল? কি আপনাকে ভীতিকর করে তুলেছে! যোগ করা গুরুত্বপূর্ণ? আপনার কি মিডিয়া অনুসন্ধানগুলি মোকাবেলা করতে হবে? আপনি কি ডিপ সিলেক্টরদের 4-5 স্তর লিখেছেন?

সন্ধানের জন্য অনেকগুলি সেরা অনুশীলন রয়েছে। এখানে কয়েকটি দেওয়া হল:

  1. আধুনিক সিএসএস লেখার জন্য 20 টি প্রোটীস
  2. মডুলার সিএসএস নামকরণের সম্মেলন
  3. অথবা বেশ কয়েকটি সিএসএসের জন্য এই বিশাল গাইডলাইন।

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

আপনার শুরু থেকেই পরিকল্পনা করা উচিত!

উপাদানগুলি একসাথে কীভাবে কাজ করবে? বাসা কি, শৈলী উত্তরাধিকারী?

আপনি ভাল পরিকল্পনা করতে শিখতে হবে

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

উপাদানগুলি কী, সেগুলি একাধিকবার ব্যবহৃত হয়? তারা কি কোনওভাবে পৃথক হয়? তারা কি একই বিধি দ্বারা পৃথক হয়?

এগুলি আপনাকে জানায় যে আপনার কী ধরনের সংশোধক প্রয়োজন, আপনার মার্কআপটি কীভাবে গঠন করবেন আপনি যতটা সম্ভব পুনরায় ব্যবহার করতে পারেন।

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

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

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

এবং তাদের প্রত্যেকটি বিভিন্ন প্রকল্পের জন্য দরকারী। তবে, যদি আপনি সুযোগ এবং সীমাবদ্ধতাগুলি যথেষ্ট পরিমাণে জানেন তবে আপনি আপনার প্রকল্পের জন্য সেরাটি বেছে নিতে পারেন।

  • সাস ব্লগের মডুলার নামকরণের কনভেনশনগুলি এখানেও প্রয়োগ হয়
  • অবজেক্ট-ওরিয়েন্টেড সিএসএসের একটি ভূমিকা (OOCSS)
  • SMACSS
  • BEM
কোনও কিছুই সংগঠিত না হলে সিএসএসের সাথে লড়াই করতে কেমন লাগে। ওভার রাইটিং, পরিবর্তন, পরিবর্তন এবং আরও বেশি সংখ্যক বৈশিষ্ট্য যুক্ত করা প্রায়শই বিশৃঙ্খলা সৃষ্টি করে যা ভাঙ্গা সহজ।

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

আপনি এগুলির কোনও ব্যবহার করছেন না, তবে এটি কেন বিদ্যমান তা জেনে রাখা গুরুত্বপূর্ণ।

টি এল; ডিআর

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

সিএসএস সহজ মনে হচ্ছে, তবে এমন অনেক কিছুই রয়েছে যা ভুল হতে পারে। 5000 লাইনের পরে যাওয়ার পরে জিনিসগুলি সত্যিই অগোছালো হয়ে যেতে পারে। দুর্বল পরিকল্পনা সামগ্রীতে ওভাররাইটিংয়ের দিকে পরিচালিত করে, অপ্রত্যাশিত পয়েন্টগুলিতে ভুল মিডিয়া প্রশ্নগুলি ট্রিগার করা হয় এবং প্রতিক্রিয়াশীল নিয়মগুলি দুঃস্বপ্নে পরিণত হতে পারে।

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

আপনি যদি এই নিবন্ধটি পছন্দ করেন, দয়া করে নীচে হৃদয় প্রতীক ক্লিক করতে ভুলবেন না।

আরো দেখুন

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