0% нашли этот документ полезным (0 голосов)
3 просмотров1 страница

Fullstack Developer

Документ представляет собой полную программу курса для обучения на должность Fullstack разработчика, охватывающую 466 часов обучения. Курс состоит из нескольких модулей, включая HTML, CSS, адаптивный веб-дизайн, JavaScript и проектную работу, с акцентом на практическое применение технологий и инструментов. Каждый модуль включает темы, цели занятий и домашние задания, направленные на развитие навыков веб-разработки.

Загружено:

adilet.05.j
Авторское право
© All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате PDF, TXT или читать онлайн в Scribd
0% нашли этот документ полезным (0 голосов)
3 просмотров1 страница

Fullstack Developer

Документ представляет собой полную программу курса для обучения на должность Fullstack разработчика, охватывающую 466 часов обучения. Курс состоит из нескольких модулей, включая HTML, CSS, адаптивный веб-дизайн, JavaScript и проектную работу, с акцентом на практическое применение технологий и инструментов. Каждый модуль включает темы, цели занятий и домашние задания, направленные на развитие навыков веб-разработки.

Загружено:

adilet.05.j
Авторское право
© All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате PDF, TXT или читать онлайн в Scribd

Полная программа

Fullstack
developer
Fullstack developer

Длительность курса: 466 часов

1 ступень. HTML_CSS

Модуль 1. Введение в Web

Тема 1 Цель занятия


Введение в Web познакомиться;
обсудить программу;
узнать историю развития веба, об основных технологиях,
рассматриваемых на курсе и их место в общей картине современного
интернета;
разобрать необходимые инструменты для начала работы (фигма,
редактор кода и его настройка).

Краткое содержание
1. организационные вопросы
2. история WWW. зачем изобрели Web.
3. изучаемые на курсе технологии
4.инструменты
- фигма
- редактор кода на примере VSCode
- онлайн-редактор кода
- инспектор кода в браузере

Тема 2 Цель занятия


Version Control научиться работать с системой контроля версий Git;
работа в GitHub;
как сдавать домашние работы на курсе.

Краткое содержание
– Что такое и на чем основано версионирование?
– Как установить и настроить гит на разные ОС
– Терминал в VSCode
– Локальная работа с изменениями через терминал (git add, git status,
git commit, git branch, git checkout)
– Решение мерж-конфликтов
– Использование встроенных возможностей редактора для работы с
гит вместо терминала
– Регистрация и создание репозитория на GitHub
– Работа с удаленным и локальным репозиториями
– Плагины и клиенты (GitHub desktop) для помощи в работе
– Редактирование файлов markdown на примере [Link]å

Домашние задания
Система контроля версий
Цель
В этом ДЗ вы научитесь настраивать git.

Тема 3 Цель занятия


Основы HTML, создать html разметку страницы, используя подходящие;
семантичность семантические теги.

Краткое содержание
основы HTML:
способы создания HTML страниц,
инструменты работы,
редактор VSCode,
онлайн редакторы на примере [Link],
стандарт и где искать ответы на вопросы;
введение в семантическую разметку:
что это такое и почему важно,
доступность,
упражнение на разметку,
нюансы разметки, инспектор кода Chrome DevTools.

Домашние задания
Семантическая разметка страницы
Цель
В этом ДЗ вы поработаете с семантической версткой. Создадите html
файл и добавите в него весь текстовый контент для его дальнейшей
стилизации

Тема 4 Цель занятия


Основы CSS рассмотреть историю появления стилей;
как писать css сегодня;
научиться применять наследование, каскадность в написании
правил;
узнать про специфичность;
стиль написания понятного css-кода.

Краткое содержание
три вида написания CSS:
inline-стили в разметке,
тег style,
CSS файл;
браузерные стили;
наследование, каскадность, специфичность;
как происходит рендеринг HTML страницы - Render Tree;
инспектор кода Chrome DevTools.

Тема 5 Цель занятия


Типографика рассмотреть основы типографики и научиться применять шрифтовые
свойства

Краткое содержание
узнать что такое типографика;
научиться подключать шрифты по ссылке и локально;
базовая работа со шрифтами и единицы измерения (px, em, rem).

Домашние задания
Основы работы со шрифтами и их css-свойствами
Цель
Научиться писать css-правила, подбирать подходящие названия
классов, применять наследование и каскадность на примере
оформления текстовых элементов. Научиться подключать шрифты
локально и по ссылке на Google Fonts

Тема 6 Цель занятия


Box model в деталях обсудить, как браузер рассчитывает высоту и ширину элемента:
типы элементов: блочные и строчные,
свойства display, margin, border, padding, box-sizing, width, height,
рассмотреть особенности размещения элементов на странице;
сделать упражнение на размещение.

Краткое содержание
что такое блочная модель и как влияют на размеры элементов
различные свойства;
свойства display, margin, border, padding, box-sizing, width, height;
блочные и строчные элементы;
инлайн блоки на примере меню/соцсетей;
как применять универсальный селектор *;
практическое задание.

Тема 7 Цель занятия


Консультация по ДЗ - получить ответы на вопросы по ДЗ

Краткое содержание
- вопросы по улучшению и оптимизации работы над ДЗ;
- трудности при выполнении ДЗ;

Тема 8 Цель занятия


Selector priority Научиться считать приоритеты правил и структурировать свои стили
в соответствии с ними

Краткое содержание
- специфичность и приоритеты правил
- ключевое слово !important
- значение inherit

Модуль 2. Layouts (макеты)

Тема 1 Цель занятия


Layout: введение, научиться "читать" сетку макета;
основы понимать как строить ее универсально для всего сайта;
знать про понятие PixelPerfect, уметь верстать резиново.

Краткое содержание
модульная сетка;
верстка PixelPerfect - за и против;
базовый лейаут с центровщиком margin: 0 auto;
как сделать изображение фоновым;
резиновость (%, vw, wh), свойства max-width, min-width.

Тема 2 Цель занятия


Позиционирование рассмотреть возможности свойства position;
элементов в деталях фиксированное меню при прокрутке сайта.

Краткое содержание
свойство position: relative, absolute, fixed, sticky и координатные
свойства;
как центрировать элемент с помощью position и transform;
как закрепить навигацию при прокрутке страницы;
практическое задание.

Тема 3 Цель занятия


Flexbox layout рассмотреть flexbox layout.

Краткое содержание
все о flexbox layout.

Домашние задания
Использование flex для оформления секции Biography
Цель
В этом задании вам необходимо сверстать секцию макета Biography,
используя flex

Тема 4 Цель занятия


