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

প্রজেক্ট ভিত্তিক এই ওয়েব ডিজাইন টিউটোরিয়াল টিতে আমরা একটি ওয়েব টেমপ্লেট কিভাবে বানাবেন তার ধাপ গুলো একে একে তুলে ধরেছি । যেখানে প্রতিটি ধাপে আমরা চেস্টা করেছি ছোট ছোট অনেক বিষয় তুলে ধরতে। নতুনরা এলোমেলো ভাবে HTML CSS শিখছেন বিভিন্য জায়গায়, কিন্তু প্রজেক্টে কিভাবে implement করবেন বুঝে উঠতে পারছেন না তাদের কে টারগেট করেই বানাবো হয়েছে এই Web Design Live Project tutorial Series.  Demo Download Project Files

বুকমার্ক করে রাখুন পরে দেখার জন্য

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

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

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

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

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

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 ঠিক থাকেনা । আর তারই প্রয়োজনিয়তায় আমরা ওয়েব ডিজাইন টিউটোরিয়াল  করেছি আপনাদের জন্য ।

error: Content is protected !!