Сложность
Сложность
Начинающий
Тип обучения
Тип обучения
Профессия
Формат обучения
Формат обучения
С проверкой домашнего задания
Трудоустройство
Трудоустройство
Содействие
Сертификат
Сертификат
Да

Стоимость курса

бесплатно
есть рассрочка

Что ожидать от обучения?

Знания и навыки
Все необходимые знания для веб-разработчика.

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

Сертификат
С оценкой, отражающей уровень ваших знаний и степень отдачи.

Начало карьеры
После обучения вы сразу же готовы к старту карьеры.

Что вы получите после обучения

Приобретаемые навыки
3
DOM
4
Emmet
7
Gulp
10
CSS
11
Адаптивная верстка
13
Workflow
14
Макетирование
15
API
16
FTP
17
VSCode
18
БЭМ
19
Perfect Pixel
20
Шрифты
21
Стилизация
22
Flexbox
23
Анимация в CSS
24
Terminal
25
Git
26
CHOCCO
27
SVG
28
Обработка ошибок
31
Npm
33
Яндекс.Карты
Сертификат, ссылками на который можно делиться с другими людьми

Вас будут обучать

Senior Frontend Developer в компании Mojang (Minecraft), главный преподаватель курсов React.js и Node.js.

Привет! Меня зовут Максим Иванов, я живу и работаю в Швеции. Участвовал в разработке Батлфилд V. За 10 лет карьеры успел поработать со множеством библиотек и технологий.

Образовательная организация

Добро пожаловать в LoftSchool - уникальный образовательный ресурс от самого быстроразвивающегося IT сообщества рунета и СМИ - LoftBLog. Здесь помогают стать востребованным IT специалистом или фрилансером, чтобы работать удаленно из любой точки мира.

LoftSchool — образовательная площадка, специализирующаяся на профессиях в IT-сфере. На рынке образования с 2012 года. Преподаватели и наставники школы практикующие специалисты из таких компаний, как Mojang, Avito и других. Образовательные программы на платформе поделены на профессии, интенсивы и видеокурсы.

Обучение программированию с нуля онлайн с личным наставником. Школа онлайн образования Loftschool обучает: web разработке, php, javascript, seo, интернет маркетингу, android разработке.

Программа курса

Основы вёрстки сайтов

Неделя 1 — Работа с хостингом, HTML

— Знакомимся со своим личным наставником и группой.
— Учимся работать с панелью хостинга и с файлами через FTP.
— Делаем разметку для первой страницы проекта.
— Размещаем результат работы в сети Интернет и сдаём на проверку наставнику.

Открытие курса
VSCode. Обзор редактора
1. Введение (00:49)
2. Страница проекта (00:49)
3. Краткий обзор редактора (01:23)
4. Начало работы. Цветовые схемы (02:22)
5. Горячие клавиши (01:53)
6. Командная панель (02:56)
7. Настройки (04:19)
8. Навигация по коду (06:52)
9. Настройка горячих клавиш (02:20)
10. Сниппеты (05:00)
11. Панель поиска (01:53)
12. Расширения (06:30)
13. Расширение CSS Peek (02:49)

Устройство интернета
1. Устройство интернета (31:46)
Работа с GitHub Pages
1. GitHub Pages. Работа из браузера (05:24)
2. Работа с хостингом timeweb (16:28)

HTML
1. Введение (06:08)
2. Первая веб-страница (01:05)
3. Структура документа (01:28)
4. Голова документа (02:59)
5. Полезные расширения редактора (07:04)
6. Разметка текста (03:57)
7. Правила написания кода (03:13)
8. Списки (01:06)
9. Потомки и родители (02:41)
10. Форматирование кода (05:30)
11. Атрибуты (02:54)
12. Абсолютные и относительные пути (07:56)
13. Ссылки (06:29)
14. id и class (05:36)
15. Якорь (02:23)
16. Формы. Основные элементы (12:33)
17. Тег Label (01:18)
18. Формы. Специфические элементы (04:13)
19. Отправка формы на сервер (05:13)
20. Валидация (03:51)
21. Теги таблиц (05:47)
22. Emmet (07:23)
23. Панель разработчика (04:40)

