В рамках данной дисциплины Вам предстоит изучить основы клиентской веб-разработки, познакмиться с языками CSS, HTML и JS. Научиться реализовывать одностраничное приложение средствами фреймворка Vue.JS.

Общие требования ко всем работам:

• Pull Request должен иметь в названии Фамилию, Имя, Номер группы и наименование работы, которую вы хотите сдать (Пример: Иванов Иван, K33401, ПР1)
• На каждую из работ, где Вам предстоит писать код должно быть несколько осмысленных коммитов (учитесь коммитить правильно, подробнее об этом рассказываю здесь: https://www.youtube.com/watch?v=oXqrmsFlmiQ&list=PLAhg4XYCffElG7FpHsUtuguIwnkuvS0R9)
• За каждый день после дедлайна Вы будете терять 0.1 балла по домашней работе и 0.2 балла по лабораторной работе (датой загрузки вашей работы считается дата последнего коммита по работе)

Таблица с баллами: ссылка

Всего в курсе 3 раздела:

1. Введение в проблематику клиентской веб-разработки
2. Взаимодействие с внешним API. HTML-доступность. Углубленное изучение CSS
3. Разработка одностраничного веб-приложения (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://docs.google.com/document/d/1zgXRYAh9iO21NDcp5Cua3mOiNRWbAVZJBfgGiqGsMsU/edit?usp=sharing). Экспортировать в pdf и открыть Pull Request в этот репозиторий.

Дедлайн: 27.09.2022

Видео-лекция: https://www.youtube.com/watch?v=xtC6l5-q4yU

Пример: https://github.com/kantegory/mentoring/tree/master/17_adaptive_example

Видео-лекция: https://www.youtube.com/watch?v=J1bMExplCAw&t=757s

Видео-лекция: https://www.youtube.com/watch?v=qo8RUL1_pF8

Дедлайн: 18.10.2022

В рамках данной лабораторной работы Вам предложено выбрать один из нескольких вариантов. Выбранный вариант останется единым на весь курс и будет использоваться в последующих лабораторных работах.

По выбранному варианту необходимо будет выполнить вёрстку сайта средствами HTML, CSS и Bootstrap. Продумать и реализовать моменты, в которых необходим JS (например, открытие модальных окон).

Доступные варианты:

1. Платформа для проведения онлайн-хакатонов (пример: https://devpost.com)

Есть несколько сущностей: жюри хакатона, участники, главный администратор, кураторы задач. У участников есть возможность выбрать одну из задач (регистрируется и имеет доступ к системе только капитан команды), после выбора задачи капитан может предложить решение, скачать какие-то файлы, которые ему предложены, посмотреть на ссылки, которые есть в задаче.

Ссылки и файлы к задачам добавляют кураторы задач через отдельный админский интерфейс, кроме того у них есть доступ к решениям, как и у членов жюри. Куратор может назначаться только на одну задачу и проводить консультации (например, в Zoom, ссылку на консультацию он крепит к самой задаче и это выводится у команды в ЛК). Жюри может оценивать решения участников, с комментариями, сортировать решения по дате публикации.

Капитан при регистрации заполняет только свои учётные данные, после в кабинете команды — он может заполнить данные по каждому участнику, название команды и какой-нибудь условный девиз/описание.

У главного админа есть доступ ко всему, но он не может добавлять команды и редактировать их решения. Так же, не имеет права оценивать решения участников. Только просматривать. Ещё он может создавать задачи, которые потом будут дополнять кураторы. Ну и назначать кураторов на задачи, разумеется.

Поскольку этот вариант является довольно объёмным и сложным — для его выполнения можно объединиться в команды по 2-3 человека, но нужно об этом заранее предупредить.

2. Платформа для поиска профессиональных мероприятий (пример: https://www.meetup.com/ru-RU/)

Реализовать вёрстку следующих страниц:

• Вход

• Регистрация

• Поиск мероприятия (фильтрации по типу мероприятия, месту проведения)

• Календарь ближайших мероприятий

• Страница мероприятия

• Личный кабинет пользователя со списком мероприятий, на которые он записывался

3. Сайт криптобиржи/инвестиционной платформы (пример: https://www.coinbase.com/ru/)

• Вход

• Регистрация

• Портфель пользователя с указанием различных криптовалют и их количеством

• Графики роста криптовалют

• Поиск по криптовалютам с возможностью фильтрации по дате добавления на биржу

4. Сайт администратора интернет-магазина

• Вход

• Регистрация

• Учёт товара на складе

• Графики по продажам тех или иных товаров, по общей выручке предприятия

• Управление сотрудниками

5. Любой сайт, который Вам интересно сверстать

Да, всё верно. Вы можете предложить свой вариант, необходимо отдельно его согласовать со мной.

Он обязательно должен включать в себя следующие страницы:

• Вход

• Регистрация

• Личный кабинет пользователя

• Страница для поиска с возможностью фильтрации

Видео-лекция: https://www.youtube.com/watch?v=sxdPf3z6Uw8

Видео-лекция: https://www.youtube.com/watch?v=G6C6xMWrjS4

Видео-лекция: https://www.youtube.com/watch?v=_3YLqewhII0&t=297s

Варианты остаются прежними. Теперь Вам нужно привязать то, что Вы делали в ЛР1 к внешнему API средствами fetch/axios/xhr.

Например, для приложения для просмотра прогнозов погоды задание выглядит следующим образом:

Реализовать получение погоды (прогноз на ближайшие 7 дней) из открытого API OpenWeatherMap, взависимости от геолокации пользователя. Реализовать вывод полученного прогноза в виде 7 карточек в три ряда (первый ряд - крупная карточка, второй ряд - три карточки в меньшем размере, третий ряд - четыре карточки в маленьком размере).

Дедлайн: 25.10.2022

Задание: улучшить доступность ранее реализованного сайта. Добавить необходимые HTML-атрибуты ко всему контенту на странице и проверить это с помощью инструментов из Dev Tools браузера Firefox и сервиса Google Lighthouse.

Дедлайн: 17.11.2022 (дедлайн ориентировочный и может быть сдвинут)

Отличные ролики от Вадима Макеева по этой теме:

https://www.youtube.com/watch?v=Qwuyeo7iuNY https://www.youtube.com/watch?v=8LFbS78a4Rw

Задание: выполнить темизацию ранее реализованного сайта.

Дедлайн: 24.11.2022 (дедлайн ориентировочный и может быть сдвинут)

Видео о том, как создать SVG-спрайт: https://www.youtube.com/watch?v=dPoRsolsCjA

Задание: вынести все используемые ранее SVG-иконки в общий SVG-спрайт.

Дедлайн: 01.12.2022 (дедлайн ориентировочный и может быть сдвинут)

Дата проведения: 01.12.2022 (может быть сдвинута)

Общий мануал по работе с 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

Мигрировать ранее написанный сайт на фреймворк Vue.JS.

Минимальные требования:

• Должен быть подключён роутер
• Должна быть реализована работа с внешним API
• Разумное деление на компоненты

Дата проведения: 29.12.2022