ফ্রন্ট-এন্ড নিয়ে বিস্তারিত কিছু কথা ।

প্রাককথন-

এই গ্রুপে অনেকেই আছেন যারা ফ্রিল্যান্সিং করতে আগ্রহী। আমি এই পোস্টে শুধুমাত্র Frontend Web Development এর ব্যাপারে বিস্তারিত আলোচনা করব। একজন ফ্রন্টএন্ড ওয়েব ডেভেলপার হতে হলে আপনাকে কোন প্রোগ্রামগুলো জানতে হবে, কতটুকু শিক্ষাগত যোগ্যতা লাগবে ও আরো কি দরকার পড়বে এইসব নিয়েই আজকের এই পোস্ট। যদি মনোযোগের সাথে দীর্ঘ এই পোস্টটি আপনি পড়ে শেষ করেন তবে হয়তো আপনি একটা ক্লিয়ার ধারনা পেয়ে যাবেন। এবং ফ্রন্টএন্ড ওয়েব ডেভেলপার হিসেবে ক্যারিয়ার করতে আপনার পরিকল্পনাগুলো তৈরি করে নিতে পারবেন।

মূল আলোচনা





Frontend হল একটি ওয়েব সাইটের Interface যা ব্রাউজারের মাধ্যমে ভিজিটর বা ইউজারের সামনে দৃশ্যমান হয়। Frontend Web Development কে Client Side Development -ও বলা হয়ে থাকে।

একজন Frontend Developer ব্রাউজারে দৃশ্যমান ওয়েব সাইটের কাঠামো বিন্যাস করে থাকেন। একটি ওয়েব সাইটের Usability, Cross-Browser Support, Responsiveness for any Devices, Search Engine Friendly, Loading Performance, User Experience বিষয়গুলোতেও তাকে দক্ষ হতে হয়।

ওয়েব সাইটের ফ্রন্টএন্ডে ব্যবহৃত প্রধান টেকনোলজিগুলো হল: HTML, CSS এবং JavaScript

এখন আমরা জেনে নেব Frontend এর সাথে জড়িত সকল ল্যাঙ্গুয়েজ, ফ্রেমওয়ার্ক, লাইব্রেরি ও অন্যান্য টার্মসগুলো।

HTML

Frontend Web Developer হিসেবে ক্যারিয়ার করার জন্য HTML ই আপনার যাত্রাস্থল। অর্থাৎ এই প্রোগ্রামটিই আপনাকে সর্ব প্রথম শিখতে হবে।

HTML এর পূর্ণরূপটি হল Hyper Text Markup Language । এর সর্বশেষ ভার্সন হলো HTML5 । এর মাধ্যমে ওয়েব পেজের মূল স্ট্রাকচারটি তৈরি করা হয়। একে আপনি মানব কঙ্কালের সাথে তুলনা করতে পারেন। HTML শেখা অনেক সহজ, মাত্র কয়েকঘন্টা অনুশীলন করলে আপনি এর বেসিকটা শিখে নিতে পারবেন।


CSS

HTML ব্যবহার করে ওয়েব পেজ স্ট্রাকচারটি তৈরির পর আপনার কাজ হবে পেজটিকে সুসজ্জিত করা। ওয়েব পেজের অলংকরণের কাজটি করার জন্য আমরা ব্যবহার করব CSS। এর মাধ্যমে বিভিন্ন HTML এলিমেন্টের কালার, সাইজ, পজিশন ইত্যাদি কাজগুলো করতে পারব। CSS এর পূর্ণরূপ হল Cascading Style Sheets, বর্তমানে এর CSS3 ভার্সন চলছে।

CSS Framework

ফ্রেমওয়ার্ক একজন ডেভেলপারের কাজকে অনেক সহজ, দ্রুত ও মানসম্পন্ন করে তোলে। CSS ফ্রেমওয়ার্কে কিছু UI Components ডিজাইন করা থাকে আমরা এগুলো ব্যবহার করে দৃষ্টিনন্দন একটি সাইট তৈরি করে ফেলতে পারি। কয়েকটি জনপ্রিয় CSS ফ্রেমওয়ার্ক হল:

1. Bootstrap

2. UIkit

3. Semantic UI

4. Skeleton

5. Materialize CSS

6. Bulma

7. Foundation

8. Tailwind CSS


JavaScript

জাভাস্ক্রিপ্ট ওয়েব পেজে ব্যবহৃত সবচেয়ে জনপ্রিয় স্ক্রিপ্টিং ল্যাংগুয়েজ। HTML এবং CSS ব্যবহার করে আমরা একটি স্ট্যাটিক ওয়েব সাইট তৈরি করতে পারি কিন্তু ওয়েবপেজে Interactive ফাংশনস যুক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করতে হয়। বর্তমানে জাভাস্ক্রিপ্ট খুব Powerful Language হয়ে উঠেছে Web & Mobile App থেকে শুরু করে Backend -এও এর ব্যবহার হচ্ছে এবং পূর্ণাঙ্গ এপ্লিকেশন ডেভেলপ করা সম্ভব হচ্ছে।


JavaScript Framework & Library