БЭМ. Разметка элементов страницы
1. Принцип разметки (04:40)
2. Использование классов (04:36)
3. BEM (05:46)
4. Разметка страницы (07:36)
5. Разметка содержимого (11:20)

Неделя 2 — CSS, работа с макетом, Perfect Pixel

— Стилизуем элементы главной страницы.
— Изучаем свойства позиционирования и поведение блочной модели.

Figma для верстальщика
1. Figma. Интерфейс (04:37)
2. Figma. Организация проектов (01:32)

CSS. Работа со стилями
1. Теория (06:59)
2. Подключение стилей (03:25)
3. Работа с цветом (05:06)
4. Селекторы тегов и атрибутов (05:29)
5. Мультиселекторы (05:32)
6. Универсальные селекторы (03:21)
7. Приоритет селекторов (06:30)
8. Псевдоклассы (07:32)
9. Псевдоклассы порядка (05:36)
10. Псевдоэлементы (02:19)

Работа со шрифтами
1. Безопасные шрифты (02:13)
2. Бесплатные шрифты (03:02)
3. Конвертирование шрифтов (06:19)
4. font-face (08:05)
5. Наследуемые свойства (03:51)
6. Общие стили текста (05:25)

Блочная модель
1. Теория (03:59)
2. Строчное и блочное поведение (03:49)
3. Свойство display (01:18)
4. Блочная модель (05:11)
5. Составные свойства (02:59)
6. Единицы измерения (03:38)
7. Выравнивание inline-block (01:15)
8. Свойства позиционирования (05:36)
9. Приоритет отображения (04:07)
10. Верстка. Как делать не нужно (05:07)
11. Perfect Pixel (08:32)

Стилизация проекта
1. Приветственная секция (06:08)
2. Настройка шрифтов (03:42)
3. Приветственная секция. Стилизация (13:14)
4. Приветственная секция. Perfect Pixel (07:22)
5. Активный пункт меню (03:38)
6. Секция предложений. Разметка (03:06)
7. Секция предложений. Стилизация (08:44)
8. Секция предложений. Модификаторы (06:16)
9. Секция предложений. Perfect Pixel (02:45)
10. Секция новостей. Разметка (06:04)
11. Переключатель страниц (05:45)
12. Секция о банке. Разметка (08:35)
13. Футер (07:58)
14. Завершение работы (04:02)

Неделя 3 — Flexbox, БЭМ-нейминг

— Изучаем свойства флексбокса и применяем их к главной странице.
— Пишем разметку для оставшихся страниц проекта.
— Приводим верстку в состояние Perfect Pixel.

Вопрос-ответ
Flexbox
1. Введение (00:45)
2. Флекс-контейнер (01:43)
3. Выравнивание по главной оси (01:37)
4. Выравнивание по поперечной оси (01:50)
5. Выравнивание отдельного элемента (01:09)
6. Флекс-элемент – контейнер (00:53)
7. Направление осей (03:18)
8. Многострочный контейнер (02:54)
9. Выравнивание многострочного контента (01:25)
10. Пропорции (02:46)
11. Пропорции при сжатии (01:24)
12. Базовый размер (04:02)
13. Порядок элементов (02:40)

Построение лейаута и БЭМ-нейминг
1. Введение (03:28)
2. Viewport (04:54)
3. Normalize (02:38)
4. Блок обертка (04:20)
5. Контейнер (09:17)
6. Футер (04:25)
7. Структура файлов (17:20)
8. Поведение блочной модели (07:19)
9. Общие стили (09:04)
10. Текстовое содержимое (08:36)
11. Классы-модификаторы (14:10)

Flexbox. Реализация проекта
1. Приветственная секция (08:28)
2. Секция предложений (02:15)
3. Секция предложений. Примеси (05:21)
4. Секция предложений. Элементы (02:51)
5. Секция новости (03:19)
6. Завершение верстки страницы (07:46)
7. Страница услуг. Хедер (11:45)
8. Страница услуг. Секция (08:45)
9. Страница услуг. Ховер (04:08)
10. Страница услуг. Секция партнеры (09:17)
11. Страница услуг. Футер (03:55)

Неделя 4 — CSS-анимации

— Подключаем иконки к проекту с применением спрайтов.
— Реализуем динамические элементы страниц.
— Дорабатываем проект.

