12 KiB

Raw Blame History Unescape Escape

Задатак за рефакторисање CSS-а

Циљ

Претворите свој пројекат тераријума тако да користи савремене технике распореда у CSS-у! Рефакторишите тренутни приступ апсолутном позиционирању и примените Flexbox или CSS Grid за одрживији и прилагодљивији дизајн. Овај задатак вас изазива да примените савремене CSS стандарде, а истовремено задржите визуелну привлачност вашег тераријума.

Разумевање када и како користити различите методе распореда је кључна вештина за савремени веб развој. Ова вежба повезује традиционалне технике позиционирања са савременим CSS системима распореда.

Упутства за задатак

Фаза 1: Анализа и планирање

Прегледајте свој тренутни код тераријума - Идентификујте који елементи тренутно користе апсолутно позиционирање
Изаберите метод распореда - Одлучите да ли Flexbox или CSS Grid боље одговара вашим циљевима дизајна
Скицирајте нову структуру распореда - Испланирајте како ће контејнери и елементи биљака бити организовани

Фаза 2: Имплементација

Направите нову верзију свог пројекта тераријума у посебном фолдеру
Ажурирајте HTML структуру по потреби како би подржала изабрани метод распореда
Рефакторишите CSS да користи Flexbox или CSS Grid уместо апсолутног позиционирања
Очувајте визуелну конзистентност - Осигурајте да ваше биљке и тегла тераријума изгледају на истим позицијама
Примените прилагодљиво понашање - Ваш распоред треба да се лепо прилагођава различитим величинама екрана

Фаза 3: Тестирање и документација

Тестирање на различитим претраживачима - Проверите да ли ваш дизајн ради у Chrome, Firefox, Edge и Safari
Тестирање прилагодљивости - Проверите распоред на мобилним телефонима, таблетима и десктоп екранима
Документација - Додајте коментаре у CSS који објашњавају ваше изборе распореда
Снимци екрана - Направите снимке вашег тераријума у различитим претраживачима и величинама екрана

Технички захтеви

Имплементација распореда

Изаберите ЈЕДАН: Примените или Flexbox ИЛИ CSS Grid (не оба за исте елементе)
Прилагодљиви дизајн: Користите релативне јединице (rem, em, %, vw, vh) уместо фиксних пиксела
Приступачност: Очувајте исправну семантичку HTML структуру и alt текст
Квалитет кода: Користите доследне конвенције именовања и логично организујте CSS

Савремене CSS функције које треба укључити

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

Захтеви за подршку претраживача

Chrome/Edge: Последње 2 верзије
Firefox: Последње 2 верзије
Safari: Последње 2 верзије
Мобилни претраживачи: iOS Safari, Chrome Mobile

Испоруке

Ажурирана HTML датотека са побољшаном семантичком структуром
Рефакторисана CSS датотека која користи савремене технике распореда
Колекција снимака екрана која показује компатибилност са различитим претраживачима:
- Десктоп приказ (1920x1080)
- Таблет приказ (768x1024)
- Мобилни приказ (375x667)
- Најмање 2 различита претраживача
README.md датотека са документацијом:
- Ваш избор распореда (Flexbox или Grid) и разлози за тај избор
- Изазови са којима сте се суочили током рефакторисања
- Напомене о компатибилности са претраживачима
- Упутства за покретање вашег кода

Рубрика за процену

Критеријум	Изузетно (4)	Задовољавајуће (3)	У развоју (2)	Почетно (1)
Имплементација распореда	Мајсторска употреба Flexbox/Grid са напредним функцијама; потпуно прилагодљиво	Исправна имплементација са добрим прилагодљивим понашањем	Основна имплементација са мањим проблемима прилагодљивости	Непотпуна или неисправна имплементација распореда
Квалитет кода	Чист, добро организован CSS са смисленим коментарима и доследним именовањем	Добра организација са неким коментарима	Адекватна организација са минималним коментарима	Лоша организација; тешко разумљиво
Компатибилност са претраживачима	Савршена конзистентност у свим захтеваним претраживачима са снимцима екрана	Добра компатибилност са мањим разликама које су документоване	Неке проблеме компатибилности који не утичу на функционалност	Велики проблеми компатибилности или недостаје тестирање
Прилагодљиви дизајн	Изузетан приступ "mobile-first" са глатким прелазима	Добро прилагодљиво понашање са одговарајућим прелазима	Основне прилагодљиве функције са неким проблемима распореда	Ограничено или неисправно прилагодљиво понашање
Документација	Свеобухватан README са детаљним објашњењима и увидима	Добра документација која покрива све потребне елементе	Основна документација са минималним објашњењима	Непотпуна или недостајућа документација

Корисни ресурси

Водичи за методе распореда

Алатке за тестирање претраживача

Алатке за квалитет кода

Додатни изазови

🌟 Напредни распореди: Примените и Flexbox И Grid у различитим деловима вашег дизајна
🌟 Интеграција анимација: Додајте CSS прелазе или анимације које раде са вашим новим распоредом
🌟 Тамни режим: Примените прекидач теме заснован на прилагођеним својствима CSS-а
🌟 Упити за контејнере: Користите савремене технике упита за контејнере за прилагодљивост на нивоу компоненти

💡 Запамтите: Циљ није само да све функционише, већ да разумете ЗАШТО је изабрани метод распореда најбоље решење за овај конкретан изазов дизајна!

Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.

12 KiB Raw Blame History Unescape Escape