В рамках данной дисциплины Вам предстоит изучить основы клиентской веб-разработки, познакмиться с языками CSS, HTML и JS. Научиться реализовывать одностраничное приложение средствами фреймворка Vue.JS.
Общие требования ко всем работам:
- Pull Request должен иметь в названии Фамилию, Имя, Номер группы и наименование работы, которую вы хотите сдать (Пример: Иванов Иван, K33401, ПР1)
- На каждую из работ, где Вам предстоит писать код должно быть несколько осмысленных коммитов (учитесь коммитить правильно, подробнее об этом рассказываю здесь: https://www.youtube.com/watch?v=oXqrmsFlmiQ&list=PLAhg4XYCffElG7FpHsUtuguIwnkuvS0R9)
- За каждый день после дедлайна Вы будете терять 0.1 балла по домашней работе и 0.2 балла по лабораторной работе (датой загрузки вашей работы считается дата последнего коммита по работе)
Таблица с баллами: ссылка
Разделы (на момент 03.09 не вся информация, размещённая в этом README является полностью актуальной, ориентироваться на неё можно только после сигнала в чате/на лекции)
Всего в курсе 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://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
Язык программирования JS: основы языка, основы работы с DOM, обработка пользовательских событий, DOM-хранилища
Видео-лекция: https://www.youtube.com/watch?v=qo8RUL1_pF8
Дедлайн: 18.10.2022
В рамках данной лабораторной работы Вам предложено выбрать один из нескольких вариантов. Выбранный вариант останется единым на весь курс и будет использоваться в последующих лабораторных работах.
По выбранному варианту необходимо будет выполнить вёрстку сайта средствами HTML, CSS и Bootstrap. Продумать и реализовать моменты, в которых необходим JS (например, открытие модальных окон).
Доступные варианты:
- Платформа для проведения онлайн-хакатонов (пример: https://devpost.com)
Есть несколько сущностей: жюри хакатона, участники, главный администратор, кураторы задач. У участников есть возможность выбрать одну из задач (регистрируется и имеет доступ к системе только капитан команды), после выбора задачи капитан может предложить решение, скачать какие-то файлы, которые ему предложены, посмотреть на ссылки, которые есть в задаче.
Ссылки и файлы к задачам добавляют кураторы задач через отдельный админский интерфейс, кроме того у них есть доступ к решениям, как и у членов жюри. Куратор может назначаться только на одну задачу и проводить консультации (например, в Zoom, ссылку на консультацию он крепит к самой задаче и это выводится у команды в ЛК). Жюри может оценивать решения участников, с комментариями, сортировать решения по дате публикации.
Капитан при регистрации заполняет только свои учётные данные, после в кабинете команды — он может заполнить данные по каждому участнику, название команды и какой-нибудь условный девиз/описание.
У главного админа есть доступ ко всему, но он не может добавлять команды и редактировать их решения. Так же, не имеет права оценивать решения участников. Только просматривать. Ещё он может создавать задачи, которые потом будут дополнять кураторы. Ну и назначать кураторов на задачи, разумеется.
Поскольку этот вариант является довольно объёмным и сложным — для его выполнения можно объединиться в команды по 2-3 человека, но нужно об этом заранее предупредить.
- Платформа для поиска профессиональных мероприятий (пример: https://www.meetup.com/ru-RU/)
Реализовать вёрстку следующих страниц:
-
Вход
-
Регистрация
-
Поиск мероприятия (фильтрации по типу мероприятия, месту проведения)
-
Календарь ближайших мероприятий
-
Страница мероприятия
-
Личный кабинет пользователя со списком мероприятий, на которые он записывался
- Сайт криптобиржи/инвестиционной платформы (пример: https://www.coinbase.com/ru/)
-
Вход
-
Регистрация
-
Портфель пользователя с указанием различных криптовалют и их количеством
-
Графики роста криптовалют
-
Поиск по криптовалютам с возможностью фильтрации по дате добавления на биржу
- Сайт администратора интернет-магазина
-
Вход
-
Регистрация
-
Учёт товара на складе
-
Графики по продажам тех или иных товаров, по общей выручке предприятия
-
Управление сотрудниками
- Любой сайт, который Вам интересно сверстать
Да, всё верно. Вы можете предложить свой вариант, необходимо отдельно его согласовать со мной.
Он обязательно должен включать в себя следующие страницы:
-
Вход
-
Регистрация
-
Личный кабинет пользователя
-
Страница для поиска с возможностью фильтрации
Видео-лекция: 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 карточек в три ряда (первый ряд - крупная карточка, второй ряд - три карточки в меньшем размере, третий ряд - четыре карточки в маленьком размере).
Дедлайн: 01.11.2022
Видео-лекция: 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.
Дедлайн: 29.11.2022
Отличные ролики от Вадима Макеева по этой теме:
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
Дедлайн: 29.11.2022
Видео о том, как создать 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-спрайт.
Дедлайн: 29.11.2022
Видео-лекция: https://www.youtube.com/watch?v=2cNj9kcbIC8 Пример, который разбирали на лекции: https://github.com/kantegory/mentoring/tree/master/10_tag_picture_example
Дата проведения: 17.11.2022-22.11.2022
Общий мануал по работе с 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
- Разумное деление на компоненты
Дата проведения: 29.12.2022