HTML Editor: Code & Preview

এইচটিএমএল এডিটর (HTML Editor) দিয়ে একটি ওয়েব আইডিয়াকে একটি কার্যকরী পেজে পরিণত করুন। এমবেডেড সিএসএস (CSS) এবং জাভাস্ক্রিপ্ট (JavaScript) সহ এইচটিএমএল (HTML) লিখুন, ফলাফল প্রিভিউ করুন, এবং আপনি যে কোডটি পরিবর্তন করছেন তা বোঝার জন্য সংক্ষিপ্ত পাঠ ব্যবহার করুন। এটি শিক্ষার্থী, শিক্ষানবিশ এবং ডেভেলপারদের জন্য একটি ব্যবহারিক কর্মক্ষেত্র, যারা মোবাইল ডিভাইসে ছোট ওয়েব পেজ নিয়ে পরীক্ষা-নিরীক্ষা করেন।

আপনার কোড লিখুন এবং পরীক্ষা করুন

সিনট্যাক্স হাইলাইটিং, ব্র্যাকেট ম্যাচিং, অটোমেটিক ক্লোজিং, এবং আনডু ও রিডু সুবিধা সহ একটি কোড এডিটরে কাজ করুন। লাইন নম্বর দেখান, টেক্সট খুঁজুন, অথবা যখন কোনো স্নিপেট বড় হয়ে যায় তখন সরাসরি লাইনে চলে যান। অতিরিক্ত সিম্বল টুলবারটি সাধারণ কোডিং ক্যারেক্টারগুলোকে হাতের নাগালে রাখে, ফলে ট্যাগ এবং এক্সপ্রেশন লেখার জন্য কিবোর্ড লেআউটের মধ্যে কম পরিবর্তন করতে হয়।

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

বিভিন্ন প্রিভিউ প্রস্থ অন্বেষণ করুন

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

একটি ধারণা শিখুন, তারপর এটি অনুশীলন করুন

লার্নিং মোড HTML, CSS, এবং JavaScript-এর বিষয়গুলিকে একত্রিত করে। সবকিছু ক্রমানুসারে পড়ার পরিবর্তে বিষয় অনুসারে ফিল্টার করুন বা কোনো ধারণা অনুসন্ধান করুন। প্রতিটি পাঠে একটি ব্যাখ্যা, একটি দ্রুত ইঙ্গিত, ব্যবহারিক প্রয়োগ, সাধারণ ভুল, একটি উদাহরণ এবং একটি কোড ওয়াকথ্রু অন্তর্ভুক্ত থাকে।

একটি পাঠের পরে দুটি ছোট কোডিং টাস্ক থাকে। প্রথমে একটি উদাহরণ পুনরুদ্ধার করুন, তারপর ধারণাটি ব্যবহার করে একটি নতুন কোড স্নিপেট লিখুন। আপনার উত্তর পরীক্ষা করুন, ফিডব্যাক পড়ুন এবং যখন আপনি আবার চেষ্টা করতে চান তখন স্টার্টারটি রিসেট করুন। প্রথম টাস্কটি সম্পন্ন হওয়ার পরে দ্বিতীয় টাস্কটি আনলক হয়। পড়া এবং অনুশীলনের অগ্রগতি স্থানীয়ভাবে রেকর্ড করা হয় যাতে আপনি শুরু করা বিষয়গুলিতে ফিরে যেতে পারেন।

আপনার কাজ সংরক্ষণ করুন এবং শেয়ার করুন

একটি ডকুমেন্ট তৈরি করুন, একটি সেভ করা HTML ফাইল খুলুন, অথবা আপনার কাজকে একটি HTML ফাইল হিসেবে সংরক্ষণ করতে সেভ এবং সেভ অ্যাজ ব্যবহার করুন। যখন আপনি ডকুমেন্টটি নিজেই পাঠাতে চান, তখন ফাইলটি শেয়ার করুন। অনলাইন হস্তান্তরের জন্য, একটি ট্রান্সফার কোড বা শেয়ার লিঙ্ক তৈরি করুন এবং স্নিপেটটি নিয়ে কাজ চালিয়ে যেতে সহযোগী ওয়েব এডিটর ব্যবহার করুন। অনলাইন ট্রান্সফার বর্তমান কোডটি পরিষেবাতে পাঠায় এবং এর জন্য একটি ইন্টারনেট সংযোগ প্রয়োজন।

ওয়ার্কস্পেসকে আরামদায়ক করুন

লাইট, ডার্ক বা সিস্টেম অ্যাপিয়ারেন্স বেছে নিন এবং এডিটরের ফন্ট সাইজ অ্যাডজাস্ট করুন। সেটিংস আপনাকে লাইন নম্বর, অ্যাক্সেসিবিলিটি মোড, অটো-সেভ, এক্সিটে ব্যাকআপ এবং সেশন রিস্টোরেশন নিয়ন্ত্রণ করতে দেয়। ড্রাফট এবং ওয়ার্কস্পেস কপি হলো লোকাল অ্যাপ ডেটা; লোকাল সেশনকে স্থায়ী ব্যাকআপ হিসেবে না ধরে গুরুত্বপূর্ণ কাজ ফাইল হিসেবে সেভ করুন।

ডেটা ও প্রাইভেসি পেজ আপনাকে সেটিংস পর্যালোচনা করতে, অস্থায়ী এডিটর ডেটা মুছে ফেলতে বা লোকাল অ্যাপ ডেটা রিসেট করতে দেয়। রিওয়ার্ডস হাব ঐচ্ছিক দৈনিক পুরস্কার এবং বিজ্ঞাপন-ভিত্তিক কয়েন অ্যাক্টিভিটিও প্রদান করে। রিওয়ার্ড কয়েন হলো ইন-অ্যাপ আইটেম, নগদ টাকা নয়।

স্বতন্ত্র পৃষ্ঠা সম্পাদনা করতে এবং বান্ডেল করা পাঠ পড়তে কোনো অনলাইন পরিষেবার প্রয়োজন হয় না। দূরবর্তী ছবি, বাহ্যিক স্ক্রিপ্ট, অনলাইন স্থানান্তর এবং বিজ্ঞাপনের জন্য সংযোগ প্রয়োজন। কোনো ধারণা পড়তে, কোনো পরিবর্তন চেষ্টা করতে, ফলাফল পরিদর্শন করতে এবং যে কোডের উপর ভিত্তি করে আপনি কাজ করতে চান তা সংরক্ষণ করতে এইচটিএমএল এডিটর (HTML Editor) ব্যবহার করুন।