কমপ্লিট ওয়েব ডেভেলপমেন্ট এর রোড ম্যাপ(বাচ্চাদের জন্য)।

কমপ্লিট ওয়েব ডেভেলপমেন্ট এর রোড ম্যাপ(বাচ্চাদের জন্য)।

যেহেতু আপনি ওয়েব ডেভেলপমেন্টের রোট ম্যাপ চাচ্ছেন তো সে ক্ষেত্রে আমি ধরে নিচ্ছি আপনি ওয়েবসাইট কি সেটা জানেন এবং একবার হলেও আপনি ওয়েবসাইট ব্যবহার করেছেন।

আমার পরিচয় : আমার নাম ইপতি। পড়াশোনা কম্পিউটার সাইন্স এন্ড টেকনোলজি (ফেনী পলিটেকনিক ইনস্টিটিউট)।

ওয়েবসাইটকে সাধারণত দুই ভাগে করা হয়। Frontend and Backend।

Frontend আবার কি?

উত্তর : আপনি একটি ওয়েবসাইটে প্রবেশ করলেই প্রথমেই যে ইন্টারফেসটি দেখেন সেটা কেই আমরা বলছি frontend। এক কথায় ui (user interface) কেই Frontend বলা হয়।

আরেকটু সহজ করে : আমরা যখন নির্দিষ্ট একটি কাজ করার জন্য একটি ওয়েবসাইটে প্রবেশ করি, আচ্ছা ধরে নিন আমরা এসএসসির পরীক্ষার রেজাল্ট দেখার জন্য https://www.educationboardresults.gov.bd/ এই ওয়েবসাইটিতে প্রবেশ করলাম এবং ওয়েবসাইটটিতে আমরা প্রবেশ করার পরেই আমরা দেখতে পাই কিছু টেক্সট, কিছু ছবি, কয়েকটি বাটন, টেক্সট লেখার কিছু খালি ঘর(যেগুলোকে আমারা input বলে থাকি) ইত্যাদি ।

তো এইসব উপাদান গুলো তৈরি করা,সাজানো, কালার ইত্যাদি কাজ গুলো করে frontend developer। আশা করি frontend কি আপনি বুঝতে পেরেছেন।

তো এখন কথা হচ্ছে Frontend ডেভেলপমেন্ট কিভাবে আমরা শিখতে পারবো?

উওর : Frontend ডেভলপমেন্ট বা একটি ওয়েবসাইটের ui করার জন্য আপনাকে বেশ কয়েকটি কম্পিউটার ভাষা শিখতে হবে। যেমন : HTMl,CSS and Javascript। এছাড়াও এর বাইরে আপনি বেশ কিছু ভাষার কথা শুনে থাকতে পারেন (Bootstrap, Jquery,React ) ইত্যাদি।

HTML কি?

উওর : আগেই বলেছি ওয়েবসাইটের ui তে text,image,button, input সহ নানা ধরনের উপাদান থাকে। তো এসব উপাদান তৈরি করা হয় HTML এর মাধ্যমে। যদিও উপাদান গুলো সরাসরি আমরা তৈরি করি না (HTML আমাদের জন্য তৈরি করে রেখেছে আমার শুধু বিভিন্ন key এর মাধ্যমে সেগুলোকে webpage এ নিয়ে আসি এবং নিজেদের মতো করে ব্যবহার করি )।

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

বি: দ্র: ঘরের এই উদাহরণটি মাথায় রাখুন।

CSS কি?

উওর : CSS HTML উপাদান গুলোকে (text,image,button ইত্যাদি ) কে নিয়ে কাজ করে। যেমন : কালার দেওয়া,পজিশন সেট করা এছাড়া ও ওয়েবসাইট কে responsive করা।

আরো সহজ করে CSS : একটু আগে আমরা একটি ঘরের উদাহরণ দেখেছি। আমরা ঘরের ফিলার এবং দেয়াল তৈরি করার পরেই ঘরকে রং করি যাতে দেখতে আরো সুন্দর লাগে। তো ওয়েবসাইটের ক্ষেত্রেও ঠিক একই ব্যাপারটাই হয় আমরা যখন এইচটিএমএল ব্যবহার করে একটি ওয়েবসাইটের সকল উপাদান নিয়ে আসি বা তৈরি করি তারপর প্রয়োজন হয় উপাদানগুলোকে সাজানো বা বিভিন্ন প্রকার কালার দেওয়া যাতে আমাদের এটি আরো দেখতে সুন্দর হয়। আর এই কাজগুলো আমরা করি CSS এর মাধ্যমে।

