ওয়েব ডিজাইন শেখার পূর্নাঙ্গ গাইডলাইন
আমরা প্রতিনিয়তই অসংখ্য ওয়েবসাইট ব্রাউজ করছি। এক একটা ওয়েব সাইট এক এক ধরনের। ওয়েবসাইট এর আকার, আকৃতি ও লেখা সবগুলিই আলাদা আলাদা হয়। সহজভাবে বলতে গেলে ফটোশপ, HTML ও CSS এর সাহায্যে কিছু সংখ্যক লেখা ও ছবি কে পূর্নাঙ্গ ওয়েবসাইটে রুপ দেওয়াকেই ওয়েব ডিজাইনিং বলা হয়।
প্রত্যেকটা ওয়েবসাইট ই এইচ.টি.এম.এল ও সিএসএস এর সাহায্যে গঠিত হয়। অতএব, আপনি HTML ও CSS জানলে একটা স্টাটিক ওয়েবসাইট বানাতে পারবেন। তাহলে HTML, CSS আসলে কি? এই দুইটা হলো ওয়েব প্রোগ্রামিং ল্যাংগুয়েজ বা ওয়েবসাইট তৈরি করার ভাষা যা দ্বারা আপনি ওয়েব ডিজাইনিং করতে পারবেন। আর ফটোশপ হলো একটা ছবি ইডিট করার সফটওয়ার যা দ্বারা আপনি আপনার ওয়েবসাইট টি আগে থেকেই ডিজাইন করে দেখতে পারবেন। পরে HTML and CSS এর সাহায্যে সে ডিজাইনকে ওয়েবসাইটে রুপান্তর করতে পারবেন।
কেনো আমরা শিখবোঃ
আপনি যদি মনে করেন আপনি অনলাইন এ ক্যারিয়ার গড়বেন তাহলে আপনাকে অবশ্যই HTML and CSS সম্পর্কে ধারনা রাখতে হবে। আপনি যে ক্ষেত্রেই কাজ করেন না কেনো, আপনার কোন না কোন ভাবে HTML and CSS কাজে লাগবেই। আর যদি আপনি ওয়েব ডেভেলাপমেন্ট এ ক্যারিয়ার গড়তে চান তাহলে তো আপনাকে অবশ্যই শিখতে হবে। ওয়েব ডিজাইনিং হলো ওয়েব ডেভেলাপমেন্ট শিখার প্রথম ধাপ।
কাদের জন্য উপযুক্তঃ
যারা ওয়েবসাইট ব্রাউজ করতে ভালোবাসেন ও আপনার মনে আগ্রহ হয় যে, কিভাবে ওয়েবসাইট টি তৈরি হয়েছে তা জানতে হবে। তাহলে আপনি এই সেক্টরে ভালো করতে পারবেন এতে কোন সন্দেহ নাই। আমি বরাবরই আগ্রহের কথা বেশ গুরুত্বের সাথে বলে থাকি।
মার্কেটের চাহিদা কেমনঃ
মার্কেটে ওয়েব ডিজাইনিং এর প্রচুর পরিমান চাহিদা রয়েছে। তবে আপনি যদি শুধুমাত্র ওয়েব ডিজাইন শিখেন তাহলে আপনার কাজ না পাওয়ার সম্ভাবনাই বেশি। আপনাকে ডায়নামিক ওয়েবসাইট তৈরি করা শিখতে হবে। মানে হলো ওয়েব ডেভেলাপমেন্ট শিখতে হবে। যদি তা বেশ কঠিন হয়ে যায় তবে আপনি সাধারন ভাবে ওয়ার্ডপ্রেস শিখতে পারেন। ওয়ার্ডপ্রেস হলো একটা ওয়েব কনটেন্ট ম্যানেজমেন্ট সিষ্টেম। যা দ্বারা আপনি সহজেই ডায়নামিক ওয়েবসাইট তৈরি করতে পারবেন।
আয় সম্ভাবনা কেমনঃ
এটা নির্ভর করে আপনার অভিজ্ঞতার উপর। আমার মতে শুধুমাত্র ওয়েব ডিজাইনিং শিখে তেমন আয় করা যায় না। গেলেও তা বেশ ঝামেলাযুক্ত। আমি পরামর্শ দিবো অবশ্যই ওয়েব ডিজাইনিং এর সাথে সাথে ওয়ার্ডপ্রেস শিখার জন্য। তাহলে অনাআসেই মাসে ৫০০ ডলার আয় করা সম্ভব।
ওয়েব ডিজাইন শিখতে হলে আপনার কি যোগ্যতা লাগবে ও কত সময় লাগবেঃ
তেমন কোন যোগ্যতাই লাগবে না। আপনার ইচ্ছাশক্তিটাই যথেষ্ট। যে কেউ চাইলে ওয়েব ডিজাইন শিখতে পারে। আর ওয়েব ডিজাইন শিখতে গেলে একদম নতুন হিসাবে ৩ মাস লাগতে পারে। তবে কিছুটা বেশি সময় দিলে ২ মাসেই HTML and CSS ভালোভাবে আয়ত্ব করা সম্ভব। তবে মনে রাখবেন, ওয়েব ডিজাইনিং এর সাথে ওয়েব ডেভেলাপমেন্টের নিবিড় সম্পর্ক রয়েছে। ওয়েব ডিজাইনিং শিখতে কম সময় লাগলেও ওয়েব ডেভেলাপমেন্ট শিখতে ২ বছর পর্যন্ত লেগে যেতে পারে।
চলুন এইবার দেখে নেই কিভাবে আপনাকে শিখতে হবেঃ
আপনাকে অবশ্যই সর্বপ্রথম এইচ.টি.এম.এল শিখতে হবে। তার পর সে এস এস শিখতে হবে। HTML and CSS শিখার সবচেয়ে ভালো উপায় হলো টিউটোরিয়াল দেখে তা সাথে সাথে প্রাকটিস করা। নিচের প্লেলিষ্ট থেকে আপনি HTML and CSS শিখতে পারেন।
- Basic HTML Course by Rasel Ahmed:
বাংলাদেশের জনপ্রিয় ওয়েব ডেভেলাপার
ও প্রতিষ্ঠাতা, আর আর ফাউন্ডেশন
লিংকঃ https://www.youtube.com/playlist...
Another Course By Rasel Ahmed:
https://www.youtube.com/playlist...
https://www.youtube.com/playlist...
- Basic Web Design Course by MD Nurullah:
ফ্রিলান্সার
ও প্রতিষ্ঠাতা, ফ্রিলান্সিং কেয়ার।
লিংকঃ https://www.youtube.com/playlist...
এইখান থেকে বেসিক HTML, CSS শিখার পর আপনাকে শিখতে হবে কিভাবে PSD to HTML করতে হয়। PSD হলো ফটোশপের একটা ফাইল যা দেখে দেখে আপনাকে হুবহু একটা ওয়েবসােইট বানোতে হবে। তাহলে চলুন জেনে নেই কিভাবে PSD to HTML শিখতে পারবেন।
- PSD to HTML Course:
Course by রাসেল আহমেদ,
লিংকঃ
JPEG to HTML:
https://www.youtube.com/playlist...
PSD to HTML – Full project (Resturant PSD):
https://www.youtube.com/playlist...
https://www.youtube.com/playlist...
PSD to HTML – Momento Tutorial:
https://www.youtube.com/playlist...
https://www.youtube.com/playlist...
PSD to HTML Secret Tips:
https://www.youtube.com/playlist...
https://www.youtube.com/playlist...
- PSD to HTML Course by MD Nurullah:
লিংকঃ
Web Design Advance Course:
https://www.youtube.com/playlist...
আপনি যদি ফটোশপে নতুন হয়ে থাকেন, তাহলে এইখান থেকে ফটোশপের বেসিক জিনিসপত্রগুলি শিখে নিতে পারেন।
- Basic Adobe Photoshop Tutorial by RR Foundation
https://www.youtube.com/playlist... - Adobe Photoshop Basic Tutorial by Rasel Ahmed
https://www.youtube.com/playlist...
এইগুলি শিখার পর আপনাকে টুইটার বুটষ্ট্রাপ শিখতে হবে। যা আপনার কাজ করার গতিকে অনেক বাড়িয়ে দিবে। এখান থেকে টুইটার বুটষ্টাপ শিখতে পারবেন।
- Bootstrap 3 Framework Tutorial By MD Nurullah
https://www.youtube.com/watch?v=d-M4XEBmwtw
==> Create a Responsive Website Using Bootstrap 3
https://www.youtube.com/playlist...
https://www.youtube.com/playlist...
- Twitter BootStrap Tutorial by Rasel Ahmed
https://www.youtube.com/playlist...
এইগুলি শিখার পর আপনাকে কিছু এডভান্স জিনিস শিখতে পারেন এই প্লেলিষ্ট থেকে:
Some advance Tips by MD Nurullah
https://www.youtube.com/playlist...
Some advance Tips by MD Nurullah
https://www.youtube.com/playlist...
তাহলে চলুনে জেনে নেই কোন কোন ওয়েবসাইট আপনাকে ফলো করতে হবে ওয়েব ডিজাইন শিখার জন্যঃ
————————————————————————————-
=> http://www.w3schools.com
এইটাকে ওয়েব ডিজাইনিং শিখার বাইবেল বলা হয়ে তাকে। কারন এই ওয়েবসাইট থেকে আপনি HTML and CSS এর সবকিছু জেনে নিতে পারবেন।
————————————————————————————-
=> http://www.w3schools.com
এইটাকে ওয়েব ডিজাইনিং শিখার বাইবেল বলা হয়ে তাকে। কারন এই ওয়েবসাইট থেকে আপনি HTML and CSS এর সবকিছু জেনে নিতে পারবেন।
= http://getfirebug.com/
আপনি যদি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করেন তাহলে Inspect Element করার জন্য এই এডঅন্স টি ব্যবহার করতে হবে।
আপনি যদি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করেন তাহলে Inspect Element করার জন্য এই এডঅন্স টি ব্যবহার করতে হবে।
=> http://getbootstrap.com
এটা হলো একটা ফ্রেমওয়ার্ক। অত্যন্ত দারুন একটা ফ্রেমওয়ার্ক। যা আপনার ওয়েব ডিজাইন করার অভিজ্ঞতাই পরিবর্তন করে দিবে। অবশ্যই আপনাকে এটি শিখতে হবে।
এটা হলো একটা ফ্রেমওয়ার্ক। অত্যন্ত দারুন একটা ফ্রেমওয়ার্ক। যা আপনার ওয়েব ডিজাইন করার অভিজ্ঞতাই পরিবর্তন করে দিবে। অবশ্যই আপনাকে এটি শিখতে হবে।
=> http://fontawesome.io/
যে কোন আইকনকে ফন্ট হিসাবে ব্যবহার করার ক্ষেত্রে এই ওয়েবসাইটের জুড়ি নেই। একবার ভিজিট করেই দেখুন না।
যে কোন আইকনকে ফন্ট হিসাবে ব্যবহার করার ক্ষেত্রে এই ওয়েবসাইটের জুড়ি নেই। একবার ভিজিট করেই দেখুন না।
=>http://www.google.com/fonts/
এই ওয়েবসাইট থেকে আপনি আপনার ওয়েবসাইটের জন্য গুগল ফন্ট ডাউনলোড করতে পারবেন।
=> http://www.dafont.com/
ফন্ড ডাউনলোড করার জন্য আরেকটি দারুন ওয়েবসাইট।
এই ওয়েবসাইট থেকে আপনি আপনার ওয়েবসাইটের জন্য গুগল ফন্ট ডাউনলোড করতে পারবেন।
=> http://www.dafont.com/
ফন্ড ডাউনলোড করার জন্য আরেকটি দারুন ওয়েবসাইট।
https://www.iconfinder.com/
http://www.iconarchive.com/
আইকন খুজে পাওয়ার জন্য এই ওয়েবসাইটগুলি বেশ উপকারী। যে কোন আইকন খুজে ব্যবহার করতে পারবেন। এক কথায় দারুন।
http://www.iconarchive.com/
আইকন খুজে পাওয়ার জন্য এই ওয়েবসাইটগুলি বেশ উপকারী। যে কোন আইকন খুজে ব্যবহার করতে পারবেন। এক কথায় দারুন।
=> https://www.sublimetext.com/
এটা হলো সবচেয়ে ভালো কোড ইডিটর।
এটা হলো সবচেয়ে ভালো কোড ইডিটর।
=> http://codepen.io/
অত্যান্ত দারুন একটি ওয়েবসাইট। যাতে আপনি অনেক অনেক বানানো কোড পেয়ে যাবেন। সম্পুর্ন ফ্রি তে।
অত্যান্ত দারুন একটি ওয়েবসাইট। যাতে আপনি অনেক অনেক বানানো কোড পেয়ে যাবেন। সম্পুর্ন ফ্রি তে।
=> https://css-tricks.com
যখন কোড করা শিখে যাবেন তার পর এইখান থেকে অনেক রেডিমেট কোড পেয়ে যাবেন। খুব মজার ওয়েবসাইট
যখন কোড করা শিখে যাবেন তার পর এইখান থেকে অনেক রেডিমেট কোড পেয়ে যাবেন। খুব মজার ওয়েবসাইট
=> http://www.os-templates.com/free-psd-templates
=> https://www.template.net/.../psd/free-psd-website-templates/
এই দুইটা ওয়েবসাইট থেকে ফ্রি PSD ফাইল ডাউনলোড করে নিতে পারবেন প্রাকটিস করার জন্য।
=> https://www.template.net/.../psd/free-psd-website-templates/
এই দুইটা ওয়েবসাইট থেকে ফ্রি PSD ফাইল ডাউনলোড করে নিতে পারবেন প্রাকটিস করার জন্য।
=> https://ctrlq.org/beautifier/
কোড লিখার পর তা ভালোমতো সাজানোর জন্য এই ওয়েবসাইট টি ব্যবহার করতে পারেন। দারুন একটি ওয়েবসাইট
কোড লিখার পর তা ভালোমতো সাজানোর জন্য এই ওয়েবসাইট টি ব্যবহার করতে পারেন। দারুন একটি ওয়েবসাইট
=> https://validator.w3.org/
আপনার লেখা কোড ভেলিড কিনা এসব চেক করতে পারবেন এই ওয়েবসাইট থেকে।
আপনার লেখা কোড ভেলিড কিনা এসব চেক করতে পারবেন এই ওয়েবসাইট থেকে।
কোথায় কাজ পাবেনঃ
আমি আগেই বলেছি যে, শুধু HTML and CSS শিখে খুব একটা কাজ পাওয়া যাবে না। কারন বর্তমানে সবাই ডায়নামিক ওয়েবসাইট তৈরি করতে চায়। তাই আপনাকে ডায়নামিক করা শিখতে হবে। তা না হলে আপনি নিখুত কোডিং করতে পারবেন না। কারন HTML and CSS কোড করার সময় ডায়নামিকের কথা মাথায় রেখে কোড করতে হয়। তা না হলে ডায়নামিক করার সময় বেশ ঝামেলা পোহাতে হয়। আশাকরি ব্যাপারটি বুঝতে পেরেছেন। তারপরেও আপনি কোথায় কোথায় কাজ খুজতে পারেন জেনে নিন।
http://upwork.com
http://freelancer.com
http://themeforest.net
http://upwork.com
http://freelancer.com
http://themeforest.net
কাজ পেতে হলো কি করনীয়ঃ
আপনার নিজের করা পূর্বের কাজের উদাহরন দেখাতে হবে আপনার ক্লায়েন্টকে। এটাকে পোর্টফোলিও(Portfolio) বলা হয়ে থাকে। আপনার পোর্টফোলিও যত বেশি প্রফেশনাল হবে আপনি তত তাড়াতাড়ি কাজ পাবেন। এক্ষেত্রে আপনি একটা ডোমেইন বা হোষ্টিং কিনে আপনার করা টেমপ্লেটগুলি আপলোড করে তার লিংক দিয়ে রাখতে পারেন। তাতে করে আপনার ক্লায়েন্ট আপনার দক্ষতা সম্পর্কে বেশ ভালো ধারনা পাবে।
ওয়ার্ডপ্রেস দিয়ে একটা পোর্টফোলিং ওয়েবসাইট বানানো খুবই সহজ।
ওয়ার্ডপ্রেস দিয়ে একটা পোর্টফোলিং ওয়েবসাইট বানানো খুবই সহজ।
নিজেকে আপডেট রাখতে হলে কোন কোন ওয়েবসাইট ব্রাউজ করতে হবেঃ
=> https://shapebootstrap.net/
এইটা হলো Bootstrap দিয়ে গঠিত টেমপ্লেটের দারুন একটা ওয়েবসাইট। আপনি অনেক ধারনা পেতে পারেন এই ওয়েব সাইট থেকে। মজার ব্যাপার হলো এই ওয়েব সাইটের মালিক বাংলাদেশী। তবে বিশ্বের সেরা ওয়েবসাইটের মধ্যে অন্যতম এই ওয়েবসাইট টি।
=> https://shapebootstrap.net/
এইটা হলো Bootstrap দিয়ে গঠিত টেমপ্লেটের দারুন একটা ওয়েবসাইট। আপনি অনেক ধারনা পেতে পারেন এই ওয়েব সাইট থেকে। মজার ব্যাপার হলো এই ওয়েব সাইটের মালিক বাংলাদেশী। তবে বিশ্বের সেরা ওয়েবসাইটের মধ্যে অন্যতম এই ওয়েবসাইট টি।
=> https://themeforest.net/category/site-templates
একদম প্রফেশনাল মানের ওয়েবসাইট টেমপ্লেট পাবেন এই সাইটটি তে।
একদম প্রফেশনাল মানের ওয়েবসাইট টেমপ্লেট পাবেন এই সাইটটি তে।
=> https://webdesign.tutsplus.com/
=>http://www.hongkiat.com/blog/category/design/
যখন আপনি এডভান্স হবেন তখন এই ওয়েব সাইটগুলি কিন্তু নিয়মিত ফলো করতে হবে। নিত্যনতুন খবরাখবর রাখার জন্য।
=>http://www.hongkiat.com/blog/category/design/
যখন আপনি এডভান্স হবেন তখন এই ওয়েব সাইটগুলি কিন্তু নিয়মিত ফলো করতে হবে। নিত্যনতুন খবরাখবর রাখার জন্য।
