{"id":19241114,"url":"https://github.com/matviyroman/htmlacademy","last_synced_at":"2026-06-20T05:32:19.704Z","repository":{"id":96566740,"uuid":"233466877","full_name":"MatviyRoman/htmlacademy","owner":"MatviyRoman","description":"Мої проходження випробовувань в htmlacademy на 100%","archived":false,"fork":false,"pushed_at":"2020-01-14T21:17:59.000Z","size":185,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-23T14:33:27.314Z","etag":null,"topics":["htmlacademy","result-htmlacademy"],"latest_commit_sha":null,"homepage":"https://htmlacademy.pp.ua","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MatviyRoman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-12T22:15:45.000Z","updated_at":"2021-07-25T07:39:08.000Z","dependencies_parsed_at":"2023-04-12T22:39:53.470Z","dependency_job_id":null,"html_url":"https://github.com/MatviyRoman/htmlacademy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MatviyRoman/htmlacademy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatviyRoman%2Fhtmlacademy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatviyRoman%2Fhtmlacademy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatviyRoman%2Fhtmlacademy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatviyRoman%2Fhtmlacademy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MatviyRoman","download_url":"https://codeload.github.com/MatviyRoman/htmlacademy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatviyRoman%2Fhtmlacademy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34558894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["htmlacademy","result-htmlacademy"],"created_at":"2024-11-09T17:10:22.318Z","updated_at":"2026-06-20T05:32:19.697Z","avatar_url":"https://github.com/MatviyRoman.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# htmlacademy.pp.ua\nМої проходження випробовувань в htmlacademy на 100%\n\n# Випробовування 32/32\n\n# A-cat-gallery \u003ca href=\"https://htmlacademy.pp.ua/gallery\"\u003eГалерея на inline-block\u003c/a\u003e\nВипробовування: котогалерея на inline-block | Испытание: котогалерея на inline-block , яке я пройшов самостійно на 100%\n\n\nИспытание: котогалерея на inline-block\nВ этом испытании вам нужно доверстать галерею картин с котами с помощью блочно-строчных элементов.\n\nHTML-код полностью готов и заблокирован. CSS-код готов частично. Мы сделали заготовки стилей, чтобы вам не нужно было верстать всё с нуля и угадывать не относящиеся к сетке мелочи.\n\nВам нужно доверстать рамки, задать внешние и внутренние отступы элементов галереи, а также выстроить их в указанную сетку.\n\nПримените те приёмы работы с блочно-строчными элементами, которые разбирались в предыдущих заданиях.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/65/run/32\"\u003ehttps://htmlacademy.ru/courses/65/run/32\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"https://htmlacademy.pp.ua/gallery\"\u003ehttps://htmlacademy.pp.ua/gallery\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"https://htmlacademy.pp.ua/gallery\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/gallery/screen.png\" alt=\"cat gallery\" /\u003e\n\u003c/a\u003e\n\nМоє портфоліо \u003ca href=\"https://matviy.pp.ua\" style=\"color: #0f0 !important\"\u003eRoman Matviy front-end\u003c/a\u003e\n\n# Випробування 27/32\n\n# Испытание: строим сетку\nВ этом испытании задача очень простая:\n\nНужно построить схематичную сетку макета, как в образце. Вы можете писать любой HTML и любой CSS, без каких-либо ограничений.\nЕдинственная тонкость — учитывайте общую ширину макета, которая задана в body. Это сделано, чтобы упростить проверку. И не забывайте пользоваться новыми инструментами для сравнения результата и образца.\n\nКак обычно, все размеры и отступы кратны 5, а используемые цвета перечислены в комментарии в CSS.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/65/run/27\"\u003ehttps://htmlacademy.ru/courses/65/run/27\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"https://htmlacademy.pp.ua/grid\"\u003ehttps://htmlacademy.pp.ua/grid\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"https://htmlacademy.pp.ua/grid\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/grid/screen.png\" alt=\"grid htmlacademy\" /\u003e\n\u003c/a\u003e\n\n# Випробування 13/32\n\n# Испытание: пазл на флоатах\nВ качестве первого испытания мы подготовили небольшую головоломку. Суть её такова:\n\nВсе стили готовы к использованию, а редактор CSS заблокирован.\nНо вы можете изменять HTML.\nЗадача заключается в том, чтобы правильно подобрать порядок блоков.\nКонечно, головоломка сделана таким образом, чтобы вы прочувствовали все тонкости поведения флоатов. Обратите внимание, что среди блоков есть не зафлоаченный блок. И это не ошибка.\n\nНапомним об одной тонкости: для того, чтобы флоатный блок мог обтекаться обычным, он должен в коде располагаться выше обычного.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/65/run/13\"\u003ehttps://htmlacademy.ru/courses/65/run/13\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"https://htmlacademy.pp.ua/puzzle\"\u003ehttps://htmlacademy.pp.ua/puzzle\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"https://htmlacademy.pp.ua/puzzle\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/puzzle/screen.png\" alt=\"puzzle htmlacademy\" /\u003e\n\u003c/a\u003e\n\n# Випробування 8/23\n\nИспользуйте изученные свойства блочной модели для прохождения испытания, а именно:\n\nширину и высоту;\nотступы;\nрамки.\nНичего кроме размеров блоков, отступов и рамок задавать не нужно. Все размеры, которые вам нужно задать, кратны десяти. Цвет рамки блоков — white.\n\nПодобрать правильные размеры вам поможет сетка на фоне. Размеры маленькой ячейки — 20 на 20 пикселей, большой ячейки — 100 на 100 пикселей.\n\nВнутренние отступы, в отличие от заданий, здесь непрозрачные.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/44/run/8\"\u003ehttps://htmlacademy.ru/courses/44/run/8\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"https://htmlacademy.pp.ua/test8-23\"\u003ehttps://htmlacademy.pp.ua/test8-23\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"https://htmlacademy.pp.ua/test8-23\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/test8-23/screen.png\" alt=\"test 8/23 htmlacademy\" /\u003e\n\u003c/a\u003e\n\n# Випробування 16/23\n\nВторое испытание\nИспользуйте полученные знания о тонкостях блочной модели, чтобы пройти это испытание.\n\nВсе размеры, которые вам нужно задать, кратны двадцати. Цвет рамки блока — white.\n\nПодобрать правильные размеры вам поможет сетка на фоне. Размеры маленькой ячейки — 20 на 20 пикселей, большой ячейки — 100 на 100 пикселей.\n\nОбратите внимание, что HTML-код заблокирован, а некоторые CSS-свойства в нём заданы в атрибуте style. Это означает, что для решения испытания вам не нужно переопределять эти свойства, а нужно принять их как ограничения.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/44/run/16\"\u003ehttps://htmlacademy.ru/courses/44/run/16\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"hhttps://htmlacademy.pp.ua/test16-23\"\u003ehttps://htmlacademy.pp.ua/test16-23\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"hhttps://htmlacademy.pp.ua/test16-23\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/test16-23/screen.png\" alt=\"test 16/23 htmlacademy\" /\u003e\n\u003c/a\u003e\n\n# Випробування 23/23\n\nЧтобы пройти это испытание, примените знания о продвинутых типах элементов, полученные в третьей части главы.\n\nИзменять нужно только свойства, относящиеся к блочной модели.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/44/run/23\"\u003ehttps://htmlacademy.ru/courses/44/run/23\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"https://htmlacademy.pp.ua/test23-23\"\u003ehttps://htmlacademy.pp.ua/test23-23\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"https://htmlacademy.pp.ua/test23-23\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/test23-23/screen.png\" alt=\"test 23/23 htmlacademy\" /\u003e\n\u003c/a\u003e\n\n\n# Випробування 18/18\n\nИспытание: интерактивное расследование\nПришла пора испытания. Но испытание это не совсем обычное: в главе вы изучали селекторы, но CSS-код сейчас вам писать не придётся. Редактор CSS заблокирован, а в его коде используются как раз те селекторы, которые вы изучили в этой главе.\n\nВ HTML создана таблица с результатами соревнований четырёх спортсменов. В ней выводится имя участника, его очки в каждом из раундов и суммарный итог. В итоге среди спортсменов определились золотой, серебряный и бронзовый медалист, а один участник был дисквалифицирован.\n\nА что же нужно сделать? Вам нужно проанализировать CSS-код и понять, какие именно правки нужно внести в разметку, чтобы все стили применялись к ней. Вот список того, что должно быть сделано:\n\nнужно заменить некоторые теги на другие;\nнужно прописать классы для некоторых элементов.\nПодробная информация по таблицам и по оформлению текстов есть в соответствующих главах.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/42/run/18\"\u003ehttps://htmlacademy.ru/courses/42/run/18\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"https://htmlacademy.pp.ua/test18-18\"\u003ehttps://htmlacademy.pp.ua/test18-18\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"https://htmlacademy.pp.ua/test18-18\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/test18-18/screen.png\" alt=\"test 18/18 htmlacademy\" /\u003e\n\u003c/a\u003e\n\n\n# Випробування 9/28\n\nИспытание: вертикальное меню\nРазметьте и оформите вертикальное меню, используя полученные ранее знания.\n\nОбратите внимание, что оформление пунктов здесь проще, чем в предыдущих заданиях и использовать отрицательные отступы не нужно.\n\nВ испытании используются следующие цвета:\n\n\u003cspan style=\"color: #ffffff\"\u003e#ffffff\u003c/span\u003e\u003cbr\u003e\n\u003cspan style=\"color: #2980b9\"\u003e#2980b9\u003c/span\u003e\u003cbr\u003e\n\u003cspan style=\"color: #2c3e50\"\u003e#2c3e50\u003c/span\u003e\u003cbr\u003e\n\u003cspan style=\"color: #1abc9c\"\u003e#1abc9c\u003c/span\u003e\u003cbr\u003e\n\u003cspan style=\"color: #2ecc71\"\u003e#2ecc71\u003c/span\u003e\u003cbr\u003e\n\nПодсказки:\nвсе размеры и отступы кратны 5;\nтолщина рамок у пунктов меню 2px.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/50/run/9\"\u003ehttps://htmlacademy.ru/courses/50/run/9\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"https://htmlacademy.pp.ua/vertical-menu\"\u003ehttps://htmlacademy.pp.ua/vertical-menu\u003c/a\u003e\u003cbr\u003e\nЛінк на codepen \u003ca hreh=\"https://codepen.io/matviy/pen/yLyqyBe\"\u003ehttps://codepen.io/matviy/pen/yLyqyBe\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"https://htmlacademy.pp.ua/vertical-menu\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/vertical-menu/screen.png\" alt=\"vertical menu htmlacademy\" /\u003e\n\u003c/a\u003e\n\n\n# Випробовування 15/28\n\nИспытание: многоуровневое меню\nОформите многоуровневое меню. HTML-код уже готов и его изменить невозможно.\n\nОбратите внимание, что оформление пунктов здесь проще, чем в предыдущих заданиях и использовать отрицательные отступы не нужно.\n\nВ испытании используются следующие цвета:\n\n\u003cspan style=\"color: #ffffff\"\u003e#ffffff\u003c/span\u003e\u003cbr\u003e\n\u003cspan style=\"color: #2980b9\"\u003e#2980b9\u003c/span\u003e\u003cbr\u003e\n\u003cspan style=\"color: #2c3e50\"\u003e#2c3e50\u003c/span\u003e\u003cbr\u003e\n\u003cspan style=\"color: #1abc9c\"\u003e#1abc9c\u003c/span\u003e\u003cbr\u003e\n\nПодсказки:\nвсе размеры и отступы кратны 5;\nтолщина рамок у пунктов меню 2px;\nи у подменю, и у пунктов подменю есть свои отступы.\n\nЛінк на завдання \u003ca hreh=\"https://htmlacademy.ru/courses/50/run/15\"\u003ehttps://htmlacademy.ru/courses/50/run/15\u003c/a\u003e\u003cbr\u003e\nЛінк на результат \u003ca hreh=\"https://htmlacademy.pp.ua/multi-line-menu\"\u003ehttps://htmlacademy.pp.ua/multi-line-menu\u003c/a\u003e\u003cbr\u003e\nЛінк на codepen \u003ca hreh=\"https://codepen.io/matviy/pen/wvBxdNP\"\u003ehttps://codepen.io/matviy/pen/wvBxdNP\u003c/a\u003e\u003cbr\u003e\n\n\u003ca hreh=\"https://htmlacademy.pp.ua/vertical-menu\"\u003e\n\t\u003cimg src=\"https://htmlacademy.pp.ua/multi-line-menu/screen.png\" alt=\"multi line menu htmlacademy\" /\u003e\n\u003c/a\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatviyroman%2Fhtmlacademy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatviyroman%2Fhtmlacademy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatviyroman%2Fhtmlacademy/lists"}