|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
|
|
|
"translation_date": "2025-10-22T21:56:38+00:00",
|
|
|
"source_file": "7-bank-project/2-forms/assignment.md",
|
|
|
"language_code": "bn"
|
|
|
}
|
|
|
-->
|
|
|
# আপনার ব্যাংক অ্যাপটি আধুনিক CSS দিয়ে স্টাইল করুন
|
|
|
|
|
|
## প্রকল্পের সংক্ষিপ্ত বিবরণ
|
|
|
|
|
|
আপনার কার্যকরী ব্যাংকিং অ্যাপ্লিকেশনকে আধুনিক CSS প্রযুক্তি ব্যবহার করে একটি দৃষ্টিনন্দন, পেশাদার ওয়েব অ্যাপে রূপান্তর করুন। আপনি একটি সামঞ্জস্যপূর্ণ ডিজাইন সিস্টেম তৈরি করবেন যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে এবং একই সাথে অ্যাক্সেসিবিলিটি ও রেসপন্সিভ ডিজাইনের নীতিগুলি বজায় রাখবে।
|
|
|
|
|
|
এই অ্যাসাইনমেন্টটি আপনাকে সমসাময়িক ওয়েব ডিজাইনের প্যাটার্ন প্রয়োগ করতে, একটি সামঞ্জস্যপূর্ণ ভিজ্যুয়াল পরিচয় বাস্তবায়ন করতে এবং এমন একটি ইন্টারফেস তৈরি করতে চ্যালেঞ্জ জানায় যা ব্যবহারকারীরা আকর্ষণীয় এবং সহজে নেভিগেট করতে পারবেন।
|
|
|
|
|
|
## নির্দেশনা
|
|
|
|
|
|
### ধাপ ১: আপনার স্টাইলশিট সেটআপ করুন
|
|
|
|
|
|
**আপনার CSS ভিত্তি তৈরি করুন:**
|
|
|
|
|
|
1. **তৈরি করুন** একটি নতুন ফাইল যার নাম হবে `styles.css` এবং এটি আপনার প্রকল্পের মূল ফোল্ডারে রাখুন।
|
|
|
2. **লিঙ্ক করুন** স্টাইলশিটটি আপনার `index.html` ফাইলে:
|
|
|
```html
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
```
|
|
|
3. **শুরু করুন** CSS রিসেট এবং আধুনিক ডিফল্ট দিয়ে:
|
|
|
```css
|
|
|
/* Modern CSS reset and base styles */
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
line-height: 1.6;
|
|
|
color: #333;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
### ধাপ ২: ডিজাইন সিস্টেমের প্রয়োজনীয়তা
|
|
|
|
|
|
**এই গুরুত্বপূর্ণ ডিজাইন উপাদানগুলি বাস্তবায়ন করুন:**
|
|
|
|
|
|
#### রঙের প্যালেট
|
|
|
- **প্রধান রঙ**: বোতাম এবং হাইলাইটের জন্য একটি পেশাদার রঙ নির্বাচন করুন
|
|
|
- **গৌণ রঙ**: অ্যাকসেন্ট এবং গৌণ ক্রিয়াকলাপের জন্য পরিপূরক রঙ
|
|
|
- **নিরপেক্ষ রঙ**: টেক্সট, বর্ডার এবং ব্যাকগ্রাউন্ডের জন্য ধূসর রঙ
|
|
|
- **সাফল্য/ত্রুটি রঙ**: সাফল্যের জন্য সবুজ এবং ত্রুটির জন্য লাল রঙ
|
|
|
|
|
|
#### টাইপোগ্রাফি
|
|
|
- **শিরোনামের স্তরবিন্যাস**: H1, H2 এবং H3 উপাদানগুলির মধ্যে স্পষ্ট পার্থক্য
|
|
|
- **বডি টেক্সট**: পড়ার উপযোগী ফন্ট সাইজ (কমপক্ষে ১৬px) এবং উপযুক্ত লাইন উচ্চতা
|
|
|
- **ফর্ম লেবেল**: স্পষ্ট, অ্যাক্সেসযোগ্য টেক্সট স্টাইলিং
|
|
|
|
|
|
#### লেআউট এবং স্পেসিং
|
|
|
- **সামঞ্জস্যপূর্ণ স্পেসিং**: একটি স্পেসিং স্কেল ব্যবহার করুন (৮px, ১৬px, ২৪px, ৩২px)
|
|
|
- **গ্রিড সিস্টেম**: ফর্ম এবং কন্টেন্ট সেকশনের জন্য সংগঠিত লেআউট
|
|
|
- **রেসপন্সিভ ডিজাইন**: মোবাইল-প্রথম পদ্ধতি এবং ব্রেকপয়েন্ট ব্যবহার করুন
|
|
|
|
|
|
### ধাপ ৩: কম্পোনেন্ট স্টাইলিং
|
|
|
|
|
|
**এই নির্দিষ্ট কম্পোনেন্টগুলিকে স্টাইল করুন:**
|
|
|
|
|
|
#### ফর্ম
|
|
|
- **ইনপুট ফিল্ড**: পেশাদার বর্ডার, ফোকাস স্টেট এবং ভ্যালিডেশন স্টাইলিং
|
|
|
- **বোতাম**: হোভার ইফেক্ট, নিষ্ক্রিয় স্টেট এবং লোডিং ইন্ডিকেটর
|
|
|
- **লেবেল**: স্পষ্ট অবস্থান এবং প্রয়োজনীয় ফিল্ড ইন্ডিকেটর
|
|
|
- **ত্রুটি বার্তা**: দৃশ্যমান ত্রুটি স্টাইলিং এবং সহায়ক বার্তা
|
|
|
|
|
|
#### নেভিগেশন
|
|
|
- **হেডার**: পরিষ্কার, ব্র্যান্ডেড নেভিগেশন এলাকা
|
|
|
- **লিঙ্ক**: স্পষ্ট হোভার স্টেট এবং সক্রিয় ইন্ডিকেটর
|
|
|
- **লোগো/শিরোনাম**: স্বতন্ত্র ব্র্যান্ডিং উপাদান
|
|
|
|
|
|
#### কন্টেন্ট এরিয়া
|
|
|
- **সেকশন**: বিভিন্ন এলাকার মধ্যে স্পষ্ট ভিজ্যুয়াল বিভাজন
|
|
|
- **কার্ড**: যদি কার্ড-ভিত্তিক লেআউট ব্যবহার করেন, ছায়া এবং বর্ডার অন্তর্ভুক্ত করুন
|
|
|
- **ব্যাকগ্রাউন্ড**: সাদা স্থান এবং সূক্ষ্ম ব্যাকগ্রাউন্ডের উপযুক্ত ব্যবহার
|
|
|
|
|
|
### ধাপ ৪: উন্নত বৈশিষ্ট্য (ঐচ্ছিক)
|
|
|
|
|
|
**এই উন্নত বৈশিষ্ট্যগুলি বাস্তবায়ন বিবেচনা করুন:**
|
|
|
- **ডার্ক মোড**: লাইট এবং ডার্ক থিমের মধ্যে টগল করুন
|
|
|
- **অ্যানিমেশন**: সূক্ষ্ম ট্রানজিশন এবং মাইক্রো-ইন্টারঅ্যাকশন
|
|
|
- **লোডিং স্টেট**: ফর্ম জমা দেওয়ার সময় ভিজ্যুয়াল ফিডব্যাক
|
|
|
- **রেসপন্সিভ ইমেজ**: বিভিন্ন স্ক্রিন সাইজের জন্য অপ্টিমাইজড ইমেজ
|
|
|
|
|
|
## ডিজাইন অনুপ্রেরণা
|
|
|
|
|
|
**আধুনিক ব্যাংকিং অ্যাপের বৈশিষ্ট্য:**
|
|
|
- **পরিষ্কার, মিনিমাল ডিজাইন** যা পর্যাপ্ত সাদা স্থান ব্যবহার করে
|
|
|
- **পেশাদার রঙের স্কিম** (নীল, সবুজ বা পরিশীলিত নিরপেক্ষ রঙ)
|
|
|
- **স্পষ্ট ভিজ্যুয়াল স্তরবিন্যাস** যা প্রধান কল-টু-অ্যাকশন বোতামগুলিকে প্রাধান্য দেয়
|
|
|
- **অ্যাক্সেসযোগ্য কনট্রাস্ট অনুপাত** যা WCAG নির্দেশিকা পূরণ করে
|
|
|
- **মোবাইল-রেসপন্সিভ লেআউট** যা সব ডিভাইসে কাজ করে
|
|
|
|
|
|
## প্রযুক্তিগত প্রয়োজনীয়তা
|
|
|
|
|
|
### CSS সংগঠন
|
|
|
```css
|
|
|
/* 1. CSS Custom Properties (Variables) */
|
|
|
:root {
|
|
|
--primary-color: #007bff;
|
|
|
--secondary-color: #6c757d;
|
|
|
/* Add more variables */
|
|
|
}
|
|
|
|
|
|
/* 2. Base Styles */
|
|
|
/* Reset, typography, general elements */
|
|
|
|
|
|
/* 3. Layout */
|
|
|
/* Grid, flexbox, positioning */
|
|
|
|
|
|
/* 4. Components */
|
|
|
/* Forms, buttons, cards */
|
|
|
|
|
|
/* 5. Utilities */
|
|
|
/* Helper classes, responsive utilities */
|
|
|
|
|
|
/* 6. Media Queries */
|
|
|
/* Responsive breakpoints */
|
|
|
```
|
|
|
|
|
|
|
|
|
### অ্যাক্সেসিবিলিটি প্রয়োজনীয়তা
|
|
|
- **রঙের কনট্রাস্ট**: সাধারণ টেক্সটের জন্য কমপক্ষে ৪.৫:১ অনুপাত নিশ্চিত করুন
|
|
|
- **ফোকাস ইন্ডিকেটর**: কীবোর্ড নেভিগেশনের জন্য দৃশ্যমান ফোকাস স্টেট
|
|
|
- **ফর্ম লেবেল**: ইনপুটের সাথে সঠিকভাবে যুক্ত
|
|
|
- **রেসপন্সিভ ডিজাইন**: ৩২০px থেকে ১৯২০px পর্যন্ত স্ক্রিনে ব্যবহারযোগ্য
|
|
|
|
|
|
## মূল্যায়ন রুব্রিক
|
|
|
|
|
|
| মানদণ্ড | উৎকৃষ্ট (A) | দক্ষ (B) | উন্নয়নশীল (C) | উন্নতির প্রয়োজন (F) |
|
|
|
|----------|---------------|----------------|----------------|----------------------|
|
|
|
| **ডিজাইন সিস্টেম** | সামঞ্জস্যপূর্ণ রঙ, টাইপোগ্রাফি এবং স্পেসিং সহ একটি ব্যাপক ডিজাইন সিস্টেম বাস্তবায়ন করে | স্পষ্ট ডিজাইন প্যাটার্ন এবং ভালো ভিজ্যুয়াল স্তরবিন্যাস সহ সামঞ্জস্যপূর্ণ স্টাইলিং ব্যবহার করে | কিছু সামঞ্জস্য সমস্যা বা ডিজাইন উপাদান অনুপস্থিত সহ মৌলিক স্টাইলিং প্রয়োগ করে | ন্যূনতম স্টাইলিং সহ অসামঞ্জস্যপূর্ণ বা বিরোধপূর্ণ ডিজাইন পছন্দ |
|
|
|
| **ব্যবহারকারীর অভিজ্ঞতা** | চমৎকার ব্যবহারযোগ্যতা এবং ভিজ্যুয়াল আকর্ষণ সহ স্বজ্ঞাত, পেশাদার ইন্টারফেস তৈরি করে | পরিষ্কার নেভিগেশন এবং পড়ার উপযোগী কন্টেন্ট সহ ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করে | কিছু UX উন্নতির প্রয়োজন সহ মৌলিক ব্যবহারযোগ্যতা | খারাপ ব্যবহারযোগ্যতা, নেভিগেট বা পড়তে কঠিন |
|
|
|
| **প্রযুক্তিগত বাস্তবায়ন** | আধুনিক CSS প্রযুক্তি, সংগঠিত কোড স্ট্রাকচার এবং সেরা অনুশীলন ব্যবহার করে | ভালো সংগঠন এবং উপযুক্ত প্রযুক্তি সহ CSS কার্যকরভাবে বাস্তবায়ন করে | CSS সঠিকভাবে কাজ করে তবে সংগঠন বা আধুনিক পদ্ধতির অভাব থাকতে পারে | খারাপ CSS বাস্তবায়ন, প্রযুক্তিগত সমস্যা বা ব্রাউজার সামঞ্জস্য সমস্যা |
|
|
|
| **রেসপন্সিভ ডিজাইন** | সম্পূর্ণ রেসপন্সিভ ডিজাইন যা সব ডিভাইস সাইজে সুন্দরভাবে কাজ করে | কিছু স্ক্রিন সাইজে ছোটখাটো সমস্যা সহ ভালো রেসপন্সিভ আচরণ | কিছু লেআউট সমস্যার সাথে মৌলিক রেসপন্সিভ বাস্তবায়ন | রেসপন্সিভ নয় বা মোবাইল ডিভাইসে উল্লেখযোগ্য সমস্যা |
|
|
|
| **অ্যাক্সেসিবিলিটি** | WCAG নির্দেশিকা পূরণ করে চমৎকার কীবোর্ড নেভিগেশন এবং স্ক্রিন রিডার সাপোর্ট প্রদান করে | সঠিক কনট্রাস্ট এবং ফোকাস ইন্ডিকেটর সহ ভালো অ্যাক্সেসিবিলিটি অনুশীলন | কিছু অনুপস্থিত উপাদান সহ মৌলিক অ্যাক্সেসিবিলিটি বিবেচনা | খারাপ অ্যাক্সেসিবিলিটি, প্রতিবন্ধী ব্যবহারকারীদের জন্য কঠিন |
|
|
|
|
|
|
## জমা দেওয়ার নির্দেশিকা
|
|
|
|
|
|
**আপনার জমায় অন্তর্ভুক্ত করুন:**
|
|
|
- **styles.css**: আপনার সম্পূর্ণ স্টাইলশিট
|
|
|
- **আপডেটেড HTML**: আপনি যে HTML পরিবর্তন করেছেন
|
|
|
- **স্ক্রিনশট**: ডেস্কটপ এবং মোবাইলে আপনার ডিজাইন দেখানো ছবি
|
|
|
- **README**: আপনার ডিজাইন পছন্দ এবং রঙের প্যালেটের সংক্ষিপ্ত বিবরণ
|
|
|
|
|
|
**অতিরিক্ত পয়েন্টের জন্য:**
|
|
|
- **CSS কাস্টম প্রপার্টিজ** যা রক্ষণশীল থিমিং নিশ্চিত করে
|
|
|
- **উন্নত CSS বৈশিষ্ট্য** যেমন গ্রিড, ফ্লেক্সবক্স বা CSS অ্যানিমেশন
|
|
|
- **পারফরম্যান্স বিবেচনা** যেমন অপ্টিমাইজড CSS এবং ন্যূনতম ফাইল সাইজ
|
|
|
- **ক্রস-ব্রাউজার টেস্টিং** যা বিভিন্ন ব্রাউজারে সামঞ্জস্য নিশ্চিত করে
|
|
|
|
|
|
> 💡 **প্রো টিপ**: প্রথমে মোবাইল ডিজাইন দিয়ে শুরু করুন, তারপর বড় স্ক্রিনের জন্য উন্নত করুন। এই মোবাইল-প্রথম পদ্ধতি নিশ্চিত করে যে আপনার অ্যাপটি সব ডিভাইসে ভালোভাবে কাজ করবে এবং আধুনিক ওয়েব ডেভেলপমেন্টের সেরা অনুশীলন অনুসরণ করবে।
|
|
|
|
|
|
---
|
|
|
|
|
|
**অস্বীকৃতি**:
|
|
|
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। |
