В рамках данной дисциплины Вам предстоит изучить основы клиентской веб-разработки, познакмиться с языками CSS, HTML и JS. Научиться реализовывать одностраничное приложение средствами фреймворка Vue.JS.
Общие требования ко всем работам:
- Pull Request должен иметь в названии Фамилию, Имя, Номер группы и наименование работы, которую вы хотите сдать (Пример: Иванов Иван, K33401, ПР1)
- На каждую из работ, где Вам предстоит писать код должно быть несколько осмысленных коммитов (учитесь коммитить правильно, подробнее об этом рассказываю здесь: https://www.youtube.com/watch?v=oXqrmsFlmiQ&list=PLAhg4XYCffElG7FpHsUtuguIwnkuvS0R9)
- За каждый день после дедлайна Вы будете терять 0.1 балла по домашней работе и 0.2 балла по лабораторной работе (датой загрузки вашей работы считается дата последнего коммита по работе)
В зависимости от того, какую работу вы загружаете: лабораторную или домашнюю нужно выбрать директорию homeworks или labs. Далее надо выбрать директорию, соответствующую номеру своей группы. В ней создать директорию в формате Фамилия Имя, куда уже загружать свои работы, каждую из работ стоит также загружать в отдельную директорию внутри вашей собственной, например: hw1/Отчёт.pdf. Полный путь для студента Иванова Ивана из группы K33392, желающего загрузить домашнюю работу номер 1, должен выглядеть следующим образом: homeworks/K33392/Иванов Иван/hw1/Отчёт.pdf.
- Современный учебник JavaScript: https://learn.javascript.ru/
- Дока: https://doka.guide/
- MDN: https://developer.mozilla.org/ru/
- Мой YouTube: https://youtube.com/@dobryakov
- Мой телеграм-канал: https://t.me/davidobryakov
Всего в курсе 3 раздела:
- Введение в проблематику клиентской веб-разработки
- Взаимодействие с внешним API. HTML-доступность. Углубленное изучение CSS
- Разработка одностраничного веб-приложения (SPA) с использованием фреймворка Vue.JS
Введение: https://youtu.be/_hzVKyRHKN8
Презентация: https://disk.yandex.ru/i/ilCu5uV4ReO-YA
Текстовая лекция: https://blog.kantegory.me/frontend-html-basics
Видео-лекция: https://youtu.be/XOdffiTNHW8
Презентация: https://disk.yandex.ru/i/ZNS7Fm-Prj5-yw
Текстовая лекция: https://blog.kantegory.me/frontend-html-semantics
Видео-лекция: https://youtu.be/3Ea8OkMunyU
Презентация: https://disk.yandex.ru/i/r30dub3G_hvjtQ
Текстовая лекция: https://blog.kantegory.me/frontend-css-basics
Видео-лекция: https://youtu.be/EZhU1VidGVY
Видео по селекторам с примерами: https://www.youtube.com/watch?v=onoRgoj0Xus
Презентация: https://disk.yandex.ru/i/9rXhDS7ZUnJsLw
Пройти три игры:
- https://flexboxfroggy.com/#ru
- https://cssgridgarden.com/#ru
- https://learngitbranching.js.org/?locale=ru_RU (основы работы с git, достаточно выполнить первые 4 урока + все уроки по удалённым репозиториям)
Собрать отчёт по шаблону (https://docs.google.com/document/d/1zgXRYAh9iO21NDcp5Cua3mOiNRWbAVZJBfgGiqGsMsU/edit?usp=sharing). Экспортировать в pdf и открыть Pull Request в этот репозиторий.
Дедлайн: 27.09.2024
Видео-лекция: https://www.youtube.com/watch?v=xtC6l5-q4yU
Презентация: https://disk.yandex.ru/i/gui-dByJGaPubA
Пример: https://github.com/kantegory/mentoring/tree/master/17_adaptive_example
Видео-лекция: https://www.youtube.com/watch?v=J1bMExplCAw&t=757s
Статья про длинный и короткий контент: https://ishadeed.com/article/css-short-long-content/.
Язык программирования JS: основы языка, основы работы с DOM, обработка пользовательских событий, DOM-хранилища
Видео-лекция: https://www.youtube.com/watch?v=qo8RUL1_pF8
Дедлайн: 25.10.24
В рамках данной лабораторной работы Вам предложено выбрать один из нескольких вариантов. Выбранный вариант останется единым на весь курс и будет использоваться в последующих лабораторных работах.
По выбранному варианту необходимо будет выполнить вёрстку сайта средствами HTML, CSS и Bootstrap. Продумать и реализовать моменты, в которых необходим JS (например, открытие модальных окон).
Доступные варианты:
-
Приложение для бронирования столиков в ресторанах
- Вход
- Регистрация
- Личный кабинет пользователя
- Поиск ресторанов с фильтрацией по кухне, расположению и цене
- Страница с информацией о ресторане (меню, фото, отзывы)
- История бронирований пользователя
-
Сайт для поиска работы
- Вход
- Регистрация
- Личный кабинет пользователя (с резюме)
- Поиск вакансий с фильтрацией по отрасли, зарплате, опыту
- Страница с деталями вакансии (описание, требования, компания)
- Личный кабинет работодателя (управление вакансиями)
-
Платформа для фитнес-тренировок и здоровья
- Вход
- Регистрация
- Личный кабинет пользователя (трекинг прогресса, планы тренировок)
- Поиск тренировок с фильтрацией по уровню, типу (кардио, силовые) и продолжительности
- Страница тренировки с видео, описанием и инструкциями
- Блог о здоровье и питании
-
Сервис для аренды недвижимости
- Вход
- Регистрация
- Личный кабинет пользователя (список арендованных и арендующихся объектов)
- Поиск недвижимости с фильтрацией по типу, цене, расположению
- Страница объекта недвижимости с фото, описанием и условиями аренды
- История сообщений и сделок пользователя
-
Сервис для обмена рецептами и кулинарных блогов
- Вход
- Регистрация
- Личный кабинет пользователя (сохраненные рецепты, публикации)
- Поиск рецептов с фильтрацией по типу блюда, сложности, ингредиентам
- Страница рецепта с фото, пошаговыми инструкциями и видео
- Социальные функции (комментарии, лайки, подписки на кулинаров)
-
Свой вариант (необходимо отдельно согласовать)
Каждый из сайтов обязательно должен включать в себя следующие страницы:
-
Вход
-
Регистрация
-
Личный кабинет пользователя
-
Страница для поиска с возможностью фильтрации
Видео-лекция: https://www.youtube.com/watch?v=sxdPf3z6Uw8
Видео-лекция: https://www.youtube.com/watch?v=G6C6xMWrjS4
Видео-лекция: https://www.youtube.com/watch?v=_3YLqewhII0
Видео-лекция: https://www.youtube.com/watch?v=_yvw_tAUGZw
Варианты остаются прежними. Теперь Вам нужно привязать то, что Вы делали в ЛР1 к внешнему API средствами fetch/axios/xhr.
Например, для приложения для просмотра прогнозов погоды задание выглядит следующим образом:
Реализовать получение погоды (прогноз на ближайшие 7 дней) из открытого API OpenWeatherMap, взависимости от геолокации пользователя. Реализовать вывод полученного прогноза в виде 7 карточек в три ряда (первый ряд - крупная карточка, второй ряд - три карточки в меньшем размере, третий ряд - четыре карточки в маленьком размере).
Дедлайн: -
Видео-лекция: https://www.youtube.com/watch?v=HYc0xGTDFzI
Ссылки:
Статья на developers.google: https://developers.google.com/web/fundamentals/accessibility?hl=ru Большой раздел на MDN: https://developer.mozilla.org/ru/docs/Learn/Accessibility/HTML Примеры того, как делать не надо: https://www.htmhell.dev/
Задание: улучшить доступность ранее реализованного сайта. Добавить необходимые HTML-атрибуты ко всему контенту на странице и проверить это с помощью инструментов из Dev Tools браузера Firefox и сервиса Google Lighthouse.
Дедлайн: -
Отличные ролики от Вадима Макеева по этой теме:
https://www.youtube.com/watch?v=Qwuyeo7iuNY
https://www.youtube.com/watch?v=8LFbS78a4Rw
Видео-лекция: https://www.youtube.com/watch?v=aKeJuUKTWPI
Пример из видео-лекции: https://github.com/kantegory/mentoring/tree/master/08_themization_example/
Задание: выполнить темизацию ранее реализованного сайта.
Видео-лекция: https://www.youtube.com/watch?v=aKeJuUKTWPI Пример, который разбирали на лекции: https://github.com/kantegory/mentoring/tree/master/08_themization_example
Дедлайн: -
Видео о том, как создать SVG-спрайт: https://www.youtube.com/watch?v=dPoRsolsCjA
Видео-лекция: https://www.youtube.com/watch?v=2cNj9kcbIC8
Пример, который разбирали на лекции: https://github.com/kantegory/mentoring/tree/master/09_svg_sprite_example
Задание: вынести все используемые ранее SVG-иконки в общий SVG-спрайт.
Дедлайн: -
Видео-лекция: https://www.youtube.com/watch?v=2cNj9kcbIC8
Пример, который разбирали на лекции: https://github.com/kantegory/mentoring/tree/master/10_tag_picture_example
Дата проведения: -
Общий мануал по работе с Vue.JS на базовом уровне: https://docs.google.com/document/d/187UkgGNrcWqkb2aCGpkHTLgeozoElMqdVgVGMBOC9gk/edit?usp=sharing
Дедлайн: -
В рамках данной работы Вам предстоит изучить основные команды пакетного менеджера NPM и научиться стартовать проект на Vue.
Видео-лекция: https://youtu.be/0jPwrj5f8no
Пример: https://github.com/kantegory/mentoring/tree/master/19_frontend_router
Видео-лекция: https://www.youtube.com/watch?v=0jPwrj5f8no (то же самое видео, что и по компонентому подходу, всё верно)
Презентация: https://disk.yandex.ru/i/vB_CmxGKVxVvKA
Замечательный плейлист о том, что такое управление состоянием и для чего это нужно: https://www.youtube.com/watch?v=lwec8maPrrI&list=PLvTBThJr861wYlwBaaMy3tZUWpUvtJ9xE
Лабораторная работа 3: Разработка одностраничного веб-приложения (SPA) с использованием фреймворка Vue.JS
Дедлайн: - Крайний срок проверки работ: 18.01.2024
Мигрировать ранее написанный сайт на фреймворк Vue.JS.
Минимальные требования:
- Должен быть подключён роутер
- Должна быть реализована работа с внешним API
- Разумное деление на компоненты
- Использование composable
Дата проведения: -