Учебный модуль 1. Основы Frontend-разработки: Часть 1. Веб-вёрстка. Базовый уровень. Часть 2. JavaScript. Базовый уровень. Часть 3. Vue.js

Основные темы модуля:
Веб-верстка: Базовый и продвинутый HTML. Базовый и продвинутый CSS. Подготовка к верстке. Layout. HTML-разметка. Layout. Flexbox. Layout. Стилизация. Формы.
Адаптивность. Декстоп. Мобильные устройства.
Javascript для верстальщика;
Доступность. Кроссбраузерность. База знаний. Сетки. Работа с хостингом. Анимация.

JavaScript: Переменные и работа с числами. Строки, boolean и условные операторы. Массивы и циклы. Функции. Объекты. Введение в DOM. Константы, области видимости и замыкания;
Преобразование типов и нестрогие сравнения. Общение с сервером, async/await

Vue.js: Основы Vue. Создание проекта. Каталог товаров. Пагинация и фильтрация. Страница товара. Корзина. Работа с API. Список товаров. Оформление заказа. Деплой. Vue3.
Практические кейсы: Vue.js с использованием REST API.

Часов в программе

56,00 часов

лекции

117,00 часов

практика

20,00 часов

промежуточная аттестация

193,00 часа

всего

Материально-технические условия реализации программы:

Вид занятий: лекционные и практические занятия
Требуемое ПО:
Операционная система, программы Microsoft Excel, Microsoft Power Point, Power BI, MySQL, Github, Jupyter-notebook и настроенная в зависимости от языка программирования среда разработки: любая привычная IDE.

Информационные ресуры

1. Блочные и строчные теги [Электронный ресурс]//URL: https://codepen.io/skillbox_weblayout/pen/KKNqaoyг
2. Важность в HTML. <b>, <strong>, <i>, <em> [Электронный ресурс]//URL: https://codepen.io/skillbox_weblayout/pen/rNWwWxL
3. Веб-стандарты [Электронный ресурс]//URL: https://web-standards.ru
4. Группировка в HTML. Подписи к изображениям [Электронный ресурс]//URL: https://codepen.io/skillbox_weblayout/pen/VwmWmgV
5. Как мы тестируем frontend (html-верстку). Чек-лист URL: https://vc.ru/dev/199130-kak-my-testiruem-frontend-html-verstku-chek-list
6. Web-дизайн и адаптивная верстка. URL: https://palladiumlab.com/services/design-and-branding/website/
7. Выбираем профессию frontend- и backend-разработчика: принципы и отличия [Электронный ресурс]//URL: https://skillbox.ru/media/code/frontend_i_backend_razrabotka/
8. Современный учебник JavaScript [Электронный ресурс]//URL: https://learn.javascript.ru
9. Типы данных JavaScript [Электронный ресурс]//URL: https://learn.javascript.ru/types
10. Управление преобразованием объектов в другие типы (toString, valueOf, Symbol.toPrimitive) [Электронный ресурс]//URL: https://learn.javascript.ru/object-toprimitive
11. Всё о массивах [Электронный ресурс]//URL: https://learn.javascript.ru/array
12. Всё о функциях [Электронный ресурс]//URL: https://learn.javascript.ru/function-basics
13. Всплытие и погружение [Электронный ресурс]//URL: https://learn.javascript.ru/bubbling-and-capturin
14. Прогрессивный JavaScript-фреймворк. URL: https://ru.vuejs.org/index.html

Образовательные ресуры

Учебно-методические материалы

Методы, формы и технологии

Реализация программы дополнительного профессионального образования предусматривает использование дистанционных образовательных технологий, применяемых для преподавания теоретических разделов учебных модулей, выполнения практических ситуаций, а также для промежуточной аттестации, применяемых с использованием асинхронной формы проведения занятий.
Асинхронное обучение – это метод доставки учебного материала обучающемуся с помощью размещения контента учебного курса на платформе дистанционного образования Skillbox 2.0..
Преподаватель и обучающийся не контактируют напрямую.
Лекционные занятия – представлены в виде видеоконтента (электронный учебный курс).
В рамках практических занятий применяется кейс-технология, или технология ситуационного анализа. Это метод активного обучения на основе реальных ситуаций. Слушателю предлагается короткий текст с подробным описанием ситуации и задача, требующая решения. Целью этого метода является максимальное вовлечение каждого слушателя в самостоятельную работу по решению поставленной проблемы или задачи, развитие самостоятельного мышления, применение теоретических знаний к решению практических задач. Кейс помогает совершенствовать компетенций, необходимые для проведения трансфузиологической помощи. Преимуществом кейсов является возможность оптимально сочетать теорию и практику, что важно при подготовке специалистов в сфере разработки веб-приложений.

