প্রজেক্ট ভিত্তিক এই ওয়েব ডিজাইন টিউটোরিয়াল টিতে আমরা একটি ওয়েব টেমপ্লেট কিভাবে বানাবেন তার ধাপ গুলো একে একে তুলে ধরেছি । যেখানে প্রতিটি ধাপে আমরা চেস্টা করেছি ছোট ছোট অনেক বিষয় তুলে ধরতে যা আপনার ওয়েব সাইট তৈরি শেখার ক্ষেত্রে অনেক খানি কাজে আসবে । নতুনরা এলোমেলো ভাবে HTML CSS শিখছেন বিভিন্য জায়গায়, কিন্তু প্রজেক্টে কিভাবে implement করবেন বুঝে উঠতে পারছেন না তাদের কে টারগেট করেই বানাবো হয়েছে এই Web Design Live Project tutorial Series. Demo Download Project Files
বুকমার্ক করে রাখুন পরে দেখার জন্য
![ওয়েব ডিজাইন টিউটোরিয়াল](https://kivabe.com/wp-content/uploads/2018/02/banner-1.jpg)
ওয়েব ডিজাইন টিউটোরিয়াল
ওয়েব ডিজাইন টিউটোরিয়াল – লাইভ প্রজেক্ট
প্রজেক্ট ভিত্তিক টিউটোরিয়াল গুলো যারা এলোমেলো ভাবে HTML CSS JavaScript শিখছেন, তাদের জন্য তৈরি করা এবং যাতে আপনারা আপনাদের এ পর্যন্ত জানা কোড গুলো ব্যবহার করে একটি লাইভ প্রজেক্ট করতে পারেন ।
উপরের ভিডিও টিতে সব কটি ভিডিও টিউটোরিয়াল প্ল্যালিস্ট আকারে যোগ করা আছে এবং এক টার পর একটা চালু হবে । আর আপনি যদি মনে করেন যে আলাদা আলাদা ভাবে দেখবেন । তাহলে নিচের টাইটেল গুলো থেকে ঠিক করে নিন যে আপনি কোনটা দেখবেন । যেকোন একটিতে ক্লিক করলে তার ভিডিওটি খুলে যাবে আপনার সামনে ।
প্রজেক্ট ভিত্তির আমাদের এই ওয়েব ডিজাইন টিউটোরিয়াল গুলো ভালো লাগলে অন্যদের সাথে শেয়ার করতে ভুলবেন না ।
ওয়েব ডিজাইন টিউটোরিয়াল লিস্ট
নোটঃ নিচের প্রতিটি হেডলাইন এক একটি টিউটোরিয়ার এর জন্য । মোট ২৩ টি টিউটোরিয়াল আছে । হেডলাইন এ ক্লিক করলে ভিডিও টি ওপেন হবে । আর উপরের ভিডিও টি আসলে পুরো প্লে লিস্ট আমাদের ইউটিউব চ্যানেলের ।
লাইভ প্রোজেক্ট ওয়েব ডিজাইন এর পুরো প্রজেক্ট ওভারভিউ
এই অংশে যে প্রজেক্ট টি আপনারা শেয় পর্যন্ত করবেন সেটির ধারনা দেয়া হয়েছে ।
01 হেডার ডিজাইন Part 1
বলা যেতে পারে এটাই প্রথম টিউটোরিয়াল এই প্রজেক্ট এর । এখানে আমরা কি করতে চাচ্ছি তার ছবি একে শুরু করা হয়েছে এবং প্রজেক্ট এর হেডার ডিজাইন করা দেখানো হয়েছে ।
02 হেডার ডিজাইন Part 2
হেডার এ সিএসএস যোগ করে পজিশন ঠিক করা হয়েছে এই অংশে ।
03 প্রথম ধাপের মেনু তৈরি
মেনু একটি সাইটের অন্যতম অংশ যা পুরো ওয়েব সাইট এর বিভিন্য পেজ এ যেতে সাহায্য করে । হেডিং তৈরির পর সেই হেডিং এর নিচে প্রথম ধাপের মেনু কিভাবে করা যায় তা নিয়ে অলোচনা করা হয়েছে এই ভিডিও টিতে ।
04 ইমেজ ব্যনার তৈরি
হোম পেজ এ একটি ব্যনার ইমেজ রাখা হয় অনেক ওয়েব সাইট এ ই । আর সেই অংশ ডিজাইন করা দেখানো হয়েছে এই ভিডিও তে ।
05 গ্রিড ও রিসেন্ট পোস্ট তৈরি
গ্রিড আসলে ওয়েব সাইট এর কলাম । এখনে ধারনা দেয়া হয়েছে কিভাবে আপনি কাস্টম কলাম তৈরি করবেন আপনার প্রজেক্ট এর জন্য । ওয়েব ডিজাইন এ গ্রিড খুব গুরুত্ব পুর্ণ একটি অংশ ।
06 ফুটার ডিজাইন
ওয়েব পেজ এর একেবারে নিচের দিকে যা থাকে সেটাই ফুটার । এখানে ওয়েব সাইট এর কপিরাইট সহ আরো বেশ কিছু অংশ থাকে ।
07 ব্যনারে টাইটেল এবং ইফেক্ট যোগ
৪ নাম্বার ভিডিও তে শুধু ব্যনার তৈরি দেখানো হয়েছিলো । এবার সেটাতে আমরা একটি টাইটেল যোগ করেছি যেটা এমনিতে দেখা যাবেনা । তবে ছবির উপরে মাউন নিয়ে গেলে দেখা যাবে ।
08 রিসেন্ট পোস্ট আপডেট এবং নতুন পেজ তৈরি
৫ নং ভিডিও তে যে নতুন পোস্ট তৈরি করেছিলাম, সেগুলো কে আরো একটু সুন্দর করা হয়েছে এখানে এবং নতুন পেজ ওয়েব সাইট এ কিভাবে যোগ করবেন সেটি নিয়ে আলোচনা করা হয়েছে ।
09 তিন ধাপ পর্যন্ত মেনু HTML CSS দিয়ে
৩ নং মেনু তৈরীর ভিডিও তে আমরা প্রথম ধাপের যে মেনু তৈরি করেছি, এখানে সেটাকেই তিন স্তর এর মেনুতে রুপান্তর করা দেখিয়েছি এখানে । এটি নতুন দের কাছে খুবই গুরুত্বপুর্ণ একটি অংশ ।
10 About Us page ও নতুন গ্রিড তৈরি
প্রজেক্ট এ নতুন একটি পেজ যোগ করা হয়েছে এই অংশে যা মেনু থেকে কাজ করবে ।
11 – Sidebar Design – Subscription form and Related post
অনেক ওয়েব সাইট এর মতো এই প্রজেক্ট এ ও একটি সাইড বার যোগ করা হয়েছে যা গ্রীড দিয়ে করা হয়েছে ।
12 Single Page Design
সিংগেল পেজ বলতে আসলে ব্লগ পোস্ট এর যে পেজ গুলো থাকে সেই পেজ ডিজাইন করা দেখানো হয়েছে । যেখানে পুরো পোস্ট টি যেনো দেখা যায় ।
13 Contact Us Page with Contact Form and Google Map – গুগল ম্যাপ ও কন্টাক্ট ফর্ম
যোগাযোগ রক্ষার জন্য কন্টাক পেজ দরকারি একটি অংশ ওযেবসাইট এর জন্য ।
14 Work Page Design with simple image effects
আমরা কি কি কাজ পারি বা কি কি কাজ আগে থেকেইকরেছি, সেগুলো ওয়ার্ক পেজ এ থাকে ।
15 সিএসএস দিয়ে ওযেব পেজ রিসপনসিভ করা
মোবাইল ফোন এ ও যেনো দেখা যায় ভালোভাবে । সেই জন্য রেসপনসিভ করতে হয় ওয়েবসাইটকে । এবং এখন গুগল ও ওয়েবসাইট রেসপনসিভ না হলে সার্চ ইন্জিন এ শুরুতে দেখায় না ।
16 ফটোশপ এ ওয়েব ইমেজ রিসাইজ ও অপটিমাইজেশন
ফটোশপ এর কিছু ধারনা যা প্রতিটি ওয়েব ডিজাইনার এর ই রাখা উচিত ।
17 রেসপনসিভ মেনু পার্ট ১ মোবাইল ফ্রেন্ডলি মেনু ও মেনু ট্রিগার তৈরি
এই অংশে মেনুকে মোবাইল এর জন্য তৈরি করা হয়েছে ।
18 রেসপনসিভ মেনু পার্ট ২ jQuery Toggle Effects
19 Responsive menu part 3 – on load resize issue fix – responsive menu
20 Banner to slider – slick slider
সময়ের জনপ্রিয় স্লাইডার হচ্ছে স্লিক স্লাইডার (Slick Slider) এবং এটি ফ্রি হওয়ায় আমরা আমাদের ওয়েব ডিজাইন প্রজেক্টে Slick Slider integration দেখিয়েছি । আর আমরা আমাদের আগের যে ব্যানার ছিলো, সেটি কে পরিবর্তন করে স্লাইডার করেছি ।
21 popup lightbox image in work page
বাংলা ওয়েব ডিজাইন টিউটোরিয়াল এর এই অংশে দেখিয়েছি একটি ইমেজের উপর ক্লিক করলে কিভাবে তার বড়ো ইমেজ টি নিয়ে আসা যায় । এগুলো সাধারনত লাইটবক্স টিয়ে করা হয়।
22 কন্টাক্ট ফর্ম ভেলিডেশন – jQuery form Validation
কন্টাক্ট ফর্ম ভেলিডেশন এর এই ধাপে আমরা দেইয়েছি কেউ যদি কোন ফর্ম এলিমেন্ট পুরোন না করে তাহলে সাবমিট করার সময় সেই ঘরটি লাল দেখাবে এবং সাবমিট হবেনা । আর যেই ফর্ম এলিমেন্ট ঠিক আছে, তার জন্য দেখাবে সবুজ বর্ডার । আমরা জেকুয়েরি ফর্ম ভেলিডেশন ব্যবহার করেছি এবং পুরো ফর্ম টি ভেলিডেট হলেই কেবল সাবমিট হবে ফর্ম টি ।
23 how to add prelaoder in web page – ওয়েব পেজে প্রি লোডার যোগ করা
ওয়েব ডিজাইন টিউটোরিয়াল এর এই ধাপে আমরা দেখিয়েছি প্রিলোডার কি এবং কিভাবে ব্যবহার করা যায় । খুব সহজ ভাবে বোঝানো হয়েছে এবং ধাপে ধাপে বিষয়টি ক্লিয়ার করা হয়েছে ।
ওয়েব ডিজাইন কি?
ওয়েবসাইট তৈরি করার প্রসেস কেই বলা যেতে পারে ওয়েব ডিজাইন । আর ওয়েব ডিজাইন করতে গেলে HTML CSS এর বিকল্প নাই । এক সময় মানুষ ফ্ল্যাস দিয়ে ওযেব সাইট বানাতো যা মোটেও SEO Friendly নয় । আবার ইমেজ ভিত্তির ল্যাআউট ও আজকাল চলেনা কারন তাতে করে ওয়েব সাইট স্লো হয়ে যায় ।
আর ওয়েব ডিজাইন কে আরো ভালো ভাবে বলতে গেলে বলা যায় ওয়েব ব্রাউজারে ওয়েব পেজ গুলো দেখতে কেমন হবে তা ডিজাইন করাই হল ওয়েব ডিজাইন । আর এই ওয়েব ডিজাইন করতে গিয়ে নতুন দের অনেকেই দায় সারা ভাবে শেরে রাখেন যা যার ফলে সাইট স্লো হয়ে যায় কিংবা কোডের Standard ঠিক থাকেনা । আর তারই প্রয়োজনিয়তায় আমরা ওয়েব ডিজাইন টিউটোরিয়াল করেছি আপনাদের জন্য ।