Grid layout рассмотреть grid layout.

Краткое содержание
все о grid layout.

Домашние задания
Применение grid для оформления секции Testimonials
Цель
В этом задании вам необходимо сверстать секцию макета
Testimonials, используя гриды

Тема 5 Цель занятия


Workshop по сеткам получить навык самостоятельной работы с технологиями

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

Домашние задания
Выбор подходящего способа расположения элементов
Цель
В данном задании вам предстоит самостоятельно выбрать
подходящую на ваш взгляд технологию для расположения
элементов секции Designers

Тема 6 Цель занятия


Консультация по ДЗ - получить ответы на вопросы по ДЗ

Краткое содержание
- вопросы по улучшению и оптимизации работы над ДЗ;
- трудности при выполнении ДЗ;

Тема 7 Цель занятия


Поддержка узнать о поддержке браузеров, что такое fallbacks и как их создавать
браузеров, новые
технологии и fallbacks

Краткое содержание
что такое и зачем нужны fallbacks;
совместимость браузеров с современными CSS технологиями;
сервис caniuse;
новые технологии, к которым уже пора присмотреться;
дирректива @supports;
вендорные префиксы и автопрефиксер.

Домашние задания
Вёрстка с fallback
Цель
В этом задании вам необходимо сверстать последнюю секцию
Strong points, выбрав подходящую на ваш взгляд технологию

Модуль 3. Адаптивный веб-дизайн

Тема 1 Цель занятия


Введение в media уметь писать media queries, знать как выбрать точки перестроения,
queries знать отличие адаптивной и отзывчивой верстки

Краткое содержание
1. Media queries
- как правильно писать media-rules
- как применять media-feature
- как правильно тестировать media queries с browserstack, xcode,
android studio.
2. единицы размера вьюпорта
3. классические breakpoints
4. резиновая, адаптивная и отзывчивая верстка

Тема 2 Цель занятия


Mobile-first vs обсудить как правильно организовывать медиа-запросы.
desktop-first знать и понимать подходы Mobile/Desktop first

Краткое содержание
подходы mobile-first vs desktop-first,
организация css-кода,
тестирование верстки,
адаптивные изображения, тег picturer.

Домашние задания
Адаптивная верстка макета
Цель
В этом занятии вы начнете адаптировать макет под планшет и
мобильный

Тема 3 Цель занятия


Особенности рассмотреть особенности верстки для мобильных браузеров;
мобильной верстки рассмотреть что такое retina-краны
почему пиксель - это не пиксель;
некоторые моменты usability мобильных интерфейсов.

Краткое содержание
CSS для мобильных браузеров
1. верстка мобильного меню
2. Нюансы мобильного css
3. Оптимизация
- Шрифтов (вариативные, display: swap)
- Графики (picture)

Модуль 4. Pro верстка

Тема 1 Цель занятия


Организация кода по обсудить как правильно организовывать номенклатуру CSS;
БЭМ линтеры.

Краткое содержание
методология BEM, как применять на практике, сервис проверки имен
классов, линтеры.

Домашние задания
Применение БЭМ
Цель
В этом ДЗ вы попробуете использовать компонентный подход в
соответствии с БЭМ-методологией

Тема 2 Цель занятия


Препроцессоры использовать препроцессоры на примере Sass (SCSS).

Краткое содержание
что такое препроцессор, плагин для VSCode, базовые возможности
scss: переменные, математические и др. операции;
вложенность и наследование селекторов, миксины, импорт.

Домашние задания
Bootstrap
Цель
В этом ДЗ вы разработаете новый макет.

Тема 3 Цель занятия


Всплывающие верстать модальные окна и попапы, тег dialog.
элементы

Краткое содержание
что такое модальное окно и поп-ап;
какими способами их можно реализовать;
тег dialog для верстки модальных окон.

Домашние задания
Tailwind
Цель
В этом ДЗ вы разработаете макет.

Тема 4 Цель занятия


Разметка форм корректно размечать формы с помощью form, input, textarea, fieldset,
label и др. и работать с атрибутами полей форм.

Краткое содержание
как правильно размечать формы;
теги form, input, textarea, fieldset, label и другие;
как работать с атрибутами элементов форм.

Тема 5 Цель занятия


Микро-сетки и знать микро сетки для небольших элементов, псевдоэлементы
декоративные before/after;
элементы работать с иконками FontAwesome и svg.

Краткое содержание
микро сетки для небольших элементов, псевдоэлементы before/after,
иконки FontAwesome и svg.

Домашние задания
Добавление анимаций
Цель
В этом ДЗ вы добавите анимации для элементов сайта.

Тема 6 Цель занятия


Стилизация работать со стилизацией полей ввода, чекбоксов и радио;
элементов форм псевдоклассы hover, focus, active, valid, invalid и др.

Краткое содержание
как происходит стилизация полей ввода, чекбоксов и радио;
что такое псевдоклассы hover, focus, active, valid, invalid и др.

Тема 7
Консультация по ДЗ

Тема 8 Цель занятия


Анимации CSS: использовать анимации transition;
transition. использовать свойство transform для анимаций;
оптимизация свойств для анимаций с точки зрения процесса
рендеринга страницы.

Краткое содержание
transform и оптимизация свойств для анимаций с точки зрения
процесса рендеринга страницы;
transition по наведению и фокусу на элемент;
кривые безье для временной функции;
простые примеры переходов при наведении на элемент.

Модуль 5. Работа с библиотеками

Тема 1 Цель занятия


Анимации CSS: знать анимации animation, библиотеки для работы с анимациями.
animation

Краткое содержание
свойство animation;
отличие от переходов;
как создавать анимации;
библиотеки готовых анимаций.

Домашние задания
Настройка окружения
Цель
Установить Node JS, научится устанавливать пакеты для проекта

Тема 2 Цель занятия


Компонентный подход обсудить как работать с Bootstrap.
в Bootstrap

Краткое содержание
компоненты в Bootstrap, использование адаптивных сеток.

Тема 3 Цель занятия


Атомарные классы в обсудить как работать с Tailwind.
Tailwind

Краткое содержание
что такое атомарный css на примере библиотеки Tailwind.

Домашние задания
Webpack
Цель
Научиться автоматизировать процессы с помощью Webpack

Модуль 6. Проектная работа

Тема 1
Консультация по ДЗ и Домашние задания
проектной работе

Оптимизация ассетов
Цель
Научиться оптимизировать графику, шрифты, минимизировать стили
и js-код

Тема 2 Цель занятия


Выбор темы и выбрать и обсудить тему проектной работы;
организация спланировать работу над проектом;
проектной работы ознакомиться с регламентом работы над проектом.

Краткое содержание
правила работы над проектом и специфика проведения итоговой
защиты;
требования к результату проекта и итоговой документации.

Домашние задания
Проектная работа
Цель
В этом ДЗ необходимо утвердить в чате по ДЗ тему проекта (для всех -
Mod studio), разработать презентацию о личных итогах курса,
презентовать проект и прислать ссылку на задеплоенную итоговую
версию. В файле [Link] должна быть вся информация о проекте:
как запустить сборку, есть ли ветки с отдельными фичами, что не
задеплоены в мастер.

Тема 3 Цель занятия


Защита проектных защитить проект и получить рекомендации экспертов.
работ

Краткое содержание
презентация проектов перед комиссией;
вопросы и комментарии по проектам.

2 ступень. JavaScript Basic

Модуль 1. Базовый JavaScript. Работа с GIT и


настройка окружения

Тема 1 Цель занятия


Введение в курс + описать процессы: как задавать вопросы, как сдавать домашки,
основы JS и практика какие требования, использование редакторов + типовой подход к
работе с домашками (ветка -> пуллреквест -> ревью).

Краткое содержание
google;
stackoverflow;
github issues;
slack.

Домашние задания
Знакомство
Цель
[Link]
basic/blob/master/lessons/lesson01/[Link]

Тема 2 Цель занятия


Базовый синтаксис писать базовые скрипты на javascript;
JavaScript: основы, создавать программы обрабатывающие ввод от пользователя и
базовые операции, делать вывод на странице.
ветвления и базовая
алгоритмизация

Краткое содержание
переменные;
циклы;
условные ветвления;
функции;
объекты;
ввод / вывод.

Тема 3 Цель занятия


Объектная модель в поработать с объектами, их свойствами, понятие прототипа.
Javascript

Краткое содержание
объекты как ссылочный тип данных;
proto;
работа с proto;
конструирование объектов с помощью [Link].

Домашние задания
JS-коаны - решение типовых задач на использование базового
синтаксиса
Цель
По итогам занятий вы будете свободнее оперировать базовыми
операциями на языке JavaScript.

В ходе выполнения задания вы поработаете с двумя репозиториями,


которые содержат в себе типичные задачи, с которыми сталкивается
любой разработчик каждый день, потренируете навыки поиска
ответов (и задавания вопросов) и сдадите свою первую домашнюю
работу с кодом

Работать вы будете с двумя репозиториями

[Link]

[Link]

Тема 4 Цель занятия


Прототипное научиться использовать прототипы для уменьшения дублирования
наследование и кода;
функции- разобраться с работой конструкторов с точки зрения прототипов.
конструкторы

Краткое содержание
прототипы;
конструкторы.

Домашние задания
Практика кодирования
Цель
Целью домашнего задания является закрепление навыков
написания кода, а также получение опыта работы в среде описанной
тестами.

Тема 5 Цель занятия


Консультация ответы на вопросы, разбор дополнительных тем.

Краткое содержание
ответить на возникшие вопросы.

Тема 6 Цель занятия


Контекст при работе с разобраться с понятием контекста;
функциями разобрать, чем определяется значение this;
разобрать способы управления this.

Краткое содержание
this;
this внутри callback функций;
изменение и фиксация контекста;
стрелочные функции.

Тема 7 Цель занятия


Консультация и ответить на возникшие вопросы, если вопросов нет - сессия парного
практическое занятие кодинга со студентами с решением задач на getProperty / myBind /
sum().

Краткое содержание
решить возникшие вопросы.

Тема 8 Цель занятия


Базовое научиться работать со страницей;
использование API и разобрать общие принципы и примеры использования API на
JavaScript. Как примере синхронных интерфейсов;
работать с DOM и узнать как управлять внешним видом страницы и сохранять данные.
другими доступными
API

Краткое содержание
api;
DOM;
fetch;
localstorage;
createElement.

Тема 9 Цель занятия


Базовое разобраться как на практике работать с асинхронными ресурсами
использование (на примере запросов к удаленным API) и как это использовать для
асинхронных API в создания страниц с использованием внешних источников данных.
Javascript

Краткое содержание
api;
DOM;
fetch;
localstorage;
createElement.

Тема 10 Цель занятия


Тестирование кода научиться тестировать код.
как часть процесса
разработки

Краткое содержание
testing;
tdd;
jest;
mock;
PR pipeline.

Тема 11 Цель занятия


Пример применения разобрать пример того, как тестирование может быть применено к
тестирования к домашним заданиям.
домашним заданиям

Краткое содержание
с чего начинать тестирование;
как обрабатывать взаимодействие с DOM в тестах.

Тема 12
Консультация по ДЗ

Тема 13 Цель занятия


Выбор темы и выбрать и обсудить тему проектной работы;
организация спланировать работу над проектом;
проектной работы ознакомиться с регламентом работы над проектом.

Краткое содержание
правила работы над проектом и специфика проведения итоговой
защиты;
требования к результату проекта и итоговой документации.

Тема 14 Цель занятия


Использование СКВ: работать с git/github;
задачи и решения объяснить и использовать feature-branch подход, работать с
пуллреквестами.

Краткое содержание
git;
gitignore;
PR;
review;
resolve conflicts;
github actions;
настройки репозитория;
автодеплой (с примером codesandbox).

Тема 15 Цель занятия


Типовой порядок разобрать как использовать СКВ Git при работе на курсе (над
разработки с домашними заданиями и финальными проектам).
использованием Git

Краткое содержание
совместное выполнение действий по созданию репозитория и
выполнению основных операций с ним.

Тема 16 Цель занятия


Код как «проект» - создавать nodejs проект;
артефакты работы устанавливать зависимости, различать обычные и dev-зависимости,
разработчика. использовать cli утилиты из npmjs.
Зависимости и
утилиты в стеке
JavaScript

Краткое содержание
npm project;
[Link];
dependencies/ devdependencies;
npm vs npx.

Тема 17 Цель занятия


Консультация. Разбор получить ответы на вопросы.
сложных моментов в
выполнении
домашних заданий.
Пример применения
TDD в практике
разработки

Краткое содержание
tdd;
rgr цикл.

Тема 18 Цель занятия


Итоги по синтаксису проверить знание js на основе списка задач с собеседований;
JS. Что делать, если ответить на возникающие вопросы.
что-то не работает?
Где искать
документацию и
помощь. Решение
вопросов по текущим
домашним заданиям

Краткое содержание
debug;
console / dev tools;
caniuse.

Тема 19 Цель занятия


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

Краткое содержание
stack;
queue;
callbacks;
promise;
async / await.

Тема 20 Цель занятия


Современный разобрать и посмотреть на примере какие инструменты упрощают
инструментарий при жизнь разработчика:
разработке дев-сервер;
клиентских (и не хот-релоад;
только приложений) дебаггер;
browsersync;
github pages.

Краткое содержание
webpack;
reload;
browsersync;
githubpages.

Модуль 2. Создание и стилизация HTML


страниц

Тема 1 Цель занятия


Инструменты настроить локальный HTTP сервер, browsersync;
разработки. использовать puppeteer для тестирования скриншотами;
Тестирование использовать медиазапросы для адаптивной верстки.
верстки,
использование
медиазапросов

Краткое содержание
node-static;
browser-sync;
adaptive design;
mobile first.

Тема 2 Цель занятия


Консультация по ДЗ - получить ответы на вопросы по ДЗ

Краткое содержание
- вопросы по улучшению и оптимизации работы над ДЗ;
- трудности при выполнении ДЗ;

Модуль 3. Применение JavaScript/Typescript


для создания интерактивных страниц

Тема 1 Цель занятия


Создание объяснить, как устроены подключаемые плагины (например.
подключаемых bootstrap);
плагинов разобрать подходы к разработке улучшателей пользовательского
опыта.

Краткое содержание
подключение js на страницу;
декларативное и императивное использование плагинов;
плагины / сторонние скрипты;
интеграция и использование плагинов.

Домашние задания
Разработать слайдер, который подключается к странице и позволяет
получить аналог boostrap carusel
Цель
В результате выполнения ДЗ вы создадите свою подключаемую
библиотеку, которую в дальнейшем сможете использовать на своих
страницах

В задании тренируются навыки


- работы с DOM элементами из javascript
- стилизация DOM-элементов

Тема 2 Цель занятия


Различие между объяснить разницу ES5/ES9/TS;
стандартами языка, объяснить зачем нужен babel / webpack.
инструменты
транспиляции,
проблемы типизации

Краткое содержание
typescript;
basic types;
tsc и настройка tsconfig;
types;
babel.

Тема 3
Консультация по ДЗ

Тема 4 Цель занятия


Настройка окружения настроить webpack для разработки на TS;
для современной объяснить, как typescript помогает при работе с документацией.
разработки на TS,
использование
документации,
настройка тестового
окружения

Краткое содержание
webpack + ts;
read ts typings;
editor + typings.

Домашние задания
Настроить webpack для работы с typescript, добавить конфигурацию к
eslint, решить задачи по типам/TS
Цель
В результате выполнения ДЗ вы создадите базовый скелет для
дальнейшей разработки. Он будет включать в себя настройку babel,
webpack, typescript

В задании тренируются навыки


- настройки окружения
- создания проекта с 0

Тема 5 Цель занятия


Консультация обсудить обновление представлений, подходы к реализации,
реактивность;
объяснить, какие есть подходы к организации обновления шаблонов;
научиться реализовать некоторые из них.

Краткое содержание
императивноие и реактивное программирование;
способы передачи параметров через атрибуты;
принципы устройства virtual dom;
api классовых компонентов.

Домашние задания
Реализовать и применить компонент для существующего проекта
Цель
Тренируем работы с презентационным слоем. Добавим к
приложению, которое вы уже разработали немножко изящества

Тема 6 Цель занятия


ООП в JavaScript разобраться для чего используется ООП;
рассказать про основные принципы, используемые при работе с
объектно-ориентированным подходом.

Краткое содержание
абстракция;
классы и наследование классов.

Тема 7 Цель занятия


Основы рассмотреть очередь задач в JS;
функциональной использовать функции как First Level Citizens, отличать чистые
разработки функции и понимать их преимущества.

Краткое содержание
очередь задач и стек вызовов;
чистые функции;
functions as first citizens.

Домашние задания
Реализация типовых задач с использованием OOП / ФП с покрытием
кода тестами
Цель
В этом задании мы попрактикуемся в работе с typescript и jest

В ходе работы тренируются


- работа с типами
- решение типовых задач разработки
- написание тестов

Тема 8 Цель занятия


Консультация по ДЗ - получить ответы на вопросы по ДЗ

Краткое содержание
- вопросы по улучшению и оптимизации работы над ДЗ;
- трудности при выполнении ДЗ;

Тема 9 Цель занятия


Разбор базовых объяснить какие инструменты Typescript покрывают 80% задач, и как
приемов разработки это спасает при разработке проектов.
на Typescript - типы,
интерфейсы,
перечисления и
прочее

Краткое содержание
types;
interfaces;
function types;
nominal types typescript symbol.

Тема 10 Цель занятия


Разработка объяснить правила использования асинхронного API;
собственного API научиться документировать свой API, следовать соглашениям по
разработке.

Краткое содержание
async API (когда и как?);
callback vs promise interface;
соглашение error-first.

Домашние задания
Разработка API для работы с календарем задач - CRUD, фильтрация и
поиск
Цель
В этом задании вы потренируете в разработке собственного API для
своих библиотек

Тема 11 Цель занятия


Разработка рассмотреть задачи, стоящие перед шаблонизаторами;
шаблонизатора объяснить, как организовать основной функционал.

Краткое содержание
template engine;
regular expressions;
handlebars / lodash templates.

Тема 12
Консультации Домашние задания

Решить задачи на типизацию + типизировать код с прошлого шага


Цель
В результате выполнения ДЗ вы
- потренеруете работу с типами TS
- посмотрите, где тебе могут пригодиться utility types

Модуль 4. Структурирование программ на


JavaScript

Тема 1 Цель занятия


Mediator и рассмотреть важность низкой связанности кода;
EventEmitter как объяснить, как ее можно обеспечить;
инструмент объяснить, как EventEmitter может помочь в организации модульного
организации кода приложения.

Краткое содержание
связность и связанность кода;
EventEmitter и EventBus.

Тема 2 Цель занятия


Управление объяснить назначение систем state management;
состоянием объяснить api redux, реализовать функционал redux.
приложения,
разработка redux

Краткое содержание
state management;
redux pattern;
redux api.

Домашние задания
Разработать и покрыть тестами redux-api, реализовать
combineReducer
Цель
В результате выполнения ДЗ
- лучше изучите API redux
- разберетесь для чего нужны те или иные его функции
- потренируетесь писать обобщенный код (предназначенный для
решения типовых задач)

Тема 3 Цель занятия


REST, RPC и сетевые разобраться с вариантами реализации сетевых подключений (XHR,
запросы fetch, WS);
разобраться с разницей REST, RPC;
посмотреть на возмонжые варианты работы с запросами с среде
redux (thunks, action driven requests).

Краткое содержание
xhr, fetch, ws;
rest, rpc;
thunks;
запросы управляемы экшенами.

Тема 4 Цель занятия


Работа с объяснить назначение middlewares;
асинхронными actions реализовать redux-thunk.
в redux

Краткое содержание
middleware;
redux-thunk;
side effect.

Домашние задания
Разработать приложение "чат" на основе redux
Цель
В процессе выполнения задания вы попрактикуетесь в работе с сайд-
эффектами в redux-системах, потренируете работу с redux-thunk

Модуль 5. Разработка одностраничных


приложений

Тема 1 Цель занятия


Клиентский роутинг, объяснить, какие API можно использовать для организации SPA,
как строится знать алгоритм создания роутера.
одностраничное
приложение

Краткое содержание
history api;
hash api;
роутинг.

Домашние задания
Разработка библиотеки клиентского роутинга
Цель
В этом задании вы освоите работу с Hash/History API и узнаете как
устроены важные части любого клиентского фреймворка - роутеры
При выполнении задания вы потренируете
- умение струкрутировать код
- работу с браузерными API
- тестирование кода, связанного с сайд-эффектами в бразере

Тема 2 Цель занятия


«Особенности деплоя разобрать какие настройки нужно сделать, чтобы успешно деплоить
и сборки приложения с history api на публичные сервисы
одностраничных
приложений»

Краткое содержание
fallback;
настройка webpack.

Тема 3 Цель занятия


Консультация по ДЗ - получить ответы на вопросы по ДЗ

Краткое содержание
- вопросы по улучшению и оптимизации работы над ДЗ;
- трудности при выполнении ДЗ;

Тема 4 Цель занятия


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

Краткое содержание
чем удобно использование redux в сравнении с хуками и свойствами
роутов;
подписка на обновления redux;
подключение к работе шаблонизатора.

Тема 5 Цель занятия


Консультация получить ответы на вопросы.

Краткое содержание
решение задач.

Домашние задания
Разработка сайта-календаря и использованием клиенского роутинга
Цель
Теперь у вас есть возможность опробовать вашу библиотеку роутинга
на практике.

Модуль 6. Разработка с использованием


[Link]

Тема 1 Цель занятия


Что такое React, JSX, объяснить, какую задачу решает React, базовый API React;
настройка окружения объяснить, что такое JSX;
настроить окружение для разработки на React.

Краткое содержание
react;
jsx;
babel + react;
storybook;
cra.

Тема 2 Цель занятия


Умные и глупые различать умные и глупые компоненты;
компоненты в разрезе объяснить, как организовать иерархию компонентов.
React

Краткое содержание
smart component;
dumb component;
state.

Домашние задания
Разработка библиотеки компонентов
Цель
В этом задании мы начинаем работать с библиотекой React. Вы
настроите проект, узнаете как работать с Storybook и потренируетесь
создавать компоненты

Тема 3 Цель занятия


Жизненный цикл рассмотреть жизненный цикл компонента;
классовых использовать его для загрузки данных;
компонентов использовать функциональные компоненты с хуками.

Краткое содержание
lifecycle hooks;
react hooks;
где грузить данные.

Тема 4 Цель занятия


Функциональные Разобрать как обрабатывать события жизненного цикла с
компоненты использованием функциональных компонентов и хуков

Краткое содержание
- концепт хуков
- основные хуки React
- как хуки соотносятся с методами классовых компонентов

Тема 5 Цель занятия


Совместное настроить связку React-redux.
использование React
и redux

Краткое содержание
react-redux;
connect.

Тема 6 Цель занятия


Роутинг и ленивая настроить роутинг в React, использовать [Link] для ленивой
загрузка страниц при загрузки компонентов.
работе с React

Краткое содержание
react-router;
react-lazy.

Домашние задания
Приложение для учета расходов
Цель
В результате работы вы создадите прототип приложения для учета
расходов

Здесь вы на практике используйте свои наработки из прошлых


заданий, плюс поработаете с подключением и использвоанием
новых библиотек

В процессе работы вы потренируете


- использование сторонних (и своих) библиотек
- работу с клиентским роутингом в реакте

Модуль 7. Основы разработки на [Link]

Тема 1 Цель занятия


Сферы применения объяснить, что такое Nodejs;
[Link], отличия от рассмотреть аналоги знакомых инструментов для работы с nodejs
разработки в (nodemon, debugger и тп).
браузере

Краткое содержание
nodejs framework;
common js;
debugger;
nodemon.

Домашние задания
Написать консольное приложение для публикации страниц на github
Цель
В результате работы вы
- познакомитесь поближе с консольными командами и тем, как они
могут делать полезную работу
- создадите консольное приложение, которое принимает параметры
через аргументы командной строки или через ввод от пользователя
- создадите инструмент, который сможете сами использовать и
дорабатывать в дальнейшем

Тема 2 Цель занятия


Консультация по ДЗ - получить ответы на вопросы по ДЗ

Краткое содержание
- вопросы по улучшению и оптимизации работы над ДЗ;
- трудности при выполнении ДЗ;

Модуль 8. Сопровождение кода

Тема 1 Цель занятия


Презентация работы - создать привлекательный README, оформлять репозиторий и
что сделать, чтобы пакеты при публикации
было хорошо

Краткое содержание
readme badges;
readme rules;
настройка readme для гитхаб профиля (расширенная информация на
странице).

Домашние задания
Создать приложение-игру крестики-нолики с поддержкой
многопользовательской игры
Цель
В результате выполнения ДЗ вы создадите базовый WS-сервер, с
поддержкой подключения клиентов, узнаете как общаться чреез WS
и как настраивать выполнение серверного javascript. Потренируете
навыки разработки в контексте многопользовательской работы и
используете redux не только на клиенте

Тема 2
Карьерное
консультирование

Тема 3 Цель занятия


Консультация по ДЗ и получить ответы на вопросы по проекту, ДЗ и по курсу.
проектной работе

Краткое содержание
вопросы по улучшению и оптимизации работы над проектом;
затруднения при выполнении ДЗ;

Модуль 9. Проектная работа

Тема 1 Цель занятия


Защита проектных защитить проект и получить рекомендации экспертов.
работ

Краткое содержание
презентация проектов перед комиссией;
вопросы и комментарии по проектам.

3 ступень. JavaScript
Professional

Модуль 1. JavaScript

Тема 1 Цель занятия


Введение в курс: познакомиться с преподавателем и с программой курса, понимать
знакомство с как она построена и какие полезные навыки получите;
программой, объяснить основные возможности языка JavaScript;
командой курса применять техники языка, которые помогут при изучении
фреймворков.

Краткое содержание
организационные вопросы по курсу;
типы данных;
переменные;
функции;
замыкания.

Домашние задания
Задача про список рекомендаций maxItemAssociation
Цель
Написать алгоритм для нахождения максимального списка
рекомендаций.

Тема 2 Цель занятия


Новинки стандарта рассмотреть фичи языка ES6+;
провести краткий обзор ООП в JavaScript.

Краткое содержание
новые и ключевые особенности ES6+;
наследование в JS;
введение в ООП;
паттерны ООП в JS.

Тема 3 Цель занятия


Асинхронные решать специфичные для браузерной разработки задачи на языке
паттерны JavaScript;
освоить и вспомнить теорию, которая будет базисом для
последующих уроков;
попрактиковаться с Promise.

Краткое содержание
Async Patterns;
Callbacks;
Timeouts, Tasks & Microtasks;
Promises;
Iterators;
Generators;
Async Iterators;
обзор ES6 Features.

Тема 4 Цель занятия


Введение в [Link] и запускать приложения на платформе Node;
NPM писать и запускать тесты для серверного JavaScript;
работать с пакетным менеджером NPM;
управлять зависимостями и автоматизировать задачи с помощью
[Link].

Краткое содержание
Node:
About;
пример Web сервера;
структура;
стандартные модули;
примеры Callbacks.
пакетный менеджер `npm`:
возможности `[Link]`;
CLI.

Тема 5 Цель занятия


Функциональное разбираться в основах функционального программирования и
программирование спецификах применения паттернов функционального
программирования в JavaScript.

Краткое содержание
введение в функциональное программирование;
история ФП-Lisp;
почему ФП ""можно""?;
теория; чистые функции, функциональные методы;
Side Effects;
инструменты от lodash до ramda;
отладка функционального кода;
карирование Currying;
монады;
примеры задач - практика;
выводы.

Тема 6 Цель занятия


Работа с браузером вспомнить, как работает DOM API и Events;
работать с Chrome Dev Tools;
решать специфичные для браузерной разработки задачи на языке
JavaScript.

Краткое содержание
DOM API;
Events.
DevTools.

Домашние задания
promiseReduce - работа с асинхронными функциями
Цель
Написать функцию

promiseReduce(asyncFunctions, reduce, initialValue)

asyncFunctions - массив асинхронных функций, возвращающих


промис
reduce(memo, value) - функция, которая будет вызвана для каждого
успешно завершившегося промиса.
initialValue - стартовое значение для функции reduce

promiseReduce последовательно вызывает переданные асинхронные


функции
и выполняет reduce функцию сразу при получении результата до
вызова следующей асинхронной функции. Функция promiseReduce
должна возвращать промис с конечным результатом.

Тема 7 Цель занятия


Web Components ориентироваться в веб спецификациях Custom Elements и Shadow
DOM;
создавать custom elements, используя встроенные браузерные
возможности;
использовать HTML Template для шаблонизации компонент.
использовать особенности Lit-HTML для создания приложений;
объяснить принципы Polymer;

Краткое содержание
Custom Elements:
Standalone Elements;
Built-in Elements;
LifeCycle Hooks.
Shadow DOM:
DOM;
Slots;
Styles.
Web Standards:
HTML Template;
Script Type Module;
ES6 Templates Literals.
Lit-HTML:
Lit-Element;
pwa-starter-kit;

Тема 8 Цель занятия


Bulid tools: Vite, обсудить как работает Vite;
Webpack, Rollup обсудить как работает Webpack;
различать Parcel и Rollup;
обсудить, что такое и как использовать babel;
использовать eslint.

Краткое содержание
системы сборки и тестирование;
Vite;
Webpack;
системы сборки и тестирование.

Домашние задания
getPath - поиск уникального селектора
Цель
В ходе выполнения ДЗ студент напишет алгоритм и функцию
`getPath()`, находяющую уникальный css-селектор для элемента в
документе.

Модуль 2. [Link]

Тема 1 Цель занятия


Основные концепции использовать require, exports и ES6 Imports для экспорта и импорта
Node - Modules зависимостей.

Краткое содержание
modules;
pattern;
classic;
AMD;
commonJS;
ES Modules;
Native ES Modules - Gil Tayar.

Тема 2 Цель занятия


Стандартная ориентироваться в понятии EventLoop и особенностях работы Timers;
библиотека Node - использовать классы, объекты и функции модуля Streams;
EventLoop - Timers работать c HTTP запросами в Node.

Краткое содержание
events;
event Loop;
timers.

Домашние задания
tree - вывод списка файлов и папок файловой системы
Цель
В ходе выполнения ДЗ студент выведет список файлов и папок
файловой системы.

Тема 3 Цель занятия


Работка с потоками - работать с дочерними процессами в Node;
Streams различать корректные и ошибочные техники при написании;
серверного JavaScript кода.

Краткое содержание
streams: примеры и типы потоков, API, Pipe, Iterable Streams;

Домашние задания
Работа с потоками в NodeJS
Цель
В ходе выполнения ДЗ студент поработает с потоками в NodeJS.

Тема 4 Цель занятия


HTTP Server разобраться в том, как устроен Web;
обсудить тонкости протоколов;

Краткое содержание
- Введение в протоколы и термины:
• TCP/IP, Addresses, Ports
• HTTP(s) Protocols
• сертификаты
• Cookies, Headers & Body
• HTTP2, HTTP3
• DNS
- инструменты для работы с различиными Web протоколами.
- стандартная библиотека [Link];
- модули HTTP(S), TCP;
- простейший сервер на [Link]

Тема 5 Цель занятия


Web-сервер с Express использовать стандартнтую библиотеку [Link] для веб сервера;
разбираться и понимать структуру и концепции Express - middlewares,
templates, routing;
создавать приложения с использованием Express;
обрабатывать ошибки в [Link] приложениях.

Краткое содержание
стандартная библиотека [Link];
модули HTTP(S), TCP;
Express: introduction, concepts, routing, middleware, template;
стэк MEAN;
обработка ошибок в [Link];
Express error handlers;
тестирование веб сервера с [Link] - supertest.

Тема 6 Цель занятия


Построение Rest API с Добавлять общие стандарты создания API;
Express Объяснить REST, принципы построения API;
Проанализировать технологии аутентификации в веб приложениях.

