ফ্রন্টএন্ড ওয়েব ডেভেলপার হতে যে প্রোগ্রামগুলো জানতে হবে

Golam Kibria — Mon, 03 May 2021 13:25:19 +0000

প্রাককথন

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

মূল আলোচনা

Frontend হল একটি ওয়েব সাইটের Interface যা ব্রাউজারের মাধ্যমে ভিজিটর বা ইউজারের সামনে দৃশ্যমান হয়। Frontend Web Development কে Client Side Development -ও বলা হয়ে থাকে। একজন Frontend Developer ব্রাউজারে দৃশ্যমান ওয়েব সাইটের কাঠামো বিন্যাস করে থাকেন। একটি ওয়েব সাইটের Usability, Cross-Browser Support, Responsiveness for any Device, Search Engine Optimization, 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 ভার্সন চলছে।

Image Source toptal.com

CSS Framework

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

Bootstrap
UIkit
Semantic UI
Skeleton
Materialize CSS
Bulma
Foundation
Tailwind CSS

JavaScript

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

JavaScript Framework & Library

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

jQuery
React (Developed by Facebook)
Angular (Developed by Google)
Vue.js
Backbone.JS

CMS

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

WordPress
Joomla
Drupal
Squarespace
Shopify

WordPress

ইন্টারনেটে যত ওয়েবসাইট আছে তার ৩০% ওয়ার্ডপ্রেস দিয়ে ডেভেলপ করা হয়েছে। CMS হিসেবে সবচেয়ে বেশি ব্যবহৃত হয় ওয়ার্ডপ্রেস। এই এপ্লিকেশনটি HTML, CSS, JavaScript, PHP, MySQL ব্যবহার করে তৈরি করা হয়েছে। একজন ফ্রন্টএন্ড ডেভেলপার হিসেবে আপনাকে ওয়ার্ডপ্রেস দিয়ে Fully Functional Website তৈরি করা জানতে হবে। এমনকি একজন সাধারণ ব্যবহারকারীও কোনরকম কোডিং জ্ঞান ছাড়া ওয়ার্ডপ্রেসে ওয়েবসাইট তৈরি করতে পারছে। Page Builder এবং Gutenberg Blocks ফিচার ওয়েব সাইটের UI ডিজাইন অধিকতর সহজ করে দিয়েছে।

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 সহ ওয়েব রিলেটেড অন্যান্য ল্যাঙ্গুয়েজের কোডগুলো লিখব। ওয়েব ডেভেলপারদের জন্য কোড এডিটর অত্যন্ত প্রয়োজনীয় একটি টুল। একটি ভাল এবং প্রয়োজনীয় ফিচারসমৃদ্ধ কোড এডিটর একজন কোডারের কাজ অনেক দ্রুত এবং কোয়ালিটি সম্পন্ন করে তোলে। জনপ্রিয় কয়েকটি কোড এডিটর হল

Visual Studio Code
Sublime Text
Atom
Brackets
Notepad++

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

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

অবশ্যই একটি কম্পিউটার ইন্টারনেট কানেকশনসহ।
শুরুতে ইংরেজী অন্তত পড়তে জানতে হবে।
কাজ শেখার একাগ্রতা এবং ধৈর্য।

Image Source blog.elink.io

কোথায়, কিভাবে শিখবেন?

আপনি যা শিখতে চান তা লিখে গুগলে সার্চ করলে প্রচুর Free Learning Resource পেয়ে যাবেন। এছাড়া ইউটিউব ভিডিও টিউটোরিয়াল থেকে আপনি সবকিছু শিখতে পারেন। এক্ষেত্রে একটি বড় সমস্যা ‍হল ডিসট্রাকটেড হয়ে পড়া। হয়তো কয়েকদিন খুব ভালভাবেই করছেন তারপর একটু জটিল মনে হলেই উঠে পরছেন, বা হতাশ হচ্ছেন বা বিভিন্ন বিষয় নিয়ে কনফিউজড হচ্ছেন। এক্ষেত্রে একজন মেন্টর খুব দরকার হয় যে আপনাকে সঠিক গাইডলাইন, পরামর্শ দিয়ে বিষয়গুলোতে ফোকাস রাখতে সহযোগিতা করবে।আমি আমার ইউটিউব চ্যানেলে Frontend Web Development কোর্সের ভিডিও আপলোড করছি আপনারা আমার ভিডিও টিউটোরিয়াল প্র্যাকটিস করলে Professional Frontend Developer হতে পারবেন বলে আশা করছি। সম্পূর্ণ কোর্সটি করতে চাইলে আমার চ্যানেলটি সাইবস্ক্রাইব করে রাখুন। ইউটিউব চ্যানেল লিংক https://cutt.ly/Gx9tPRy ধৈর্য ধরে পোস্টটি পড়ার জন্য আন্তরিক ধন্যবাদ। Happy Learning 💖

DEV Community: Golam Kibria