১. শুরু করার আগে
এই কোডল্যাবটি দেখায় কিভাবে একটি ওয়েবসাইটে মেটেরিয়াল ডিজাইন বাস্তবায়নের জন্য জেমিনি কোড অ্যাসিস্ট ব্যবহার করতে হয়। মেটেরিয়াল ডিজাইন বাস্তবায়নের পর, আপনি ডিজাইনটি পুনরাবৃত্তি করবেন, ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং কার্যকারিতা যোগ করার জন্য পরিবর্তনগুলি করবেন। এই কর্মশালার শেষে, আপনি জেমিনি ব্যবহার করে মেটেরিয়াল ডিজাইন বা অনুরূপ লাইব্রেরি ব্যবহার করে CSS লেখার প্রয়োজন ছাড়াই ব্যবহারযোগ্য, ব্যবহারকারী-বান্ধব ওয়েব পৃষ্ঠা তৈরি করতে সক্ষম হবেন।
পূর্বশর্ত
- HTML, CSS এবং Javascript সম্পর্কে ধারণা থাকা
- ওয়েব ডিজাইনের একটি মৌলিক ধারণা
তুমি যা শিখো
- জেমিনি কোড অ্যাসিস্টের সাহায্যে স্টাইলিং লাইব্রেরি কীভাবে বাস্তবায়ন করবেন
- CSS ম্যানুয়ালি টুইক করার পরিবর্তে জেমিনি কোড অ্যাসিস্ট ব্যবহার করে কীভাবে কোনও ডিজাইনে পুনরাবৃত্তি করবেন
- আপনার পছন্দসই স্টাইলে কোড অবদান রাখার জন্য জেমিনি কোড অ্যাসিস্টকে কীভাবে কার্যকরভাবে প্ররোচিত করবেন
তোমার যা দরকার
- গুগল ক্লাউডের জন্য জেমিনি সক্ষম করে একটি গুগল ক্লাউড প্রকল্পে অ্যাক্সেস
- স্টাইল করার জন্য একটি ওয়েব পৃষ্ঠা, অথবা অন্তত একটি ফোল্ডার যেখানে একটি তৈরি করা যাবে
2. সেটআপ
এই কোডল্যাবের জন্য, দুটি জিনিস প্রয়োজন: জেমিনি সক্ষম থাকা একটি গুগল ক্লাউড প্রকল্পে অ্যাক্সেস এবং আমাদের স্টাইল করার জন্য একটি ওয়েব পৃষ্ঠা। আপনি ক্লাউড কনসোলের উপরের ডানদিকে জেমিনি বোতামে ক্লিক করে নীচের প্যানেলে সক্ষম ক্লিক করে একটি নতুন প্রকল্পে জেমিনি সক্ষম করতে পারেন।
ওয়েব পেজটি স্টাইল করার জন্য, আপনার কাছে থাকা যেকোনো ওয়েব পেজ ব্যবহার করতে দ্বিধা করবেন না। অন্যথায়, যেহেতু Gemini সক্রিয় আছে, আপনি এটিকে আপনার জন্য একটি তৈরি করতে বলতে পারেন। যদি আপনি Gemini কে Write me a web page with a form to gather profile information মতো একটি অনুরোধ করেন, তাহলে ফলাফলটি এইরকম হওয়া উচিত:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Profile Information</title>
</head>
<body>
<h2>Get Profile Information</h2>
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<input type="submit" value="Save Profile">
</form>
</body>
</html>
৩. বাস্তবায়নকারী উপাদান
শুরুতে, জেমিনিকে আমাদের ওয়েবপেজে ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে বলুন, এই লাইনগুলিতে একটি প্রম্পট সহ:
Can you apply material design styles to this page?
দ্রষ্টব্য: এই কোডল্যাবে দেওয়া সমস্ত প্রম্পট উদাহরণ। আপনার নিজস্ব উদ্ধৃতিগুলির জন্য অনুপ্রেরণা হিসেবে এগুলি ব্যবহার করতে দ্বিধা করবেন না এবং সেরা ফলাফলের জন্য আপনার প্রকল্পের প্রসঙ্গ অন্তর্ভুক্ত করুন।
প্রতিক্রিয়াটি এইরকম হওয়া উচিত:
এই ল্যাবের উদ্দেশ্যে ম্যাটেরিয়াল ডিজাইন ব্যবহার করা হয়েছে, তবে আপনি জেমিনিকে আপনার পছন্দের লাইব্রেরিটি বাস্তবায়ন করতে বলতে পারেন। যদি জেমিনি আপনার প্রত্যাশিত সংস্করণের চেয়ে ভিন্ন সংস্করণের ম্যাটেরিয়াল আমদানি করে, তাহলে আপনার প্রম্পটে পছন্দসই সংস্করণটি সরবরাহ করার চেষ্টা করুন।
৪. নকশার উপর পুনরাবৃত্তি
জেমিনি আপনার সাথে কাজ করে ওয়েবপেজের ডিজাইনের পুনরাবৃত্তি করতে পারে, সিএসএস ম্যানুয়ালি না করেই। জেমিনিকে এই ডিজাইনটি পুনরাবৃত্তি করতে বলার জন্য আপনার নিজস্ব প্রম্পট তৈরি করুন। এই ধরণের কাজে সেরা ফলাফলের জন্য, আপনি যে উপাদানগুলি পরিবর্তন করতে আগ্রহী এবং তাদের কাঙ্ক্ষিত ফলাফল যতটা সম্ভব সংক্ষিপ্তভাবে বর্ণনা করার উপর মনোযোগ দিন:
Can we center the content on this page?
আপনি আমাদের পৃষ্ঠায় জেমিনিকে কার্যকরী উপাদান যোগ করতে বলতে পারেন। জেমিনিকে ফর্মে আরও ক্ষেত্র যোগ করতে বা অতিরিক্ত কার্যকারিতা যোগ করতে বলুন:
Can we add some more fields to this form, like phone number, email address?
৫. সংগঠন
আপনি জেমিনিকে তার ফলাফলগুলি এমন জায়গায় সাজাতে পারেন যা আমাদের প্রকল্পের জন্য সবচেয়ে কার্যকর। এই ক্ষেত্রে, যেহেতু এই একটি ফাইলে ডিজাইনের পুনরাবৃত্তির উপর জোর দেওয়া হচ্ছে, তাই একটি style ট্যাগ আদর্শ। জেমিনিকে তার প্রতিক্রিয়াগুলিকে একটি স্টাইল ট্যাগে অন্তর্ভুক্ত করতে বলুন যাতে আপনাকে যাওয়ার সময় এর পরিবর্তনগুলি একাধিকতে প্রয়োগ করতে না হয়:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
৬. অ্যাক্সেসিবিলিটি
ম্যাটেরিয়াল ডিজাইনে যেমন বলা হয়েছে , অ্যাক্সেসিবিলিটি এবং ব্যবহারযোগ্যতা ডিজাইনের অপরিহার্য উপাদান। এই বিষয়টি মাথায় রেখে, জেমিনিকে জিজ্ঞাসা করে নিশ্চিত করুন যে আমাদের ইনপুটগুলি সঠিক ধরণের ব্যবহার করছে। এটি নিশ্চিত করবে যে স্ক্রিন রিডারের মতো অ্যাক্সেসিবিলিটি সরঞ্জামগুলি সেগুলি সঠিকভাবে গ্রহণ করছে।
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
৭. উপসংহার
এই কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন! আপনি একটি ওয়েবপেজে মেটেরিয়াল ডিজাইন বাস্তবায়নের জন্য জেমিনি ব্যবহার করতে শিখেছেন। আপনি ডিজাইনটি পুনরাবৃত্তি করতে এবং তৈরি কোডটি সংগঠিত করতেও শিখেছেন। এই নতুন দক্ষতা আপনাকে ন্যূনতম সেটআপ সহ মেটেরিয়াল ডিজাইন বা অনুরূপ লাইব্রেরি ব্যবহার করে ব্যবহারযোগ্য, ব্যবহারকারী-বান্ধব ওয়েব পৃষ্ঠা তৈরি করতে সহায়তা করবে।