Краткое содержание
Что такое REST?
• методы, коды ошибок;
• express, swagger;
• express Middlewares для аутентификации и авторизации;
• сессии и куки, jwt;
• обзор функций аутентификации, [Link].

Тема 7 Цель занятия


Введение в TypeScript различать TypeScript и JavaScript, использовать преимущества
статической типизации;
писать и понимать код на языке TypeScript, разрабатывать
приложения в полноценном объектно-ориентированном стиле.

Краткое содержание
введение в TypeScript: некоторые примеры, инструменты,
`[Link]`.
типы: простые, сложные, классы;
другие особенности.

Тема 8 Цель занятия


Особенности проанализировать специальные особенности TypeScript;
TypeScript разбираться в Namespaces, Generics, Decorators, Type Definitions,
Metadata;
применять типы и декораторы.

Краткое содержание
подведем итоги дизайна и разработки в Node;
namespaces;
generics;
Advanced Types;
Decorators: Metadata.

Тема 9 Цель занятия


Web-сервер с [Link] создавать приложения на [Link];
объяснить для чего нужны декораторы в Javascript/TypeScript;
объяснить, что такое Dependency Injection.

Краткое содержание
введение;
почему [Link];
Hello World;
Routing;
[Link] CLI;
концепции [Link];
Dependency Injection;
контроллеры, провайдеры, модули;
Middleware.

Тема 10 Цель занятия


Введение в язык SQL, подключать и создавать базу данных с PostgreSQL;
PostgreSQL познакомиться с языком SQL
научиться работать с реляционной базой данных

Краткое содержание
введение и обзор типов БД; NoSQL;
введение в PostgreSQL;
SQL на примере PostgreSQL: создание таблиц; добавление и
редактирование данных;
связи таблиц;
подключение и использование в [Link]; операции и запросы к
данным.

Тема 11 Цель занятия


Работа с PostgreSQL и подключать и создавать базу данных с PostgreSQL;
TypeORM использовать ORM TypeORM в Express;

Краткое содержание
обзор ORM - Sequelize, TypeORM, Mongoose, Prisma;
ORM TypeORM с Express;
реализация CRUD.

Тема 12 Цель занятия


[Link] и Docker запустить и использовать [Link] приложение с docker;
рассмотреть основы docker;
подключать БД.

Краткое содержание
введение в Docker;
[Link] пример в Docker;
открытие портов;
дебаг приложения, использование локальных ресурсов;
Docker Compose.

Тема 13 Цель занятия


Сборка и деплой понимать и использовать общие концепции CI/CD;
проекта, CI/CD настраивать деплоймент приложений в облако;
работать с логами;
определять требования к серверу.

Краткое содержание
основы CI;
обзор CI/CD;
переменные окружения;
обзор возможностей Github/Gitlab CI/CD / Heroku;
конфигурация пайплайнов, таски;
примеры.

Модуль 3. Аспекты архитектуры FrontEnd


приложений

Тема 1 Цель занятия


Инструменты и применять BDD;
технологии JS понимать метрики и возможности тестирования;
тестирования, BDD использовать инструменты браузерного интеграционного и юнит
(Behavior-Driven тестирования.
Development )

Краткое содержание
что такое Behavior-driven development;
авто тесты с браузером:
метрики
обзор технологий :
Mocha/Chai/Sinon;
Selenium;
Cypress;
WebDriverIO;
Puppeteer (альтернативы);
Lighthouse.
примеры;
работа с DOM.

Тема 2 Цель занятия


Service Workers и PWA обсудить и использовать Service Workers API;
обсудить и использовать подход PWA.

Краткое содержание
PWA;
Service Workers;
Push API;
Web App Mainfest;
Web Storages.

Тема 3 Цель занятия


Архитектура • понимать, что такое микросервисная архитектура во FrontEnd;
фронтенд • различать подходы проектирования приложений;
приложений - • понимать различия в реализации архитектур веб приложений.
микрофронтенды

Краткое содержание
• современные подходы построения веб приложений;
• микросервисная архитектура;
• Типы решений для микрофронтендов:
- Compile-time / Transclusion,
- [Link] / mosaic,
- Runtime,
- Отдельные - iframe/portals/application для route,
- Shared - Web Components/Single-SPA/module federation/[Link];
• Примеры - module federation

Тема 4 Цель занятия


Современные • различать подходы проектирования приложений;
рендеринг • использовать [Link] или Remix для быстрого старта SSR;
фреймворки и • использовать плюсы стэка React для создания кросс;
аспекты SSR платформенных приложений

Краткое содержание
• аспекты server-Side Rendering;
• обзор современных решений [Link], Astro, Remix;
• примеры - [Link], Remix;
• деплой в [Link], cloudflare и т.д.

Тема 5 Цель занятия


Альтернатива обсудить основные преимущества и цели фреймворка;
большим запускать проект и понимать синтаксис SvelteJS;
фреймворкам - Обзор настраивать сборку с Rollup.
SvelteJS

Краткое содержание
история проекта, сравнение с другими технологиями;
пример Hello World;
обзор инструментов, используемых с SvelteJS;
конфигурация Rollup;
обзор синтаксиса шаблонов;
пример создания компонентов;
особенности и общие практики разработки приложений.

Тема 6 Цель занятия


Функциональное разбираться в основах функционального программирования и
программирование спецификах применения паттернов функционального
программирования в JavaScript.

Краткое содержание
- Введение в функциональное программирование;
- История ФП-Lisp;
- Почему ФП ""можно""?
- теория; чистые функции, функциональные методы.
- Side Effects
- инструменты. от lodash до ramda;
- отладка функционального кода.
- Карирование Currying
- Монады
- Примеры задач - практика;
- выводы.

Модуль 4. React

Тема 1 Цель занятия


Обзор React настроить себе окружение для работы с React и использовать его;
применять синтаксис JSX;
создавать простые приложения на React;
разрабатывать полноценные React-компоненты в различных стилях;
применять жизненный цикл компонент;
использовать Lifecycle API для управления компонентами
приложения;
моделировать состояние через state / props.;
корректно управлять данными React приложения.

Краткое содержание
компоненты React - Lifecycle, State & Props;
транспиляция и диалект JS;
Lifecycle hooks API - методы;
пример - "Загрузка данных";
пример - "Работа с DOM";
ошибки;
API state & props, setState, etc.;
плюсы и минусы использования;
state container;
практика.

Тема 2 Цель занятия


Hooks в React разбираться в техниках и использовать различные hooks.

Краткое содержание
примеры использования хуков, useState, useContext, useHistory.

