[loftschool] Веб-разработка для начинающих [12 января - 22 февраля 2021]
Записывайтесь и за 6 недель освойте адаптивную вёрстку, JavaScript и получите мощный проект в портфолио.
Программа курса была переработана!
Теперь каждая неделя включает в себя:
Спойлер: Программа обучения
Неделя 1 — Git и GitHub, SASS, разметка страницы
— Верстаем заданные секции из дизайн-макета.
— Формируем структуру CSS, организуем входной файл стилей с применением SCSS.
— Размещаем работу в репозитории и на GitHub Pages.
Открытие профессии
1 урок (01:09:37)
Вводное занятие
1 урок (06:53)
Figma для верстальщика
1 урок (04:37);
SASS
9 уроков (44:30)
БЭМ. Разметка элементов страницы
5 уроков (33:58)
Flexbox
13 уроков (26:26)
Terminal
13 уроков (48:59)
GIT
12 уроков (01:28:36)
CHOCCO. Разметка
Воркшоп
11 уроков (01:18:19)
Неделя 2 — SVG, адаптивная и мобильная вёрстка
— Подготавливаем элементы для последующего программирования на JavaScript.
— Делаем адаптив.
— Собираем SVG иконки в спрайт.
Адаптивная вёрстка
14 уроков (01:29:18)
17 уроков (58:05)
Воркшоп
10 уроков (43:51)
— Выполняем задачи по JavaScript.
— Верстаем слайдер.
— Делаем верстку меню и обеспечиваем его функциональность.
Вопрос-ответ
Вебинар
Основы JavaScript
14 уроков (02:16:17)
Работа с DOM
5 уроков (01:28:46)
Обработка ошибок и отладка
4 урока (01:23:18)
JavaScript. Задачи
Воркшоп
16 уроков (01:19:27)
— Создаём виджеты на странице: аккордеон, слайдер, модальное окно.
— Реализуем работу формы заказа.
— Обеспечить обработку ответа от сервера в форме заказа.
jQuery. Работа с библиотекой
28 уроков (01:25:05)
Работа с формами. Ajax
5 уроков (01:19:41)
CHOCCO. Виджеты
Воркшоп
8 уроков (49:59)
— Подключаем интерактивную карту google / yandex.
— Реализуем OnePageScroll.
— Разделяем структуру проекта на Dev и Prod.
— Реализуем видео-плеер при помощи HTML5 Video API.
NPM
11 уроков (35:05)
Gulp
25 уроков (01:42:55)
YouTube Iframe API
6 уроков (27:53)
Подключение Яндекс.Карты
1 урок (08:49)
CHOCCO. Интерактивные элементы
Воркшоп
15 уроков (01:03:23)
Неделя 6 — Выпускной
— Работа над проектом.
— Выдача дипломов за курс.
Вопрос-ответ
— Практический вебинар с преподавателем.
Спойлер: Выпускной проект
В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий лендинг для магазина.
Продажник
Записывайтесь и за 6 недель освойте адаптивную вёрстку, JavaScript и получите мощный проект в портфолио.
Программа курса была переработана!
Теперь каждая неделя включает в себя:
- 2-3 обучающих модуля
Каждый модуль состоит из видеоуроков и методичек. - 1 групповую практику
С наставником и одногруппниками. - 1-2 практических вебинара
С преподавателем.
Спойлер: Программа обучения
Неделя 1 — Git и GitHub, SASS, разметка страницы
— Верстаем заданные секции из дизайн-макета.
— Формируем структуру CSS, организуем входной файл стилей с применением SCSS.
— Размещаем работу в репозитории и на GitHub Pages.
Открытие профессии
1 урок (01:09:37)
Вводное занятие
1 урок (06:53)
Figma для верстальщика
1 урок (04:37);
SASS
9 уроков (44:30)
- 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)
БЭМ. Разметка элементов страницы
5 уроков (33:58)
- 1. Принцип разметки (04:40)
- 2. Использование классов (04:36)
- 3. BEM (05:46)
- 4. Разметка страницы (07:36)
- 5. Разметка содержимого (11:20)
Flexbox
13 уроков (26:26)
- 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
13 уроков (48:59)
- 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
12 уроков (01:28:36)
- 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. Разметка
Воркшоп
11 уроков (01:18:19)
- 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 иконки в спрайт.
Адаптивная вёрстка
14 уроков (01:29:18)
- 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)
17 уроков (58:05)
- 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)
Воркшоп
10 уроков (43:51)
- 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)
— Выполняем задачи по JavaScript.
— Верстаем слайдер.
— Делаем верстку меню и обеспечиваем его функциональность.
Вопрос-ответ
Вебинар
Основы JavaScript
14 уроков (02:16:17)
- 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
5 уроков (01:28:46)
- 1. Введение (21:22)
- 2. События (09:42)
- 3. Обработка ввода (27:44)
- 4. Работа с формами (19:54)
- 5. Рабочий пример (10:04)
Обработка ошибок и отладка
4 урока (01:23:18)
- 1. Инструменты браузера (19:29)
- 2. Обработка ошибок (36:12)
- 3. Стек вызовов (15:10)
- 4. Отладка (12:27)
JavaScript. Задачи
Воркшоп
16 уроков (01:19:27)
- 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)
— Создаём виджеты на странице: аккордеон, слайдер, модальное окно.
— Реализуем работу формы заказа.
— Обеспечить обработку ответа от сервера в форме заказа.
jQuery. Работа с библиотекой
28 уроков (01:25:05)
- 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
5 уроков (01:19:41)
- 1. Асинхронные сетевые запросы (15:52)
Бесплатный урок - 2. JSON (13:05)
- 3. Работа с формами (19:15)
- 4. Валидация данных (22:42)
- 5. Отправка данных на сервер (08:47)
CHOCCO. Виджеты
Воркшоп
8 уроков (49:59)
- 1. Слайдшоу (07:07)
- 2. Вертикальный аккордеон. Верстка (05:19)
- 3. Вертикальный аккордеон. Реализация (07:26)
- 4. Слайдер (10:32)
- 5. Форма. Вызов модального окна (04:09)
- 6. Форма. Отправка запроса (04:32)
- 7. Форма. Валидация (04:41)
- 8. Форма. Обработка ответа (06:13)
— Подключаем интерактивную карту google / yandex.
— Реализуем OnePageScroll.
— Разделяем структуру проекта на Dev и Prod.
— Реализуем видео-плеер при помощи HTML5 Video API.
NPM
11 уроков (35:05)
- 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
25 уроков (01:42:55)
- 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
6 уроков (27:53)
- 1. Подготовка (01:37)
Бесплатный урок - 2. Инициализация (06:59)
- 3. Запуск и остановка (03:06)
- 4. Продолжительность видео (05:26)
- 5. Ползунок (06:10)
- 6. Завершение работы (04:35)
Подключение Яндекс.Карты
1 урок (08:49)
- Подключение Яндекс.Карты (08:49)
CHOCCO. Интерактивные элементы
Воркшоп
15 уроков (01:03:23)
- 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 — Выпускной
— Работа над проектом.
— Выдача дипломов за курс.
Вопрос-ответ
— Практический вебинар с преподавателем.
Спойлер: Выпускной проект
В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий лендинг для магазина.
Продажник