আপনার প্রথম করণীয় তালিকা প্রয়োগ করুন: 8 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:00

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

ভাল, ভাল খবর হল যে কোডিং কঠিন নয়।

টার্গেট অডিয়েন্স: এই টিউটোরিয়ালটি নতুনদের জন্য যারা ওয়েব ডেভেলপমেন্টে ক্যারিয়ার শুরু করতে চান, সাধারণভাবে ওয়েব টেকনোলজি সম্পর্কে বোঝেন।

বিল্ড সময়: 90 মিনিট।

অসুবিধা: সহজ।

ধাপ 1: আমরা কি তৈরি করব?

এই টিউটোরিয়ালের শেষে আমরা করব:

• HTML5 ব্যবহার করে একটি সাধারণ করণীয় তালিকা ওয়েব অ্যাপ্লিকেশন তৈরি করুন।
• সুদর্শন এবং দ্রুত স্টাইলিং যুক্ত করতে আমাদের অ্যাপের সাথে বুটস্ট্র্যাপ সংহত করুন।
• আমাদের অ্যাপ্লিকেশনে কিছু গতিশীল আচরণ যোগ করতে জাভাস্ক্রিপ্ট এবং JQuery লাইব্রেরি ব্যবহার করুন।
• Ziet/now ব্যবহার করে ক্লাউডে আমাদের আবেদন স্থাপন করুন।

কর্মে:

ধাপ 2: HTML, বুটস্ট্র্যাপ, জাভাস্ক্রিপ্ট এবং JQuery এর ভূমিকা

HTML কি?

হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ (এইচটিএমএল) কে "ইন্টারনেটের ভাষা" হিসাবে ভাবা যেতে পারে। HTML হল প্রমিত মার্কআপ ভাষা যা ওয়েব পেজ তৈরিতে ব্যবহৃত হয়। এটি মূলত বৈজ্ঞানিক নথি ভাগ করার জন্য ডিজাইন করা হয়েছিল। বছরের পর বছর ধরে এইচটিএমএল -এর সাথে মানিয়ে নেওয়ার ফলে ইন্টারনেটে ওয়েব পেজ হিসেবে প্রদর্শিত হতে পারে এমন আরও অনেক ধরনের ডকুমেন্ট বর্ণনা করা উপযুক্ত হয়েছে।

একটি এইচটিএমএল পৃষ্ঠা প্রদর্শনের জন্য শুধুমাত্র প্রয়োজন একটি ওয়েব ব্রাউজার, যেমন মাইক্রোসফট ইন্টারনেট এক্সপ্লোরার (IE), মোজিলা ফায়ারফক্স, গুগল ক্রোম, অথবা অ্যাপল সাফারি।

বুটস্ট্র্যাপ কি?

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

জাভাস্ক্রিপ্ট কি?

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

JQuery কি?

JQuery দ্রুত, ছোট, এবং বৈশিষ্ট্য সমৃদ্ধ জাভাস্ক্রিপ্ট লাইব্রেরি, এটি HTML ডকুমেন্ট ট্র্যাভারসাল, এবং ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, অ্যানিমেশন এর মত জিনিসগুলিকে অনেক সহজ করে তোলে।

JQuery এর সমস্ত ক্ষমতা জাভাস্ক্রিপ্টের মাধ্যমে অ্যাক্সেস করা যায়, তাই জাভাস্ক্রিপ্টের দৃ gra় উপলব্ধি থাকা, আপনার কোড বোঝা, গঠন করা এবং ডিবাগ করার জন্য অপরিহার্য।

আরো বিস্তারিত জানার জন্য:

এইচটিএমএল

জাভাস্ক্রিপ্ট

JQuery

বুটস্ট্র্যাপ

ধাপ 3: এইচটিএমএল সহ আপনার প্রথম পৃষ্ঠা

পদক্ষেপ 1: একটি নতুন ফোল্ডার তৈরি করুন:

mkdir simple-todolist

STEP2: সিম্পল-টোডোলিস্ট ফোল্ডারের ভিতরে নতুন ফাইল তৈরি করুন এবং এর নাম index.html দিন।

সিডি সরল-টডোলিস্ট

স্পর্শ index.html

ধাপ 3: index.html এ নিম্নলিখিত কোড যোগ করুন।

তালিকা তৈরি

আমার করণীয়-তালিকা

ধাপ 4: আপনার ব্রাউজারে index.html খুলুন।

আপনি দেখতে পাবেন আমার করণীয় তালিকা প্রদর্শিত হয়েছে (উপরের ছবিটি দেখুন)।

ধাপ 4: বুটস্ট্র্যাপ যোগ করা

এই বিভাগে আমরা আমাদের index.html পৃষ্ঠায় বুটস্ট্র্যাপ সমর্থন যোগ করব, যাতে টু-ডু লিস্ট অ্যাপে দ্রুত এবং ভাল স্টাইলিং যোগ করা যায়।

বিজ্ঞপ্তি: এই অ্যাপটিতে আমরা বুটস্ট্র্যাপ 3 ব্যবহার করব, আপনি অন্য কোন CSS ফ্রেমওয়ার্ক ব্যবহার করবেন, যেমন শব্দার্থিক UI।

পদক্ষেপ 1: হেড ট্যাগে বুটস্ট্র্যাপ সিএসএস ফাইল যুক্ত করুন:

পদক্ষেপ 2: বডি ট্যাগের শেষে বুটস্ট্র্যাপ এবং JQuery CDN স্ক্রিপ্ট ফাইল যোগ করুন:

