জুনিয়র ওয়েব ডেভেলপার হওয়ার গাইডলাইন।

স্টেপ-১: 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 সম্পর্কে মোটামুটি হলেও ধারণা রাখতে হবে। এইগুলা এখন কম হলেও ফিউচার এ এইগুলা একটু একটু করে লাইনে নিয়ে আসবে সেই মাইন্ডসেট রাখতে হবে।

@লিখেছেন – ঝংকার মাহবুব