AI দ্বারা তৈরি HTML এবং Markdown ভিজ্যুয়ালি যাচাই করুন এবং সংশোধন করুন
প্রস্তুত কোডটি একটি ফ্রি ভিজ্যুয়াল এডিটরে খুলুন, ব্যবহারকারীর চোখে ফলাফল দেখুন এবং প্রোগ্রামিং ছাড়াই সম্পাদনা করুন
- 1.ChatGPT অথবা Claude খুলুন এবং প্রম্পটের মাধ্যমে HTML কোড তৈরি করুন। ফলাফলটি কপি করুন।
আপনার অঞ্চলে সেবাটি উপলব্ধ না হলে, VPN অথবা Ollama এর মাধ্যমে লোকাল মডেল ব্যবহার করুন।
ChatGPT ↗টুল সম্পর্কেপ্রম্পট[occasion: যেমন welcome email, newsletter, sale announcement] এর জন্য একটি রেসপন্সিভ HTML ইমেল টেমপ্লেট তৈরি করুন। ইনলাইন CSS, লোগো প্লেসহোল্ডার সহ একটি হেডার, [main message] সহ একটি বডি কন্টেন্ট সেকশন, এবং আনসাবস্ক্রাইব লিঙ্ক সহ একটি ফুটার যুক্ত করুন। এটি মোবাইল-ফ্রেন্ডলি করুন যার max-width 600px।
এই প্রম্পটটি কী করেএই প্রম্পটটি AI কে একটি HTML ইমেল টেমপ্লেট তৈরি করতে বলে। [occasion] এর জায়গায় ইমেলের ধরন লিখুন (যেমন welcome email), এবং [main message] এর জায়গায় আপনার টেক্সট দিন। AI ইনলাইন স্টাইল সহ প্রস্তুত HTML কোড ফেরত দেবে। - 2.CodePen খুলুন - এটি একটি ফ্রি অনলাইন HTML এডিটর যা লাইভ প্রিভিউ দেয়। উপরের বাম কোণে 'Pen' বোতামে ক্লিক করুন।
দেখার জন্য নিবন্ধন আবশ্যক নয়, তবে সংরক্ষণের জন্য প্রয়োজন। ফ্রি টিয়ারে আপনি আনলিমিটেড পেন তৈরি করতে পারবেন।
CodePen ↗ - 3.তৈরি করা HTML কোডটি HTML প্যানেলে (বাম কলাম) পেস্ট করুন। কোডে CSS থাকলে তা CSS প্যানেলে (মধ্যম কলাম) সরিয়ে নিন। প্রিভিউ স্বয়ংক্রিয়ভাবে ডান কলামে দেখা যাবে।
HTML-এ যদি আগে থেকেই ইনলাইন স্টাইল থাকে, তবে পুরো কোডটি HTML প্যানেলে পেস্ট করতে পারেন - CSS প্যানেলের প্রয়োজন নেই।
CodePen ↗ - 4.ফলাফল ভিজ্যুয়ালি পরীক্ষা করুন: হেডার, টেক্সট, বোতামগুলি কেমন দেখাচ্ছে। প্রিভিউ প্যানেলের উপরে থাকা রিসাইজ বোতামে ক্লিক করে মোবাইল মোডে স্যুইচ করুন।
টেক্সটের পঠনযোগ্যতা, মার্জিন এবং এলিমেন্টের অ্যালাইনমেন্টে খেয়াল রাখুন।
CodePen ↗ - 5.সম্পাদনা করতে হলে বাম প্যানেলে কোড এডিট করুন। পরিবর্তনগুলি সাথে সাথে প্রিভিউতে দেখা যাবে। Markdown ডকুমেন্টের জন্য StackEdit (stackedit.io) ব্যবহার করুন - টেক্সট বাম প্যানেলে পেস্ট করুন এবং ডান প্যানেলে ফলাফল দেখুন।
StackEdit রিয়েল-টাইম প্রিভিউ এবং HTML, PDF সহ বিভিন্ন ফরম্যাটে এক্সপোর্ট সমর্থন করে।
StackEdit ↗ - 6.ফলাফলে সন্তুষ্ট হলে, এডিটর থেকে চূড়ান্ত কোড কপি করে আপনার প্রোজেক্টে ব্যবহার করুন। HTML-এর জন্য CodePen-এর HTML প্যানেলের উপরের ডান কোণে 'Copy' বোতামে ক্লিক করুন।
পরে ফিরে আসতে চাইলে CodePen-এ পেনটি সেভ করুন - এর জন্য ফ্রি নিবন্ধন প্রয়োজন।
CodePen ↗
💰 এটি অনুসরণ করতে কত খরচ2026-08 অনুযায়ী দাম
- বিনামূল্যেChatGPT Freeফ্রি টিয়ার GPT-4o mini অ্যাক্সেস দেয় যাতে ঘণ্টায় বার্তা সংখ্যার সীমা রয়েছে।
- বিনামূল্যেCodePen Freeফ্রি টিয়ারে আনলিমিটেড প্রোজেক্ট তৈরি করতে পারবেন লাইভ প্রিভিউ সহ, দেখার জন্য নিবন্ধনের প্রয়োজন নেই।
- বিনামূল্যেStackEditসম্পূর্ণ ফ্রি অনলাইন Markdown এডিটর যা রিয়েল-টাইম প্রিভিউ এবং বিভিন্ন ফরম্যাটে এক্সপোর্ট সমর্থন করে।
চেষ্টা করুন এবং প্রথম হয়ে চিহ্ন দিন
সপ্তাহের রেসিপি ইমেইলে
এআই পরিষেবা দ্রুত বদলায় - ইন্টারফেস ও ফ্রি সীমা বর্ণনার থেকে আলাদা হতে পারে।