Частые приемы верстки
1. Центрирование (06:56)
2. Текст в одну строку (04:13)
3. Фигуры. Круг (01:14)
4. Фигуры. Эллипс (03:36)
5. Фигуры. Треугольник (03:19)
6. Фигуры. Треугольник без заливки (06:08)
7. Фигуры. Трапеция (01:00)
8. Фигуры. Параллелограмм (01:29)
9. Фигуры. Элементы (05:56)
10. Градиент (07:43)
11. Пунктирная линия (04:32)
12. Фон в полоску (01:19)
13. Выпадающее меню (09:43)
14. Спрайты (12:01)
15. Элементы форм (07:06)

Анимации CSS
1. Свойство transition (02:58)
2. Свойство transition-property (02:21)
3. Временная функция (04:50)
4. Эластичные анимации (00:46)
5. Свойство transition delay (01:22)
6. Составное свойство transition (02:05)
7. Неочевидные моменты transition (02:50)
8. Свойство transform (05:12)
9. Отмена трансформации (01:50)
10. Изменение координат трансформации (03:41)
11. Свойство animation (07:23)
12. Свойство animation-iteration-count (00:57)
13. Свойство animation-direction (01:58)
14. Свойство animation-fill-mode (02:44)
15. Свойство animation-play-state (03:13)
16. Анимация секвенцией (06:17)

Анимации. Реализация проекта
1. Отзывы. Разметка (04:31)
2. Отзывы. Стилизация (06:12)
3. Отзывы. Сетка (02:32)
4. Секция-разделитель (03:00)
5. Форма. Поля (03:35)
6. Форма. Контроллы (09:18)
7. Приветственная страница (03:35)
8. Анимации. Банк (06:29)
9. Анимации. Путешествия (03:24)
10. Анимации. Видеопродакшн (02:38)

Неделя 5 — Защита выпускного проекта

— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.
Вопрос-ответ

Веб-разработка для начинающих

Неделя 1— Git и GitHub, SASS, разметка страницы

— Верстаем заданные секции из дизайн-макета.
— Формируем структуру CSS, организуем входной файл стилей с применением SCSS.
— Размещаем работу в репозитории и на GitHub Pages.

Открытие курса
1. Как проходит обучение (01:09:37)

Вводное занятие
1. Вводное занятие (06:53)

Figma для верстальщика
1. Figma. Интерфейс (04:37)
2. Figma. Организация проектов (01:32)

SASS
1. Теория (07:05)
2. Компиляция (03:46)
3. Вложенность (nesting) (05:34)
4. Арифметические операции (operators) (00:54)
5. Переменные (variables) (08:16)
6. Примеси (mixins) (04:51)
7. Условия (conditions) (04:34)
8. Наследование (inheritance) (01:50)
9. Циклы (loops) (07:40)

БЭМ. Разметка элементов страницы
1. Принцип разметки (04:40)
2. Использование классов (04:36)
3. BEM (05:46)
4. Разметка страницы (07:36)
5. Разметка содержимого (11:20)

Flexbox
1. Введение (00:45)
2. Флекс-контейнер (01:43)
3. Выравнивание по главной оси (01:37)
4. Выравнивание по поперечной оси (01:50)
5. Выравнивание отдельного элемента (01:09)
6. Флекс-элемент – контейнер (00:53)
7. Направление осей (03:18)
8. Многострочный контейнер (02:54)
9. Выравнивание многострочного контента (01:25)
10. Пропорции (02:46)
11. Пропорции при сжатии (01:24)
12. Базовый размер (04:02)
13. Порядок элементов (02:40)

Terminal
1. Введение. Установка (05:45)
2. Hello World (01:21)
3. Навигация (07:26)
4. Текущая директория (00:27)
5. Создание папок (03:03)
6. Создание файлов (01:55)
7. Удаление файлов (01:53)
8. Копирование. Перемещение. Переименование (03:29)
9. Исправление опечаток (01:35)
10. Поиск. Документация (03:04)
11. Обзор редактора Vim (12:35)
12. Обзор редактора Nano (04:38)
13. Экранирование (01:48)

