https://github.com/pyfig/web_labs
Collection of works on the subject Web development
https://github.com/pyfig/web_labs
css html javascript labs web
Last synced: about 2 months ago
JSON representation
Collection of works on the subject Web development
- Host: GitHub
- URL: https://github.com/pyfig/web_labs
- Owner: pyfig
- Created: 2025-01-19T07:39:08.000Z (over 1 year ago)
- Default Branch: develop
- Last Pushed: 2025-02-27T12:12:25.000Z (over 1 year ago)
- Last Synced: 2025-05-17T11:11:10.377Z (about 1 year ago)
- Topics: css, html, javascript, labs, web
- Language: HTML
- Homepage:
- Size: 6.66 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Основы html:
Задания
1. Создайте файл index.html и создайте в нем основную структуру
HTML-документа.
2. Создайте на вашей странице 5 абзацев с каким-нибудь текстом. Один любой
абзац выделите жирным, а другой любой абзац - курсивом.
3. Создайте в своем файле все уровни заголовков. Посмотрите, как они выглядят в
браузере.
4. Создайте неупорядоченный список, перечислите в нем ваши хобби. Создайте
упорядоченный список, перечислите в нем список ваших пар на сегодняшний
день.
5. Создайте второй файл, разместите в нем параграф с указанием, что это второй
файл. Сделайте переход на него с основного файла index.html.
6. Разместите на странице вашего сайта какую-нибудь картинку.
7. Создайте таблицу, описывающую какой-то товар.
# Адаптивная верстка
Задания
1. Создайте родительский див с границей любого цвета, внутри него создайте три
дива-потомка с границами любого другого цвета. Сделайте потомки
флекс-элементами
2. Выровняйте флекс-элементы свойством justify-content всеми способами,
показанными на занятии (center, space-between, space-around, space-evenly,
flex-start, flex-end)
3. На практике посмотрите работу свойства flex-direction, попробуйте все
показанные вам направления (row, row-reverse, column, column-reverse)
4. На практике посмотрите работу свойства align-items, попробуйте все
показанные вам направления (flex-start, flex-end, center, stretch)
5. Повторите следующие примеры
# Основы СSS
Задание
1. По образцу создайте HTML страницу и стилизуйте ее. Примените классы и id.
2. С помощью HTML и CSS повторите следующий шаблон:
3. Повторите по образцу следующую таблицу:
4. Создать веб-страницу, которая расскажет о каком-то вашем хобби. Добавьте на
страницу различные HTML теги - заголовки, параграфы, фото, таблицы, ссылки,
нумерованные и маркированные списки. В файле CSS задайте стили для всех этих элементов. Выбор стилей для элементов на ваше усмотрение. У каждого
тега должно быть не менее трех различных стилей.
# Верстка сайта
Верстка макета по примеру (все материалы на диске https://disk.yandex.ru/d/8lP0oWqgMimfwQ)
# Задание по семантической верстке
Задание: вам необходимо создать верстку небольшого интернет-магазина. Верстка
должна быть написана с использованием семантических тегов. Добавьте стилизация
тегов, используйте флексы для выстраивания элементов.
Необходимые страницы:
* ● Главная
* ● Каталог
* ● Контакты
С каждой страницы можно перейти на другие две страницы.
Содержание главной страницы:
* ● Шапка (с названием компании, навигационным меню, контактами)
* ● Секция с популярными товарами (товары перечислить списком)
* ● Секция с новыми товарами (товары перечислить списком)
* ● Секция с коллекциями (коллекции перечислить списком)
* ● Подвал (с названием компании, политикой конфиденциальности (сделать
ссылкой на файл), контактами)
Содержание каталога:
* ● Шапка (аналогична шапке с главной страницы)
* ● Несколько карточек товара (в каждой карточке фото (при необходимости задать
размер через width или height), название, цена)
* ● Подвал (аналогичен подвалу с главной страницы)
Содержание контактов:
* ● Шапка (аналогична шапке с главной страницы)
* ● Номер телефона
* ● Почта
* ● Адрес
* ● Фото карты с адресом
* ● Подвал (аналогичен подвалу с главной страницы)
# Основы JS
Задачи
1. Пусть дана переменная r с радиусом
круга. По соответствующей формуле
найдите площадь круга и запишите ее
в переменную
s. Выведите
содержимое этой переменной на
экран.
2. Пусть дана переменная а со стороной
квадрата. Найдите площадь квадрата
и запишите ее в переменную s.
Выведите
содержимое
этой
переменной на экран.
3. Пусть даны переменные а и b со
сторонами прямоугольника. Найдите
площадь прямоугольника и запишите
ее в переменную S. Выведите
содержимое этой переменной на
экран.
4. Пусть даны переменные a и b со
сторонами прямоугольника. Найдите
периметр
прямоугольника
и
запишите его в переменную р.
Выведите
содержимое
этой
переменной на экран.
5. Пусть дана переменная tc с
температурой в градусах Цельсия. По
соответствующей
формуле
выполните перевод этой температуры
в градусы Фаренгейта.
6. Пусть дана переменная tf с
температурой в градусах Фаренгейта.
По соответствующей формуле
выполните перевод этой температуры
в градусы Цельсия.
# Верстка сайта по макету
Задание: сверстать сайт по макету. Шрифты пока брать стандартные, подберите
максимально похожий шрифт на шрифт из макета.
### Ссылка на макет: [link](https://www.figma.com/design/hdgFnzFNKYlR5i2cn6uvVx/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D1%8B?node-id=0-1&t=drP8pcsdJGqyQcwo-1)
Как работать с Figma
Чтобы просмотреть свойства элемента (размер, шрифт и т.д.), выделяем нужный
элемент, справа появляется панель свойств, где можно увидеть все свойства
элемент
2 Чтобы посмотреть отступы между элементами, выбираем элемент, зажимаем Alt и
наводим мышью на элемент, до которого нужно посмотреть расстояние. Оно
отобразиться в оранжевом прямоугольнике
3 Чтобы скачать изображение, нужно выбрать его, нажать на + у свойства Export в
панели свойств, выбрать нужный формат и нажать Export
# Условная конструкция if...else
Задачи
1. Проверьте, что переменная test больше 10. Проверьте, что переменная test
меньше 10. Проверьте, что переменная test больше или равна 10. Проверьте, что
переменная test меньше или равна 10.
2. Даны переменные test1 и test2. Проверьте, что значение какой из этих
переменных больше и выведите соответствующее сообщение.
3. Проверьте, что переменная num больше или равна 10 и меньше или равна 20.
4. В переменной day лежит какое-то число из интервала от 1 до 31. Определите в
какую декаду месяца попадает это число (в первую, вторую или третью).
5. В переменной month лежит какое-то число из интервала от 1 до 12. Определите
в какую пору года попадает этот месяц (зима, лето, весна, осень).
6. Спросите у пользователя, есть ли ему уже 18 лет. Если есть - выведите на экран
алерт с текстом, а если нет, выведите сообщение о том, что доступ пользователю
запрещен.
# DOM
Задания
1. Даны 3 кнопки:
Сделайте так, чтобы по клику на первую кнопку на экран выводилось число 1,
по клику на вторую - число 2, а по клику на третью - число 3.
2. Дана кнопка. По двойному клику по ней выведите какое-нибудь сообщение.
3. Дан абзац и кнопка. По клику на кнопку запишите в абзац новый текст.
4. Пусть у вас есть ссылка в виде тега a, кнопка и абзац. По нажатию на кнопку
выведите в абзац содержимое атрибута href ссылки.
5. Дана кнопка, значением которой служит число 1. Сделайте так, чтобы по клику
на эту кнопку ее значение каждый раз увеличивалось на единицу.
6. Дан инпут и абзац. По потери фокуса в инпуте запишите значение инпута в
конец текста абзаца.
# Коллекции Map и Set. Итераторы. Формат JSON
Задания
1. Даны инпуты. Переберите эти инпуты циклом и создайте коллекцию Map,
ключами в которой будут инпуты, а значением - их порядковый номер на
странице. Сделайте так, чтобы по клику на любой инпут ему в value
записывался его порядковый номер.
2. Даны абзацы и кнопка. Пользователь кликает на эти абзацы в произвольном
порядке. Сделайте так, чтобы по нажатию на кнопку в конец каждого абзаца, на
который был совершен клик, был добавлен восклицательный знак.
3. Дана строка в формате JSON, содержащая имена юзеров: let json =
'["user1","user2","user3","user4","user5"]'; Выведите эти имена в виде списка ul.
4. Дан следующий JSON: let json = '["user1","user2","user3","user4","user5"]';
Поменяйте имя второго юзера.
5. Дан следующий HTML:
- city1
- city2
- city3
- city4
Получите список городов в формате JSON.
# Основы ООП
Задание:
1. Изучить материал по теме “Основы ООП в JavaScript”
2. Ответить на вопросы по теме
3. Создать классы в JavaScript
Материал, вопросы и задания по созданию классов ниже в этом же файле.
Изучите теорию по ссылкам
1. https://code.mu/ru/javascript/book/oop/intro/
2. https://code.mu/ru/javascript/book/oop/classes-objects/
3. https://code.mu/ru/javascript/book/oop/objects-properties/
4. https://code.mu/ru/javascript/book/oop/many-objects/
5. https://code.mu/ru/javascript/book/oop/class-methods/
6. https://code.mu/ru/javascript/book/oop/methods-parameters/
7. https://code.mu/ru/javascript/book/oop/properties-inside-class/
8. https://code.mu/ru/javascript/book/oop/methods-inside-class/
9. https://code.mu/ru/javascript/book/oop/properties-declaration/
10. https://code.mu/ru/javascript/book/oop/class-constructor/
11. https://code.mu/ru/javascript/book/oop/constructor-parameters/
12. https://code.mu/ru/javascript/book/oop/constructor-parameters-properties/
Ответьте на вопросы
1. Как создать класс?
2. Как создать объект класса?
3. Что такое свойства объекта и как записать данные в свойства объекта?
4. Как создать метод класса?
5. Что такое конструктор и как создать его?
Выполните задания
1. Создайте класс Person, описывающий какого-либо человека, со свойствами
name, age и country. Свойства необходимо записать через параметры
конструктора класса. Также создайте метод, который будет выводить в консоль
информацию о человеке. Создайте два объекта класса Person, установите для
каждого из них значения свойств, и выведите их в консоль.
2. Создайте класс Rectangle, описывающий прямоугольник, со свойствами width и
height. Свойства необходимо записать через параметры конструктора класса.
Также создайте методы, которые будет высчитывать площадь и периметр
прямоугольника. Создайте объект класса Rectangle и высчитайте его площадь и
периметр.