বিগিনার ওয়েব ডেভেলপারদের জন্য ৫ টি বেস্ট ওয়েবসাইট

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

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

HTML Color Codes

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

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

Getwaves

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

এই ওয়েবসাইটটি ভিজিট করে আপনি নিজের ইচ্ছামত বিভিন্ন কাস্টম ডিজাইনের ছোট বড় এমন ওয়েভ ডিজাইন তৈরি করতে পারবেন আপনার ডেভেলপ করা ওয়েবসাইটে ব্যাবহারের জন্য। আপনি ওয়েভের কালার থেকে শুরু করে সাইজ, অরিয়েন্টেশন, সবকিছুই নিজের ইচ্ছামত কাস্টোমাইজ করে নিতে পারবেন। এই ওয়েবসাইট ব্যাবহার করে একটি ওয়েভ ডিজাইন জেনারেট করতে খুব বেশি হলে ২ মিনিট সময় লাগবে আপনার। আর ওয়েভটি আপনাকে প্রোভাইড করা হবে সরাসরি SVG Code এর সাহায্যে, যা আপনি সরাসরি আপনার কোড এডিটরে পেস্ট করতে পারবেন। অর্থাৎ এটি ১০০% রেসপন্সিভ এবং ভেক্টর গ্রাফিক্স হওয়ায় আপনি খুব সহজেই এটি যেকোনো ওয়েবসাইটে ব্যাবহার করতে পারবেন।

BlobMaker

এই ওয়েবসাইটটিও Getwaves এর ডেভেলপারদের তৈরি। এই ওয়েবসাইটটি ব্যাবহার করে আপনি ব্লব জেনারেট করতে পারবেন। ব্লব কি? আমিও জানিনা। আমি যতোটুকু দেখেছি, এই ওয়েবসাইট ব্যাবহার করে আপনি কিছু সুন্দর সুন্দর মাল্টি-অ্যঙ্গেলের সার্কেল বা রাউন্ডেড পলিগন শেপের ডিজাইন তৈরি করতে পারবেন। কেন এই শেপগুলোকে তারা “ব্লব” নামে ডাকছে, আমার জানা নেই। ডিজাইনগুলো আসলে লিখে বোঝানো সম্ভব নয়। তবে এই ডিজাইনগুলো সাধারনভাবে স্ক্র্যাচ থেকে তৈরি করতে গেলে সিএসএস ক্লিপ-প্যাথ নিয়ে আপনাকে অনেক ঝামেলা পোহাতে হতো। তবে এই ওয়েবসাইটে আপনি এক ক্লিক করেই র‍্যান্ডমলি এই শেপগুলো জেনারেট করতে পারবেন।

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

CSS Tricks

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

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

Shoelace

এটি একটি ওয়েব কম্পোনেন্টস লাইব্রেরি। আপনি যদি বিগিনার ওয়েব ডেভেলপার হয়ে থাকেন, তাহলে আপনি হয়তো জানেন না যে ওয়েব কম্পোনেন্টস কি এবং কিভাবে কাজ করে। এত ডিপে যাওয়ার দরকার নেই, আপনার যা জানা দরকার তা হচ্ছে, এই ওয়েবসাইটে আপনি আপনার প্রোজেক্টের জন্য অনেক কাস্টম এলিমেন্টস পাবেন, যেগুলো খুব সহজেই আপনার ওয়েবসাইটে ইম্পলিমেন্ট করতে পারবেন, অনেকটা Bootstrap বা Foundation এর মতো। অনেক কাস্টম এলিমেন্টস আছে যেগুলো স্ক্র‍্যাচ থেকে তৈরি করা বিগিনার এবং ইন্টারমেডিয়েট ওয়েব ডেভেলপারদের জন্যও অত্যন্ত কঠিন এবং ঝামেলার কাজ। যেমন- এনিমেটেড বাটন, স্টার রেটিং এলিমেন্ট, রেঞ্জ স্লাইডার, এনিমেটেড মোডাল, টগল সুইচ ইত্যাদি। এই ওয়েবসাইটটি আপনাকে ওই সকল প্রি-ডিজাইনড কাস্টম এলিমেন্টস প্রোভাইড করবে।

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

Images: Shutterstock.com