GIT
1. Введение (07:03)
2. Начинаем работать с Git (03:01)
3. Создание нового репозитория (01:09)
4. Добавление файлов в индекс (область слежения) Git (06:49)
5. Создание коммита (07:17)
6. Навигация по коммитам. Отмена изменений (12:10)
7. Типичный цикл работы с Git (03:34)
8. Ветвления в Git (11:27)
9. Конфликты при слиянии веток (06:06)
10. Временное (без коммита) сохранение данных (05:25)
11. Работа с удалёнными репозиториями (20:04)
12. Использование GitHub Pages для хостинга проектов (04:31)

CHOCCO. Разметка
1. Секция Hero. Разметка (06:41)
2. Секция Hero. Стилизация (13:34)
3. Секция Hero. PP (05:11)
4. Секция Почему. Разметка (04:47)
5. Секция Почему. Стилизация (06:40)
6. Секция Почему. Декор (07:48)
7. Секция Отзывов. Верстка (09:16)
8. Секция Отзывов. Декор (02:09)
9. Форма. Поля (11:34)
10. Форма. Кнопки (04:09)
11. Фиксированное меню (06:30)

Неделя 2 — SVG, адаптивная и мобильная вёрстка

— Подготавливаем элементы для последующего программирования на JavaScript.
— Делаем адаптив.
— Собираем SVG иконки в спрайт.

Адаптивная вёрстка
1. Теория (15:35)
2. Типы лейаута (04:16)
3. Пиксели и проценты (05:41)
4. Em и rem (04:00)
5. Viewport units (06:08)
6. Медиазапросы (09:55)
7. Mobile First (04:54)
8. Печатные документы (02:43)
9. Применение на практике (13:36)
10. Viewport (02:34)
11. Ретина Теория (03:36)
12. Ретина. Медиазапрос (02:14)
13. Ретина. Суть оптимизации (06:10)
14. Srcset (07:56)

SVG
1. Теория (10:47)
2. Элемент SVG (01:15)
3. Прямоугольник (02:28)
4. Общие свойства (01:29)
5. Окружность (00:49)
6. Эллипс (01:01)
7. Линия (00:52)
8. Многоугольник и полилиния (01:48)
9. Знакомство с Path (04:50)
10. ViewBox (06:21)
11. Группировка (06:45)
12. Фильтры (04:55)
13. Градиенты (03:35)
14. Текст и градиент (01:48)
15. Свойства CSS (01:55)
16. Добавление на страницу (01:18)
17. SVG-спрайт (06:09)

CHOCCO. Адаптивная верстка
1. Настройка лейаута (09:07)
2. Hero (07:27)
3. Hero. Гамбургер меню (03:50)
4. Основное меню (02:57)
5. Perfect Pixel (02:12)
6. Секция Отзывов (01:36)
7. Форма (01:31)
8. Hero. Версия под телефоны (02:32)
9. Остальные секции (07:05)
10. Mobile vs Desktop first (05:34)

Неделя 3 — JavaScript, работа с DOM

— Выполняем задачи по JavaScript.
— Верстаем слайдер.
— Делаем верстку меню и обеспечиваем его функциональность.

Основы JavaScript
1. Введение (08:20)
2. Типы данных (06:17)
3. Оператор If (06:53)
4. Оператор For (06:34)
5. Функции (09:37)
6. Область видимости и замыкания (12:34)
7. Всплытие (11:10)
8. Типы объявления функций (07:42)
9. Стрелочные функции (16:05)
10. Let (05:41)
11. Const (03:53)
12. Объекты (13:17)
13. Массивы (24:18)
14. Заключение (03:56)

Работа с DOM
1. Введение (21:22)
2. События (09:42)
3. Обработка ввода (27:44)
4. Работа с формами (19:54)
5. Рабочий пример (10:04)

Обработка ошибок и отладка
1. Инструменты браузера (19:29)
2. Обработка ошибок (36:12)
3. Стек вызовов (15:10)
4. Отладка (12:27)

JavaScript. Задачи
1. Запуск кода (02:40)
2. Фильтрация строки (07:19)
3. Выборка объекта (04:09)
4. Анализ строки (04:31)
5. Фильтрация массива (04:04)
6. Слайдер. Механика работы (03:01)
7. Слайдер. Реализация (08:10)
8. Слайдер. Динамические переменные (08:08)
9. Слайдер. Перенос элементов (04:31)
10. Модальное окно. Генерация разметки. ч1 (02:14)
11. Модальное окно. Генерация разметки. ч2 (04:41)
12. Модальное окно. Закрытие (05:08)
13. Модальное окно. Функция для создания (02:25)
14. Модальное окно. Шаблоны (04:51)
15. Создание блоков (04:52)
16. Закрашивание блоков (08:43)

