Web-Dev-For-Beginners/translations/sr/7-bank-project/2-forms/assignment.md

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
  "translation_date": "2025-10-24T23:35:22+00:00",
  "source_file": "7-bank-project/2-forms/assignment.md",
  "language_code": "sr"
}
-->
# Стилизујте своју банкарску апликацију модерним CSS-ом

## Преглед пројекта

Претворите своју функционалну банкарску апликацију у визуелно привлачну, професионалну веб апликацију користећи модерне CSS технике. Креираћете кохезиван дизајн систем који побољшава корисничко искуство, уз одржавање принципа приступачности и одзивног дизајна.

Овај задатак вас изазива да примените савремене обрасце веб дизајна, имплементирате доследан визуелни идентитет и креирате интерфејс који ће корисници сматрати и атрактивним и интуитивним за навигацију.

## Упутства

### Корак 1: Поставите свој стилски лист

**Креирајте основу за свој 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;
   }
   ```

### Корак 2: Захтеви за дизајн систем

**Имплементирајте ове основне елементе дизајна:**

#### Палета боја
- **Примарна боја**: Изаберите професионалну боју за дугмад и истакнуте елементе
- **Секундарна боја**: Допунска боја за акценте и секундарне акције
- **Неутралне боје**: Сиве за текст, оквире и позадине
- **Боје за успех/грешке**: Зелена за стања успеха, црвена за грешке

#### Типографија
- **Хијерархија наслова**: Јасна разлика између H1, H2 и H3 елемената
- **Тело текста**: Читљива величина фонта (минимум 16px) и одговарајућа висина реда
- **Ознаке формулара**: Јасно, приступачно стилизовање текста

#### Распоред и размак
- **Доследан размак**: Користите скалу размака (8px, 16px, 24px, 32px)
- **Грид систем**: Организован распоред за формуларе и секције садржаја
- **Одзивни дизајн**: Приступ који прво циља мобилне уређаје са тачкама прекида

### Корак 3: Стилизација компоненти

**Стилизујте ове специфичне компоненте:**

#### Формулари
- **Поља за унос**: Професионални оквири, стања фокуса и стилизовање валидације
- **Дугмад**: Ефекти при преласку мишем, стања онемогућавања и индикатори учитавања
- **Ознаке**: Јасно позиционирање и индикатори обавезних поља
- **Поруке о грешци**: Видљиво стилизовање грешака и корисне поруке

#### Навигација
- **Заглавље**: Чист, брендиран простор за навигацију
- **Линкови**: Јасна стања при преласку мишем и активни индикатори
- **Лого/Наслов**: Препознатљив елемент бренда

#### Садржајне области
- **Секције**: Јасна визуелна подела између различитих области
- **Картице**: Ако користите распоред заснован на картицама, укључите сенке и оквире
- **Позадине**: Одговарајућа употреба белог простора и суптилних позадина

### Корак 4: Напредне функције (опционо)

**Размотрите имплементацију ових напредних функција:**
- **Тамни режим**: Пребацивање између светле и тамне теме
- **Анимације**: Суптилне транзиције и микро-интеракције
- **Стања учитавања**: Визуелна повратна информација током слања формулара
- **Одзивне слике**: Оптимизоване слике за различите величине екрана

## Инспирација за дизајн

**Карактеристике модерних банкарских апликација:**
- **Чист, минималистички дизајн** са доста белог простора
- **Професионалне шеме боја** (плаве, зелене или софистициране неутралне боје)
- **Јасна визуелна хијерархија** са истакнутим дугмадима за позив на акцију
- **Приступачни контрастни односи** који испуњавају 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 */
```

### Захтеви за приступачност
- **Контраст боја**: Осигурајте однос од најмање 4.5:1 за нормалан текст
- **Индикатори фокуса**: Видљива стања фокуса за навигацију тастатуром
- **Ознаке формулара**: Правилно повезане са уносима
- **Одзивни дизајн**: Употребљиво на екранима од 320px до 1920px ширине

## Рубрика за евалуацију

| Критеријум | Изузетно (A) | Добро (B) | Развија се (C) | Потребно побољшање (F) |
|------------|--------------|------------|----------------|------------------------|
| **Дизајн систем** | Имплементира свеобухватан дизајн систем са доследним бојама, типографијом и размаком | Користи доследно стилизовање са јасним обрасцима дизајна и добром визуелном хијерархијом | Основно стилизовање са неким проблемима доследности или недостајућим елементима дизајна | Минимално стилизовање са недоследним или конфликтним изборима дизајна |
| **Корисничко искуство** | Креира интуитиван, професионалан интерфејс са одличном употребљивошћу и визуелном привлачношћу | Пружа добро корисничко искуство са јасном навигацијом и читљивим садржајем | Основна употребљивост са потребом за неким побољшањима UX-а | Лоша употребљивост, тешко за навигацију или читање |
| **Техничка имплементација** | Користи модерне CSS технике, организовану структуру кода и прати најбоље праксе | Ефективно имплементира CSS са добром организацијом и одговарајућим техникама | CSS ради исправно, али можда недостаје организација или модерни приступи | Лоша имплементација CSS-а са техничким проблемима или проблемима компатибилности прегледача |
| **Одзивни дизајн** | Потпуно одзиван дизајн који одлично функционише на свим величинама уређаја | Добро одзивно понашање са мањим проблемима на неким величинама екрана | Основна имплементација одзивности са неким проблемима у распореду | Није одзиван или значајни проблеми на мобилним уређајима |
| **Приступачност** | Испуњава WCAG смернице са одличном навигацијом тастатуром и подршком за читаче екрана | Добре праксе приступачности са правилним контрастом и индикаторима фокуса | Основна разматрања приступачности са неким недостајућим елементима | Лоша приступачност, тешко за кориснике са инвалидитетом |

## Упутства за предају

**Укључите у своју предају:**
- **styles.css**: Ваш комплетан стилски лист
- **Ажурирани HTML**: Све измене HTML-а које сте направили
- **Снимци екрана**: Слике које приказују ваш дизајн на десктопу и мобилним уређајима
- **README**: Кратак опис ваших избора дизајна и палете боја

**Додатни поени за:**
- **CSS прилагођене променљиве** за одрживу тему
- **Напредне CSS функције** као што су Grid, Flexbox или CSS анимације
- **Разматрања перформанси** као што су оптимизовани CSS и минимална величина фајла
- **Тестирање у различитим прегледачима** како би се осигурала компатибилност на различитим прегледачима

> 💡 **Савет**: Почните са дизајном за мобилне уређаје, а затим га унапредите за веће екране. Овај приступ који прво циља мобилне уређаје осигурава да ваша апликација добро функционише на свим уређајима и прати најбоље праксе модерног веб развоја.

---

**Одрицање од одговорности**:  
Овај документ је преведен помоћу услуге за превођење вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.