{"id":49491464,"url":"https://github.com/pyfig/web_labs","last_synced_at":"2026-05-01T06:34:02.905Z","repository":{"id":273180439,"uuid":"918911381","full_name":"pyfig/web_labs","owner":"pyfig","description":"Collection of works on the subject Web development","archived":false,"fork":false,"pushed_at":"2025-02-27T12:12:25.000Z","size":6980,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-05-17T11:11:10.377Z","etag":null,"topics":["css","html","javascript","labs","web"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/pyfig.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":"2025-01-19T07:39:08.000Z","updated_at":"2025-02-27T12:12:28.000Z","dependencies_parsed_at":"2025-01-19T09:19:04.655Z","dependency_job_id":"52970227-6521-41e9-af2e-7b7e8a57c67f","html_url":"https://github.com/pyfig/web_labs","commit_stats":null,"previous_names":["pyfig/web_labs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pyfig/web_labs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyfig%2Fweb_labs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyfig%2Fweb_labs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyfig%2Fweb_labs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyfig%2Fweb_labs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pyfig","download_url":"https://codeload.github.com/pyfig/web_labs/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyfig%2Fweb_labs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32487574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"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":["css","html","javascript","labs","web"],"created_at":"2026-05-01T06:34:02.351Z","updated_at":"2026-05-01T06:34:02.898Z","avatar_url":"https://github.com/pyfig.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Основы html:\n\nЗадания\n1. Создайте файл index.html и создайте в нем основную структуру\nHTML-документа.\n2. Создайте на вашей странице 5 абзацев с каким-нибудь текстом. Один любой\nабзац выделите жирным, а другой любой абзац - курсивом.\n3. Создайте в своем файле все уровни заголовков. Посмотрите, как они выглядят в\nбраузере.\n4. Создайте неупорядоченный список, перечислите в нем ваши хобби. Создайте\nупорядоченный список, перечислите в нем список ваших пар на сегодняшний\nдень.\n5. Создайте второй файл, разместите в нем параграф с указанием, что это второй\nфайл. Сделайте переход на него с основного файла index.html.\n6. Разместите на странице вашего сайта какую-нибудь картинку.\n7. Создайте таблицу, описывающую какой-то товар.\n\n# Адаптивная верстка\n\nЗадания\n1. Создайте родительский див с границей любого цвета, внутри него создайте три\nдива-потомка с границами любого другого цвета. Сделайте потомки\nфлекс-элементами\n2. Выровняйте флекс-элементы свойством justify-content всеми способами,\nпоказанными на занятии (center, space-between, space-around, space-evenly,\nflex-start, flex-end)\n3. На практике посмотрите работу свойства flex-direction, попробуйте все\nпоказанные вам направления (row, row-reverse, column, column-reverse)\n4. На практике посмотрите работу свойства align-items, попробуйте все\nпоказанные вам направления (flex-start, flex-end, center, stretch)\n5. Повторите следующие примеры\n\n![alt text](materials/adaptive-layout_task2.png \"Макет с адаптивной версткой\")\n\n# Основы СSS\n\nЗадание\n1. По образцу создайте HTML страницу и стилизуйте ее. Примените классы и id.\n![alt text](materials/Introduce-To-CSS-task1.png \"Образец страницы\")\n2. С помощью HTML и CSS повторите следующий шаблон:\n![alt text](materials/Black-And-White-Template.png \"Шаблон Черное/Белое\")\n3. Повторите по образцу следующую таблицу:\n![alt text](materials/Sheet.png \"Таблица по образцу\")\n\n4. Создать веб-страницу, которая расскажет о каком-то вашем хобби. Добавьте на\nстраницу различные HTML теги - заголовки, параграфы, фото, таблицы, ссылки,\nнумерованные и маркированные списки. В файле CSS задайте стили для всех этих элементов. Выбор стилей для элементов на ваше усмотрение. У каждого\nтега должно быть не менее трех различных стилей.\n\n# Верстка сайта\n\nВерстка макета по примеру (все материалы на диске https://disk.yandex.ru/d/8lP0oWqgMimfwQ)\n\n# Задание по семантической верстке\nЗадание: вам необходимо создать верстку небольшого интернет-магазина. Верстка\nдолжна быть написана с использованием семантических тегов. Добавьте стилизация\nтегов, используйте флексы для выстраивания элементов.\nНеобходимые страницы:\n*     ● Главная\n*     ● Каталог\n*     ● Контакты\nС каждой страницы можно перейти на другие две страницы.\nСодержание главной страницы:\n*     ● Шапка (с названием компании, навигационным меню, контактами)\n*     ● Секция с популярными товарами (товары перечислить списком)\n*     ● Секция с новыми товарами (товары перечислить списком)\n*     ● Секция с коллекциями (коллекции перечислить списком)\n*     ● Подвал (с названием компании, политикой конфиденциальности (сделать\nссылкой на файл), контактами)\nСодержание каталога:\n*     ● Шапка (аналогична шапке с главной страницы)\n*     ● Несколько карточек товара (в каждой карточке фото (при необходимости задать\n      размер через width или height), название, цена)\n*     ● Подвал (аналогичен подвалу с главной страницы)\nСодержание контактов:\n*     ● Шапка (аналогична шапке с главной страницы)\n*     ● Номер телефона\n*     ● Почта\n*     ● Адрес\n*     ● Фото карты с адресом\n*     ● Подвал (аналогичен подвалу с главной страницы)\n\n# Основы JS \nЗадачи\n1. Пусть дана переменная r с радиусом\n   круга. По соответствующей формуле\n   найдите площадь круга и запишите ее\n   в переменную\n   s. Выведите\n   содержимое этой переменной на\n   экран.\n2. Пусть дана переменная а со стороной\n   квадрата. Найдите площадь квадрата\n   и запишите ее в переменную s.\n   Выведите\n   содержимое\n   этой\n   переменной на экран.\n3. Пусть даны переменные а и b со\n   сторонами прямоугольника. Найдите\n   площадь прямоугольника и запишите\n   ее в переменную S. Выведите\n   содержимое этой переменной на\n   экран.\n4. Пусть даны переменные a и b со\n   сторонами прямоугольника. Найдите\n   периметр\n   прямоугольника\n   и\n   запишите его в переменную р.\n   Выведите\n   содержимое\n   этой\n   переменной на экран.\n5. Пусть дана переменная tc с\n   температурой в градусах Цельсия. По\n   соответствующей\n   формуле\n   выполните перевод этой температуры\n   в градусы Фаренгейта.\n6. Пусть дана переменная tf с\n   температурой в градусах Фаренгейта.\n   По соответствующей формуле\n   выполните перевод этой температуры\n   в градусы Цельсия.\n\n# Верстка сайта по макету\nЗадание: сверстать сайт по макету. Шрифты пока брать стандартные, подберите\nмаксимально похожий шрифт на шрифт из макета.\n### Ссылка на макет: [link](https://www.figma.com/design/hdgFnzFNKYlR5i2cn6uvVx/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D1%8B?node-id=0-1\u0026t=drP8pcsdJGqyQcwo-1)\nКак работать с Figma\nЧтобы просмотреть свойства элемента (размер, шрифт и т.д.), выделяем нужный\nэлемент, справа появляется панель свойств, где можно увидеть все свойства\nэлемент\n2 Чтобы посмотреть отступы между элементами, выбираем элемент, зажимаем Alt и\nнаводим мышью на элемент, до которого нужно посмотреть расстояние. Оно\nотобразиться в оранжевом прямоугольнике\n3 Чтобы скачать изображение, нужно выбрать его, нажать на + у свойства Export в\nпанели свойств, выбрать нужный формат и нажать Export\n\n\n# Условная конструкция if...else\n\nЗадачи\n1. Проверьте, что переменная test больше 10. Проверьте, что переменная test\n   меньше 10. Проверьте, что переменная test больше или равна 10. Проверьте, что\n   переменная test меньше или равна 10.\n2. Даны переменные test1 и test2. Проверьте, что значение какой из этих\n   переменных больше и выведите соответствующее сообщение.\n3. Проверьте, что переменная num больше или равна 10 и меньше или равна 20.\n4. В переменной day лежит какое-то число из интервала от 1 до 31. Определите в\n   какую декаду месяца попадает это число (в первую, вторую или третью).\n5. В переменной month лежит какое-то число из интервала от 1 до 12. Определите\n   в какую пору года попадает этот месяц (зима, лето, весна, осень).\n6. Спросите у пользователя, есть ли ему уже 18 лет. Если есть - выведите на экран\n   алерт с текстом, а если нет, выведите сообщение о том, что доступ пользователю\n   запрещен.\n\n# DOM\n\nЗадания\n1. Даны 3 кнопки:\n   \u003cinput id=\"button1\" type=\"submit\"\u003e\n   \u003cinput id=\"button2\" type=\"submit\"\u003e\n   \u003cinput id=\"button3\" type=\"submit\"\u003e\n   Сделайте так, чтобы по клику на первую кнопку на экран выводилось число 1,\n   по клику на вторую - число 2, а по клику на третью - число 3.\n2. Дана кнопка. По двойному клику по ней выведите какое-нибудь сообщение.\n3. Дан абзац и кнопка. По клику на кнопку запишите в абзац новый текст.\n4. Пусть у вас есть ссылка в виде тега a, кнопка и абзац. По нажатию на кнопку\n   выведите в абзац содержимое атрибута href ссылки.\n5. Дана кнопка, значением которой служит число 1. Сделайте так, чтобы по клику\n   на эту кнопку ее значение каждый раз увеличивалось на единицу.\n6. Дан инпут и абзац. По потери фокуса в инпуте запишите значение инпута в\n   конец текста абзаца.\n\n# Коллекции Map и Set. Итераторы. Формат JSON\n\nЗадания\n1. Даны инпуты. Переберите эти инпуты циклом и создайте коллекцию Map,\nключами в которой будут инпуты, а значением - их порядковый номер на\nстранице. Сделайте так, чтобы по клику на любой инпут ему в value\nзаписывался его порядковый номер.\n2. Даны абзацы и кнопка. Пользователь кликает на эти абзацы в произвольном\nпорядке. Сделайте так, чтобы по нажатию на кнопку в конец каждого абзаца, на\nкоторый был совершен клик, был добавлен восклицательный знак.\n3. Дана строка в формате JSON, содержащая имена юзеров: let json =\n'[\"user1\",\"user2\",\"user3\",\"user4\",\"user5\"]'; Выведите эти имена в виде списка ul.\n4. Дан следующий JSON: let json = '[\"user1\",\"user2\",\"user3\",\"user4\",\"user5\"]';\nПоменяйте имя второго юзера.\n5. Дан следующий HTML:\n\u003cul\u003e\n\u003cli\u003ecity1\u003c/li\u003e\n\u003cli\u003ecity2\u003c/li\u003e\n\u003cli\u003ecity3\u003c/li\u003e\n\u003cli\u003ecity4\u003c/li\u003e\n\u003c/ul\u003e\nПолучите список городов в формате JSON.\n\n# Основы ООП\nЗадание:\n1. Изучить материал по теме “Основы ООП в JavaScript”\n2. Ответить на вопросы по теме\n3. Создать классы в JavaScript\nМатериал, вопросы и задания по созданию классов ниже в этом же файле.\nИзучите теорию по ссылкам\n1. https://code.mu/ru/javascript/book/oop/intro/\n2. https://code.mu/ru/javascript/book/oop/classes-objects/\n3. https://code.mu/ru/javascript/book/oop/objects-properties/\n4. https://code.mu/ru/javascript/book/oop/many-objects/\n5. https://code.mu/ru/javascript/book/oop/class-methods/\n6. https://code.mu/ru/javascript/book/oop/methods-parameters/\n7. https://code.mu/ru/javascript/book/oop/properties-inside-class/\n8. https://code.mu/ru/javascript/book/oop/methods-inside-class/\n9. https://code.mu/ru/javascript/book/oop/properties-declaration/\n10. https://code.mu/ru/javascript/book/oop/class-constructor/\n11. https://code.mu/ru/javascript/book/oop/constructor-parameters/\n12. https://code.mu/ru/javascript/book/oop/constructor-parameters-properties/\nОтветьте на вопросы\n1. Как создать класс?\n2. Как создать объект класса?\n3. Что такое свойства объекта и как записать данные в свойства объекта?\n4. Как создать метод класса?\n5. Что такое конструктор и как создать его?\nВыполните задания\n1. Создайте класс Person, описывающий какого-либо человека, со свойствами\nname, age и country. Свойства необходимо записать через параметры\nконструктора класса. Также создайте метод, который будет выводить в консоль\nинформацию о человеке. Создайте два объекта класса Person, установите для\nкаждого из них значения свойств, и выведите их в консоль.\n2. Создайте класс Rectangle, описывающий прямоугольник, со свойствами width и\nheight. Свойства необходимо записать через параметры конструктора класса.\nТакже создайте методы, которые будет высчитывать площадь и периметр\nпрямоугольника. Создайте объект класса Rectangle и высчитайте его площадь и\nпериметр.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyfig%2Fweb_labs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpyfig%2Fweb_labs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyfig%2Fweb_labs/lists"}