Неделя 4 — Обработка ошибок, работа с формами, Ajax

— Создаём виджеты на странице: аккордеон, слайдер, модальное окно.
— Реализуем работу формы заказа.
— Обеспечить обработку ответа от сервера в форме заказа.

jQuery. Работа с библиотекой
1. Теория jQuery (07:28)
2. Подключение библиотеки (04:27)
3. Документация (01:32)
4. Проверка версии (01:01)
5. Селектор (01:24)
6. Document Ready (01:46)
7. Обработка событий (02:32)
8. Свойства элемента (04:22)
9. Размеры элемента (02:29)
10. Работа с классами (03:09)
11. Работа с формами (03:19)
12. Работа со стилями (01:50)
13. Свойства для коллекции (01:46)
14. This в событиях (03:21)
15. Управление коллекцией (04:39)
16. Навигация: родители и потомки (02:35)
17. Навигация: соседи (03:12)
18. Перебор коллекции (02:23)
19. Фильтрация набора (03:55)
20. Контекст (00:57)
21. Добавление элементов (02:53)
22. Удаление и клонирование элементов (01:18)
23. Делегирование событий (01:49)
24. Готовые анимации (05:43)
25. Собственные анимации (01:37)
26. Очередь анимаций (04:00)
27. События страницы (05:49)
28. Отложенный обработчик (03:49)

Работа с формами. Ajax
1. Асинхронные сетевые запросы (15:52)
2. JSON (13:05)
3. Работа с формами (19:15)
4. Валидация данных (22:42)
5. Отправка данных на сервер (08:47)

CHOCCO. Виджеты
1. Слайдшоу (07:07)
2. Вертикальный аккордеон. Верстка (05:19)
3. Вертикальный аккордеон. Реализация (07:26)
4. Слайдер (10:32)
5. Форма. Вызов модального окна (04:09)
6. Форма. Отправка запроса (04:32)
7. Форма. Валидация (04:41)
8. Форма. Обработка ответа (06:13)
Вопрос-ответ

Неделя 5 — Плагины, Workflow, работа с API

— Подключаем интерактивную карту google / yandex.
— Реализуем OnePageScroll.
— Разделяем структуру проекта на Dev и Prod.
— Реализуем видео-плеер при помощи HTML5 Video API.

NPM
1. Что такое npm? (05:50)
2. Установка и обновление npm (02:33)
3. Справка по работе с npm (01:28)
4. Поиск и установка пакетов (04:24)
5. Зависимости пакета (02:09)
6. Файл манифест package.json (03:02)
7. Удаление и обновление пакетов (03:02)
8. dependencies и devDependencies (01:51)
9. Webpack и npx (04:04)
10. npm-скрипты (04:02)
11. npm, git и github (02:40)

Gulp
1. Теория (06:52)
2. Установка (02:54)
3. Первый таск (03:54)
4. Обработка нескольких файлов (03:53)
5. Добавляем плагин (04:42)
6. Серия тасков (03:46)
7. Task Default (01:45)
8. Компилируем Sass (03:56)
9. Склейка файлов (04:02)
10. Слежка за файлами (02:41)
11. Dev-server (08:11)
12. Внешний адрес browser-sync (01:58)
13. Продвинутый импорт стилей (02:07)
14. Автопрефиксы (05:27)
15. Пересчет единиц измерения (01:41)
16. Группировка медиа-запросов (02:29)
17. Минификация (02:14)
18. Sourcemaps (04:53)
19. Сборка JavaScript (05:28)
20. Трансляция ES6 (02:54)
21. Минификация JavaScript (06:02)
22. Генерация SVG-спрайта (05:41)
23. Разделение конфига (04:05)
24. Параллельные таски (01:48)
25. Dev vs Prod (09:32)

YouTube Iframe API
1. Подготовка (01:37)
2. Инициализация (06:59)
3. Запуск и остановка (03:06)
4. Продолжительность видео (05:26)
5. Ползунок (06:10)
6. Завершение работы (04:35)

