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. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.