ওয়েব ডিজাইনার এবং ডেভেলপার হওয়ার পূর্ণাঙ্গ গাইডলাইন

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

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

একজন সফল ওয়েব ডিজাইনার ও ওয়েব ডেভেলপার হওয়ার কমপ্লিট গাইডলাইন

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

ওয়েব ডিজাইনার হতে কোন বিষয়গুলো শিখবেন এবং কোনটা দিয়ে শেখা শুরু করবেন?

একজন দক্ষ ওয়েব ডিজাইনার হিসেবে স্ট্যাটিক ওয়েবসাইট বা ডকুমেন্ট তৈরি করায় জন্য আপনাকে নিন্মোক্ত বিষয় গুলো সম্পর্কে খুব ভাল ধারনা রাখতে হবে এরং এবং কাজের অভিজ্ঞতা অর্জন করতে হবে।

এইচটিএমএল (HTML)

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

হাইপারটেক্সট মার্কআপ ল্যাংগুয়েজ (HyperText Markup Language) এর সংক্ষিপ্ত রূপ হলো এইচটিএমএল। এইচটিএমএল হলো ওয়েব পেজ বা ওয়েব ডকুমেন্টের এর স্ট্যান্ডার্ড মার্কআপ ল্যাংগুয়েজ। এইচটিএমএল এর মাধ্যমে ওয়েবসাইট তৈরি করা যায় এবং এটি শেখা অনেক সহজ।

এইচটিএমএল অনেক গুলো ট্যাগ এর সমন্বয়ে গঠিত। আমরা বিভিন্ন ওয়েবসাইটে যা দেখি সেগুলো বিভিন্ন এইচটিএমএল ট্যাগ ব্যাবাহর করে তৈরি করা হয়ে থাকে। উদাহরণস্বরূপ; আমরা যে লেখাগুলো দেখি তাঁর প্রদর্শিত হয়ে থাকে প্যারাগ্রাফ দিয়ে ট্যাগ ব্যবহার করে। আবার যে সকল ছবি দেখতে পারি সেগুলো যুক্ত করা হয় ইমেজ ট্যাগ ব্যবহার করে। আবার ওয়েব সাইটের এক পাতা থেকে অন্য পাতায় অথবা এক ওয়েবসাইট থেকে অন্য ওয়েবসাইটে যাওয়ার জন্য যে লিঙ্ক ব্যবহার করা হয় সেগুলো করা হয়ে থাকে অ্যাঙ্কর ট্যাগ ব্যবহার করে।

প্রথমে আপনাকে শিখতে হবে এই এইচটিএমএল ট্যাগ ব্যবহার করে কিভাবে একটি বেসিক ওয়েব ডকুমেন্টের স্ট্রাকচার বা কাঠামো তৈরি করতে হয়।

সিএসএস (CSS)

এইচটিএমএল এর পরেই আপনাকে যেটা শিখতে হবে সেটা হলো সিএসএস। সিএসএস বা ক্যাসকেডিং শৈলী শীট (Cascading Style Sheets) হলো একটি ল্যাঙ্গুয়েজ যা এইচটিএমএল ডকুমেন্ট কে বিভিন্ন স্টাইলে রুপ দিতে ব্যবহার করা হয়। একটি ওয়েব ডকুমেন্টে এইচটিএমএল এলিমেন্ট গুলো কিভাবে প্রদর্শিত হবে তা বর্ণনা করে থাকে এই সিএসএস।

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

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

আপনাকে সিএসএস ব্যবহার করে এইচটিএমএল ডকুমেন্ট এর বিভিন্ন ইলিমেন্ট গুলো কিভাবে একটির পাশে আরেকটি রাখে বা স্টাইল প্রদান করতে হয় এই বিষয়গুলো শিখতে হবে। এছাড়াও সিএসএস এর আইডি (ID) ও ক্লাস (Class) কিভাবে সেট করে এ বিষয়ে একটি বেসিক ধারণা নিতে হবে।

বুটস্ট্র্যাপ (Bootstrap)

এইচটিএমএল এবং সিএসএস শেখার পর আপনাকে শিখতে হবে বুটস্ট্রাপ। বুটস্ট্রাপ হলো এইচটিএমএল, সিএসএস, এবং জেএস লাইব্রেরি (JS library) এর সমন্বয়ে গঠিত রেসপনসিভ ওয়েবসাইট ডিজাইন ফ্রেমওয়ার্ক যা সহজে কাস্টমাইজ করা যায়। বুটস্ট্রাপ বিশ্বের সবচেয়ে জনপ্রিয় ফ্রন্ট-এন্ড ওপেন সোর্স টুলকিট, আর তাই এটাও আপনাকে শিখতে হবে খুব সহজে উন্নত মানের রেসপনসিভ ওয়েবসাইট ডিজাইন করা শিখতে।

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

