আসসালামু আলাইকুম,
2023 সালে এসে যারা ওয়েব ডেভেলপমেন্ট শিখতে চান এবং জুনিয়র ওয়ে ডেভেলপার হতে চান তাদের জন্য আজকের গাইডলাইন টি অনেক কাজের আসবে বলে আশা করছি। আর বড় কিছু হওয়ার জন্য আগে ছোটো খাটো কিছু দিয়েই শুরু করতে হয়। তাই জুনিয়র ওয়েব ডেভেলপার হওয়ার টার্গেট নিয়ে পরবর্তিতে আরো ওপরের লেভেলে যাওয়া যাবে। তো চলুন শুরু করা যাক।
তবে গাইলডাইনটাকে একশনে কনভার্ট করতে হবে। সিরিয়াসলি শিখার জন্য ডিটারমাইন্ড হতে হবে। প্রাকটিস করতে হবে। হার্ডওয়ার্ক করতে হবে। একদিন চিমটি কেঁটে সাতদিন চোখে স্কুইড গেম লাগিয়ে রেড লাইট গ্রিন লাইট করলে কাজ হবে না। সিরিয়াস লার্নিং হ্যাবিট তৈরি করতে হবে। তবেই সফল ওয়েব ডেভেলপরা হওয়া যাবে।
Contents
স্টেপ-১: HTML:
প্রথমেই Web development বা website এর হাড্ডিগুড্ডি অর্থাৎ Html এর বেসিক কিছু tag যেমন p, a, body, html, div, em, h1, h2, h3, h4, h5, h6, head, img, input, li, ul, ol, span, strong, ইত্যাদি ধরে ধরে শিখতে হবে। তারপর সিমিলার স্টাইলে CSS এর স্টাইল রুলগুলা যেমন height, width, color, border, background, font-size, font-family, margin, padding, overflow, position, text-align, display, ইত্যাদি দিয়ে ওয়েবসাইটের রূপ লাবণ্য বাড়িয়ে দেয়ার সিস্টেম ট্রাই করতে হবে। পরের দিন গিট্টু পাকাইতে বসে যাবে। গিট্টু পাকানোর জন্য গিট বা গিটহাব এ কিভাবে কোড রাখে, রিপোজিটরি খুলে, কোড পুশ করে সেগুলা জানা। এরপর HTML, CSS দিয়ে ফকিরা মার্কা হলেও একটা ওয়েবসাইট বানিয়ে ফেলুন। এবং সেটাকে গিটহাব পেইজেস এ হোস্ট করে ফেলুন। এই রকম তিন চারটা সিম্পল ওয়েবসাইট বানিয়ে ফেলুন।
আর হ্যাঁ, এইগুলা শুরু করার আগে ভিজ্যুয়াল ষ্টুডিও কোড আর নোটপ্যাড ++ আপনার কম্পিউটারে ইন্স্টল্ করে নিন।
.
স্টেপ-২: HTML5 এবং css3:
ওয়েব সাইটের লেটেস্ট হাড্ডিগুড্ডি এর ক্যালসিয়াম বাড়াতে হবে। অর্থাৎ HTML5 এর audio, video, aside, section, article, nav, header, footer ইত্যাদি ট্যাগগুলো দেখা। এর পাশাপাশি ওয়েবসাইট এ Form কিভাবে বানায়, টেবিল কিভাবে বানায় এইগুলা দেখা। এরপর আপনার কাজ হবে css3 রিলেটেড কিছু জিনিস দেখা। যার মধ্যে আছে box-shadow, transition, transform, flexbox, grid layout, overflow, box-model, specificity, ইত্যাদি।
রেস্পন্সিভনেস জিনিসটা কি সেটা দেখুন। মিডিয়া কুয়েরি দিয়ে মোবাইল রেস্পন্সিভ তিনটা ওয়েবসাইট বানিয়ে ফেলুন।
.
স্টেপ-৩: CSS ফ্রেমওয়ার্ক
বেসিক HTML আর CSS শেষ করার পর আপনার কাজ হবে। যেকোন একটা CSS ফ্রেমওয়ার্ক নিয়ে ভালো ধারণা তৈরি করা। সেটা দিয়ে মিনিমাম ৩টা ওয়েবসাইট তৈরি করে ফেলা। তাই bootstrap টা ভালোভাবে শিখুন। ভালো হয় সেটা ডকুমেন্টটেশন দেখে দেখে করতে পারলে। তারপর Responsive একটা ওয়েবসাইট বানানোর চেষ্টা করবেন।
বুটস্ট্রাপ শেষ করার পর আপনার কাজ হবে Tailwind CSS টা একটু ভালোভাবে দেখে রাখা। এইটা দিয়ে কিভাবে কাজ করে সেটা দেখে রাখুন। ইদানিং এইটা খুব বেশি লাইমলাইটে চলে আসতেছে।
.
স্টেপ-৪: বেসিক জাভাস্ক্রিপ্ট
এইবার শুরু হবে আসল খেলা। প্রথমে খুবই সিম্পলভাবে JavaScript এ পঞ্চরত্ন অথাৎ variable, condition, Array, Loop আর function সম্পর্কে জানবেন। তারপর সিম্পল হলেও কিছু problem solving করতে হবে। একদম problem solving এর যদি ওস্তাদ হয়ে যেতে পারেন তাহলে খুবই ভালো, না হলেও মিনিনাম আপনাকে তিনটা সংখ্যা থেকে বড় সংখ্যা বা কোন একটা array সেখান থেকে সব চেয়ে ছোট সংখ্যা বের করবে এমন টাইপের কিছু problem solving করবেন। এরপর prime number, string reverse, factorial, Fibonacci সিরিজের মতো কিছু জিনিস শিখে ফেলবেন। আবার iterative এবং recursive এই দুই সিস্টেম নিয়েও একটু ধারণা নিয়ে রাখবেন। এতে আপনি প্রব্লেম সলভিং এ বস হয়ে যাবেন না। তবে জাভাস্ক্রিপ্ট এর বেসিক জিনিসগুলো কখন কোনটা ইউজ করতে হয় সেটা জানবেন।
.
স্টেপ-৫: DOM এবং ইভেন্ট
এইবার একদম ওয়েবসাইটের ভিতরের আত্মা (দম) নিয়ে টান দিবেন। যাতে ওয়েবসাইট এর দম বের হয়ে যায়। তো দম মানে DOM । এই DOM নিয়ে কাজ করতে গেলে কোন একটা টেক্সটবক্সে কি value আছে সেটা কিভাবে বের করা যাবে। দরকার পরলে ভ্যালু চেইঞ্জ করে দিবেন। কোথাও মাউস দিয়ে ক্লিক করলে সেই ক্লিক এর মোক্ষম জবাব হিসেবে event টাকে হ্যান্ডেল করে ফেলবেন। এবং ওয়েবসাইট এ ইন্টারেক্টিভ একটা ফিল নিয়ে আসতে পারবেন। এই ইন্টারাক্টিভ ফিল নিয়ে তিন-চারটা প্রজেক্ট করে ফেলবেন।
.
স্টেপ-৬: API
এহন আপনার কাজ ওয়েবসাইটকে ফকিরা হলেও ডাইনামিক একটা ফিল দেয়া। আপনার নিজের গুদাম খালি হলেও আরেকজনের গুদামের জিনিস API নামক একটা জিনিস দিয়ে টেনে এনে ওয়েবসাইট এ দেখানো। সেটা হতে পারে json placeholder বা rest countries বা অন্য কোন API দিয়ে ডাটা এনে website দেখাতে পারেন, সেই রিলেটেড তিনটা project করুন। আবার ওয়েবসাইট এ ডাটা সার্চ দেয়া যায় এমন কিছু ফাংশনালিটি ইমপ্লিমেন্ট করুন। যখন ডাটা লোড হতে থাকবে তখন একটা spinner দেখাবে। সেই লেভেলের মজা হবে।
.
স্টেপ-৭: ES৬
প্রথমেই ES৬ নামক কিছু জিনিস আছে সেগুলা দেখতে হবে। বিশেষ করে let, const, arrow function, default parameter, three dots, destructuring, ইত্যাদি। তারপর আপনি ওয়েব ডেভেলপার হন বা না হন।
.
স্টেপ-৮: ব্রাউজার এবং ডিবাগিং
ব্রাউজার সম্পর্কে আপনাকে জানতেই হবে। আর ওয়েব ডেভেলপার হতে চাইলে তো আর কোন কথাই নাই। তাই আপনাকে প্রথমেই console, source ট্যাব সম্পর্কে জানতে হবে। তারপর network, elements আর Application ট্যাব নিয়েও আইডিয়া রাখতে হবে। তারপর ডিবাগ নামক একটা জিনিস আছে। সেটা হচ্ছে ওয়েবসাইট ঠিক মতো কাজ না করলে সেটার ভিতরে বাঘ-ভাল্লুক যা আছে সব শিকার করা। সেই শিকারী হতে হবে।
.
স্টেপ-৯: রিভিশন
গত কয়েকটা স্টেপে যা যা শিখছেন এগুলাকে একটু ঘসামাজা করতে হবে। রিভিশন এর উপর রাখবে হবে। নচেৎ জিনিসগুলা আপনার কাছ থেকে গায়েবুল হাওয়া হয়ে যাবে। বিশেষ করে জাভাস্ক্রিপ্টের জিনিসগুলো গুরিয়ে পেঁচিয়ে দেখতে হবে। Es6 এবং জাভাস্ক্রিপ্ট এর ট্রিকি কিছু কনসেপ্ট আছে সেগুলাতে সময় দিবেন। তাহলে পরবর্তী স্টেপ এ কমফোর্ট ফিল করবেন।
.
স্টেপ-১০: সিম্পল React
এখন হবে আসল খেলা। JavaScript এর একটা framework বা library এর ভিতরে প্রবেশ করতে হবে। এক্ষেএে আমার রিকোমেন্ডেশন হচ্ছে React দিয়ে শুরু করুন। তাই ফান্ডামেন্টাল কিছু কনসেপ্ট যেমন component জিনিসটা কি? এটা কিভাবে লিখে বা কিভাবে create react app দিয়ে নতুন একটা project শুরু করবেন?। এবং এই project এর ভিতরে আপনাকে যত component use করবেন সেগুলাকে কিভাবে ডাটা পাঠাবেন বা ডাইনামিকভাবে ডাটাকে আপডেট করবেন এই জিনিসগুলা কিছুটা জানতে হবে। অবশ্যই React এর কিছু hook সম্পর্কে জানতে হবে। প্রথমেই একটা সিঙ্গেল পেইজ এপ্লিকেশন বানাতে হবে। কিভাবে API দিয়ে ডাইনামিক ডাটা লোড করবেন। সেগুলা জানতে হবে।
.
স্টেপ-১১: রাউটার ও স্টেট ম্যানেজমেন্ট
এইবার আর কোন নয়-ছয় করা যাবে না। কারণ React রাউটার ভার্সন ৬ ইউজ করতে হবে। এইটা কিন্তু আপনার ওয়াইফাই রাউটার না। রিএক্ট এর রাউটার। একাধিক পেজ এর মধ্যে স্টেট শেয়ার করার সিস্টেম জানতে হবে। একটু চার্ট কিভাবে বানায়। ছোটখাটো হলেও একটা ড্যাশবোর্ড ডেভেলপ করার চেষ্টা করতে হবে। এর পাশাপাশি আরেকটু state manage করতে গিয়ে আপনাকে Context api বা use reducer টাইপের জিনিসগুলা কিভাবে কাজ করে সেগুলা একটু চেখে দেখতে হবে।
.
স্টেপ-১২: Authentication
একটা এপ্লিকেশন এর খুবই গুরুত্বপূর্ণ পার্ট হচ্ছে Authentication সিস্টেম। কিভাবে React এপ্লিকেশন এ Authentication সিস্টেম ইন্টিগ্রেট করে সেটা জানতে হবে। এছাড়াও React এপ্লিকেশন কিভাবে হোস্টিং করে সেটাও জানতে হবে। আপনার ওয়েবসাইট google, ফেইসবুক, টুইটার বা গিটহাব দিয়ে কিভাবে লগইন করাবে সেটাও বুঝতে হবে। আরো কিছু দরকারি প্যাকেজ আছে। form হ্যান্ডেল করা, ইত্যাদি। সেগুলা দেখতে হবে।
.
স্টেপ-১৩: ব্যাকএন্ড ও ডাটাবেজ:
এইবার একটু স্ট্যাক এর নিচের দিকে নামাতে হবে। কিভাবে ফুলস্ট্যাক হওয়ার জন্য ব্যাকএন্ডের কিছু জিনিস জানবেন। বিশেষ করে Node, এবং Mongodb দিয়ে CRUD অপারেশন আপনাকে শিখতে হবে। প্লাস কিভাবে JWT টোকেন দিয়ে কোন একটা API কে সিকিউর করবেন। সেটাও জানতে হবে।
এতে আপনি ব্যাকএন্ড সম্পর্কে খুবই হালকা একটা ধারণা তৈরি করতে পারবেন। অর্থাৎ ফ্রন্টএন্ড এ ফোকাস আর ব্যাকএন্ড এ লাইট হবে। আপাতত।
.
স্টেপ-১৪: ফুলস্ট্যাক:
এইবার আপনার কাজ হচ্ছে ফুলস্ট্যাক এপ্লিকেশন বানানো। এবং সেটাকে ডেপ্লয় করা। মিনিমাম তিনটা ওয়েবসাইট বানাতেই হবে।
.
স্টেপ-১৫: আরো কিছু শিখো
রিএক্ট নিয়ে সামনে এগুতে হবে। পেমেন্ট গেটওয়ে জানতে হবে। ইমেজ কিভাবে হ্যান্ডেল করে শিখতে হবে। এমডিন প্যানেল। নেস্টেড রাউট। styled কম্পোনেন্ট, ম্যাটিরিয়াল ui এইগুলা প্রাকটিস করতে হবে। রিএক্ট এপ্লিকেশন রেস্পন্সিভ করতে জানতে হবে। Next JS নামে একটা জিনিস আছে। সেটা জানতে হবে। এই রকম আরো কিছু জিনিস আছে সেগুলা সামনে আসলেই ঝাঁপিয়ে পড়তে হবে।
.
স্টেপ-১৬: programming fundamentals
একজন developer বা একজন programmer হিসাবে কিছু programming এর fundamental কিছু জিনিস আপনাকে জানতেই হবে। তারমানে বেসিক কিছু হলেও data structure এবং বেসিক কিছু algorithm জানতে হবে। প্রব্লেম সলভিং প্রাকটিস করতে হবে। এর পাশাপাশি object oriented programming সম্পর্কে মোটামুটি হলেও ধারণা রাখতে হবে। এইগুলা এখন কম হলেও ফিউচার এ এইগুলা একটু একটু করে লাইনে নিয়ে আসবে সেই মাইন্ডসেট রাখতে হবে।
.
কিভাবে শিখবো?:
উপরের রুটিনটা নিজে নিজে ফিনিশ করতে পারলে বেষ্ট। তবে আমাদের মধ্যে কেউ কেউ আছে যারা লম্বা সময় লেগে থাকতে পারে না। বা প্রথম প্রথম আটকে গেলে গুগল থেকে সল্যুশন বের করতে পারে না। কিংবা কিভাবে তার স্কিলকে রিপ্রেজেন্ট করে জব বা ইন্টার্ন পাবে সেই গাইডলাইন ম্যানেজ করতে না তারা তখন কোন কোর্স বা গাইডেড লার্নিং এনভায়রনমেন্ট এর কথা চিন্তা করতে পারো। তবে নিজে নিজে শিখো বা অন্য কারো কাছে শিখো– হার্ডওয়ার্ক আপনাকে করতেই হবে। সময় আপনাকে দিতেই হবে। একটা লম্বা সময় ওয়েব ডেভেলপমেন্ট এর পিছনে লেগে আপনাকে থাকতেই হবে।