CSS: flexbox, цвета, единицы измерения; пути к файлам

Цель: изучить принципы работы flexbox и его свойств, цветовые модели, единицы измерения, получить навыки их использования при верстке макета.

Порядок выполнения лабораторной работы:

1. Изучить принципы работы flexbox и его свойств:
   • flex-контейнер, flex-элементы;
   • главная и поперечная оси;
   • изменение направления осей;
   • выравнивание элементов;
   • управление размерами элементов;
   • порядок элементов;
2. Изучить модели и способы задания цветов:
   • Имена;
   • HEX;
   • RGB;
   • RGBA;
   • HSL;
   • HSLA;
3. Изучить единицы измерения:
   • относительные: %, em, rem, ch, vw, vh
   • абсолютные: px, pt, cm, mm, in
4. Для выполнения работы необходимо в style.css из третьей работы:
   • добавить display: flex для расположения элементов согласно макету;
   • использовать необходимые свойства для контейнера и элементов для их выравнивания, расположения и управления размерами;
   • задать цвета разными способами;
   • использовать для задания размеров элементов относительные единицы измерения;
5. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.
6. Загрузить проект на сервер через sftp или используя ssh.

Требования к html и css:

• Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
• Код отформатирован;
• Корректное использование тегов;
• Отсутствие ошибок на валидаторе для html и css.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Дополнительные источники

• Гайд по flexbox
• Спецификация CSS Flexible Box Layout
• Flexbox MDN
• Игры для тренировки:
  • Froggy
  • Defence
• Интерактивная демонстрация
• Цвета
• Единицы измерения
• Flexbox
• Шпаргалка по flexbox
• Интерактивная шпаргалка по flexbox

Вопросы для защиты

1. Как работает та или иная единица измерения?
2. Какие варианты задания цветов существуют и чем они отличаются?
3. Что такое флекс-контейнер?
4. Что такое флекс-элемент?
5. Какие свойства применяются на флекс-контейнере?
6. Какие свойства применяются на флекс-элементе?
7. Какие оси есть у флексов и какие свойства меняют их направления?
8. Как выстраиваются флекс-элементы в контейнере?
9. Какие свойства и как они выравнивают флекс-элементы?
10. Что делают свойства flex-grow, flex-shrink и flex-basis?

Задать вопрос наставнику