Frontend developer রোডম্যাপ: HTML, CSS, JavaScript ও তার পর

Frontend development মানে browser-এ ব্যবহারকারী যা দেখে ও যার সাথে যোগাযোগ করে তা বানানো: পেজ, layout, ফর্ম, animation ও অ্যাপ স্ক্রিন। এটি দৃশ্যমান চিন্তা ও খুঁটিনাটিতে মনোযোগের পুরস্কার দেয়, এবং শুরুর খুব ভালো জায়গা কারণ ফল সঙ্গে সঙ্গে দেখা যায়।

ধাপ ১: তিনটি মূল ভাষা

HTML: কাঠামো ও অর্থ

• শিরোনাম, অনুচ্ছেদ, লিংক, ছবি, তালিকা, table ও ফর্ম।
• Semantic element (header, nav, main, article, footer, button), কারণ এগুলো accessibility ও SEO-তে সাহায্য করে।

CSS: ধরন ও layout

• Box model, রং, typography, ফাঁক।
• Layout-এর জন্য Flexbox ও Grid।
• Responsive design: mobile-first, media query, নমনীয় আকার।
• Variable (custom property), transition ও সরল animation।

JavaScript: আচরণ

• Variable, type, function, array ও object, loop, শর্ত।
• DOM: element বাছা, বদলানো, event-এ সাড়া দেওয়া।
• অ্যাসিনক্রোনাস কোড: callback, promise, async/await, এবং API কলের জন্য fetch।
• আধুনিক syntax: module, destructuring, arrow function।
• Error সামলানো ও browser console পড়া।

প্রজেক্ট: ব্যক্তিগত পেজ, responsive landing পেজ, ক্যালকুলেটর, public API ব্যবহার করে আবহাওয়া অ্যাপ।

ধাপ ২: টুল

• VS Code ও browser DevTools (element, console, network, performance)।
• Git ও GitHub, এবং GitHub Pages, Netlify বা অনুরূপে প্রকাশ।
• npm ও Vite-এর মতো bundler/dev server।
• Terminal-এর মৌলিক।

ধাপ ৩: JavaScript-এ গভীরে

• Scope, closure, this, prototype ও class।
• Immutability, array method (map, filter, reduce)।
• Browser storage (localStorage, cookie) ও তাদের নিরাপত্তা সীমা।
• TypeScript: type যোগ করে এবং অনেক bug আগেই ধরে। বেশিরভাগ পেশাদার প্রজেক্ট এটি ব্যবহার করে।

ধাপ ৪: একটি framework শিখুন

একটি বেছে ভালোভাবে শিখুন:

• React সবচেয়ে বেশি ব্যবহৃত, বিশাল ecosystem সহ।
• Vue সহজে ধরা যায় ও ভালো নথিভুক্ত।
• Svelte ও Angular-ও শক্ত পছন্দ।

শিখুন: component, props, state, event, তালিকা ও key, ফর্ম, routing, data আনা এবং ভাগ করা state পরিচালনা। তারপর routing, server rendering ও build-এর জন্য meta-framework (Next.js, Nuxt, SvelteKit, Astro)।

প্রজেক্ট: task manager, মুভি সার্চ অ্যাপ, cart-সহ ছোট দোকান।

ধাপ ৫: ব্যবহারকারী অভিজ্ঞতার মান

Accessibility (a11y)

• Semantic HTML ব্যবহার করুন, প্রতিটি ফর্ম field-এ label দিন এবং ছবিতে কাজের alt লেখা দিন।
• সবকিছু keyboard দিয়ে ব্যবহারযোগ্য করুন, দৃশ্যমান focus-সহ।
• যথেষ্ট রঙের contrast রাখুন।
• Screen reader ও স্বয়ংক্রিয় যাচাই দিয়ে পরীক্ষা করুন।

Performance

• ছবি অপ্টিমাইজ ও lazy-load করুন, আধুনিক ফরম্যাট ব্যবহার করুন।
• কম JavaScript পাঠান, কোড ভাগ করুন, ভালোভাবে cache করুন।
• Core Web Vitals (LCP, INP, CLS) শিখুন এবং Lighthouse দিয়ে মাপুন।
• ছবি ও বিজ্ঞাপনের জায়গা আগে রেখে layout shift এড়ান।

SEO ও meta মৌলিক

• Title, description, heading, canonical URL এবং যেখানে গুরুত্বপূর্ণ সেখানে server-rendered কনটেন্ট।

ধাপ ৬: backend-এর সাথে কাজ

• REST API কল করুন, loading, error ও ফাঁকা অবস্থা সামলান।
• ক্লায়েন্ট দিক থেকে authentication ধারা, এবং localStorage-এ token কেন সতর্কতা চায়।
• ওয়েব নিরাপত্তার মৌলিক জানুন: XSS, CSRF, CORS, content security policy (web security সিরিজ দেখুন)।
• ক্লায়েন্ট ও server দুই দিকেই ফর্ম ও যাচাই।

ধাপ ৭: testing ও পেশাদার অভ্যাস

• Unit test (Vitest বা Jest), component test (Testing Library), end-to-end test (Playwright বা Cypress)।
• Linting ও formatting (ESLint, Prettier)।
• CSS পদ্ধতি: Tailwind-এর মতো utility CSS, CSS module বা component library, এবং design system মানসিকতা।
• Pull request ও পর্যালোচনার মাধ্যমে সহযোগিতা।
• মৌলিক design বোধ: ফাঁক, শ্রেণিক্রম, সামঞ্জস্য। Figma ফাইল পড়তে শিখুন।

ধাপ ৮: বিশেষায়ন (ঐচ্ছিক)

State management, animation (CSS, Web Animations, Framer Motion), data visualisation, web component, progressive web app, React Native দিয়ে mobile, WebGL/3D, design system।

কীভাবে শিখবেন

• পছন্দের আসল সাইট নতুন করে বানান, screenshot থেকে শুরু করে।
• যে প্রজেক্ট শেষ করেন ও deploy করেন তা বানান।
• MDN-এ ডকুমেন্টেশন পড়ুন, HTML, CSS ও JavaScript-এর সেরা রেফারেন্স।
• প্রতিটি নতুন library-র পেছনে ছুটবেন না। মৌলিক টেকে; framework বদলায়।

মূল কথা: আগে HTML, CSS ও JavaScript আয়ত্ত করুন, তারপর একটি framework ও TypeScript। Accessibility, performance ও নিরাপত্তাকে কাজের অংশ ধরুন, কাজ পরীক্ষা করুন এবং deploy করা প্রজেক্ট দিয়ে দেখান।

---

প্রোগ্রামিং রোডম্যাপ সিরিজ, পর্ব ১ (শুরু করা): 4 নম্বর (মোট 5)। আগের লেখা: Backend developer রোডম্যাপ: কী শিখবেন ও কোন ক্রমে.