কিভাবে একজন প্রফেশনাল  ফ্রন্টইন্ড ডেভেলপার হবেন ?

কিভাবে একজন প্রফেশনাল ফ্রন্টইন্ড ডেভেলপার হবেন ?

বর্তমান সময়ে পুরো পৃথিবীতে ইন্টারনেটের রাজত্ব চলছে। এই ডিজিটাল সময়ে সবাই তাদের ব্রান্ডকে সবার কাছে সহজে প্রচার এবং প্রসার করার অন্যতম প্রধান মাধ্যম হল ওয়েবসাইট। বর্তমান সময়ে প্রায় সমস্ত কিছু কাজ অনলাইনে অর্থাৎ ওয়েবসাইটের মাধ্যমে হচ্ছে , যেটা একজন ওয়েব ডিজাইনার এর জন্য ভালো কাজের সুযোগ।

ওয়েব ডিজাইন কি?

আমরা যখন কোন ওয়েবসাইট ভিজিট করি তখন তার একটা ইউজার ইন্টারফেস আমাদের কম্পিউটারে অথবা মোবাইল ব্রাউজারে দেখতে পাই যেখানে বিভিন্ন টেক্সট, ইমেজ, অডিও, ভিডিও, পিডিএফ, ডকস, এনিমেটেড ইমেজ, ফরম, টেবিল ইত্যাদি দেখতে পাই। এগুলো কিন্তু সব সুন্দর করে সাজানো থাকে। মানে আপনি সবকিছু কালার, সাইজ, এলাইনমেন্ট, ব্যাকগ্রাউন্ড ইমেজ/কালার/ভিডিও ইত্যাদির সমন্বয়ে একটা সুন্দর ডিজাইন সহ কনটেন্ট গুলো দেখতে পাই যার কারনে আমাদের কাছে ওয়েবসাইটটা দেখতে সুন্দর লাগে এবং সবকিছু খুব সহজেই আমরা খুজে পাই। এটাই মুলত ওয়েব ডিজাইন। একটু চিন্তা করে দেখুন তো কেমন হত যদি এগুলো সব এলমেলো হয়ে থাকত ?? এলোমেলো থাকলে হয়ত আমরা ওয়েবসাইট ভিজিটই করতাম না। 
 

ওয়েবসাইট ডিজাইন কে আমরা একটা বাড়ির সাথে তুলনা দিতে পারি। ধরুন আপনি একটা বাড়ি বানাবেন মানে ওয়েবসাইট বানাবেন। তাহলে প্রথমে আপনাকে সেটার একটা ইনিশিয়াল প্লান বানাতে হবে যে কোথায় বেডরুম হবে, কোথায় কিচেন থাকবে, ড্রয়িং রুম, বারান্দা কোথায় কিভাবে হবে, দরজা কোনদিকে থাকবে ইত্যাদি ইত্যাদি। তারপর আস্তে আস্তে পাইলিং থেকে শুরু করে প্রতিটা তলা গড়ে উঠবে। তারপর সেখানে ইটের দেয়াল উঠবে। এইযে এতখন যেটা হলো সেটা একটা স্ট্র্যাকচার। এখনো কিন্তু বাড়ি বসবাসের উপযোগী হয়নি। এবার দেয়াল গুলো প্লাস্টার হবে, রঙ করা হবে। এভাবে সবকিছু শেষে আপনার বাড়িটি একটা সুন্দর ডিজাইনে দাঁড়াবে এবং তখন আপনি সেখানে সহযেই বসবাস করতে পারবেন। 

এভাবেই ওয়েবসাইট এরও প্রথমে একটা স্ট্রাকচার দাড় করাতে হয়। তারপর সেখানে বিভিন্ন ল্যাঙ্গুয়েজের মাধ্যমে স্টাইল এড করা হয়। ফাইনালি একটা সুন্দর ইন্টারফেস আমরা ব্রাউজারে দেখতে পাই। নিচের ছবিটা খেয়াল করুন – 

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

ওয়েব ডিজাইন শেখার জন্য –

 

