শূন্য থেকে হিরো: ৩০ দিনে Web Design মাস্টারি রোডম্যাপ

শূন্য থেকে হিরো: ৩০ দিনে Web Design মাস্টারি রোডম্যাপ

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

সপ্তাহ ১: HTML এবং CSS এর মূল বিষয়বস্তু

লক্ষ্য: HTML এবং CSS এর বেসিক ধারণা অর্জন এবং সাধারণ ওয়েব পেজ তৈরি করতে পারা।

  • দিন ১:

    • ওয়েব ডিজাইন পরিচিতি: ওয়েব ডিজাইন কী, কেন গুরুত্বপূর্ণ এবং এর মূল উপাদানগুলো।

    • HTML এর প্রাথমিক ধারণা: HTML ট্যাগ, এলিমেন্ট এবং অ্যাট্রিবিউট সম্পর্কে জানুন।

    • প্রথম HTML পেজ তৈরি: একটি সাধারণ HTML ফাইল তৈরি করুন এবং ব্রাউজারে প্রদর্শন করুন।

  • দিন ২:

    • HTML স্ট্রাকচার: <html>, <head>, <title>, <body> ট্যাগের ব্যবহার শিখুন।

    • হেডিং এবং প্যারাগ্রাফ: <h1> থেকে <h6> এবং <p> ট্যাগের ব্যবহার প্র্যাকটিস করুন।

    • লিঙ্ক এবং ইমেজ: <a> এবং <img> ট্যাগের মাধ্যমে পেজে লিঙ্ক ও ছবি যুক্ত করুন।

  • দিন ৩:

    • লিস্ট তৈরি: <ol>, <ul> এবং <li> ট্যাগের মাধ্যমে বিভিন্ন ধরনের লিস্ট তৈরি করুন।

    • টেবিল তৈরি: <table>, <tr>, <td>, <th> ট্যাগের ব্যবহার শিখে একটি টেবিল তৈরি করুন।

    • ফর্ম তৈরি: <form>, <input>, <textarea>, <button> ট্যাগের মাধ্যমে একটি সাধারণ ফর্ম তৈরি করুন।

  • দিন ৪:

    • CSS পরিচিতি: CSS কী, কেন ব্যবহার করা হয় এবং এর প্রকারভেদ (ইনলাইন, ইন্টারনাল, এক্সটার্নাল)।

    • CSS সিনট্যাক্স: সিলেকটর, প্রোপার্টি এবং ভ্যালু সম্পর্কে জানুন।

    • CSS যুক্ত করার নিয়ম: HTML ফাইলে CSS যুক্ত করার বিভিন্ন পদ্ধতি শিখুন।

  • দিন ৫:

    • টেক্সট ফরম্যাটিং: font-family, font-size, color, text-align প্রোপার্টি ব্যবহার করে টেক্সটকে স্টাইল করুন।

    • ব্যাকগ্রাউন্ড স্টাইল: background-color, background-image প্রোপার্টি ব্যবহার করে ব্যাকগ্রাউন্ড পরিবর্তন করুন।

    • বর্ডার এবং মার্জিন: border, margin, padding প্রোপার্টি ব্যবহার করে এলিমেন্টের স্পেসিং এবং বর্ডার কন্ট্রোল করুন।

  • দিন ৬:

    • CSS বক্স মডেল: কন্টেন্ট, প্যাডিং, বর্ডার এবং মার্জিন নিয়ে বক্স মডেলের ধারণা নিন।

    • ডিভিশন এবং স্প্যান: <div> এবং <span> ট্যাগের ব্যবহার এবং এদের মাধ্যমে পেজ সাজানো শিখুন।

    • সিলেক্টিং এলিমেন্ট: আইডি (#) এবং ক্লাস (.) সিলেকটরের ব্যবহার প্র্যাকটিস করুন।

  • দিন ৭:

    • ছোট প্রোজেক্ট: HTML এবং CSS ব্যবহার করে একটি সাধারণ ব্লগ টিউনের লেআউট তৈরি করুন।

    • পর্যালোচনা: এই সপ্তাহে যা শিখেছেন, তা পুনরায় ঝালিয়ে নিন এবং নিজের দুর্বলতাগুলো চিহ্নিত করুন।

সপ্তাহ ২: CSS লেআউট এবং রেসপন্সিভ ডিজাইন

লক্ষ্য: CSS লেআউট টেকনিক ব্যবহার করে রেসপন্সিভ ওয়েবসাইট তৈরি করতে পারা।

  • দিন ৮:

    • ডিসপ্লে প্রোপার্টি: block, inline, inline-block এবং none এর ব্যবহার শিখুন।

    • ফ্লোট এবং ক্লিয়ার: float এবং clear প্রোপার্টি ব্যবহার করে এলিমেন্টকে সাজানো শিখুন।

    • পজিশনিং: position: static, relative, absolute, fixed এর ব্যবহার প্র্যাকটিস করুন।

  • দিন ৯:

    • CSS ফ্লেক্সবক্স: ফ্লেক্সবক্সের মূল ধারণা এবং এর প্রোপার্টিগুলো (যেমন flex-direction, justify-content, align-items) শিখুন।

    • ফ্লেক্স কন্টেইনার এবং আইটেম: ফ্লেক্স কন্টেইনার এবং ফ্লেক্স আইটেম তৈরি করে বিভিন্ন লেআউট তৈরি করুন।

  • দিন ১০:

    • CSS গ্রিড: গ্রিডের মূল ধারণা এবং এর প্রোপার্টিগুলো (যেমন grid-template-columns, grid-template-rows, grid-gap) শিখুন।

    • গ্রিড এরিয়া: গ্রিড এরিয়া তৈরি করে বিভিন্ন লেআউট তৈরি করুন।

  • দিন ১১:

    • মিডিয়া কোয়েরি: বিভিন্ন স্ক্রিন সাইজের জন্য আলাদা CSS লেখার নিয়ম শিখুন।

    • রেসপন্সিভ ডিজাইন: মিডিয়া কোয়েরি ব্যবহার করে একটি ওয়েব পেজকে রেসপন্সিভ করুন।

  • দিন ১২:

    • ভিউপোর্ট মেটা ট্যাগ: <meta name="viewport".> ট্যাগের ব্যবহার এবং গুরুত্ব জানুন।

    • মোবাইল ফার্স্ট ডিজাইন: মোবাইল ফার্স্ট ডিজাইন অ্যাপ্রোচ সম্পর্কে ধারণা নিন এবং প্র্যাকটিস করুন।

  • দিন ১৩:

    • CSS ফ্রেমওয়ার্ক পরিচিতি: বুটস্ট্রাপ (Bootstrap) অথবা ফাউন্ডেশন (Foundation) এর মতো CSS ফ্রেমওয়ার্ক সম্পর্কে জানুন।

    • ফ্রেমওয়ার্ক ব্যবহার করে লেআউট: একটি CSS ফ্রেমওয়ার্ক ব্যবহার করে দ্রুত একটি রেসপন্সিভ লেআউট তৈরি করুন।

  • দিন ১৪:

    • ছোট প্রোজেক্ট: ফ্লেক্সবক্স বা গ্রিড ব্যবহার করে একটি রেসপন্সিভ নেভিগেশন বার তৈরি করুন।

    • পর্যালোচনা: এই সপ্তাহে যা শিখেছেন, তা পুনরায় ঝালিয়ে নিন এবং নিজের দুর্বলতাগুলো চিহ্নিত করুন।

সপ্তাহ ৩: জাভাস্ক্রিপ্ট এবং ইন্টার‍্যাক্টিভিটি

লক্ষ্য: জাভাস্ক্রিপ্টের বেসিক ধারণা অর্জন এবং ওয়েবসাইটে ইন্টার‍্যাক্টিভিটি যোগ করতে পারা।

  • দিন ১৫:

    • জাভাস্ক্রিপ্ট পরিচিতি: জাভাস্ক্রিপ্ট কী, কেন ব্যবহার করা হয় এবং এর মূল ধারণাগুলো।

    • ভেরিয়েবল এবং ডেটা টাইপ: ভেরিয়েবল ডিক্লেয়ার করা এবং বিভিন্ন ডেটা টাইপ (যেমন স্ট্রিং, নাম্বার, বুলিয়ান) সম্পর্কে জানুন।

    • অপারেটর: বিভিন্ন অপারেটর (যেমন অ্যারিথমেটিক, কম্পারিজন, লজিক্যাল) এর ব্যবহার শিখুন।

  • দিন ১৬:

    • কন্ডিশনাল স্টেটমেন্ট: if, else if, else স্টেটমেন্ট ব্যবহার করে কন্ডিশনাল লজিক তৈরি করুন।

    • লুপ: for এবং while লুপ ব্যবহার করে কোড রিপিট করার নিয়ম শিখুন।

  • দিন ১৭:

    • ফাংশন: ফাংশন ডিক্লেয়ার করা এবং কল করার নিয়ম শিখুন।

    • প্যারামিটার এবং আর্গুমেন্ট: ফাংশনে প্যারামিটার ও আর্গুমেন্ট ব্যবহার করে ডেটা পাস করার নিয়ম জানুন।

    • রিটার্ন ভ্যালু: ফাংশন থেকে ভ্যালু রিটার্ন করার নিয়ম শিখুন।

  • দিন ১৮:

    • ডোম ম্যানিপুলেশন: জাভাস্ক্রিপ্ট ব্যবহার করে HTML এলিমেন্ট সিলেক্ট এবং ম্যানিপুলেট করার নিয়ম শিখুন।

    • ইভেন্ট লিসেনার: বিভিন্ন ইভেন্ট (যেমন ক্লিক, মাউসওভার, কিপ্রেস) এর জন্য ইভেন্ট লিসেনার অ্যাড করার নিয়ম শিখুন।

  • দিন ১৯:

    • ফর্ম ভ্যালিডেশন: জাভাস্ক্রিপ্ট ব্যবহার করে ফর্মের ইনপুট ভ্যালিডেট করার নিয়ম শিখুন।

    • অ্যালার্ট এবং কনফার্ম বক্স: alert(), confirm() এবং prompt() ফাংশনের ব্যবহার শিখুন।

  • দিন ২০:

    • অ্যারে: অ্যারে ডিক্লেয়ার করা, এলিমেন্ট অ্যাড করা, রিমুভ করা এবং অ্যারেতে লুপ করার নিয়ম শিখুন।

    • অবজেক্ট: অবজেক্ট ডিক্লেয়ার করা, প্রোপার্টি অ্যাড করা এবং অ্যাক্সেস করার নিয়ম শিখুন।

  • দিন ২১:

    • ছোট প্রোজেক্ট: জাভাস্ক্রিপ্ট ব্যবহার করে একটি সাধারণ টু-ডু লিস্ট অ্যাপ্লিকেশন তৈরি করুন।

    • পর্যালোচনা: এই সপ্তাহে যা শিখেছেন, তা পুনরায় ঝালিয়ে নিন এবং নিজের দুর্বলতাগুলো চিহ্নিত করুন।

সপ্তাহ ৪: অ্যাডভান্সড ডিজাইন এবং ফাইনাল প্রোজেক্ট

লক্ষ্য: অ্যাডভান্সড ডিজাইন কনসেপ্ট এবং একটি সম্পূর্ণ ওয়েব ডিজাইন প্রোজেক্ট তৈরি করা।

  • দিন ২২:

    • অ্যানিমেশন: CSS অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করে ওয়েবসাইটে অ্যানিমেশন যোগ করুন।

Level 4

আমি Diya। Social Media marketing, Lum IT Hub, Dhaka। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 3 মাস 2 সপ্তাহ যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 54 টি টিউন ও 1 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 2 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস