В рамках данной дисциплины Вам предстоит изучить основы клиентской веб-разработки, познакмиться с языками CSS, HTML и JS. Научиться реализовывать одностраничное приложение средствами фреймворка Vue.JS.
Общие требования ко всем работам:
- Pull Request должен иметь в названии Фамилию, Имя, Номер группы и наименование работы, которую вы хотите сдать (Пример: Иванов Иван, K33401, ПР1)
- На каждую из работ, где Вам предстоит писать код должно быть не менее 5 коммитов (учитесь коммитить правильно, подробнее об этом рассказываю здесь: https://www.youtube.com/watch?v=oXqrmsFlmiQ&list=PLAhg4XYCffElG7FpHsUtuguIwnkuvS0R9)
- За каждый день после дедлайна Вы будете терять 0.1 балла по практической работе и 0.2 балла по лабораторной работе (датой загрузки вашей работы считается дата последнего коммита по работе)
Таблица с баллами: https://docs.google.com/spreadsheets/d/1q1Dbe15wvgXhfrjA2jDs1wFq2SZ61H7_Lo1BNW8Gtsc/edit?usp=sharing
Всего в курсе 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://docs.google.com/presentation/d/1S1mwx51M38MqFZLLexr6Whq5WVaIJFIU2-hqpA-au6Q/edit?usp=sharing
Пройти две игры:
https://flexboxfroggy.com/#ru https://cssgridgarden.com/#ru
Собрать отчёт по шаблону (https://docs.google.com/document/d/1zgXRYAh9iO21NDcp5Cua3mOiNRWbAVZJBfgGiqGsMsU/edit?usp=sharing). Экспортировать в pdf и открыть Pull Request в этот репозиторий.
Дата защиты: 22.09.2021, 11:00 (защита происходит удалённо)
Дедлайн: 20.10.2021 (может быть сдвинут, зависит от того, сколько успеем пройти материала на лекции)
В рамках данной лабораторной работы Вам предложено выбрать один из нескольких вариантов. Выбранный вариант останется единым на весь курс и будет использоваться в последующих лабораторных работах.
По выбранному варианту необходимо будет выполнить вёрстку сайта средствами HTML, CSS и Bootstrap. Продумать и реализовать моменты, в которых необходим JS (например, открытие модальных окон).
Доступные варианты:
- Платформа для проведения онлайн-хакатонов (пример: https://devpost.com)
Есть несколько сущностей: жюри хакатона, участники, главный администратор, кураторы задач. У участников есть возможность выбрать одну из задач (регистрируется и имеет доступ к системе только капитан команды), после выбора задачи капитан может предложить решение, скачать какие-то файлы, которые ему предложены, посмотреть на ссылки, которые есть в задаче.
Ссылки и файлы к задачам добавляют кураторы задач через отдельный админский интерфейс, кроме того у них есть доступ к решениям, как и у членов жюри. Куратор может назначаться только на одну задачу и проводить консультации (например, в Zoom, ссылку на консультацию он крепит к самой задаче и это выводится у команды в ЛК). Жюри может оценивать решения участников, с комментариями, сортировать решения по дате публикации.
Капитан при регистрации заполняет только свои учётные данные, после в кабинете команды — он может заполнить данные по каждому участнику, название команды и какой-нибудь условный девиз/описание.
У главного админа есть доступ ко всему, но он не может добавлять команды и редактировать их решения. Так же, не имеет права оценивать решения участников. Только просматривать. Ещё он может создавать задачи, которые потом будут дополнять кураторы. Ну и назначать кураторов на задачи, разумеется.
Поскольку этот вариант является довольно объёмным и сложным — для его выполнения можно объединиться в команды по 2-3 человека, но нужно об этом заранее предупредить.
- Платформа для поиска и покупки авиабилетов (пример: https://aviasales.ru)
Реализовать вёрстку следующих страниц:
-
Вход
-
Регистрация
-
Страница билетов пользователя
-
Страница для поиска билетов с возможностью выбора пунктов вылета и прилёта (доступные билеты представлены списком в виде карточек с указанием времени, пунктов прилёта и вылета, стоимости билета и кнопки "купить", при нажатии на которую открывается модальное окно с возможностью подтверждения оплаты, после успешной покупки билет отображается на странице из пункта 3)
- Платформа для поиска и бронирования номера в отеле/квартире/хостеле (https://airbnb.com)
Реализовать вёрстку следующих страниц:
-
Вход
-
Регистрация
-
Страница бронирований пользователя
-
Страница для поиска номера с возможностью выбора города, времени заселения, количеству гостей
- Платформа для поиска профессиональных мероприятий (пример: https://www.meetup.com/ru-RU/)
Реализовать вёрстку следующих страниц:
-
Вход
-
Регистрация
-
Поиск мероприятия (фильтрации по типу мероприятия, месту проведения)
-
Календарь ближайших мероприятий
-
Промо-страница для организаторов мероприятия
-
Личный кабинет пользователя со списком мероприятий, на которые он записывался
- Сайт криптобиржи (пример: https://www.coinbase.com/ru/)
-
Вход
-
Регистрация
-
Портфель пользователя с указанием различных криптовалют и их количеством
-
Графики роста криптовалют
-
Поиск по криптовалютам с возможностью фильтрации по дате добавления на биржу
- Приложения для поиска прогноза погоды
-
Вход
-
Регистрация
-
Личный кабинет пользователя с прогнозом погоды по выбранным городам
-
Поиск прогноза погоды по введённому городу с возможностью фильтрации по населённому пункту
Для этого варианте есть усложнённая версия с применением Vue + Vuex, ссылка: https://docs.google.com/document/d/1YfzFHkJF-KoISEW6FSzHs9XcR1P_702Kkr_v80ST1hA/edit?usp=sharing
Если захотите делать её, то Вам следует меня предупредить.
- Любой сайт, который Вам интересно сверстать
Да, всё верно. Вы можете предложить свой вариант, необходимо отдельно его согласовать со мной.
Он обязательно должен включать в себя следующие страницы:
-
Вход
-
Регистрация
-
Личный кабинет пользователя
-
Страница для поиска с возможностью фильтрации
Видео-лекция: https://www.youtube.com/watch?v=sxdPf3z6Uw8
Варианты остаются прежними. Теперь Вам нужно привязать то, что Вы делали в ЛР1 к внешнему API средствами fetch/axios/xhr.
Например, для приложения для просмотра прогнозов погоды задание выглядит следующим образом:
Реализовать получение погоды (прогноз на ближайшие 7 дней) из открытого API OpenWeatherMap, взависимости от геолокации пользователя. Реализовать вывод полученного прогноза в виде 7 карточек в три ряда (первый ряд - крупная карточка, второй ряд - три карточки в меньшем размере, третий ряд - четыре карточки в маленьком размере).
Дедлайн: 10.11.2021 (дедлайн ориентировочный и может быть сдвинут)
Задание: улучшить доступность ранее реализованного сайта. Добавить необходимые HTML-атрибуты ко всему контенту на странице и проверить это с помощью инструментов из Dev Tools браузера Firefox и сервиса Google Lighthouse.
Дедлайн: 17.11.2021 (дедлайн ориентировочный и может быть сдвинут)
Отличные ролики от Вадима Макеева по этой теме:
https://www.youtube.com/watch?v=Qwuyeo7iuNY https://www.youtube.com/watch?v=8LFbS78a4Rw
Задание: выполнить темизацию ранее реализованного сайта.
Дедлайн: 24.11.2021 (дедлайн ориентировочный и может быть сдвинут)
Видео о том, как создать SVG-спрайт: https://www.youtube.com/watch?v=dPoRsolsCjA
Задание: вынести все используемые ранее SVG-иконки в общий SVG-спрайт.
Дедлайн: 01.12.2021 (дедлайн ориентировочный и может быть сдвинут)
Дата проведения: 01.12.2021 (может быть сдвинута)
Общий мануал по работе с Vue.JS на базовом уровне: https://docs.google.com/document/d/1Q2okFWi3E2SqRkKmRrBFaM6nszJKEQTe4y5_pTfS0PY/edit?usp=sharing
В рамках данной работы Вам предстоит изучить основные команды пакетного менеджера NPM и научиться стартовать проект на Vue.
Видео-лекция: https://www.youtube.com/watch?v=0jPwrj5f8no
Видео-лекция: https://www.youtube.com/watch?v=0jPwrj5f8no (то же самое видео, что и по компонентому подходу, всё верно)
Замечательный плейлист о том, что такое управление состоянием и для чего это нужно: https://www.youtube.com/watch?v=lwec8maPrrI&list=PLvTBThJr861wYlwBaaMy3tZUWpUvtJ9xE
Лабораторная работа 3: Разработка одностраничного веб-приложения (SPA) с использованием фреймворка Vue.JS
Мигрировать ранее написанный сайт на фреймворк Vue.JS.
Минимальные требования:
- Должен быть подключён роутер
- Должна быть реализована работа с внешним API
- Разумное деление на компоненты
Для закрытия курсового проекта (дедлайн 3-5 дней до даты проведения зачёта):
- Использование миксинов (необязательно, но желательно)
- Использование Vuex (необязательно, но желательно)
- В проекте должно быть, как минимум, 10 страниц (обязательно)
Дедлайн: 29.12.2021
Дата проведения: 29.12.2021