Подключение Яндекс.Карты
1. Подключение Яндекс.Карты (08:49)

CHOCCO. Интерактивные элементы
1. Горизонтальное меню. Верстка (02:11)
2. Горизонтальное меню. Открытие элемента (03:13)
3. Горизонтальное меню. Закрытие элементов (05:10)
4. Горизонтальное меню. Мобильная версия (04:39)
5. Горизонтальное меню. Текст (04:24)
6. OPS. Подготовка (02:32)
7. OPS. Обработка скролла (01:41)
8. OPS. Функция сдвига (01:53)
9. OPS. Смена секций (05:07)
10. OPS. Исправление ошибок (03:38)
11. OPS. Управление с клавиатуры (03:00)
12. OPS. Навигация по ссылкам (03:25)
13. OPS. Боковое меню (03:01)
14. OPS. Рефакторинг (11:54)
15. OPS. Мобильная версия (07:35)

Неделя 6 — Выпускной

— Работа над проектом.
— Бонусный вебинар по основам PHP.
— Выдача дипломов за курс.

Основы PHP
1. Введение (02:12)
2. Клиент-серверное взаимодействие (09:24)
3. Протокол HTTP (07:40)
4. Основы PHP (21:23)
5. Обработка формы на PHP (15:20)

Комплексное обучение JavaScript

Неделя 1 — Основы JavaScript, переменные и функции

— Знакомимся со своим личным наставником и группой.
— Узнаём как работает JavaScript и что такое переменные и функции.

Введение
1. Открытие курса (08:36)

GIT
1. Введение (07:03)
2. Начинаем работать с Git (03:01)
3. Создание нового репозитория (01:09)
4. Добавление файлов в индекс (область слежения) Git (06:49)
5. Создание коммита (07:17)
6. Навигация по коммитам. Отмена изменений (12:10)
7. Типичный цикл работы с Git (03:34)
8. Ветвления в Git (11:27)
9. Конфликты при слиянии веток (06:06)
10. Временное (без коммита) сохранение данных (05:25)
11. Работа с удалёнными репозиториями (20:04)
12. Использование GitHub Pages для хостинга проектов (04:31)

Как работает JavaScript
1. Основы JS (24:08)

Переменные и функции 
1. Переменные (03:03)
2. Функции (09:38)
3. Область видимости и замыкание (12:35)
4. Всплытие/hoisting (11:10)
5. Типы объявления функций (07:42)
6. Стрелочные функции (16:05)
7. Let (05:42)
8. Const (05:28)

Разбор заданий #1
1. Домашнее задание №1 (15:39)

Неделя 2 — Объекты и массивы, обработка ошибок

— Разбираем базовые операции с объектами и массивами, изучаем деструктуризацию и spread-оператор.
— Изучаем динамические свойства массивов, учимся создавать proxy.
— Разбираем инструменты разработчика, изучаем принципы обработки исключений.

Объекты и массивы
1. Строковая интерполяция (06:54)
2. Объекты (13:01)
3. Массивы (24:20)
4. Деструктурирующее присваивание: Массивы (24:01)
5. Деструктурирующее присваивание: Объекты (07:30)
6. Spread-оператор (05:57)
7. Rest-оператор (11:07)
8. Цикл for-of (06:55)
9. Symbol. Продвинутая тема (29:31)

Обработка ошибок и отладка
1. Инструменты браузера (19:33)
2. Обработка ошибок (36:14)
3. Стек вызовов (15:14)
4. Отладка (12:22)

Разбор заданий #2
1. Домашнее задание №2 (12:30)
2. Домашнее задание №3 (12:25)

Неделя 3 — DOM, асинхронность

— Учимся создавать, выбирать и модифицировать элементы DOM, изучаем механизм DOM-событий.
— Рассматриваем, что такое обработчик событий, делегирование.
— Изучаем асинхронность в JS, разбираем Promise, Async/await.

DOM
1. Введение (21:25)
2. Cобытия (09:42)
3. Обработка ввода (27:44)
4. Работа с формами (19:54)
5. Рабочий пример (09:34)
6. Обход DOM-дерева (25:34)

Асинхронность
1. Таймеры (24:03)
2. Promise (01:03:47)
3. Async Await (17:20)

