অবশেষে চলে আসল আপনাদের প্রতীক্ষিত ফুলস্টাক গাইডলাইন ফ্রম ইউটিউব।
এই আর্টিকেলটিতে যেভাবে আমি ক্রমানুসারে শিখতে বলছি যদি কেও শিখেন তাহলে তার মধ্যে আশা করি প্রোফেশনাল কাজ করার মত যোগ্যতা চলে আসবে।
মুলত ৩ ধরনের ওয়েব ডেভেলপার আছেঃ
১/ ফ্রন্টেন্ড
২/ বেকেন্ড
৩/ ফুলস্টাক
ফ্রন্টএন্ড ওয়েব ডেভেলপমেন্ট:
ফ্রন্টএন্ড বলতে ওয়েব ডেভেলপমেন্টের সেই অংশটিকেই বুঝায় যা আমরা ব্রাউজারে দেখি বা যার সাথে সরাসরি ইউজারের ইন্টারেক্ট হচ্ছে। এটাকে ক্লায়েন্ট সাইড ও বলা হয়। এর মাঝে ফর্ম, ড্রপডাউন মেন্যু(অর্থাৎ একটি মেনুর নিচে আরেকটি মেনু) , বাটন, ট্রানসিশন (কোন একটি নির্দিষ্ট স্থানে মাউস আনলে ওইখানে স্পেশাল কিছু হবে), স্লাইডার (অটোমেটিকভাবে একটার পর একটা ছবি পরিবর্তন হবে), কন্টাক্ট ফর্ম অন্যতম।
ফ্রন্ট এন্ড বা ওয়েব সাইটের ভিজুয়াল অংশ তৈরিতে ব্যবহৃত হয় HTML, CSS and JavaScript। সব গুলো ওয়েব সাইটে HTML এবং CSS দরকার হয়। ওয়েব সাইটের কন্টেন্ট গুলো দেখানো হয় HTML দিয়ে। আর কন্টেন্ট গুলো দেখতে কেমন হবে, কোনটা কোন পাশে হবে ইত্যাদি ঠিক করে দেওয়া হয় CSS দিয়ে। ক্লায়েন্ট সাইডে এনিম্যাশন সহ অন্যান্য ফাংশনাল কাজ করার জন্য ব্যবহার করা হয় জাভাস্ক্রিপ্ট।
ব্যাকএন্ড ওয়েব ডেভেলপমেন্ট:
ফ্রন্টএন্ড এ দেয়া তথ্যগুলো যখন সংরক্ষণের ও বিভিন্ন ফাংশনালিটির দরকার তখনই প্রয়োজন হয় ব্যাকএন্ড ডেভেলপমেন্টের।
ব্যাকএন্ড অংশ ডেভেলপমেন্ট করার জন্য রয়েছে অনেক গুলো প্রোগ্রামিং ল্যাঙ্গুয়েজ। টপ কয়েকটি ওয়েব প্রোগ্রামিং ল্যাঙ্গুয়েজ হচ্ছে PHP, ASP, Java, JavaScript, Ruby, Python ইত্যাদি। JavaScript দিয়ে ফ্রন্টএন্ডের পাশা পাশি একই সাথে সার্ভার সাইড কোড লেখা যায়।
ব্যাকএন্ড সাধারণত তিনটি অংশের সমন্বয়ে গঠিতঃ
১. সার্ভার
২. অ্যাপ্লিকেশন
৩. ডাটাবেজ।
ইউটিউব লগইন করার পর যে অংশটুকু দেখা যায় সেটি হল ফ্রন্টএন্ড, সেখানে একটি ভিডিও আপলোড করলে অ্যাপ্লিকেশন সেগুলোকে ব্যাকএন্ড এর ডাটাবেজ এ জমা করে। হয়তো প্রশ্ন জাগতে পারে, ডাটাবেজ জিনিসটা কি! আসলে ডাটাবেজকে তুলনা করা যেতে পারে বিশাল আকৃতির একটি এক্সেল শীটের সাথে ।সকল ইনফরমেশন সার্ভারের ডাটাবেজে সংরক্ষিত হচ্ছে। আর যখনি কেও লগইন করছে, সেই সংরক্ষিত তথ্যগুলোই প্রদর্শিত হয়। আর এই পুরো কাজটিই নিয়ন্ত্রিত হয় ব্যাকএন্ড এর মাধ্যমে।
ফুলস্টাক ওয়েব ডেভেলপমেন্ট:
ফ্রন্টএন্ড এবং ব্যাকএন্ড একসাথে করাকে ফুলস্টাক ডেভেলপমেন্ট।
বাঙালি অধিকাংশ সময়ে বই পড়া থেকে টিউটোরিয়াল দেখে বেশি দেখে। এজন্য ভাবছি আগে টিউটোরিয়াল এর লিস্ট দেই ।
শেখার আগে জেনে নিন কিছু না জিজ্ঞেস করা প্রশ্নের উত্তর ঃ
ওয়েব ডিজাইন কি ?
ওয়েব ডেভেলপমেন্ট কি ?
ওয়েব ডিজাইন VS ওয়েব ডেভেলপমেন্ট ?
ফ্রন্টএন্ড ডেভেলপমেন্ট কি ?
বেকএন্ড ডেভেলপমেন্ট কি ?
ওয়েব ডেভেলপমেন্ট কেন শিখবেন ?
ওয়েব ডেভেলপার হওয়ার কমপ্লিট গাইডলাইন
ওয়েব ডিজাইন এবং ফ্রন্টএন্ড ডেভেলপমেন্ট এর মধ্যে পার্থক্য কি ?
উপরের ভিডিও গুলা দেখলে আরেকবার কুইক ওভারভিউ এর জন্য আপনাকে নিচের আর্টিকেল টি পড়ার আহবান থাকল ১ বার
HTML(HYPERTEXT MARKUP LANGUAGE):
এটি কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ না।এটি একটি মার্কআপ ল্যাঙ্গুয়েজ। অর্থাৎ এটি দ্বারা আমরা একটি ওয়েব ব্রাওজার অথবা ওয়েব পেজে যা যা দেখি তাঁর কনটেন্ট এবং লে-আউট কন্ট্রোল করা যায়।আসলে ব্যাপারটা এমনি সোজা যে, আপনি নিজেকে এমন একটি ইউজার ইন্টারফেস দেবেন যা আপনি আপনার কোডের সাথে ইন্টারঅ্যাক্ট করতে এবং এর ফলাফলগুলি দেখতে এবং ব্যবহার করতে পারেন। যখন আপনি আরও উচু পর্যায়ের প্রোগ্রামিং ল্যাঙ্গুয়েজ শিখবেন তখন এটি ক্রমশ গুরুত্বপূর্ণ হয়ে উঠবে।
উপরের ২ টা প্লেলিস্ট এর মধ্যে থেকে যেকোন ১ টি ফলো করলে আপনি ভালভাবে HTML শিখতে পারবেন।
শুধুমাত্র HTML দিয়ে কিছু একটা প্রাক্টিস করলে আপনার জন্য ভাল হবে
CSS(CASCADING STYLE SHEETS):
এটিও কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ না। আপনার ওয়েব পেজের HTML উপাদানগুলির চেহারা এবং স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
উপরের ২ টা প্লেলিস্ট এর মধ্যে থেকে যেকোন ১ টি ফলো করলে আপনি CSS ভালভাবে শিখতে পারবেন।
ভার্সন কন্ট্রোল এবং প্রজেক্ট হোস্টিং
যা যা শিখেছেন এইগুলা দিয়ে কিছু প্রজেক্ট করা যাক
আমার মতে মিনিমাম ৫০টা প্রজেক্ট করলে ভাল হয় আর কি আপনার লার্নিং এর জন্যই। কিছু ভিডিও তে দেখবেন বুটস্ট্রাপ ব্যাবহার করেছে । আপনি তো বুটস্ট্রাপ পারেন না তাইলে এখন উপায় কি ?
CSS FRAMEWORK:
এইটাকে আমি বলি বিরিয়ানি মসলা । আজকে মনে করলেন আপনি বিরানি রান্না করবেন। আপনার অনেক রকমের মসলা লাগবে। এত মসলা একসাথে বাসাই বানানো কষ্ট-সাধ্য বটে। ঠিক একইভাবে পিউর HTML & CSS দিয়ে কোড করে একটা ওয়েবসাইট বানানো কষ্ট । ফ্রেমওয়ার্ক এমন একটা টুল বা টেকনলজি যেটার মাধ্যমে কোড লিখা অনেক বেশি সহজ হয়ে যাই ।
বুটস্ট্রাপ ব্যাবহার করে কিছু প্রোজেক্ট করে নেই আমরা চলেন
ইদানীং গ্রিড দিয়ে অনেকে কাজ চালাই রেস্পন্সিভ করার ক্ষেত্রে।
আর ফ্লেক্সবক্স ও এই দিক দিয়ে এর সাথেই চলে আসে
আপনাকে শুধু সিখলেই হবে না ভ্রো । যেকোন ছবি এবং ডেমো দেখে তা কপি করার মত এবিলিটি থাকতে হবে আপনার । তার জন্য আপনাকে পিএসডি টু এইচটিএম এল জানতে হবে।
কিছু এডভান্সড সিএসএস শিখতে চান ?
সিএসএস এনিমেশন এর হাতেখড়ি
আপনাকে অভিনন্দন, কারন আপনি অনেক বড় একটা জার্নির একদম শুরু করে ফেলেছেন।এই পর্যন্ত ভালভাবে শিখলে আপনি নিজেকে একজন ওয়েব ডিজাইনার হিসাবে দাবি করতে পারবেন। এখন আস্তে আস্তে আপনার টার্গেট হবে ফুলস্টাক ডেভেলপমেন্ট। তো চলেন দেখে ফেলা যাক আপনি কি দিয়ে শুরু করবেন।
একটু প্রোগ্রামিং শুরু করি নাকি ?
আমি নিজে যেহেতু জাভাস্ক্রিপ্ট শিখেছি। সুতরাং আমি আপনাদের জন্য এই রিলেটেড গাইডলাইন ই দিব।
উপরের সব গুলা থেকেই দেখার চেষ্টা করবেন।কারন সব স্থানেই কিছু না কিছু নতুন পাবেন আপনি এবং অনেক কিছু শিখতে পারবেন।
আচ্ছা তাইলে কিছু জাভাস্ক্রিপ্ট প্রোজেক্টস করলে কেমন হয় ?
এই পর্যন্ত যদি আসতে পারেন তাইলে আপনার জন্য শুভকামনা
প্রজেক্ট করতে গিয়ে আমরা প্রায় সময়েই জে-কুয়েরির ব্যাবহার দেখব । যদিও এর ব্যাবহার কিছুটা কমেছে তার পরেও শিখে রাখা ভাল তাইনা
আপনরা বেসিক জেকুয়েরি দেখার পরে এইটা দিয়ে যে কত সুন্দর কিছু বানানো সম্বভ তা বুঝতে পারবেন।
আমরা মুলত MERN STACK শেখার চেষ্টা করব। এইটা মুলত কি আসলে ? আপনার প্রশ্নের উত্তর পেয়ে যাবেন এই ভিডিওতে
MongoDB, ExpressJS, ReactJS এবং NodeJS, এই চারটা টেকনোলজি স্ট্যাক নিয়েই হল MERN Stack । এই স্ট্যাকের একটা মজার বৈশিষ্ট্য হলো, শুধুমাত্র জাভাস্ক্রিপ্ট জানলেই যে কেউ এই MERN Stack এ কাজ করে একজন Full Stack Web Developer হয়ে উঠতে পারবেন ।
MERN Stack এর সাহায্যে আপনি 3 tier আর্কিটেকচারের সফটওয়্যার তৈরি করতে পারবেন । প্রথম tier কে বলা হয় User Interface বা Front End, যেই tier এ বা লেয়ারে আপনার এপ্লিকেশনের সাথে ব্যবহারকারি interact করবেন । এই Front End লেয়ারে ব্যবহার করা হয় ReactJS । জাভাস্ক্রিপ্টের এই framework তৈরি করেছেন Facebook এর সফটওয়্যার ইঞ্জিনিয়ার Jordan Walke । ২০১১ সালে প্রথম ফেসবুকের নিউজফিড ফিচারে ReactJS ব্যবহার করা হয় । পরবর্তীতে ২০১২ সালে করতিপক্ষ Instagram এও এর ব্যবহার করার সিদ্ধান্ত নেয় । ReactJS প্রথম পাবলিক রিলিজ পায় ২০১৩ তে ।
দ্বিতীয় architechture tier বা সার্ভার সাইডে ব্যবহার করা হয় ExpressJS এবং NodeJS । সার্ভার সাইড বলতে, যেখানে আপনার এপ্লিকেশনের Business Logic লেখা থাকে । একজন ব্যবহারকারী এবং ডেটাবেজের মধ্যে সম্পর্ক রাখতে এই লেয়ার কাজ করে । FrontEnd থেকে আসা HTTP Request, GET/POST request, application এর বিভিন্ন ফিচার ইমপ্লিমেন্টেশন করা হয় ExpressJS এবং NodeJS দিয়ে ।
এই টেক-স্ট্যাক এর সর্বশেষ স্ট্যাক MongoDB, যেটা এপ্লিকেশনের Database tier এ কাজ করে । MongoDB হলো একটা NoSQL স্টোরেজ মডেল । আমরা সাধারণত জানি ডেটা কলাম এবং রো তে স্টোর করা হয় । কিন্তু এখানে আপনার এপ্লিকেশনে ব্যবহারকারীদের সমস্ত ডেটা JSON/BSON format এ স্টোর করে রাখা হয় MongoDB এর সাহায্যে ।
কেন MERN Stack শিখব
১. এই টেক-স্ট্যাক পুরোটাই একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ (জাভাস্ক্রিপ্ট) এর উপর হওয়ায় 3 tier আর্কিটেকচারের এপ্লিকেশনগুলা খুব এফিশিয়েন্ট এবং অপটিমাইজড হয় । আর অন্য কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ শিখতে হচ্ছে না Full Stack Web Developer হওয়ার জন্য ।
২. MERN Stack ছাড়াও আরও অনেক ওয়েব টেকনোলজি স্ট্যাক বাজারে আছে । যেমন LAMP Stack, Python-JavaScript স্ট্যাক । ওয়েবে কাজ করতে গেলে আপনাকে JavaScript শিখতেই হবে । (এখন অবশ্য Flutter কিছুটা আসতে ধীরে ওয়েব টেকনোলজি মার্কেটে আসছে, সেই গল্প নাহয় আরেকদিন হবে)
৩. Job Market ই বলেন অথবা ফ্রিল্যান্সিং, জাভাস্ক্রিপ্টের কদর সবখানে । আর MERN Stack ডেভেলপার হলে তো কথাই নাই ।
শেখা শুরুর আগে জেনে নেই রিয়েক্ট কি ?
রিয়েক্ট এর ক্রাশ কোর্স
অনেকে ভাবছেন যে কেন আমি আগেই ক্রাশ কোর্স করতে বলছি। এইটা অনেকটা কুইক ওভারভিউ এর মত। আপনি একবার যা যা দেখবেন ২/১ টা শব্দ হইলেও মাথাই থাকবে আপনার । পরে ওইখান থেকে যখন বিস্তারিত শিখবেন তখন আরো ভাল ভাবে শিখতে পারবেন।
রিয়েক্ট এর সাথে সিএসএস ফ্রেমওয়ার্ক ব্যাবহার করতে চান ?
১/https://youtube.com/playlist... {রিয়েক্ট বুটস্ট্রাপ}
২/ https://youtu.be/m-2_gb_3L7Q {মাটেরিয়াল ইউ আই}
শেখা শুরুর আগে জেনে নেই নোড জে এস কি ?
উপরের প্লেলিস্ট গুলা ফলো করলে আপনি ভালভাবে শিখতে পারবেন।
কি ভাই নোড দিয়ে প্রজেক্ট করার ইচ্ছা আছে নাকি ?
এক্সপ্রেস জে এস কি ?
মঙ্গো ডিবি কি ?
উপরের প্লেলিস্ট গুলা ফলো করলে আপনি ভালভাবে শিখতে পারবেন।
ওই মিয়া এত কিছু শিখলেন আর প্রজেক্ট না করে যেতে দেব ভাবছেন ? কখনো না
কি ভাই পড়তে পড়তে হাপিয়ে গেলেন না তো ? আমি কিন্তু হাপাই নি এখনো। আরো কিছু বাকি আছে আপনাদের জন্য
১. হাতে কলমে জাভাস্ক্রিপ্ট by জুনায়েদ আহমেদ স্যার
একদম শূন্য থেকে জাভাস্ক্রিপ্ট শেখার জন্য আপাতত বেস্ট বই হচ্ছে এটা। https://zonayed.js.org/basic/post-0
২. ফুলস্ট্যাক ডেভেলপমেন্ট by এইচ এম নাঈম স্যার
বাংলাতে ফুল ডেভেলপমেন্ট লাইফের একটা গাইডলাইন
এছাড়া আপনারা https://www.pdfdrive.com/ এই সাইট এ যেয়ে যা ইচ্ছা বই ডাউনলোড করতে পারবেন
আর কিছু ইউটিউব চ্যানেলের নাম দিয়ে আজকের মত বিদায় নিচ্ছি
১/ CodAffection
২/ CoderOne
৩/ webdeveloper bd
৪/ Hunny Coders
৫/ Nasim Haider Quoraishi
৬/ Jhankar Mahbub
৭/ Thapa Technical
৮/ Procoder BD
৯/ freeCodeCamp.org
১০/ practical program
১১/ Learn with Sumit
১২/ Stack Learner
১৩/ The Net Ninja
১৪/ Easy Tutorials
১৫/ CodersRank
১৬/ Fireship
১৭/ Online Tutorials
১৮/Anisul Islam
১৯/Rabbil Hasan
২০/ Florin Pop
২১/CleaverCode
২২/Codevolution
২৩/Programming Kit
২৪/JavaScript Mastery
২৫/Exponent
২৬/CodeCareBD
২৭/Adey Coder
২৮/CodeWithHarry
২৯/WEB CIFAR
৩০/Red Stapler
Posts
0 Comments
Please give your feedback about this post!