জেকুয়েরি (jQuery)

বুটস্ট্রাপ শেখার পাশাপাশি আপনাকে শিখতে হবে জেকুয়েরি সম্পর্কে। জেকুয়েরি মূলত স্মুথ স্ক্রলিং, রেস্পন্সিভ মেনুকে একটু অটোমেটিক করতে, ইত্যাদি কাজে ব্যবহৃত হয়।

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

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

এখন প্রশ্ন হচ্ছে আপনি তো প্রফেশনাল ভাবে এখনো কাজ শিখেনি এবং আপনার কোন কোম্পানি ও নেই, তাহলে আপনার নিজের জন্য প্রথমেই ওয়েবসাইট তৈরি করা কি আসলেই প্রয়োজনীয়?

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

ওয়েব ডেভেলপার হতে কোন বিষয়গুলো শিখবেন এবং কোনটা দিয়ে শেখা শুরু করবেন?

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

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

PHP

 

Python

 

Node.js

 

Ruby

MySQL

Laravel Framwork

এছাড়াও আপনাকে যা যা শিখতে হবে

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

ফটোশপ

টাইপিং অনুশীলন (Typing Practise)

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

এর জন্য আপনি এক টানা প্রতি দিন ২০ থেকে ৩০ মিনিট টাইপ করতে পারেন, আর প্রতি দিন ২০ থেকে ৩০ মিনিট টাইপ করলে আপনি ৬ মাস থেকে ১ বছরের মধ্যে ভাল টাইপিং দক্ষতা অর্জন করতে পারার কথা, এর থেকে দ্রুত শিখতে আপনাকে প্রতি দিন ২০ থেকে ৩০ মিনিটের বেশি সময় ধরে টাইপ করা চালিয়ে যেতে হবে।

ডেভেলপার টুল (Developer Tools)

ডেভেলপার টুল (Web Developer Tools or, DevTools) হলো ওয়েব ডিজাইন ও ওয়েব ডেভেলপমেন্ট বিষয়ক কজে ব্যবহৃত একটি অতি জরুরী ওয়েব ব্রাউজার টুলকিট। সাধারন্ত একটি ওয়েব ডকুমেন্টে বিভিন্ন ইলিমেন্ট গুলো কিভাবে রয়েছে তা সূক্ষ্মভাবে পর্যবেক্ষণ করতে এবং এ সংক্রান্ত ট্রাবলশুটিং এর কাজে এই টুল ব্যবহার করা হয়। বর্তমানে প্রায় প্রতিটি মডার্ণ ব্রাউজার যেমন; গুগল ক্রোম, মজিলা ফায়ারফক্স, অপেরা, ইত্যাদি ব্রাউজারের সাথে বিল্টইন ভাবে ওয়েব ডেভেলপার টুল যুক্ত করে দেয়া থাকে, যা কম্পিউটারের মাউসের ডান বোতাম (Right Button) চাপলে প্রদর্শিত মেনুর সবচাইতে নিচের আইটেমে খুঁজে পাওয়া যায়। সাধারন্ত ভাবে এ মেনু আইটেমের নাম "Inspect or, Inspect element"(ইনস্পেক্ট বা ইনস্পেক্ট এলেমেন্ট) হিসেবে উল্লেক্ষিত থাকে।

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

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

ডোমেইন ও হোস্টিং

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

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

গিটহাব (GitHub)

ওয়েবসাইট: GitHub.com

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

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

কোডপেন আইও (CodePen.io)

ওয়েবসাইট ঠিকানা: https://codepen.io

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

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

বিভিন্ন সফ্টওয়্যার ও টুল

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

শেখার জন্য প্রয়োজনীয় ওয়েবসাইটের তালিকা

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

W3Schools

ওয়েবসাইট: W3Schools.com

ওয়েব ডিজাইন এবং ওয়েব ডেভেলপমেন্ট শেখার জন্য অনলাইনে এখনও পরযন্ত যতগুলো ওয়েবসাইট রয়েছে তাদের মধ্যে W3Schools হলো এক নাম্বার। যেখানে রয়েছে ওয়েব ডিজাইন এবং ওয়েব ডেভেলপমেন্ট শেখার প্রায় সকল বিষয়ের তথ্য, যেমন: এইচটিএমএল (HTML), সিএসএস (CSS),জাভাস্ক্রিপ্ট (JavaScript or JS), পিএইচপি (PHP), ইত্যাদি।