Методические разработки

Рекомендации по проведению обучения для лиц с ОВЗ

Материалы курса

Базовые аспекты сайта:хостинг и домен, переход по адресу, основные отличия frontend и backend. Верстка. html и css, JS. Веб-страница, рабочее пространство, редакторы кода. Установка vs code и Codepen. devtools: изменение стилей, разметки, нахождение ошибок в верстке.
Теги, виды тегов, атрибуты и их применение. создание ссылок на другие страницы или на разделы текущей страницы. Работа с ссылками. Отличие ссылок от кнопок. Валидатор. Плагины для редактора. Правила кодстайла html.
Введение в CSS. Простые селекторы. Вложенность и вес селектора. Единицы измерения CSS. Свойство display. Размеры, отступы, границы. Блочная модель. Display (размещение нескольких элементов в строку с отступами решение проблемы «фантомных» отступов). Организация отступов в верстке.
Позиционирование. Обтекание, скролл и управление слоями. Стилизация (работа с цветом и текстом). Стилизация (шрифтовые свойства). Стилизация (фон, границы и тени). Стилизация (прочие свойства). Валидность. CSS-кода. Плагины для работы. Кодстайл CSS.
Форматы изображений. Figma (базовые инструменты, получение доступа к макету, стили и расстояния, экспорт графики, шрифты макета). Подключение шрифтов. Контейнер сайта.
Семантика и её применение. Инструмент «типограф». Секции и их элементы. Использование тега article на странице. Размещение контактов на странице.
Flexbox. Свойства flex-контейнера и flex-элементов, их применение. Проверка верстки на переполнение.
Стили Figma для правильной стилизации сайта.
Теги для медиа-элементов. Продвинутое подключение изображений. Узконаправленные теги. Формы (поля ввода и их атрибуты, селект, чекбоксы и группировка полей).
Комбинаторные селекторы. Ключевые слова. Псевдоклассы. Псевдоэлементы. Кастомные свойства.
Transition в CSS. Transform в CSS. CSS-градиенты. CSS-функции. Колоночная раскладка. БЭМ.
Виды верстки. Pixel Perfect. Подготовка к адаптивной верстки Формы на нативных устройствах.
Медиа-запросы. Mobile first. Адаптивные изображения. Настройка сервера для проверки адаптивности.
JavaScript. DOM. События. Табы на JavaScript. Готовые решения - Слайдер и Аккордеон. Экосистема JavaScript.
«бургер-меню», показ/скрытие блоков по клику.
Понятие доступности. Проверка доступности. Клавиатура. Проверка доступности. Скринридер. Влияние семантики на доступность.
Стандартные стили браузеров. Способы обеспечения кроссбраузерности. Проверка кроссбраузерности.
Как стилизировать чекбоксы и радиокнопки по нужным макетам, стилизировать селект. Подключение карты на сайт, тултипы. валидация, модальное окно, всплывающее меню.
Сетка. Построение собственной сетки. Сетки на примере Bootstrap. Пример сложной разработки сетки.
Регистрация на хостинге. Работа с хостингом.
Анимация и её применение. Анимация по правилам UX. Анимация на CSS. Готовые решения в анимациях.
Основные правила верстки писем, отличия верстки писем от верстки сайтов. Основные почтовые клиенты, которые стоит поддерживать, их особенности.
Способы подключения svg на страницу и их отличия, как создавать svg с нуля с помощью специальных тегов. Как управлять размерами svg с помощью viewbox. Определение SVG-спрайта, его преимущества
Работа js-анимации, реализация js-анимации с помощью setInterval, анимации на основе requestAnimationFrame, инструмент GreenSock.
Загрузка сайта и метрики. Прелоадинг шрифтов, приемы для более быстрой загрузки (минификация, протокол http2 , кэширование). CDN.
Конвейер пикселей: как парсится html и css, расчет геометрии, компоновка, досрочное вычисление геометрии страницы, приемы для улучшения производительности.
Gulp, и его преимущества. Установка Gulp. Что такое таск и как его написать. Инструмент Parcel: плюсы и минусы.
Препроцессоры и их использование. Препроцессор Sass и PostCSS, сравнение.
Grid. Базовые свойства контейнера. Явная сетка, неявная сетка. Адаптивный грид, особенности. Именованные области сетки, управление элементами.
Профессиональное развитие верстальщика.
Язык программирования: JavaScript и сферы его применения.
Инструменты для началаа разработки на JavaScript: редактор кода vs code, система контроля версий git, командная строка, node.js, браузер (devtools браузера).
Способы записи десятичных чисел в JS, системы счисления, неточность вычислений с дробными числами.
Инкремент и декремент, префиксная и постфиксная запись. Определение функции, стандартные функции JavaScript для работы с числами. Сравнение чисел в JavaScript с помощью операторов. Значение и практика использования бесконечности.
Работа с типом «строка», понятие конкатенации, использование спецсимволов. Описание Boolean или логический тип данных. Сравнение операторов, строгие сравнения, условные операторы (if/else, switch).
Примитивные типы и массивы. Массив. Цикл for. Циклы for of, for in. Циклы while и do-while. Операторы continue и break. Выбор циклов.
Базовый синтаксис. Аргументы функции. Возвращаемое значение и undefined. Undefined и null. Именование.
Синтаксис объекта. Методы объекта и this. Операции над объектами. Объекты и циклы. Typeof и система типов.
DOM. Свойства и методы DOM элемента. Введение в события. Глобальный объект window.
Приложение TODO. Приложение TODO (список дел). Приложение TODO (разделение кода).
Области видимости, const. Переменные var, всплытие. Замыкания, стрелочные функции.
Преобразование типов. Неявные преобразования. Обработка массивов.
Введение в HTTP. Fetch, JSON, async/await. Работа с серверной частью приложений, изменение исходного кода под задачи.
Что такое Vue. Преимущества и недостатки технологии. Краткое сравнение с другими фреймворками. Codepen и аналоги. Обзор онлайн-сервисов. Окружение. Декларативная отрисовка. Условия и циклы. Работа с пользовательским вводом. Разбиение приложения на компоненты. Работа с классами. Связывание CSS-классов. Связывание inline-стилей. Инструменты для анимации через Vue.
Подготовка окружения: установка Node.js. Менеджер пакетов npm. Установка vue-cli через npm. Конфигурирование. Структура папок. Пара слов о компонентах в одном файле. Webpack.
Структура компонента. Шаблон. Стили. JS. Возможность Import. Состояние. Циклы. Отображение массива элементов с помощью v-for. Сохранение состояния. Отслеживание изменений в массивах. Предостережения об изменениях объектов
Организация и переиспользование компонентов. Передача данных в компоненты через входные параметры. Передача данных вместе с событием. Особенности парсинга DOM-шаблона. Входные параметры.
Кеширование вычисляемых свойств. Слежение. Сеттеры. Реактивность. Изменение состояния. Наследование компонентов. Использование v-model в формах и пользовательских событиях. Mixin. Фильтр.
Vuex и его использование. Действия State, Mutations, Actions, Map. Содержимое слота. Область видимости при компиляции. Содержимое слота по умолчанию. Именованные слоты. Слоты с ограниченной областью видимости. Динамическое имя слота. Сокращённая запись для именованных слотов.
API: Понятие и базовые принципы. Описание подхода, философия, методы. Типы запросов. Ответы. Описание технологии XHR. Инструмент для работы с XHR: Axios. Инструменты для работы с асинхронностью: Promise, Async/Await. Обработка ошибок и исключений: оператор Try/catch. UX с реакцией на изменение состояний. Взаимодействие с API для вывода ошибок.
Принципы построения форм. Связывание полей с моделью/ стейтом. Показ ошибок по полям. Успешное состояние. Модификаторы lazy, number, trim.
Оптимизация картинок, минификация JS, CSS.
Установка и обновление новой версии, Новое АПИ — v-model, emits, и рефактор проекта, Фрагменты, и атрибуты, и события, телепорты и асинхронные компоненты, Composition API. Теория, Рефактор страницы товаров на Composition API, Будущее и настоящее Vue3