ধাপ 3: আপনার ব্রাউজারে index.html খুলুন।

অভিনন্দন, আমরা সফলভাবে কয়েক ধাপে আমাদের পৃষ্ঠায় বুটস্ট্র্যাপ সমর্থন যোগ করেছি।

ধাপ 5: UI সম্পূর্ণ করুন

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

ধাপ 1: index.html এ নিম্নলিখিত কোড যোগ করুন।

নতুন টাস্ক যোগ করুন সব পরিষ্কার করুন!

আমার কাজের তালিকা

পদক্ষেপ 2: আপনার ব্রাউজারে index.html ফাইলটি খুলুন।

ধাপ 6: অ্যাপে যুক্তি যুক্ত করা

যখন আপনি একটি টাস্কের নাম লিখুন এবং অ্যাড বোতামে ক্লিক করুন, এই মুহূর্তে কিছুই ঘটবে না। আসুন এটি ঠিক করি।

এই ধাপের শেষে আমরা আমাদের index.html কে একটি ডাইনামিক পেজে পরিণত করব, তাই এটি ব্যবহারকারীর মিথস্ক্রিয়ায় আচরণ করবে।

স্টেপ 1: সিম্পল-টোডোলিস্টের ভিতরে একটি নতুন ফোল্ডার তৈরি করুন, এর নাম দিন js এবং একটি নতুন ফাইলের নাম এটি script.js সেই ফোল্ডারের ভিতরে:

mkdir js

cd js touch script.js

পদক্ষেপ 2: হেড ট্যাগের শেষে নিচের কোডটি যোগ করে index.html এর সাথে script.js লিঙ্ক করুন:

ধাপ 3: script.js ফাইলে নিম্নলিখিত কোড যোগ করুন

$ (ডকুমেন্ট)। প্রস্তুত (() => {

var কাজ = 0 $ ("#RemoveAll")। hide (); / * নতুন টাস্ক হ্যান্ডলার যোগ করুন val (); if (val! == "") {কাজ += 1; var elm = $ ("

• "); $ ("#মাইলিস্ট ")। যোগ করুন (এলিম); $ (" ইনপুট ")। clikc ", ফাংশন (ইভেন্ট) {event.preventDefault (); event.stopPropagation (); কাজ -= 1; $ (এই).parent.remove ();}); কাজ */ যদি (কাজ> 2) {$ ("#remveAll")। show ();}/ *removeAll handler */ $ ("#RemoveAll")। on ("click", event => {event.preventDefault);

  দ্রষ্টব্য: আপনি ক্লোন পেতে পারেন অথবা আমার গিটহাব সংগ্রহস্থল থেকে কোডের জিপ ডাউনলোড করতে পারেন, এটি আপনাকে ট্যাপ করা থেকে বাঁচাবে।

  git clone github.com/ahmnouira/simple-todolist

  ধাপ 4: কোডটি পরীক্ষা করুন

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

  ধাপ 7: (ptionচ্ছিক) অ্যাপটি স্থাপন করুন

  

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

  এটি অর্জনের জন্য আমরা ZEIT Now নামে ক্লাউড প্ল্যাটফর্ম ব্যবহার করব।

  ZEIT এখন কি?

  ZEIt Now স্ট্যাটিক সাইট এবং সার্ভারলেস ফাংশনগুলির জন্য একটি ক্লাউড প্ল্যাটফর্ম, এটি ডেভেলপারদের ওয়েবসাইট এবং ওয়েব পরিষেবাগুলি হোস্ট করতে সক্ষম করে যা তাত্ক্ষণিকভাবে স্থাপন করে, এই সব শূন্য কনফিগারেশন সহ।

  1. এখনই CLI ইনস্টল করুন

  ZEIT Now এর সাথে স্থাপন করতে, আপনাকে এখন CLI ইনস্টল করতে হবে।

  গুরুত্বপূর্ণ: নিশ্চিত করুন যে আপনি এনপিএম ইনস্টল করেছেন।

  npm -v # npm ইনস্টল কিনা তা পরীক্ষা করুন

  npm install -g now@latest # now CLI এর শেষ ভার্সনটি বিশ্বব্যাপী ইনস্টল করুন -v # chech যদি এখন CLI ইনস্টল করা থাকে এবং এটি ভার্সন প্রিন্ট করুন

  2. মোতায়েন

  আপনাকে যা করতে হবে তা হল ডিরেক্টরিতে চলে যাওয়া এবং তারপর একটি একক কমান্ড দিয়ে আপনার অ্যাপটি স্থাপন করা:

  এখন -পণ্য # অ্যাপটি স্থাপন করুন

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

  আমার অ্যাপ:

  ধাপ 8: উপসংহার

  এখানেই শেষ এটা পেতে ওখানে যাও !

  নতুন বৈশিষ্ট্যগুলি সেট করে কোডটি অন্বেষণ করুন এবং অ্যাপ্লিকেশনটি প্রসারিত করুন, এবং মন্তব্য এলাকায় আপনার অভিজ্ঞতা এবং প্রশ্নগুলি ভাগ করুন।

  আমার আরও কাজ দেখতে দয়া করে GitHub এ আমার ওপেন সোর্স দেখুন।

  আমার ইউটিউব।

  myLinkedIn

  আমার নির্দেশাবলী পড়ার জন্য একটি সময় থাকার জন্য ধন্যবাদ ^^

  আপনার দিনটি শুভ হোক.

  আহমেদ নওরা