4.5 KiB
Завдання з рефакторингу CSS
Мета
Рефакторизувати проєкт тераріуму, використовуючи Flexbox або CSS Grid для створення макету. Оновіть HTML і CSS, щоб досягти сучасного, адаптивного дизайну. Вам не потрібно реалізовувати функцію перетягування елементів — зосередьтеся лише на макеті та стилізації.
Інструкції
- Створіть нову версію додатку тераріуму. Оновіть розмітку та CSS, використовуючи Flexbox або CSS Grid для макету.
- Переконайтеся, що всі елементи та графіка залишаються на місці, як у початковій версії.
- Протестуйте ваш дизайн щонайменше у двох різних браузерах (наприклад, Chrome, Firefox, Edge).
- Зробіть скріншоти вашого тераріуму в кожному браузері, щоб продемонструвати сумісність між браузерами.
- Надішліть оновлений код і скріншоти.
Критерії оцінювання
| Критерій | Відмінно | Задовільно | Потребує покращення |
|---|---|---|---|
| Макет | Повністю рефакторизовано з використанням Flexbox або CSS Grid; візуально привабливий та адаптивний | Деякі елементи рефакторизовані; часткове використання Flexbox або Grid | Мало або зовсім не використано Flexbox або Grid; макет не змінено |
| Сумісність між браузерами | Надано скріншоти для кількох браузерів; зовнішній вигляд узгоджений | Скріншоти для одного браузера; незначні невідповідності | Відсутні скріншоти або значні невідповідності |
| Якість коду | Чистий, добре організований HTML/CSS; зрозумілі коментарі | Деяка організація; мало коментарів | Неорганізований код; відсутність коментарів |
Поради
- Ознайомтеся з Flexbox та CSS Grid.
- Використовуйте інструменти розробника браузера для тестування адаптивності.
- Коментуйте ваш код для зрозумілості.
Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.