# Завдання з рефакторингу CSS ## Мета Перетворіть ваш проект тераріуму, використовуючи сучасні техніки розташування CSS! Рефакторизуйте поточний підхід з абсолютним позиціонуванням, щоб впровадити **Flexbox** або **CSS Grid** для більш зручного в обслуговуванні та адаптивного дизайну. Це завдання спонукає вас застосовувати сучасні стандарти CSS, зберігаючи при цьому візуальну привабливість вашого тераріуму. Розуміння того, коли і як використовувати різні методи розташування, є важливим навиком для сучасної веб-розробки. Ця вправа поєднує традиційні техніки позиціонування з сучасними системами розташування CSS. ## Інструкції до завдання ### Етап 1: Аналіз і планування 1. **Перегляньте ваш поточний код тераріуму** - Визначте, які елементи наразі використовують абсолютне позиціонування. 2. **Виберіть метод розташування** - Вирішіть, чи краще для ваших цілей підходить Flexbox або CSS Grid. 3. **Накресліть нову структуру макета** - Сплануйте, як будуть організовані контейнери та елементи рослин. ### Етап 2: Реалізація 1. **Створіть нову версію** вашого проекту тераріуму в окремій папці. 2. **Оновіть структуру HTML** за потреби, щоб підтримати обраний метод розташування. 3. **Рефакторизуйте CSS**, використовуючи Flexbox або CSS Grid замість абсолютного позиціонування. 4. **Збережіть візуальну узгодженість** - Переконайтеся, що рослини та баночка тераріуму залишаються на тих самих позиціях. 5. **Реалізуйте адаптивну поведінку** - Ваш макет має плавно адаптуватися до різних розмірів екрана. ### Етап 3: Тестування та документація 1. **Тестування в різних браузерах** - Переконайтеся, що ваш дизайн працює в Chrome, Firefox, Edge та Safari. 2. **Тестування адаптивності** - Перевірте ваш макет на мобільних, планшетах та настільних екранах. 3. **Документація** - Додайте коментарі до вашого CSS, пояснюючи вибір макета. 4. **Скріншоти** - Зробіть знімки вашого тераріуму в різних браузерах і на різних розмірах екрана. ## Технічні вимоги ### Реалізація макета - **Виберіть ОДИН**: Використовуйте або Flexbox, або CSS Grid (не обидва для одних і тих самих елементів). - **Адаптивний дизайн**: Використовуйте відносні одиниці (`rem`, `em`, `%`, `vw`, `vh`) замість фіксованих пікселів. - **Доступність**: Зберігайте правильну семантичну структуру HTML і текст альтернативи (alt text). - **Якість коду**: Використовуйте послідовні конвенції і логічно організовуйте CSS. ### Сучасні функції 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 ## Результати 1. **Оновлений HTML-файл** з покращеною семантичною структурою. 2. **Рефакторизований CSS-файл**, що використовує сучасні техніки розташування. 3. **Колекція скріншотів**, що демонструє сумісність між браузерами: - Вид на настільному комп'ютері (1920x1080) - Вид на планшеті (768x1024) - Вид на мобільному пристрої (375x667) - Щонайменше 2 різних браузери. 4. **README.md файл**, що документує: - Ваш вибір макета (Flexbox або Grid) і причини цього вибору. - Виклики, з якими ви зіткнулися під час рефакторингу. - Примітки щодо сумісності з браузерами. - Інструкції для запуску вашого коду. ## Оцінювальна шкала | Критерії | Відмінно (4) | Добре (3) | Задовільно (2) | Початково (1) | |----------|--------------|-----------|----------------|---------------| | **Реалізація макета** | Майстерне використання Flexbox/Grid з розширеними функціями; повністю адаптивний | Коректна реалізація з хорошою адаптивною поведінкою | Базова реалізація з незначними проблемами адаптивності | Неповна або некоректна реалізація макета | | **Якість коду** | Чистий, добре організований CSS з осмисленими коментарями та послідовними назвами | Хороша організація з деякими коментарями | Задовільна організація з мінімальними коментарями | Погана організація; важко зрозуміти | | **Сумісність між браузерами** | Ідеальна узгодженість у всіх необхідних браузерах зі скріншотами | Хороша сумісність з незначними відмінностями, які задокументовані | Деякі проблеми сумісності, які не порушують функціональність | Серйозні проблеми сумісності або відсутність тестування | | **Адаптивний дизайн** | Винятковий підхід "спочатку мобільний" з плавними точками перелому | Хороша адаптивна поведінка з відповідними точками перелому | Базові адаптивні функції з деякими проблемами макета | Обмежена або зламана адаптивна поведінка | | **Документація** | Всеосяжний README з детальними поясненнями та інсайтами | Хороша документація, що охоплює всі необхідні елементи | Базова документація з мінімальними поясненнями | Неповна або відсутня документація | ## Корисні ресурси ### Посібники з методів розташування - 📖 [Повний посібник з Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - 📖 [Повний посібник з CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - 📖 [Flexbox vs Grid - Як вибрати правильний інструмент](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/) ### Інструменти для тестування браузерів - 🛠️ [Режим адаптивності в DevTools браузера](https://developer.chrome.com/docs/devtools/device-mode/) - 🛠️ [Can I Use - Підтримка функцій](https://caniuse.com/) - 🛠️ [BrowserStack - Тестування між браузерами](https://www.browserstack.com/) ### Інструменти для перевірки якості коду - ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/) - ✅ [HTML Validator](https://validator.w3.org/) - ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) ## Додаткові завдання 🌟 **Розширені макети**: Впровадьте Flexbox І Grid у різних частинах вашого дизайну. 🌟 **Інтеграція анімації**: Додайте CSS-переходи або анімації, які працюють з вашим новим макетом. 🌟 **Темний режим**: Реалізуйте перемикач теми на основі CSS-змінних. 🌟 **Запити контейнера**: Використовуйте сучасні техніки запитів контейнера для адаптивності на рівні компонентів. > 💡 **Пам'ятайте**: Мета полягає не лише в тому, щоб зробити це працюючим, але й зрозуміти, ЧОМУ обраний вами метод розташування є найкращим рішенням для цього конкретного завдання дизайну! --- **Відмова від відповідальності**: Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.