Reference on W3Schools Website

এখানে বিভিন্ন বিষয়ের তথ্যসূত্রগুলো এমন ভাবে সাজানো হয়েছে যাতে করে একজন একেবারে নতুন শিক্ষার্থিরাও প্রাথমিক পর্যায় থেকে ধাপে ধাপে উল্লেক্ষিত যে কোন বিষয়ে শেখা শুরু কারা থেকে ভাল ভাবে শেখা সম্পূর্ণ করতে পারে।

প্রয়োজনীয় টুলস এর তালিকা

ওয়েব ডিজাইন এবং ওয়েব ডেভেলপমেন্ট এর কাজ করার জন্য গুরুত্বপূর্ন এবং সর্বাধিক জনপ্রিয় টুলস সমূহের তালিকা নিচে দেওয়া হলো।

নোটপ্যাড প্লাস প্লাস (Notepad++)

ডাউনলোড ঠিকানা: https://notepad-plus-plus.org/downloads

নোটপ্যাড ++ হলো একটি জনপ্রিয় লাইটওয়েট সোর্সকোড এডিটর। এটা উইন্ডোস কম্পিউটারে বাইডিফল্ট যে নোটপ্যাড দেয়া থাকে তার রিপ্লেসমেন্ট। যেটা সম্পূর্ণ ফ্রি এবং একাধিক ল্যাঙ্গুয়েজ সাপোর্ট করে। প্রয়োজন অনুসারে এর সাথে বিভিন্ন অ্যাড-অন বা প্লাগইন যুক্ত করে বিভিন্ন বাড়তি সুভিধা পাওয়া যায়।

সাবলাইম টেক্সট (Sublime Text)

ডাউনলোড ঠিকানা: https://www.sublimetext.com/download

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

এটম (Atom)

ডাউনলোড ঠিকানা: https://atom.io

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

ভিজ্যুয়াল স্টুডিও কোড ( Visual Studio Code)

ডাউনলোড ঠিকানা: https://code.visualstudio.com

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

অ্যাডোবি ড্রিমওয়েভার (Adobe Dreamweaver)

ডাউনলোড ঠিকানা: https://www.adobe.com/products/dreamweaver/free-trial-download.html

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

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

প্রয়োজনীয় রিসোর্স এর তালিকা

<h4টাইপিং অনুশীলন (Typing Practise)

শেখার ওয়েবসাইট:

সাইটের ঠিকানা:

1. https://www.keybr.com/
2. https://www.typing.com/student/start

শেখার সফটওয়্যার:

ডাউনলোড ঠিকানা: https://www.typingmaster.com/

অনলাইনে টাইপিং প্রাক্টিস করার জন্য উপরের দুটি লিংক ব্যবহার করতে পারেন। সাইট দুটিতে কোন প্রকার রেজিস্ট্রেশন না করেই অনলাইনে ফ্রিতে টাইপিং প্র্যাকটিস করতে পারবেন। আমার জানা মতে টাইপিং মাস্টার (TypingMaster) সফটওয়্যার টি অফলাইনে ইংরেজী টাইপিং শেখার জন্য জনপ্রিয় তাই এটা আপনি ব্যবহার করে দেখতে পারেন। এছাড়াও ইন্টারনেটে একটু ঘাটাঘাটি করলে আরও অনেক এরকম অনলাইন টুল বা অফলাইন সফটওয়্যার পেতে পারেন যেগুলো দিয়েও আপনি আপনার সুবিধা মতো প্র্যাকটিস করা চালিয়ে নিতে পারেন।

বুটস্ট্র্যাপ ডাউনলোড (Bootstrap Download)

• ডাউনলোড ঠিকানা: GetBootstrap.com
• বুটস্ট্র্যাপ সিডিএন সংস্করণ: CDN via jsDelivr

বুটস্ট্র্যাপ নিয়ে যেহেতু উপরে আলোচনা করা হয়েছে সেহেতু নতুন কররে আর কথা বাড়াবো না। উল্লেক্ষিত লিংকে ক্লিক করে বুটস্ট্র্যাপ এর সাইট থেকে সর্বশেষ সংস্করণটি ফ্রি ডাউনলোড করে কাজ করা শুরু করে দিতে পারেন। অথবা অনলাইনে কাজ করলে সিএসএস এবং জেএস (CSS and JS) এর সিডিএন (CDN) এর ক্যাশে সংস্করক্ষিত সংস্করণটি দিয়েও ব্যবহার শুরু করতে পারেন, যেটার সরাসরি লিংক-ও উপরে দেয় হলো।

