1. আপনি শুরু করার আগে
এই কোডল্যাবটি দেখায় কিভাবে একটি ওয়েবসাইটে মেটেরিয়াল ডিজাইন বাস্তবায়ন করতে জেমিনি কোড অ্যাসিস্ট ব্যবহার করতে হয়। একবার মেটেরিয়াল ডিজাইন বাস্তবায়িত হলে, আপনি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং কার্যকারিতা যোগ করতে পরিবর্তন করে ডিজাইনের উপর পুনরাবৃত্তি করবেন। এই কর্মশালার শেষে, আপনি CSS লেখার প্রয়োজন ছাড়াই মেটেরিয়াল ডিজাইন বা অনুরূপ লাইব্রেরি ব্যবহার করে ব্যবহারযোগ্য, ব্যবহারকারী-বান্ধব ওয়েব পেজ তৈরি করতে Gemini ব্যবহার করতে পারবেন।
পূর্বশর্ত
- এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট বোঝা
- ওয়েব ডিজাইনের একটি প্রাথমিক ধারণা
আপনি কি শিখুন
- জেমিনি কোড অ্যাসিস্টের সাহায্যে স্টাইলিং লাইব্রেরিগুলি কীভাবে প্রয়োগ করবেন
- ম্যানুয়ালি সিএসএস টুইক করার পরিবর্তে জেমিনি কোড অ্যাসিস্ট ব্যবহার করে কীভাবে একটি ডিজাইনে পুনরাবৃত্তি করবেন
- আপনার পছন্দসই শৈলীতে কোড অবদান রাখার জন্য মিথুন কোড অ্যাসিস্টকে কীভাবে কার্যকরভাবে প্রম্পট করবেন
আপনার যা প্রয়োজন
- Google ক্লাউড সক্ষম করার জন্য Gemini সহ একটি Google ক্লাউড প্রকল্পে অ্যাক্সেস
- স্টাইল করার জন্য একটি ওয়েব পৃষ্ঠা, বা অন্তত একটি ফোল্ডার যেখানে একটি তৈরি করতে হবে৷
2. সেটআপ
এই কোডল্যাবের জন্য, দুটি জিনিস প্রয়োজন: Gemini সক্ষম সহ একটি Google ক্লাউড প্রকল্পে অ্যাক্সেস এবং আমাদের স্টাইল করার জন্য একটি ওয়েব পৃষ্ঠা৷ আপনি নীচের প্যানেলে ক্লাউড কনসোলের উপরের ডানদিকে জেমিনি বোতামে ক্লিক করে একটি নতুন প্রকল্পে জেমিনিকে সক্ষম করতে পারেন৷
ওয়েব পৃষ্ঠাটি স্টাইল করার জন্য, আপনার হাতে থাকা যেকোন ওয়েব পৃষ্ঠাটি নির্দ্বিধায় ব্যবহার করুন৷ বিকল্পভাবে, যেহেতু মিথুন সক্ষম করা আছে, আপনি এটিকে আপনার জন্য একটি তৈরি করতে বলতে পারেন। আপনি যদি মিথুন রাশিকে অনুরোধ করেন যেমন 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>
3. বাস্তবায়নকারী উপাদান
এই লাইনগুলির সাথে একটি প্রম্পট সহ আমাদের ওয়েবপেজে মেটেরিয়াল ডিজাইন বাস্তবায়ন করতে জেমিনিকে জিজ্ঞাসা করে শুরু করুন:
Can you apply material design styles to this page?
দ্রষ্টব্য: এই কোডল্যাবে সরবরাহ করা সমস্ত প্রম্পট উদাহরণ। আপনার নিজের উদ্ধৃতিগুলির জন্য অনুপ্রেরণা হিসাবে সেগুলিকে নির্দ্বিধায় ব্যবহার করুন এবং সেরা ফলাফলের জন্য আপনার প্রকল্পের প্রসঙ্গ অন্তর্ভুক্ত করুন৷
প্রতিক্রিয়া এই অনুরূপ হওয়া উচিত:
এই ল্যাবের উদ্দেশ্যে মেটেরিয়াল ডিজাইন ব্যবহার করা হয়, তবে আপনি আপনার পছন্দের লাইব্রেরিটি বাস্তবায়ন করতে জেমিনিকে বলতে পারেন। মিথুন যদি আপনার প্রত্যাশার চেয়ে ভিন্ন উপাদানের একটি সংস্করণ আমদানি করে, তাহলে আপনার প্রম্পটে পছন্দসই সংস্করণ সরবরাহ করার চেষ্টা করুন।
4. নকশা উপর পুনরাবৃত্তি
ম্যানুয়ালি CSS-এ খনন করার প্রয়োজন ছাড়াই মিথুন আপনার সাথে একটি ওয়েবপৃষ্ঠার ডিজাইনে পুনরাবৃত্তি করতেও কাজ করতে পারে। মিথুনকে এই নকশাটি পুনরাবৃত্তি করতে বলার জন্য আপনার নিজস্ব প্রম্পট নিয়ে আসুন। এই ধরনের কাজের সেরা ফলাফলের জন্য, আপনি যে উপাদানগুলি পরিবর্তন করতে আগ্রহী এবং তাদের পছন্দসই ফলাফল যতটা সম্ভব সংক্ষিপ্তভাবে বর্ণনা করার উপর ফোকাস করুন:
Can we center the content on this page?
এছাড়াও আপনি মিথুন রাশি আমাদের পৃষ্ঠায় কার্যকরী উপাদান যোগ করতে পারেন। জেমিনিকে ফর্মে আরও ক্ষেত্র যোগ করতে বা অতিরিক্ত কার্যকারিতা যোগ করতে বলুন:
Can we add some more fields to this form, like phone number, email address?
5. সংগঠন
এছাড়াও আপনি মিথুনকে এর ফলাফলগুলিকে আমাদের প্রকল্পের জন্য সবচেয়ে বেশি ব্যবহারযোগ্য জায়গায় সাজিয়ে রাখতে পারেন৷ এই ক্ষেত্রে, যেহেতু ফোকাস এই একটি ফাইলে ডিজাইনের উপর পুনরাবৃত্তি করা হয়, একটি style ট্যাগ আদর্শ। মিথুনকে একটি স্টাইল ট্যাগে এর প্রতিক্রিয়াগুলি ধারণ করতে বলুন যাতে আপনি যেতে যেতে বেশ কয়েকটিতে এর পরিবর্তনগুলি প্রয়োগ করতে না হয়:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. অ্যাক্সেসযোগ্যতা
মেটেরিয়াল ডিজাইনে যেমন বলা হয়েছে , অ্যাক্সেসযোগ্যতা এবং ব্যবহারযোগ্যতা হল ডিজাইনের অপরিহার্য উপাদান। এটি মাথায় রেখে, আমাদের ইনপুটগুলি সঠিক প্রকারগুলি ব্যবহার করছে কিনা তা নিশ্চিত করতে মিথুনকে জিজ্ঞাসা করার চেষ্টা করুন৷ এটি নিশ্চিত করবে যে স্ক্রিন রিডারের মতো অ্যাক্সেসিবিলিটি টুলের মাধ্যমে সেগুলি সঠিকভাবে নেওয়া হয়েছে৷
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. উপসংহার
এই কোডল্যাব সম্পূর্ণ করার জন্য অভিনন্দন! আপনি একটি ওয়েবপেজে মেটেরিয়াল ডিজাইন বাস্তবায়ন করতে মিথুন ব্যবহার করতে শিখেছেন। আপনি কীভাবে ডিজাইনে পুনরাবৃত্তি করতে হয় এবং জেনারেট করা কোডটি সংগঠিত করতে হয় তাও শিখেছেন। এই নতুন দক্ষতা আপনাকে ন্যূনতম সেটআপ সহ মেটেরিয়াল ডিজাইন বা অনুরূপ লাইব্রেরি ব্যবহার করে ব্যবহারযোগ্য, ব্যবহারকারী-বান্ধব ওয়েব পৃষ্ঠাগুলি তৈরি করার অনুমতি দেবে।