Javascript কি?

উওর: HTML উপাদানগুলোকে নিয়ে বিভিন্ন প্রকার ফাংশনাল কাজ করাই হচ্ছে Javascript এর কাজ।

আরো সহজ করে Javascript : HTML দিয়ে আমরা ওয়েবসাইটের প্রয়োজনীয় উপাদানগুলো তৈরি করি এবং CSS এর মাধ্যমে আমরা উপাদানগুলোকে সাজিয়ে একটা সুন্দর ওয়েবসাইটের ui তৈরি করি। এর বাইরেও আমাদের বিভিন্ন প্রকার কাজ করতে হয়। চলুন একটা উদাহরণের মাধ্যমে জিনিসটা বোঝা যাক। আপনি হয়তো বিভিন্ন ওয়েবসাইটে উপরে বিভিন্ন মেনুবার দেখতে পান।

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

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

অর্থাৎ একটি ওয়েবসাইটের উপাদান গুলো নিয়ে আমরা যে সমস্ত লজিক্যাল কাজগুলো করে থাকি সেগুলোই Javascript মাধ্যমে করা যায়।

Framework and Library কি?

উওর: শুরু তে বলেছিলাম html, css and javascript বাইরে ও কিছু ভাষা রয়েছে (Bootstrap,react,jquery,vue,tailwind )। আসলে এগুলো নতুন কোনো ভাষা নয়। বলতে পারেন এগুলো নিদিষ্ট ভাষায় অন্যের লেখা কোড। এগুলোকে আমরা আমাদের css, javascript ইত্যাদি ভাষায় ব্যবহার করি, আরো একটু ভালো রেজাল্ট পাওয়ার জন্য।

যেমন CSS লেখা একটু সময় সাপেক্ষ ব্যাপার হওয়ায় এজন্য আমরা tailwind অথবা bootstrap ব্যবহার করি (এগুলোকে আমরা framework বা library বলি)। একটি ওয়েবসাইট এর উপাদান ডিজাইন করার যে যে কমন কাজ গুলো রয়েছে সেগুলো Bootstrap বা Tailwind এ করা আছে,, আমাদের আর করতে হয় না। এতে কম সময় অনেক অনেক বড় ওয়েবসাইট তৈরি করতে পারি।

ঠিক একই ভাবে javascript এর framework/library গুলো(react,vue) একই রকম কাজ করে।

Backend আবার কি?

উওর : আচ্ছা আমি সরাসরি উত্তর না দিয়ে একটু ঘুরিয়ে ফিরিয়ে উত্তরটা দেই। Remove Bg নামে একটি ওয়েবসাইট রয়েছে যে ওয়েবসাইটটি তে প্রবেশ করলেই আমরা বিভিন্ন প্রকার উপাদান দেখতে পাব, এই যেমন টেক্সট, বাটন, ইমেজ ইত্যাদি

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

ঠিক এটাই backend কাজ। অর্থাৎ আমরা বুঝতে পারলাম যে একটি ওয়েবসাইটের উপাদান গুলো নিয়ে আমরা ঠিক কি কাজটা করব সেটাই হচ্ছে backend ।

এবার আবারো ঘরের সেই উদাহরণের ফিরে যাই। আমরা ঘরের ফিলার তৈরি করলাম দেওয়াল তৈরি করলাম এবং ঘর কে ডিজাইন করার জন্য রং করলাম এখন আমাদের ঘর টিকে পুরোপুরি একটা বসবাসের উপযোগী করার জন্য আমাদের ঘরে বৈদ্যুতিক সংযোগ প্রদান করতে হবে ।তো ঘরে বৈদ্যুতিক সংযোগ দেওয়ার পরে আমরা কিন্তু বিভিন্ন প্রকার সুবিধা পেয়ে থাকি এই যেমন আমরা আমাদের ঘরে লাইট কিংবা ডিজিটাল পাখা ইত্যাদি লাগাতে পারে। ঠিক একই রকম ভাবেই আমরা যখন একটি ইউজার ইন্টারফেস তৈরি করে ফেলব এরপরে আমাদের ওয়েবসাইটটিকে প্রাণ দিতে হয় অথবা ওয়েবসাইটটি ঠিক কি কাজ করবে সেটা বলে দিতে হয়। আর এর জন্য আমার বেশ কিছু প্রোগ্রামিং ভাষা ব্যবহার করে থাকি। যার মধ্যে জনপ্রিয় রয়েছে পাইথন PHP, Javascript and Python.

Backend নিয়ে আরো একটি পোস্ট আসবে ইনশাল্লাহ।