Учебная литература

1. Маркарян Л. В. Инструментальные средства Internet-технологий: лабораторный практикум / Л. В. Маркарян. — Москва: Изд. Дом НИТУ «МИСиС», 2018. — 92 с. — ISBN 978-5-907061-76-7. — Текст: электронный. — URL: https://znanium.com/catalog/product/1232369
2. Лисьев Г.А. Программное обеспечение компьютерных сетей и web-серверов: учебное пособие / Г. А. Лисьев, П. Ю. Романов, Ю. И. Аскерко. — Москва: ИНФРА-М, 2020. — 145 с. — ISBN 978-5-16-013565-6. — Текст: электронный. — URL: https://znanium.com/catalog/product/1068576
3. Вагин Д. В. Современные технологии разработки веб-приложений: учебное пособие / Д. В. Вагин, Р. В. Петров. — Новосибирск: Изд-во НГТУ, 2019. — 52 с. — ISBN 978-5-7782-3939-5. — Текст: электронный. — URL: https://znanium.com/catalog/product/1866926
4. Кингсли-Хью Э. JavaScript в примерах [Электронный ресурс] / Э. Кингсли-Хью, К. Кингсли-Хью; пер. с англ. — Москва: ДМК Пресс, 2009. — 272 с.: ил. — (Серия «Для программистов»). - ISBN 978-5-94074-668-3. — Текст: электронный. — URL: https://znanium.com/catalog/product/409156
5. Хорстманн К. С. Современный JavaScript для нетерпеливых: практическое пособие / Кэй С. Хорстманн; пер. с англ. А. А. Слинкина. — Москва: ДМК Пресс, 2021. — 288 с. — ISBN 978-5-97060-177-8. — Текст: электронный. — URL: https://znanium.com/catalog/product/1225356
6.Наир В. Предметно-ориентированное проектирование в Enterprise Java с помощью Jakarta ЕЕ, Eclipse MicroProfile, Spring Boot и программной среды Axon Framework: практическое руководство / В. Наир; пер. с англ. А. В. Снастина. — Москва: ДМК Пресс, 2020. — 306 с. — ISBN 978-5-97060-872-2. — Текст : электронный. — URL: https://znanium.com/catalog/product/1210717
7. Фаррелл Б. Веб-компоненты в действии: практическое руководство / Б. Фаррелл; пер. с англ. Д. А. Беликов. — Москва: ДМК Пресс, 2020. — 462 с. — ISBN 978-5-97060-856-2. — Текст: электронный. — URL: https://znanium.com/catalog/product/1210671
8. Гвоздева В. А. Базовые и прикладные информационные технологии: учебник / В. А. Гвоздева. — Москва: ФОРУМ: ИНФРА-М, 2021. — 383 с. — ISBN 978-5-8199-0885-3. — Текст: электронный. — URL: https://znanium.com/catalog/product/1406486
9. Федотова Е. Л. Информационные технологии в профессиональной деятельности: учебное пособие / Е.Л. Федотова. — Москва: ФОРУМ: ИНФРА-М, 2022. — 367 с. — ISBN 978-5-8199-0752-8. — Текст: электронный. — URL: https://znanium.com/catalog/product/1786345