আমাদের চারপাশে আইটি রিলেটেড সাবজেক্ট এর স্টুডেন্ট অনেক। আমাদের প্রায় সবারই একটা কমন ধারনা আছে যে আইটি সাবজেক্ট নিয়ে পড়লেই আইটি ইন্ডাস্ট্রিতে সফল হতে পারব। কিন্তু এই সেক্টরটা পুরোটাই স্কিল বেজড। এজন্য বর্তমান জব মার্কেটে দেখা যায় আইটি এর থেকে নন-আইটি ব্যাকগ্রাউন্ড এর পারসন ই বেশি জব করছে এই ফিল্ডে। এর কারন হলো দক্ষতা। ওয়েব ডিজাইন শিখতে আপনার সবার আগে যেটা লাগবে সেটা হলো ইন্টারনেট সম্পর্কে একটু বোঝা, টুকটাক ওয়েবসাইট ভিজিট করতে জানা, এবং প্রচন্ড ধৈর্য, লেগে থাকার মানসিকতা, পরিশ্রম করার মানসিকতা এবং এর পাশাপাশি টুলস হিসেবে একটা কম্পিউটার এবং ইন্টারনেট কানেকশন। ব্যাস, আপনি এগুলোতে স্বয়ংসম্পূর্ণ হলেই ওয়েব ডিজাইন শেখার জন্য এগোতে পারেন।
 

কি কি শিখতে হবে? 

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

 

প্রথমেই আসি স্ট্র্যাকচার নিয়ে। ওইযে প্রথমদিকে আমরা একটা বাড়ি বানিয়েছিলাম মনে আছে ? ঠিক সেরকমভাবে চিন্তা করলে ওয়েবসাইটের স্ট্রাকচার বানানোর জন্য সাধারণত Hyper Text Markup Language বা HTML ব্যাবহার করা হয় সবচেয়ে বেশি। এছাড়া আরো অনেক ল্যাঙ্গুয়েজ আছে ওয়েবসাইটের স্ট্রাকচার তৈরি করার জন্য। এগুলোকে মার্কআপ ল্যাঙ্গুয়েজ বলে। এর মধ্যে XML, XTHML, Markdown ইত্যাদি গুরুত্বপূর্ণ। 

তারপর আপনার বাড়িকে রঙ করা, লাইট বসানো, বাড়ির অন্যান্য ডেকোরেশনের জন্য মানে আপনার সাইটের স্ট্রাকচারকে সুন্দর করে সাজানোর জন্য Cascading Style Sheet বা CSS ব্যাবহার করা হয়। এর মাধ্যমে আপনি আপনার সাইটে কোন কনটেন্ট কোন পাশে বসবে, কি কালার হবে, কতটুকু সাইজ হবে,  ইত্যাদি ডিজাইন এপ্লাই করা হয়।

তারপর ওয়েবসাইটে সুন্দর সুন্দর এনিমেশন ব্যাবহার করা, বিভিন্ন এক্টিভিটি এড করা মানে কোন বাটনে ক্লিক করলে কোন একটা একশন ঘটা, এরকম কাজের জন্য JavaScript এবং jQuery ব্যাবহার করা হয়।

উপাদান –

ওয়েব ডিজাইন শিখতে গেলে কয়েকটা বিষয়ে আপনার স্কিলফুল হতে হবে। সেগুলো হলো –

⦁ লেআউট ওয়েবসাইটে অনেক রকমের কনটেন্ট থাকে। কোন কনটেন্ট কোথায় কোথায় বসবে, আগে বসবে না পরে বসবে, মেনুবার, টেক্সট, হেডার, ফুটার, অন্যান্য সেকশন কোনটা কোথায় বসবে ইত্যাদি ঠিক করাকে লেআউট ডিজাইন বলে।

কালার কালার কম্বিনেশন হলো সবচেয়ে গুরুত্বপূর্ণ একটা জিনিসের ভিতর একটা। ওয়েবসাইট ডিজাইনের শুরুতেই ব্যাকগ্রাউন্ড কালার, টেক্সট কালার, বিভিন্ন শেপ ইত্যাদির জন্য কিছু কালার সিলেক্ট করে নেয়া আবশ্যক। এটা পরে চেঞ্জও হতে পারে।

⦁ কনটেন্ট একটা ওয়েবসাইটের প্রধান জিনিস হলো এর কনটেন্ট। কনটেন্ট দেখেই সাধারনত বোঝা যায় ওয়েবসাইট কি সম্পর্কে। কনটেন্ট বিভিন্ন রকমের হতে পারে। যেমন – ইমেজ, টেক্সট, অডিও, ভিডিও, ডক্স, পিডিএফ ইত্যাদি। এগুলো কোনটা কোথায় বসবে, হেডিং এর কালার কি হবে, প্যারাগ্রাফ এর কালার কি হবে, ইমেজ, ভিডিও সাইজ ইত্যাদি ডিজাইন করা।

