ওয়েব ডিজাইন টিউটোরিয়াল লিস্ট – লাইভ প্রজেক্ট

লাইভ প্রোজেক্ট ওয়েব ডিজাইন  এর পুরো প্রজেক্ট ওভারভিউ

এই অংশে যে প্রজেক্ট টি আপনারা শেয় পর্যন্ত করবেন সেটির ধারনা দেয়া হয়েছে ।

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 – ওয়েব পেজে প্রি লোডার যোগ করা

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