ওয়েব ডিজাইন কি? কোথা থেকে শিখবেন ওয়েব ডিজাইন? ওয়েব ডিজাইন শিখে কি করা যায়? বিস্তারিত নিয়ে একটা পরিপূর্ণ গাইডলাইন।

ওয়েব ডিজাইন কি? কোথা থেকে শিখবেন ওয়েব ডিজাইন? ওয়েব ডিজাইন শিখে কি করা যায়? বিস্তারিত নিয়ে একটা পরিপূর্ণ গাইডলাইন।

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

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

প্রত্যেকটা ওয়েবসাইট ই এইচ.টি.এম.এল ও সিএসএস এর সাহায্যে গঠিত হয়। অতএব, আপনি HTML , CSS , BOOTSTRAP জানলে একটা স্টাটিক ওয়েবসাইট বানাতে পারবেন। তাহলে HTML, CSS, Bootstrap আসলে কি? এই দুইটা হলো ওয়েব প্রোগ্রামিং ল্যাংগুয়েজ বা ওয়েবসাইট তৈরি করার ভাষা যা দ্বারা আপনি ওয়েব ডিজাইনিং করতে পারবেন। আর ফটোশপ হলো একটা ছবি ইডিট করার সফটওয়ার যা দ্বারা আপনি আপনার ওয়েবসাইট টি আগে থেকেই ডিজাইন করে দেখতে পারবেন। পরে HTML and CSS এর সাহায্যে সে ডিজাইনকে ওয়েবসাইটে রুপান্তর করতে পারবেন।


কেনো আমরা ওয়ে ডিজাইন শিখবো?

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


কাদের জন্য ওয়েব ডিজাইন উপযুক্ত?

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


ওয়েব ডিজাইনের কেমন চাহিদা?

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


ওয়েব ডিজাইনের ভবিষ্যৎ কেমন? ও আয় সম্ভাবনা কেমন?

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


ওয়েব ডিজাইন শিখতে কি কি লাগবে?

তেমন কোন শিক্ষাগত যোগ্যতাই লাগবে না। আপনার ইচ্ছাশক্তিটাই যথেষ্ট। যে কেউ চাইলে ওয়েব ডিজাইন শিখতে পারে।


ওয়েব ডিজাইন শিখতে কতদিন লাগবে?

আর ওয়েব ডিজাইন শিখতে গেলে একদম নতুন হিসাবে ৪-৫ মাস লাগতে পারে। তবে কিছুটা বেশি সময় দিলে ২-৩ মাসেই HTML and CSS ভালোভাবে আয়ত্ব করা সম্ভব। তবে মনে রাখবেন, ওয়েব ডিজাইনিং এর সাথে ওয়েব ডেভেলাপমেন্টের নিবিড় সম্পর্ক রয়েছে। ওয়েব ডিজাইনিং শিখতে কম সময় লাগলেও ওয়েব ডেভেলাপমেন্ট শিখতে ২ বছর পর্যন্ত লেগে যেতে পারে।


বেস্ট ফ্রি ওয়েব ডিজাইন কোর্স (ভিডিও)

1) HTML

আপনাকে অবশ্যই সর্বপ্রথম এইচ.টি.এম.এল শিখতে হবে। তার পর সে এস এস শিখতে হবে। HTML and CSS শিখার সবচেয়ে ভালো উপায় হলো টিউটোরিয়াল দেখে তা সাথে সাথে প্রাকটিস করা। নিচের প্লেলিষ্ট থেকে আপনি HTML and CSS শিখতে পারেন।

1. Basic HTML Course by Couders foundation :

বাংলাদেশের জনপ্রিয় ওয়েব ডেভেলাপার

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

লিংকঃ https://youtube.com/playlist?list=PLm64fbD5OnxuObyOVSxcM0TUcBLDF2w64

2. Another HTML course by Web Ground:

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

লিংকঃ https://youtube.com/playlist?list=PLHquSSTADIulcfu_MT4-TJQah5dmT8K0B

আশা করি যাদের বাংলা বুঝতে অসুবিধা হয় তারা এই দুইটি কোর্স দেখে মোটামুটি এইচটিএমএল এ মাস্টার হয়ে যেতে পারবে এখনই সময় গুলো নষ্ট না করে এই দুইটি প্লায়লিস্ট মধ্যে যেকোনো একটি শেষ করে দিন ।


-----


2) CSS

এইচটিএমএল শিখার পর আপনাকে এখন যে বিষয়টি শিখতে হবে তা হলো সিএসএস ।

সিএসএস ছাড়া আপনি ভালো ওয়েব ডিজাইন কখনো করতে পারবেন না । তাই আপনাকে সিএসএস অবশ্যই শিখতে হবে ।

তো চলুন দেখা যাক কোথায থেকে সিএসএস টি শিখবো :


১) CSS Course by Couders foundation :

আসলে উনার কোর্সগুলো এতটাই ভাল যে কি আর বলবো । সিএসএস নিয়ে তিনি যে ভিডিওগুলি বানিয়েছেন সেগুলো অসাধারণ ‌। একজন বিগেনারদের জন্য এই সিএসএস কোর্স টি একদম পারফেক্ট আমার মতে 😊: 

https://youtube.com/playlist?list=PLm64fbD5Onxvj4aifOC8P8U8inUqWzdSH

 

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


-----------


3) PSD to HTML

এইখান থেকে বেসিক HTML, CSS শিখার পর আপনাকে শিখতে হবে কিভাবে PSD to HTML করতে হয়। PSD হলো ফটোশপের একটা ফাইল যা দেখে দেখে আপনাকে হুবহু একটা ওয়েবসােইট বানোতে হবে। তাহলে চলুন জেনে নেই কিভাবে PSD to HTML শিখতে পারবেন।


1. PSD to HTML Course:

Course by Couders foundation,

লিংকঃ

PSD to HTML:

https://youtube.com/playlist?list=PL_4gtF0Nl0yafomZFUxeTm36AaaYo_run


PSD to HTML – Full project (Resturant PSD):

https://www.youtube.com/playlist?list=PLG9FGQQWJ7aKi_kZmVroZo27HaSB8Oxya


PSD to HTML – Momento Tutorial:

https://www.youtube.com/playlist?list=PLG9FGQQWJ7aJgKinD0uTAesz4wP1E0pSL


PSD to HTML Secret Tips:

https://www.youtube.com/playlist?list=PLG9FGQQWJ7aJ0SdgmSMplqxbyFWABiSo9


2. PSD to HTML Course by MD Nurullah:

লিংকঃ

Web Design Advance Course:

https://www.youtube.com/playlist?list=PLbsixBK6B5e4j7uxzJ9kpJ2p_082USrfq


আপনি যদি ফটোশপে নতুন হয়ে থাকেন, তাহলে এইখান থেকে ফটোশপের বেসিক জিনিসপত্রগুলি শিখে নিতে পারেন।

2. Adobe Photoshop Basic Tutorial by Graphic school :

https://youtube.com/playlist?list=PLfTy62yEipgjZljIRqShHWY6R1pMkzchw

1. Basic Adobe Photoshop Tutorial by RR Foundation

https://www.youtube.com/playlist?list=PLG9FGQQWJ7aIx9aLES6vN-rCaVZfCCydM


---------


4) BOOTSTRAP

এইগুলি শিখার পর আপনাকে টুইটার বুটষ্ট্রাপ শিখতে হবে। যা আপনার কাজ করার গতিকে অনেক বাড়িয়ে দিবে। এখান থেকে টুইটার বুটষ্টাপ শিখতে পারবেন।


1. Bootstrap 4 Framework Tutorial By Couders foundation :

মোট কটা BOOTSTRAP -4 এর অসাধারণ একটি course :