পূর্বেই আমরা জেনেছি ফ্রেমওয়ার্ক বা লাইব্রেরি একজন ডেভেলপারের কাজকে অনেক সহজ, দ্রুত ও মানসম্পন্ন করে তোলে। ফ্রন্টএন্ড ওয়েব এপ্লিকেশনে ব্যবহার করার জন্য CSS এর মতো জাভাস্ক্রিপ্টেও জনপ্রিয় কিছু ফ্রেমওয়ার্ক এবং লাইব্রেরি রয়েছে। কয়েকটি হল:

1. jQuery

2. React (Developed by Facebook)

3. Angular (Developed by Google)

4. Vue.js

5. Backbone.JS



CMS

CMS এর পূর্ণরূপ হল Content management system । এটি হল এমন একটি ওয়েব প্রোগ্রাম বা এপ্লিকেশন যার মাধ্যমে খুব সহজে ওয়েব সাইটের ব্লগ পোস্ট, পেজ, ছবি, ভিডিও পাবলিশ করা যায় এবং সহজে আপডেট ও ডিলিট করা যায়। বর্তমান সময়ে ইকমার্স, পেমেন্ট গেটওয়ে, সিকিউরিটি ও সার্চ ইঞ্জিনের জন্য প্রয়োজনীয় ফিচার থেকে শুরু করে সবধরনের ওয়েব সাইট ডেভেলপমেন্টের জন্য সকল ফাংশনালিটি CMS প্রদান করছে। কয়েকটি জনপ্রিয় CMS হল:

1. WordPress

2. Joomla

3. Drupal

4. Squarespace

5. Shopify



SASS

SASS (Syntactically Awesome Style Sheets) হল একটি Preprocessor স্ক্রিপ্টিং ল্যাঙ্গুয়েজ। CSS স্টাইলশীটের কাজগুলো আরো দ্রুত ও প্রোগ্রামেটিক্যালি করার জন্য অ্যাডভান্সড ফ্রন্টএন্ড ডেভেলাপররা এটি ব্যবহার হয়ে থাকে। SASS শেখা অনেক সহজ, এর ব্যবহারে অভ্যস্থ হয়ে উঠলে CSS স্টাইলশীটের কাজগুলো Repeatedly না করে দ্রুত করে ফেলা সম্ভব হয়।


Git

Git মূলত Version Control System হিসেবে ব্যবহার হয়। বিভিন্ন কম্পিউটার থেকে একটি এপ্লিকেশন কয়েকজন মিলে একসাথে ডেভেলপ করার জন্য Git ব্যবহার হয়ে থাকে। প্রজেক্ট ডেভেলপ করা ও পর্যালোচনা করার সকল সুবিধা এটি প্রদান করে থাকে।


Photoshop, XD, Figma

Adobe Photoshop, Adobe XD ও Figma হল ওয়েব সাইটের UI Design করার সফটওয়্যার। একজন ডিজাইনার এই সফটওয়্যারগুলো ব্যবহার করে ওয়েবসাইটের ডিজাইনটি করে থাকেন। একজন ডেভেলপারের কাজ হল এই ডিজাইনগুলো ব্যবহার করে ব্রাউজার সাপোর্টেড ও ফাংশনাল ওয়েবসাইটে কনভার্ট করা। তাই একজন ডেভেলপারকে সফটওয়্যারগুলো ব্যবহারের বেসিক জ্ঞান থাকতে হবে।


Code Editor

কোড এডিটর হল এক ধরনের সফটওয়্যার যার মাধ্যমে আমরা HTML, CSS, JavaScript সহ ওয়েব রিলেটেড অন্যান্য ল্যাঙ্গুয়েজের কোডগুলো লিখব। ওয়েব ডেভেলপারদের জন্য কোড এডিটর অত্যন্ত প্রয়োজনীয় একটি টুল। একটি ভাল এবং প্রয়োজনীয় ফিচারসমৃদ্ধ কোড এডিটর একজন কোডারের কাজ অনেক দ্রুত এবং কোয়ালিটি সম্পন্ন করে তোলে। জনপ্রিয় কয়েকটি কোড এডিটর হল-

1. Visual Studio Code 

2. Sublime Text

3. Atom

4. Brackets 

5. Notepad++


উপরে যে প্রোগ্রামগুলো নিয়ে আলোচনা করা হয়েছে তার সবগুলো আপনাকে শিখতে হবে না। যে কাজগুলো শিখে আপনি কাজ শুরু করতে পারবেন আমার করা ভিডিওটি দেখুন। সাধারণত HTML, CSS, JavaScript Basics, WordPress এর উপর তিনমাস কাজ শিখে আপনি প্রফেশনালি কাজ শুরু করতে পারেন। তারপর আপনার প্রয়োজনবোধে বাকিগুলো শিখবেন।

শেখার জন্য যা লাগবে

1. অবশ্যই একটি কম্পিউটার ইন্টারনেট কানেকশনসহ।

2. শুরুতে ইংরেজী অন্তত পড়তে জানতে হবে।

3. কাজ শেখার একাগ্রতা এবং ধৈর্য।