htmlacademy

htmlacademy.pp.ua

Мої проходження випробовувань в htmlacademy на 100%

Випробовування 32/32

A-cat-gallery Галерея на inline-block

Випробовування: котогалерея на inline-block | Испытание: котогалерея на inline-block , яке я пройшов самостійно на 100%

Испытание: котогалерея на inline-block В этом испытании вам нужно доверстать галерею картин с котами с помощью блочно-строчных элементов.

HTML-код полностью готов и заблокирован. CSS-код готов частично. Мы сделали заготовки стилей, чтобы вам не нужно было верстать всё с нуля и угадывать не относящиеся к сетке мелочи.

Вам нужно доверстать рамки, задать внешние и внутренние отступы элементов галереи, а также выстроить их в указанную сетку.

Примените те приёмы работы с блочно-строчными элементами, которые разбирались в предыдущих заданиях.

Лінк на завдання https://htmlacademy.ru/courses/65/run/32
Лінк на результат https://htmlacademy.pp.ua/gallery

Моє портфоліо Roman Matviy front-end

Випробування 27/32

Испытание: строим сетку

В этом испытании задача очень простая:

Нужно построить схематичную сетку макета, как в образце. Вы можете писать любой HTML и любой CSS, без каких-либо ограничений. Единственная тонкость — учитывайте общую ширину макета, которая задана в body. Это сделано, чтобы упростить проверку. И не забывайте пользоваться новыми инструментами для сравнения результата и образца.

Как обычно, все размеры и отступы кратны 5, а используемые цвета перечислены в комментарии в CSS.

Лінк на завдання https://htmlacademy.ru/courses/65/run/27
Лінк на результат https://htmlacademy.pp.ua/grid

Випробування 13/32

Испытание: пазл на флоатах

В качестве первого испытания мы подготовили небольшую головоломку. Суть её такова:

Все стили готовы к использованию, а редактор CSS заблокирован. Но вы можете изменять HTML. Задача заключается в том, чтобы правильно подобрать порядок блоков. Конечно, головоломка сделана таким образом, чтобы вы прочувствовали все тонкости поведения флоатов. Обратите внимание, что среди блоков есть не зафлоаченный блок. И это не ошибка.

Напомним об одной тонкости: для того, чтобы флоатный блок мог обтекаться обычным, он должен в коде располагаться выше обычного.

Лінк на завдання https://htmlacademy.ru/courses/65/run/13
Лінк на результат https://htmlacademy.pp.ua/puzzle

Випробування 8/23

Используйте изученные свойства блочной модели для прохождения испытания, а именно:

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

Подобрать правильные размеры вам поможет сетка на фоне. Размеры маленькой ячейки — 20 на 20 пикселей, большой ячейки — 100 на 100 пикселей.

Внутренние отступы, в отличие от заданий, здесь непрозрачные.

Лінк на завдання https://htmlacademy.ru/courses/44/run/8
Лінк на результат https://htmlacademy.pp.ua/test8-23

Випробування 16/23

Второе испытание Используйте полученные знания о тонкостях блочной модели, чтобы пройти это испытание.

Все размеры, которые вам нужно задать, кратны двадцати. Цвет рамки блока — white.

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

Лінк на завдання https://htmlacademy.ru/courses/44/run/16
Лінк на результат https://htmlacademy.pp.ua/test16-23

Випробування 23/23

Чтобы пройти это испытание, примените знания о продвинутых типах элементов, полученные в третьей части главы.

Изменять нужно только свойства, относящиеся к блочной модели.

Лінк на завдання https://htmlacademy.ru/courses/44/run/23
Лінк на результат https://htmlacademy.pp.ua/test23-23

Випробування 18/18

Испытание: интерактивное расследование Пришла пора испытания. Но испытание это не совсем обычное: в главе вы изучали селекторы, но CSS-код сейчас вам писать не придётся. Редактор CSS заблокирован, а в его коде используются как раз те селекторы, которые вы изучили в этой главе.

В HTML создана таблица с результатами соревнований четырёх спортсменов. В ней выводится имя участника, его очки в каждом из раундов и суммарный итог. В итоге среди спортсменов определились золотой, серебряный и бронзовый медалист, а один участник был дисквалифицирован.

А что же нужно сделать? Вам нужно проанализировать CSS-код и понять, какие именно правки нужно внести в разметку, чтобы все стили применялись к ней. Вот список того, что должно быть сделано:

нужно заменить некоторые теги на другие; нужно прописать классы для некоторых элементов. Подробная информация по таблицам и по оформлению текстов есть в соответствующих главах.

Лінк на завдання https://htmlacademy.ru/courses/42/run/18
Лінк на результат https://htmlacademy.pp.ua/test18-18

Випробування 9/28

Испытание: вертикальное меню Разметьте и оформите вертикальное меню, используя полученные ранее знания.

Обратите внимание, что оформление пунктов здесь проще, чем в предыдущих заданиях и использовать отрицательные отступы не нужно.

В испытании используются следующие цвета:

#ffffff
#2980b9
#2c3e50
#1abc9c
#2ecc71

Подсказки: все размеры и отступы кратны 5; толщина рамок у пунктов меню 2px.

Лінк на завдання https://htmlacademy.ru/courses/50/run/9
Лінк на результат https://htmlacademy.pp.ua/vertical-menu
Лінк на codepen https://codepen.io/matviy/pen/yLyqyBe

Випробовування 15/28

Испытание: многоуровневое меню Оформите многоуровневое меню. HTML-код уже готов и его изменить невозможно.

В испытании используются следующие цвета:

#ffffff
#2980b9
#2c3e50
#1abc9c

Подсказки: все размеры и отступы кратны 5; толщина рамок у пунктов меню 2px; и у подменю, и у пунктов подменю есть свои отступы.

Лінк на завдання https://htmlacademy.ru/courses/50/run/15
Лінк на результат https://htmlacademy.pp.ua/multi-line-menu
Лінк на codepen https://codepen.io/matviy/pen/wvBxdNP