https://github.com/matviyroman/htmlacademy
Мої проходження випробовувань в htmlacademy на 100%
https://github.com/matviyroman/htmlacademy
htmlacademy result-htmlacademy
Last synced: about 1 month ago
JSON representation
Мої проходження випробовувань в htmlacademy на 100%
- Host: GitHub
- URL: https://github.com/matviyroman/htmlacademy
- Owner: MatviyRoman
- Created: 2020-01-12T22:15:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-14T21:17:59.000Z (over 6 years ago)
- Last Synced: 2025-02-23T14:33:27.314Z (over 1 year ago)
- Topics: htmlacademy, result-htmlacademy
- Language: CSS
- Homepage: https://htmlacademy.pp.ua
- Size: 181 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
Подобрать правильные размеры вам поможет сетка на фоне. Размеры маленькой ячейки — 20 на 20 пикселей, большой ячейки — 100 на 100 пикселей.
Обратите внимание, что 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