জেন-কোডিং অ্যাড-অন (zen-coding Add-on)

ডাউনলোড ঠিকানা: https://code.google.com/archive/p/zen-coding/downloads

নোটপ্যাড ++ (Notepad++) টুলের সাথে জেন-কোডিং অ্যাড-অন (zen-coding Add-on) যুক্ত করে কিছু নির্দিষ্ট শর্ট কোড ব্যবহার করে খুব দ্রুততার সাথে নির্ভুলভাবে কোডিং করা যায়। সময় বাঁচানোর ক্ষেত্রে এই অ্যাড-অন টি পেশাদার কাজে অত্যন্ত সহায়ক ভূমিকা পালন করে।

উল্লেখিত লিঙ্ক থেকে এই অ্যাড-অন টি ডাউনলোড করার পরে কিভাবে এটি নোট নোটপ্যাড ++ এর সাথে যুক্ত করতে হয় এবং ব্যবহার করতে হয় তা জানতে গুগল বা ইউটিউবে সার্চ করলে এ-সংক্রান্ত অসংখ্য তথ্য পেয়ে যাবেন।

জেন কোডিং চিটশীট (Zen Coding Cheatsheet)

ডাউনলোড ঠিকানা: https://www.aether.ru/files/zencoding.pdf

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

পেশাগতভাবে কাজের জন্য মার্কেটপ্লেস এর তালিকা

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

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

ফ্রিল্যান্সিং মার্কেটপ্লেস

Freelancer.com

ওয়েবসাইট: Freelancer.com

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

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

আপওয়ার্ক (UpWork)

ওয়েবসাইট: https://www.upwork.com

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

ওয়েব ডিজাইন ও ডেভেলপমেন্ট শিখে Freelancer.com এবং আপওয়ার্ক এই দুটি সাইটের যে কোন একটিতে কাজ করেও আপনি অনায়াসে খুব ভাল পরিমান অর্থ আয় করতে পারেন পৃথিবির যে কোন প্রান্তে বসে।

ফাইভার (Fiver)

ওয়েবসাইট: https://www.fiverr.com

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

কাজ সাবমিট করার মার্কেটপ্লেস

এনভাটো মার্কেট (Envato Market)

Envato হলো একটি বিশাল ডিজিটাল পন্যের ও সেবার মার্কেটপ্লেস গ্রুপ প্রতিষ্ঠান, যার রয়েছে বেশ কয়েকটি ওয়েব সাইট, যেগুলোর মাঝে ওয়েব ডিজাইনার ও ওযেব ডেভেলপারদের জন্য বহুল জনপ্রিয় হলো ThemeForest এবং CodeCanyon ওয়েব সাইট। এছাড়াও তাদের রয়েছে Envato Elements, যেটাও বিভিন্ন কোড বা ডিজাইন পন্য বিক্রিয়ের জন্য পরিচিত।

এই সাইট গুলোতে স্বাধিন ভাবে কাজ করছেন এমন ব্যাক্তিদের পাশাপাশি অনেক ছোট ও বড় প্রতিষ্ঠানও রয়েছে যারা বিভিন্ন কোড, সফ্টওয়্যার, ডিজাইন, ইত্যাদি ধরনের কাজ সাবমিট করে আয় করছে। অনেকেই ১০ বা ১৫ ডলার থেকে শুরু করে ১০,০০০ ডলার এর বেশি মূল্যের বিবিন্ন পন্য একাধিক বার বিক্রিকরার মাধ্যমে কোটি টাকার বেশি আয় করছেন।

ThemeForest's – 2022's Best Selling Themes – updated weekly.

CodeCanyon's 2022's Best Selling PHP Scripts – updated weekly.

ভাল মানের ওয়েব টেমপ্লেট, UI টেমপ্লেট, ওয়ার্ডপ্রেস থিম, প্লাগইন, সিএমএস, ইত্যাদি তৈরি করে এখানে সাবমিট করে বিক্রয়ের জন্য এপ্রুভ করতে পারলে সেটা থেকে বেশ ভাল পরিমান আয় করা সম্ভব যা অন্য কোন মার্কেটপ্লেস থেকে করা কঠিন। এজন্যই ওয়েব ডিজাইনার ও ওযেব ডেভেলপারদের জন্য এই সাইট টি আপনাদের জন্য আমি রিকমেন্ডেড করি।

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

শেষ কথা

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

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

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

আপনার জন্য শুভ কামনা করে এই আর্টিকেল থেকে বিদায় নিচ্ছি, আল্লাহ হাফেজ।