https://youtube.com/playlist?list=PLm64fbD5OnxuWrqDWyObVkH_Y5R6Wg1wg


এখন আবার এক সমস্যা পড়লাম  BOOTSTRAP-4 তো অনেক আগেই চলে গেছে । বর্তমানে BOOTSTRAP-5 বের হয়েছে । আমরা এখন BOOTSTRAP-5 এর ভিডিও কোথায় পাবো এটার কোনো চিন্তার বিষয় না আপনার জন্য আমি নিয়ে এসেছি  মোটামুটি অ্যাডভান্স লেভেল পর্যন্ত BOOTSTRAP-5 এর ভিডিও 


১) BOOTSTRAP-5 Course by : developer jilliur:

https://youtube.com/playlist?list=PLYP3nGPfEX3oKk1tOxX7tIkGSyCmOqmbw


অসাধারণ একটা মানুষের , অসাধারণ ভিডিও যার ।ভিডিওটি  এটি শেষ মোটামুটি BOOTSTRAP-5   সম্পর্কে ভালোভাবে জেনে যাবেন  


২) BOOTSTRAP-5 Course by : Codeinnovior

https://youtube.com/playlist?list=PLqRIfCvjOsUbfjub0zb7L10YNWqqD4fXC


উনার ভিডিওগুলো আমার কাছে ভালো লেগেছে । ওনি খুব সুন্দর ভাবে  ভিডিওতে BOOTSTRAP-5 সম্পর্কে বুঝেছে । আশাকরি ভিডিওটি শেষ করলে আপনি করলে ভালোভাবে সবকিছু বুঝে যাবেন ।

--------


5) JQury

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


৪) JQury Course by : Couders foundation:

https://youtube.com/playlist?list=PLm64fbD5Onxtpvq--EAMfAHcn8h8_t3iw

 

আরো যে সকল ওয়েবসাইট ফলো করতে হবেঃ

————————————————————————————-

=> http://www.w3schools.com

এইটাকে ওয়েব ডিজাইনিং শিখার বাইবেল বলা হয়ে তাকে। কারন এই ওয়েবসাইট থেকে আপনি HTML and CSS এর সবকিছু জেনে নিতে পারবেন।


= http://getfirebug.com/

আপনি যদি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করেন তাহলে Inspect Element করার জন্য এই এডঅন্স টি ব্যবহার করতে হবে।


=> http://getbootstrap.com

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


=> http://fontawesome.io/

যে কোন আইকনকে ফন্ট হিসাবে ব্যবহার করার ক্ষেত্রে এই ওয়েবসাইটের জুড়ি নেই। একবার ভিজিট করেই দেখুন না।


=>http://www.google.com/fonts/

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

=> http://www.dafont.com/

ফন্ড ডাউনলোড করার জন্য আরেকটি দারুন ওয়েবসাইট।


https://www.iconfinder.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/design-templates/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


কাজ পেতে হলো কি করনীয়ঃ

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

ওয়ার্ডপ্রেস দিয়ে একটা পোর্টফোলিং ওয়েবসাইট বানানো খুবই সহজ।


নিজেকে আপডেট রাখতে হলে কোন কোন ওয়েবসাইট ব্রাউজ করতে হবেঃ

=> https://shapebootstrap.net/

এইটা হলো Bootstrap দিয়ে গঠিত টেমপ্লেটের দারুন একটা ওয়েবসাইট। আপনি অনেক ধারনা পেতে পারেন এই ওয়েব সাইট থেকে। মজার ব্যাপার হলো এই ওয়েব সাইটের মালিক বাংলাদেশী। তবে বিশ্বের সেরা ওয়েবসাইটের মধ্যে অন্যতম এই ওয়েবসাইট টি।


=> https://themeforest.net/category/site-templates

একদম প্রফেশনাল মানের ওয়েবসাইট টেমপ্লেট পাবেন এই সাইটটি তে।

=> https://webdesign.tutsplus.com/

=> http://www.hongkiat.com/blog/category/design/

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