⦁ ফন্ট সিলেকশনডিজাইন সুন্দর হওয়ার জন্য একটা ভাল ফন্ট জরুরী। সুন্দর ফন্ট ওয়েবসাইটের টেক্সট কনটেন্ট গুলোকে আরো আকর্ষণীয় করে উপস্থাপন করে।

মডার্ন গ্রাফিক্সওয়েবসাইট আরো আকর্ষণীয় করে তুলতে বিভিন্ন এনিমেশন ভিডিও, এনিমেটেড ইলাস্ট্রেশন, 2D/3D ইমেজ, ভেক্টর ইমেজ, gif ফাইল সহ এমন কিছু কনটেন্ট এর ব্যাবহার করা।

রেসপন্সিভ ডিজাইন আমরা সবসময় কিন্তু কম্পিউটার থেকে ওয়েবসাইট ভিজিট করিনা। বা সবসময় মোবাইল থেকেও ভিজিট করিনা। কখনো কম্পিউটার থেকে আবার কখনো মোবাইল থেকে ভিজিট করা হয় কিন্ত সব ডিভাইসের স্ক্রিন সাইজ এক না। তাহলে কম্পিউটারের বড় স্ক্রিনে ডিজাইন যেরকম দেখাবে সেরকম যদি মোবাইলেও দেখা যায় তাহলে তো চলবে না। এজন্যেই আমাদের রেস্পন্সিভ ডিজাইন করতে হয় যাতে করে যে কোন ব্রাউজার , ডিভাইস বা স্ক্রিন থেকে ওয়েবসাইট ভিজিট করলে ডিজাইন ব্রেক না হয়। 

নোটঃ তবে অবশ্যই যেটা মাথায় রাখতে হবে সেটা হলো যে কনটেন্ট গুলো ওয়েবসাইটে ব্যাবহার করা হবে সেগুলো যেন সব ব্রাউজার সাপোর্টেড হয়। কারন সব ফাইল টাইপ এখনো সব ব্রাউজারে সাপোর্ট নাও করতে পারে। তবে আপডেটেড সব মডার্ন ব্রাউজার মোটামুটি সব ফাইল টাইপ ই সাপোর্ট করে।

কেন শিখবেন ?

আপনি যদি আইটিতে ক্যারিয়ার গড়তে ইচ্ছুক হন তাহলে এই সেক্টর টা আপনার জন্য নিঃসন্দেহে  একটা ভাল সম্ভাবনাময়ী হতে পারে। বর্তমানে যে আইটিতে আপনি যে সেক্টরেই কাজ করেন না কেন, মোটামুটি বেসিক হলেও ওয়েব ডিজাইন জানার কোন বিকল্প নাই। আর আপনি যদি ডেভেলপমেন্ট সেক্টরে ক্যারিয়ার গড়তে চান তো আপনাকে এইটা শিখতে হবেই। 

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

⦁    ওয়েব ডিজাইন – ওয়েব ডিজাইন হলো স্ট্যাটিক একটা লেআউট বা পেজ এর ডিজাইন বা সাজানো যেখানে কোন ফাংশনালিটি, এপ্লিকেশন বা ডায়নামিক কনটেন্ট চেঞ্জ করার কোন অপশন থাকবে না। অর্থাৎ এখানে যে সব কনটেন্ট রাখা হয় অন্য কোন জায়গা থেকে পরিবরতন, পরিমার্জন করার কোন অপশন থাকবে না। এখানে কোনকিছু চেঞ্জ করতে হলে সরাসরি কোডের ভিতর গিয়ে চেঞ্জ করতে হবে। এখানে কাজ শুধুমাত্র HTML, CSS, JavaScript & jQuery নিয়ে। তবে ডিজাইন আরো দ্রুত করার জন্য বিভিন্ন ধরনের CSS ফ্রেমওয়ার্ক ইউজ করা হয়। এর মাঝে পুপুলার কিছু ফ্রেমওয়ার্ক হলো Bootstrap, TailwindCSS, W3CSS, Foundation ইত্যাদি। এটার সাথে সাধারণত সার্ভারে কোন কানেকশন থাকেনা। তবে মডার্ন ডেভেলপমেন্টে একটা কমন টার্ম সবাই শুনে থাকবেন সেটা হলো ফ্রন্টইন্ড ডেভেলপমেন্ট। এটাও ওয়েব ডিজাইনেরই একটা অংশ। তবে লেটেস্ট কিছু ফ্রেমওয়ার্ক বা টেকনলজি এসে এর মিনিং পুরো চেঞ্জ করে দিয়েছে। এখন কিছু স্পেসিফিক ল্যাঙ্গুয়ের ফ্রেমওয়ার্ক এর মাধ্যমে সরাসরি ডিজাইন থেকেই কোনরকম ডেভেলপমেন্ট ছাড়াই সার্ভারের সাথে যোগাযোগ করা যায়।