Разбор заданий #3
1. Домашнее задание №4 (19:22)
2. Домашнее задание №5 (15:11)
Вопрос-ответ

Неделя 4 — Работа с сетью, Browser API

— Рассматриваем работу с сетью на примере WebSocket, ServiceWorks.
— Изучаем Local/Session Storage, HTML 5 Drag and Drop.
— Рассматриваем принцип взаимодействия между окнами и iframe.

Работа с сетью
1. Асинхронные сетевые запросы (17:34)
2. JSON (13:09)
3. Fetch (19:26)
4. WebSocket (11:22)
5. Service Worker (15:19)

Browser API
1. LocalStorage (25:29)
2. Cookies (18:39)
3. Навигация hash (12:05)
4. Навигация history (11:02)
5. File API (17:04)

Разбор заданий #4
1. Домашнее задание №6 (21:24)
2. Домашнее задание №7 (18:56)

Неделя 5 — Работа с VK API, ООП

— Изучаем документацию по работе с VK API. Рассматриваем шаблонизацию.
— Рассматриваем основы ООП в JavaScript. Изучаем полиморфизм, наследование, инкапсуляцию, конструкторы и классы.

Работа с VK API и шаблонизация
1. Шаблонизация (29:20)
2. VK SDK (37:05)

ООП
1. Intro (01:33)
2. Инкапсуляция (17:33)
3. Наследование (15:24)
4. Полиморфизм (07:17)
5. Классы (11:35)
6. Особенности работы с объектами в JavaScript (открытый вебинар "[J]u[S]t prototype this!") (01:46:10)

Разбор заданий #5
1. Геоотзыв — Intro (02:21)
2. Геоотзыв — Часть 1 (06:40)
3. Геоотзыв — Часть 2 (06:56)
4. Геоотзыв — Часть 3 (15:41)
5. Геоотзыв — Часть 4 (12:49)

Неделя 6
— MV*, модули
— Изучаем шаблоны проектирования MVС и MVVM. — Рассматривается перевод проекта на модули, изучаются ES6 модули.

MV*
1. Паттерны MV (07:06)
2. MVC (30:14)
3. MVVM (25:23)

Модули
1. Модульность в JS (26:35)
2. Перевод проекта на модули (12:28)
3. ES6-модули (10:49)

Разбор заданий #6
1. CHAT — INTRO (05:01)
2. CHAT (Часть — 1) (12:23)
3. CHAT (Часть — 2) (28:00)
4. CHAT (Часть — 3) (18:00)
Вопрос-ответ

Неделя 7 — Node.js, тестирование

— Знакомимся с Node.js. Рассматриваем работу с файлами и сетью.
— Определяемся с необходимостью тестирования JS-кода.
— Знакомимся с библиотеками для тестирования.

Node.js (краткое знакомство)
1. Node.js (краткое знакомство) (37:10)

Тестирование JS-кода
1. Введение (16:05)
2. Jest (15:47)
3. Польза тестов (09:01)
4. Coverage (10:02)

Разбор заданий #7
1. Другофильтр. Intro (02:47)
2. Другофильтр. Часть I (19:49)
3. Другофильтр. Часть II (16:34)
4. Другофильтр. Часть III (03:56)
5. Другофильтр. Часть IV (05:39)

Как получить работу в IT: фишки и советы
1. Как получить работу в IT? Поиск, собеседование и испытательный срок (42:21)
2. Как найти удаленную работу и фриланс-заказы? (20:12)
3. Первая работа в IT — как себя вести? Стажировки, официальное трудоустройство и работа "за еду" (14:11)
4. Как пройти испытательный срок? (27:10)
5. Как подготовиться к собеседованию в компании уровня FAANG (08:52)
6. Процесс загрузки web страницы (25:19)
7. Собеседование программиста – всё, что нужно знать (01:24:07)
8. Решение задачи с собеседования программиста (19:36)
9. Собеседование Frontend-разработчика (01:37:17)

Подборки, в которых участвует курс

Рейтинг курса

4.6
рейтинг
0
0
0
0
0

Может быть интересно

обновлено 12.02.2024 09:06
Веб-разработчик с нуля

Веб-разработчик с нуля

Оставить отзыв
Поделиться курсом с друзьями