Темы

1.1. Введение 1.2. Базовый HTML 1.3. Базовый CSS. 1.4. Подготовка к верстке 1.5. Layout. HTML-разметка 1.6. Layout. Flexbox 1.7. Layout. Стилизация 1.8. Продвинутый HTML. Формы 1.9. Продвинутый CSS. 1.10. Адаптивность. Декстоп 1.11. Адаптивность. Мобильные устройства 1.12. Javascript для верстальщика 1.13. Доступность 1.14. Кроссбраузерность 1.15. База знаний 1.16. Сетки 1.17. Работа с хостингом 1.18. Анимация 2.1. Введение в Java 2.2. Переменные и работа с числами 2.3. Строки, boolean и условные операторы 2.4. Массивы и циклы 2.5. Функции 2.6. Объекты 2.7. Введение в DOM 2.8. Введение в DOM. Часть 2 2.9. Константы, области видимости и замыкания 2.10. Преобразование типов и нестрогие сравнения 2.11. Общение с сервером, async/await 3.1. Основы Vue 3.2. Создание проекта 3.3. Каталог товаров 3.4. Пагинация и фильтрация 3.5. Страница товара. Корзина 3.6. Работа с API. Список товаров. Оформление заказа 3.7. Деплой 3.8. Vue3 3.9. Практические кейсы: Vue.js с использованием REST API

Лекции
2,00ч

Практические занятия
1,00ч

Всего
3,00ч

Промежуточная аттестация 20,00 часов

Промежуточная аттестация по Учебному модулю 1 "Основы Frontend-разработки" проводится путем выполнения практического задания.