Тема 3 Цель занятия


Higher-Order свободно декомпозировать компоненты;
Components, Custom делать переиспользуемые контейнеры children;
Hooks и другие переиспользовать state-логику и лайфсайкл- хуки через HOC;
паттерны React написать умные компоненты с конфигурируемым отображением
через render pro.

Краткое содержание
function component;
layout component;
container component;
higher-order component;
customer hooks.

Тема 4 Цель занятия


Состояние эффективно разрабатывать приложения на React, учитывая
приложения с Redux и последние тенденции в разработке front-end;
Mobx использовать Advanced React;
применять на практике Best-Practices разработки на React.

Краткое содержание
краткий обзор Redux;
обзор и практика MobX;
сравнение альтернатив.

Тема 5 Цель занятия


Routing в React - создавать систему routing для React приложений, использовать
Оптимизация библиотеку react-router;
приложения использовать специальные возможности библиотеки для
оптимизации отрисовки;
ленивая загрузка страниц при работе с React.

Краткое содержание
библиотеки.

Домашние задания
Routing для приложения погоды
Цель
В ходе выполнения ДЗ студент реализует Routing для приложения
погоды.

Модуль 5. Angular

Тема 1 Цель занятия


Введение в Angular настроить себе окружение IDE, а также скачать зависимости и
библиотеки, коммандные утилиты для TypeScript и создания
проектов для работы с Angular;
различать TypeScript и JavaScript;
писать и понимать код на языке TypeScript.

Краткое содержание
angular;
технологии;
angularCLI;
основы Angular;
module;
component;
service;
pipe;
directive;
templates.

Тема 2 Цель занятия


Компоненты и декомпозировать макет страницы на компоненты;
директивы различать директивы и компоненты во фреймворке Angular;
создавать простые директивы и компоненты.

Краткое содержание
декораторы;
компоненты;
директивы;
события жизненного цикла.

Тема 3 Цель занятия


Signals изучить сигналы, применить на практике.

Краткое содержание
изучим Signals;
используем Effects;
сравним подход Signals и Observable.

Тема 4 Цель занятия


Создание и создавать формы, используя техники Dynamic Forms, Reactive Forms;
управление формами описывать валидацию и другие функции для элементов форм.
в Angular

Краткое содержание
Dependency Injectors Hierarchy;
Template-Driven Forms;
Reactive Forms.

Тема 5 Цель занятия


Observables - RxJS отличать основные понятия паттерна;
применять шаблон проектирования Observables, используя
библиотеку RxJS.

Краткое содержание
observable, observer, subscriber, operator.

Тема 6 Цель занятия


Сервисы и состояние создавать сервисы для получения, отправки и хранения данных для
приложения приложений Angular;
разбираться в особенностях шаблона проектирования Dependency
Injection и его имплементации в Angular.

Краткое содержание
@Input, @Output и другие способы передавать данные в приложении
Angular;
сервис для получения данных;
Observables in Angular;
Dependency Injection / Service Locator / Inversion of control;
Angular DI Specifics.

Домашние задания
Структура приложения для запоминания иностранных слов
Цель
В этом ДЗ вы создадите приложение для запоминания иностранных
слов.

Тема 7 Цель занятия


Routing, тестирование создавать Routing систему для приложений, используя внутренние
и сборка в Angular подходы Angular - такие как Router, router-outlet и другие;
применять хэндлеры навигации Guards;
писать и запускать тесты для приложений Angular;
настраивать сборку приложений Angular;
использовать возможность сборки Server-side Rendering.

Краткое содержание
Classic HTML;
AJAX;
SPA;
Routing;
тесты в Angular;
сборка приложения для Production.

Домашние задания
Routing для приложения запоминания иностранных слов
Цель
В этом ДЗ вы добавите Routing для приложения запоминания
иностранных слов.

Модуль 6. Vue

Тема 1 Цель занятия


Основы Vue настроить себе окружение IDE, зависимости и библиотеки для
создания проектов и работы с Vue; создавать простейшие
приложения используя Vue; рассмотреть основы Vue3.

Краткое содержание
hello Vue;
MVVM;
templates;
dev tools.

Тема 2 Цель занятия


Компоненты и обсудить и использовать синтаксис шаблонизатора;
шаблоны создавать компоненты, описывать атрибуты элементов;
применять SFC.

Краткое содержание
templates;
v-if, v-for, v-show, v-bind, v-for;
components.
props;
sfc

Тема 3 Цель занятия


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

Краткое содержание
props & events;
формы, слоты, фильтры, директивы;
кастомные директивы, v-model, custom filters.

Тема 4 Цель занятия


Состояние различать преимущества центрального уравления стейтом;
приложения - Vuex и добавить State Management приложению Vue;
Pinia написать гетер, экшен и мутацию;
писать данные в State из компонентов.

Краткое содержание
Vuex работа с данными;
альтернатива Pinia.

Тема 5 Цель занятия


Routing описывать routing для Vue приложений.

Краткое содержание
как добавить навигацию в SPA;
использование роутер для создания многостраничных приложений;
хуки для выполнения функций - vue-router.

Домашние задания
Структура & Routing для приложения "Устный счет"
Цель
В разделе Vue одна большая самостоятельная работа - SPA (Single
Page Application) игра "Устный счет".
Игра состоит из двух экранов - на первом экране пользователь
выбирает настройки, которые будут использовать в игре - типы
вычислений, сложность, время раунда.
На этой же странице показывается статистика тренировок.
Вторая страница - сама игра.
Пользователь должен решить максимальное количество задач на
заданное время.
Мокапы -
[Link]

Тема 6 Цель занятия


Advanced Vue применять анимацию в компонентах;
создавать плагины;
разбираться в тонкостях Change Detection.

Краткое содержание
plugins & directives.

Модуль 7. Проектная работа

Тема 1 Цель занятия


Вводное занятие по выбрать и обсудить тему проектной работы;
проектной работе. спланировать работу над проектом;
Обзор пройденных ознакомиться с регламентом работы над проектом.
фреймворков и
технологий

Краткое содержание
правила работы над проектом и специфика проведения итоговой
защиты;
требования к результату проекта и итоговой документации.

Домашние задания
Проектная работа
Цель
В этом ДЗ вы:
- выберете тему проекта;
- закрепите тему в чат с преподавателем;
- защитите проект.

Тема 2
Карьерная
консультация

Тема 3 Цель занятия


Защита проектных защитить проект и получить рекомендации экспертов.
работ

Краткое содержание
презентация проектов перед комиссией;
вопросы и комментарии по проектам.

Вам также может понравиться