Фундаментальное понимание раскладки

Если вы проработали этот модуль, то уже имеете базовое представление о том, что вам нужно знать, чтобы создавать современную CSS раскладку и работать с более старым CSS. Это задание проверит некоторые из ваших знаний путём разработки раскладки для простой веб-страницы, используя различные техники.

Необходимое условие: Прежде чем приступать к этой аттестации, вы должны были уже проработать все статьи в этом модуле.
Цель: Проверить понимание фундаментальных навыков раскладки, освещаемых в этом модуле.

Резюме проекта

Вам предоставили некоторый html, базовый css и изображения — ваша задача, создать раскладку для дизайна, который должен выглядеть как на изображении ниже.

Базовые настройки

Вы можете скачать HTML, CSS, и набор из шести изображений тут.

Сохраните HTML документ и css стили внутри директории на вашем компьютере и добавьте изображения внутрь папки с именем images. Открыв index.html файл в браузере, вы должны получить страницу с базовой стилизацией, но без раскладки, что должно выглядеть как на изображении ниже.

Эта отправная точка и всё содержимое отображается браузером в нормальном потоке.

Ваши задачи

Теперь вам нужно реализовать раскладку. Задачи, которые вам необходимо выполнить:

  1. Отобразить пункты навигации в строку, с одинаковым количеством пространства между элементами.
  2. Панель навигации должна прокручиваться вместе с содержимым страницы и закрепляться вверху видимой области документа в рамках экрана.
  3. Изображение, которое находится внутри статьи, должно обтекаться текстом вокруг него.
  4. <article> и <aside> элементы должны отображаться как двухколоночная раскладка. Колонки должны иметь гибкий размер, если окно браузера уменьшится, колонки должны стать более узкими.
  5. Фотографии должны отображаться как двухколоночная сетка с отступом в 1px между изображениями.

Вам нет необходимости изменять HTML для создания этой раскладки и техник, которые вы должны использовать:

  • Позиционирование
  • Раскладка на Float
  • Раскладка на Flexbox
  • Раскладка на CSS Grid

Есть множество способов, как выполнить некоторые из этих задач и часто не существует одного правильного или неправильного способа это сделать. Попробуйте несколько разных способов и увидите, какой работает лучше. Делайте заметки о ваших экспериментах и вы всегда сможете обсудить ваш способ в отдельной дискуссии для этого задания или на #mdn IRC канале.

Оценка работы

Если вы проходите эту аттестацию как часть организованного курса, вы должны быть в состоянии дать свою работу вашему учителю/наставнику для оценки. Если вы занимаетесь самообучением, тогда вы легко можете получить руководство по оценке работы, задавая вопросы в отдельной дискуссии для этого задания или на #mdn IRC канале в Mozilla IRC. Сначала попробуйте выполнить упражнение — нет никаких причин для жульничества!