В рамках данной дисциплины Вам предстоит изучить основы клиентской веб-разработки, познакмиться с языками 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://docs.google.com/presentation/d/1aGx_L9KO1T50vMapIcewjgbvB2n-cOmtmgED8h-yqa4/edit?usp=sharing
Текстовая лекция: https://blog.kantegory.me/frontend-html-basics
Видео-лекция: https://youtu.be/XOdffiTNHW8
Презентация: https://docs.google.com/presentation/d/10Bo6hPBCzyKDZllZSSASIcWIsqG4Hx0_ZLH0f01zeFc/edit?usp=sharing
Текстовая лекция: https://blog.kantegory.me/frontend-html-semantics
Видео-лекция: https://youtu.be/3Ea8OkMunyU
Презентация: https://docs.google.com/presentation/d/12XGe0u1SJu7PkGuYCl_V_sIpYhhs3iZ2OYAdd07Or3o/edit?usp=sharing
Текстовая лекция: https://blog.kantegory.me/frontend-css-basics
Видео-лекция: https://youtu.be/EZhU1VidGVY
Видео по селекторам с примерами: https://www.youtube.com/watch?v=onoRgoj0Xus
Презентация: https://docs.google.com/presentation/d/1S1mwx51M38MqFZLLexr6Whq5WVaIJFIU2-hqpA-au6Q/edit?usp=sharing
Пройти три игры:
- 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 в этот репозиторий.
Дедлайн: 25.09.2023
Видео-лекция: https://www.youtube.com/watch?v=xtC6l5-q4yU
Презентация: https://docs.google.com/presentation/d/16FAdeODKJXs5nQRrUCc26hIiimL2RzireuiEaWQBc6s/edit?usp=sharing
Пример: 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
Дедлайн: 09.10.2023
В рамках данной лабораторной работы Вам предложено выбрать один из нескольких вариантов. Выбранный вариант останется единым на весь курс и будет использоваться в последующих лабораторных работах.
По выбранному варианту необходимо будет выполнить вёрстку сайта средствами 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&t=437s
Варианты остаются прежними. Теперь Вам нужно привязать то, что Вы делали в ЛР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://www.youtube.com/watch?v=lwec8maPrrI&list=PLvTBThJr861wYlwBaaMy3tZUWpUvtJ9xE
Лабораторная работа 3: Разработка одностраничного веб-приложения (SPA) с использованием фреймворка Vue.JS
Мигрировать ранее написанный сайт на фреймворк Vue.JS.
Минимальные требования:
- Должен быть подключён роутер
- Должна быть реализована работа с внешним API
- Разумное деление на компоненты
Дата проведения: -