⦁    ওয়েব ডেভেলপমেন্ট – একটা ওয়েবসাইটে শুধুমাত্র কনটেন্ট সাজিয়ে রাখলেই হবে না। আমরা ইকমারস ওয়েবসাইট থেকে যখন কিছু কিনি তখন শুধু প্রোডাক্ট সাজিয়ে রাখলেই ওয়েবসাইট চলবে না। সেখানে যাতে সবাই পছন্দমত কিনতে পারে, পেমেন্ট কর‍্তে পারে, প্রাইস হিসাব করে দেখতে পারে, কবে কোন প্রোডাক্ট কিনেছে সেটা যাতে দেখতে পারে, বায়ার এবং সেলার যাতে লাইভ চ্যাট করতে পারে, প্রোডাক্ট কিনতে এসে যাতে একাউন্ট খুলে সিকিউর ইনফরমেশন দিয়ে সে চেকআউট করতে পারে ইত্যাদি যে একশন গুলো আমরা করে থাকি সেটাই হলো ডেভেলপমেন্ট। আর এগুলো কখনো বারবার কোডে এসে ম্যানেজ করা সম্ভব না। এজন্য সেটাকে একটা ডায়নামিক প্যানেলের সাথে ডেভেলপ করা থাকে যেখান থেকে সব ফাংশনালিটি মডিফাই হয়। এটাকে বলে ওয়েব ডেভেলপমেন্ট। এটার মাধ্যমে ইউজার এর বিভিন্ন একশনের উপর ভিত্তি করে সার্ভারের সাথে যোগাযোগ করে ডাইনামিকলি ডাটা ডিসপ্লে করে। 

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

 

 

 

0 Comments

আপনার মতামতটি আমাদের জানান

শেয়ার করুন
টেগ
রিলেটেড ব্লগ
  • কিভাবে একজন প্রফেশনাল ডেভেলপার হবেন ?
    কিভাবে একজন প্রফেশনাল ডেভেলপার হবেন ?
    আরো পড়ুন
  • কিভাবে একজন প্রফেশনাল  ফ্রন্টইন্ড ডেভেলপার হবেন ?
    কিভাবে একজন প্রফেশনাল ফ্রন্টইন্ড ডেভেলপার হবেন ?
    আরো পড়ুন
  • বর্তমানে ওয়েব ডিজাইনেএন্ড ডেভেলপমেন্ট সেক্টরের এক হট নাম ওয়ার্ডপ্রেস
    বর্তমানে ওয়েব ডিজাইনেএন্ড ডেভেলপমেন্ট সেক্টরের এক হট নাম ওয়ার্ডপ্রেস
    আরো পড়ুন
  • ওয়ার্ডপ্রেস ইউজার রোল ম্যানেজমেন্ট
    ওয়ার্ডপ্রেস ইউজার রোল ম্যানেজমেন্ট
    আরো পড়ুন
  • লারাভেলের CRUD Operation
    লারাভেলের CRUD Operation
    আরো পড়ুন
  • আইপি  দিয়ে কীভাবে দেশ, শহরের নাম এবং ঠিকানা  বের করা যায় ।
    আইপি দিয়ে কীভাবে দেশ, শহরের নাম এবং ঠিকানা বের করা যায় ।
    আরো পড়ুন
  • কমান্ড লাইন ব্যবহার করে লারাভেল ক্যাশ ক্লিয়ার করার পদ্ধতি
    কমান্ড লাইন ব্যবহার করে লারাভেল ক্যাশ ক্লিয়ার করার পদ্ধতি
    আরো পড়ুন