Профессия
Веб-разработчик
Что ожидать от обучения?
- Знания и навыкиВсе необходимые знания для веб-разработчика.
- ПортфолиоВо время обучения вы выполните 5 проектов с использованием современных технологий.
- СертификатС оценкой, отражающей уровень ваших знаний и степень отдачи.
- Начало карьерыПосле обучения вы сразу же готовы к старту карьеры.
HTML и CSS
Адаптивная верстка
JavaScript
Архитектура приложений
Workflow
Работа с макетами
API
PHP
Период обучения: 25.07.2022 - 25.12.2022
Программа включает в себя:
Программа включает:
- 7 вебинаров с преподавателями
- 18 групповых занятий с наставником
- Обратную связь по проекту от практикующего специалиста
- 60+ обучающих модулей
- 100+ часов обучения
- Кратчайшие сроки
Через 5 месяцев студент, успешно окончивший обучение, готов к старту карьеры.
Почему стоит выбрать LoftSchool
Безупречная репутация
Ламповая атмосфера
Кратчайшие сроки
Крутой наставник
завтра
Период обучения: 25.07.2022 - 25.12.2022
Преподаватели
Наставники Loft – практикующие эксперты в IT отрасли
- Дают знания, а не ответы.
- Любят объяснять и умеют доносить сложную информацию понятным языком.
- Требовательны к качеству вашего кода: вы не сдадите ДЗ, пока ваш код не станет идеальным.
- Хорошо понимают других людей и умеют находить подход к любым ученикам.
- Всегда готовы прийти на помощь.
Даже если ничего не понятно, вы не останетесь один на один со своими проблемами. Наставник всегда будет рядом и не даст вам опустить руки.

60 000
- Вы окупите затраты на обучение за 1,5 - 2 месяца работы.
- Согласно нашему анализу, это реальная средняя зарплата по России. При этом вы должны понимать, что в Москве, Санкт-Петербурге и других городах-миллионниках она может быть выше (иногда в 2 – 3 раза).
- Основы вёрстки сайтовПрограмма обучения
- Неделя 1 — Работа с хостингом, HTML— Знакомимся со своим личным наставником и группой. — Учимся работать с панелью хостинга и с файлами через FTP. — Делаем разметку для первой страницы проекта. — Размещаем результат работы в сети Интернет и сдаём на проверку наставнику.
- Открытие курсаОткрытие курса25.07.2022 20:00РазвернутьСвернуть— Введение в курс. — Знакомство с командой. — Организационные вопросы.
- VSCode. Обзор редактораМодуль13 уроков (39:55)РазвернутьСвернуть
- 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)РазвернутьСвернуть
- 1. Устройство интернета (31:46)
- Работа с GitHub PagesМодуль2 урока (21:52)РазвернутьСвернуть
- 1. GitHub Pages. Работа из браузера (05:24)
- 2. Работа с хостингом timeweb (16:28)
- HTMLМодуль23 урока (01:45:27)РазвернутьСвернуть
- 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)
- БЭМ. Разметка элементов страницыВоркшоп5 уроков (33:58)РазвернутьСвернуть
- 1. Принцип разметки (04:40)
- 2. Использование классов (04:36)
- 3. BEM (05:46)
- 4. Разметка страницы (07:36)
- 5. Разметка содержимого (11:20)
- Неделя 2 — CSS, работа с макетом, Perfect Pixel— Стилизуем элементы главной страницы. — Изучаем свойства позиционирования и поведение блочной модели.
- Figma для верстальщикаМодуль2 урока (06:09)РазвернутьСвернуть
- 1. Figma. Интерфейс (04:37)
- 2. Figma. Организация проектов (01:32)
- CSS. Работа со стилямиМодуль10 уроков (51:49)РазвернутьСвернуть
- 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)
- Работа со шрифтамиМодуль6 уроков (28:55)РазвернутьСвернуть
- 1. Безопасные шрифты (02:13)Бесплатный урок
- 2. Бесплатные шрифты (03:02)
- 3. Конвертирование шрифтов (06:19)
- 4. font-face (08:05)
- 5. Наследуемые свойства (03:51)
- 6. Общие стили текста (05:25)
- Блочная модельМодуль11 уроков (45:31)РазвернутьСвернуть
- 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)
- Стилизация проектаВоркшоп14 уроков (01:27:19)РазвернутьСвернуть
- 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.
- Вопрос-ответВебинар08.08.2022 20:00РазвернутьСвернуть— Практический вебинар с преподавателем.
- 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)
- Построение лейаута и БЭМ-неймингМодуль11 уроков (01:25:31)РазвернутьСвернуть
- 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. Реализация проектаВоркшоп11 уроков (01:07:50)РазвернутьСвернуть
- 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-анимации— Подключаем иконки к проекту с применением спрайтов. — Реализуем динамические элементы страниц. — Дорабатываем проект.
- Частые приемы версткиМодуль15 уроков (01:16:15)РазвернутьСвернуть
- 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Модуль16 уроков (50:27)РазвернутьСвернуть
- 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)
- Анимации. Реализация проектаВоркшоп10 уроков (45:14)РазвернутьСвернуть
- 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 — Защита выпускного проекта— Дорабатываем проект. — Сдаём проект на проверку наставникам. — Выставление оценок в дипломы.
- Вопрос-ответВебинар22.08.2022 20:00РазвернутьСвернуть— Практический вебинар с преподавателем.
- Веб-разработка для начинающихПрограмма обучения
- Неделя 1 — Git и GitHub, SASS, разметка страницы— Верстаем заданные секции из дизайн-макета. — Формируем структуру CSS, организуем входной файл стилей с применением SCSS. — Размещаем работу в репозитории и на GitHub Pages.
- Открытие курсаОткрытие курса1 урок (01:05:23)РазвернутьСвернуть
- 1. Как проходит обучение (01:05:23)
- Вводное занятиеМодуль1 урок (06:53)РазвернутьСвернуть
- 1. Вводное занятие (06:53)
- Figma для верстальщикаМодуль2 урока (06:09)РазвернутьСвернуть
- 1. Figma. Интерфейс (04:37)
- 2. Figma. Организация проектов (01:32)
- 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)
- SVGМодуль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)
- CHOCCO. Адаптивная версткаВоркшоп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)
- Неделя 3 — JavaScript, работа с DOM— Выполняем задачи по 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)
- Неделя 4 — Обработка ошибок, работа с формами, Ajax— Создаём виджеты на странице: аккордеон, слайдер, модальное окно. — Реализуем работу формы заказа. — Обеспечить обработку ответа от сервера в форме заказа.
- Вопрос-ответВебинар15.08.2022 20:00РазвернутьСвернуть— Практический вебинар с преподавателем.
- 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)
- Неделя 5 — Плагины, Workflow, работа с API— Подключаем интерактивную карту 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)РазвернутьСвернуть
- 1. Подключение Яндекс.Карты (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 — Выпускной— Работа над проектом. — Бонусный вебинар по основам PHP. — Выдача дипломов за курс.
- Основы PHPМодуль5 уроков (55:59)РазвернутьСвернуть
- 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)РазвернутьСвернуть
- 1. Открытие курса (08:36)
- 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)
- Как работает JavaScriptМодуль1 урок (24:08)РазвернутьСвернуть
- 1. Основы JS (24:08)
- Переменные и функцииМодуль8 уроков (01:11:23)РазвернутьСвернуть
- 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 урок (15:39)РазвернутьСвернуть
- 1. Домашнее задание №1 (15:39)
- Неделя 2 — Объекты и массивы, обработка ошибок— Разбираем базовые операции с объектами и массивами, изучаем деструктуризацию и spread-оператор. — Изучаем динамические свойства массивов, учимся создавать proxy. — Разбираем инструменты разработчика, изучаем принципы обработки исключений.
- Объекты и массивыМодуль9 уроков (02:09:16)РазвернутьСвернуть
- 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)
- Обработка ошибок и отладкаМодуль4 урока (01:23:23)РазвернутьСвернуть
- 1. Инструменты браузера (19:33)
- 2. Обработка ошибок (36:14)
- 3. Стек вызовов (15:14)
- 4. Отладка (12:22)
- Разбор заданий #2Воркшоп2 урока (24:55)РазвернутьСвернуть
- 1. Домашнее задание №2 (12:30)
- 2. Домашнее задание №3 (12:25)
- Неделя 3 — DOM, асинхронность— Учимся создавать, выбирать и модифицировать элементы DOM, изучаем механизм DOM-событий. — Рассматриваем, что такое обработчик событий, делегирование. — Изучаем асинхронность в JS, разбираем Promise, Async/await.
- DOMМодуль6 уроков (01:53:53)РазвернутьСвернуть
- 1. Введение (21:25)
- 2. Cобытия (09:42)Бесплатный урок
- 3. Обработка ввода (27:44)
- 4. Работа с формами (19:54)
- 5. Рабочий пример (09:34)
- 6. Обход DOM-дерева (25:34)
- АсинхронностьМодуль3 урока (01:45:10)РазвернутьСвернуть
- 1. Таймеры (24:03)
- 2. Promise (01:03:47)
- 3. Async Await (17:20)
- Разбор заданий #3Воркшоп2 урока (34:33)РазвернутьСвернуть
- 1. Домашнее задание №4 (19:22)
- 2. Домашнее задание №5 (15:11)
- Вопрос-ответВебинар20.08.2022 12:00РазвернутьСвернуть— Практический вебинар с преподавателем.
- Неделя 4 — Работа с сетью, Browser API— Рассматриваем работу с сетью на примере WebSocket, ServiceWorks. — Изучаем Local/Session Storage, HTML 5 Drag and Drop. — Рассматриваем принцип взаимодействия между окнами и iframe.
- Работа с сетьюМодуль5 уроков (01:16:50)РазвернутьСвернуть
- 1. Асинхронные сетевые запросы (17:34)Бесплатный урок
- 2. JSON (13:09)
- 3. Fetch (19:26)
- 4. WebSocket (11:22)
- 5. Service Worker (15:19)
- Browser APIМодуль5 уроков (01:24:19)РазвернутьСвернуть
- 1. LocalStorage (25:29)
- 2. Cookies (18:39)
- 3. Навигация hash (12:05)
- 4. Навигация history (11:02)
- 5. File API (17:04)
- Разбор заданий #4Воркшоп2 урока (40:20)РазвернутьСвернуть
- 1. Домашнее задание №6 (21:24)
- 2. Домашнее задание №7 (18:56)
- Неделя 5 — Работа с VK API, ООП— Изучаем документацию по работе с VK API. Рассматриваем шаблонизацию. — Рассматриваем основы ООП в JavaScript. Изучаем полиморфизм, наследование, инкапсуляцию, конструкторы и классы.
- Работа с VK API и шаблонизацияМодуль2 урока (01:06:25)РазвернутьСвернуть
- 1. Шаблонизация (29:20)
- 2. VK SDK (37:05)
- ООПМодуль6 уроков (02:39:32)РазвернутьСвернуть
- 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Воркшоп5 уроков (44:27)РазвернутьСвернуть
- 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*Модуль3 урока (01:02:43)РазвернутьСвернуть
- 1. Паттерны MV (07:06)Бесплатный урок
- 2. MVC (30:14)
- 3. MVVM (25:23)
- МодулиМодуль3 урока (49:52)РазвернутьСвернуть
- 1. Модульность в JS (26:35)
- 2. Перевод проекта на модули (12:28)
- 3. ES6-модули (10:49)
- Разбор заданий #6Воркшоп4 урока (01:03:24)РазвернутьСвернуть
- 1. CHAT — INTRO (05:01)
- 2. CHAT (Часть — 1) (12:23)
- 3. CHAT (Часть — 2) (28:00)
- 4. CHAT (Часть — 3) (18:00)
- Вопрос-ответВебинар10.09.2022 12:00РазвернутьСвернуть— Практический вебинар с преподавателем.
- Неделя 7 — Node.js, тестирование— Знакомимся с Node.js. Рассматриваем работу с файлами и сетью. — Определяемся с необходимостью тестирования JS-кода. — Знакомимся с библиотеками для тестирования.
- Node.js (краткое знакомство)Модуль1 урок (37:10)РазвернутьСвернуть
- 1. Node.js (краткое знакомство) (37:10)
- Тестирование JS-кодаМодуль4 урока (50:55)РазвернутьСвернуть
- 1. Введение (16:05)
- 2. Jest (15:47)
- 3. Польза тестов (09:01)
- 4. Coverage (10:02)
- Разбор заданий #7Воркшоп5 уроков (48:45)РазвернутьСвернуть
- 1. Другофильтр. Intro (02:47)
- 2. Другофильтр. Часть I (19:49)
- 3. Другофильтр. Часть II (16:34)
- 4. Другофильтр. Часть III (03:56)
- 5. Другофильтр. Часть IV (05:39)
- Как получить работу в IT: фишки и советыМодуль9 уроков (05:39:05)РазвернутьСвернуть
- 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)
Проекты, за которые не стыдно
Каждому курсу соответствуют проекты, которые после успешной защиты студент сможет добавить себе в портфолио.

Ваши будущие сертификаты
Отзывы выпускников
Михаил Бахирев
Я работаю PHP-разработчиком в Петербургском университете путей сообщения. Программистом я стал недавно, хотя и работал в сфере IT до этого – в менеджменте. Занимал должность генерального директора. В качестве вектора я выбрал веб-разработку – меня всегда интересовало создание сайтов. Да и порог вхождения в веб ниже. Я поступил учиться на профессию «веб-разработчик» в Loftschool, но назвать меня...
Максим Никульников
Я работал в логистике и международных перевозках, но сразу понимал, что не хочу заниматься этим всю жизнь. Пробовал погружаться в разные направления, пытался понять что же мне на самом деле интересно. Брал пробные курсы и тренинги в совершенно разных сферах: UX-дизайн, Digital-рисунок, менеджмент проектов. Слушал, что говорят преподаватели, делал задания. Среди всего прочего пробовал погрузитьс...
Влад Климов
Сначала я думал, по расписанию программы, что первые две недели мне не нужны, ведь эта информация на уровне средне-образовательной школы. Я еще никогда так не ошибался)) Очень подробно объяснили простым языком сложные вещи. За несколько вебинаров я понял как в принципе работает интернет. Потом началась практика и тут уже началось самое интересное. Поначалу я думал что можно чуть-чуть похалявить...
Виктория Бушина
Я закончила курс "Основы верстки" в профессии "Веб-разработчик"! Это был насыщенный и невероятно интересный месяц! А самое главное — продуктивный! Все имеющиеся знания встали по полочкам, а новые усвоились удивительно легко! Порадовала возможность выбора макета для верстки. Теория дается в виде видео-курсов — очень удобно, так как можно много раз пересмотреть, ставить на паузу и сразу писать ко...
Дмитрий Анисов
Очень понравился данный курс из профессии! Весь материал был грамотно структурирован и подан, изначально думал будет простенькое введение на этом курсе, а оказалось, что на нём даётся очень достойный стэк знаний. Так же мне помогли разобраться в тонкостях тех или иных свойств и элементов. Научили грамотно и правильно верстать, используя современные подходы и технологии. Очень хорошо структуриро...
Светлана Филимонова
Курс "Основы верстки" прошел быстро и оставил после себя приятное впечатление и прочный фундамент для дальнейшего развития в профессии "веб-разработчик". До начала курса у меня было представление о HTML и CSS, однако дело до макетов не доходило. Тем не менее, курс дался мне достаточно легко, честно скажу готовилась к худшему)), а все благодаря прекрасной подаче материала на вебинарах, которые в...

Ольга Баранова
Очень нравится находиться в пространстве школы. Совсем нет ощущения, что какой-то частью это пространство виртуально, все люди находятся за тысячи километров друг от друга, и за свое рабочее место ты попадаешь, перейдя из кухни в комнату. Настолько живым получается процесс обучения здесь. Правда. Попадаешь в такую атмосферу обучения, где не только хочется учиться и не хочется сдаваться, но и пр...
Игорь Крамарь
Узнал из курса много интересного, научился новым технологиям и сделал ещё один красивый и функциональный сайт для своего портфолио. Но это заслуга больше не моя, я ведь только учился, а людей, которые в этом мне помогли: моего наставника, Ольги Болотовой, верно ведущей на пути к заветной цели стать профессионалом в вебе, её ассистента на этом курсе, Анны Сысоевой, которая тоже работала с моим п...
Артём Климин
Я долго выбирал школу для прохождения курсов, среди огромного множества предложений остановился на Loftschool. Рассудил так: если меня будут обучать технологиям напрямую связанным с веб-разработкой, то сайт школы должен быть сделан очень профессионально. Именно таким и является сайт Loftcshool. Я очень рад, что не ошибся с выбором, пройденный курс доказал высочайшую квалификацию преподавателей ...
Антон Дубовский
Подошел к концу курс "веб-разработка для начинающих". Это уже второй пройденный мной курс LoftSchool. И мне он очень понравился! В отличие от первого курса, где у меня все получалось достаточно быстро, так как был год за плечами просмотров всяких уроков и статеек по верстке и тд. На этом курсе хардкорность значительно увеличилась. Что конечно же плюс, так как было очень много нового материала и...
Ваше резюме после обучения
25 декабря 2022 г.
Опыт
- Менее 1 года.
- Реализовано 5 проектов.
- Опыт работы в команде.
Ключевые навыки
- Отличное знание HTML/CSS/SASS.
- Уверенный навык использования JavaScript.
- Работа с макетами в Figma.
- Уверенная работа с SVG.
- Кроссбраузерная верстка.
- Работа с Gulp, NPM.
- Работа с Git и GitHub Pages.
- Навык использования PHP, MySQL.
- Освоение новых технологий за короткие сроки.
Ответы на часто задаваемые вопросы
- Обучаете ли вы с нуля? Если я не из IT?
Профессия начинается с курса “Основы вёрстки”. Данный курс специально создан для вас – новичков в мире IT. Однако и ребятам с опытом будет не скучно. Благодаря индивидуальной работе с наставником, программа курса “подстраивается” под нужды каждого конкретного студента.
- Зачем платить за обучение, если в интернете можно найти всё бесплатно?
Покупая курс в LoftSchool, вы платите за гарантированный результат, а не за набор материалов. От вас требуется чётко следовать программе обучения, выполняя все домашние задания, которые будут строго проверяться вашим наставником. На выходе с курса – вы будете подготовлены к старту карьеры в IT-индустрии. Так что сами по себе материалы, которые действительно можно найти бесплатно, хоть и важны, но не играют решающего фактора. Это лишь кирпичик в здании нашей школы.
- Какая выгода покупать все курсы вместе?
Вы экономите до 30% (в сравнении с покупкой курсов по отдельности). И гарантированно попадёте на все курсы подряд, чтобы получить результат в максимально сжатые сроки.
- Предусмотрен ли возврат денег, если я передумаю проходить курс или профессию?Да. Мы возвращаем деньги 2 путями, на ваш выбор:
- на вашу банковскую карту за вычетом 5% издержек (согласно публичной оферте), либо
- на личный счет в системе LoftSchool в полном размере (деньги затем можно потратить на любой курс школы).
В обоих случаях возврат возможен не позднее 3-го дня с момента старта обучения.
Мы также можем перевести вас на другой поток или курс не позднее 7-го дня с момента старта обучения. Такой перевод возможен только 1 раз.
- Можно ли платить частями?
Для желающих обучаться в нашей школе мы, совместно с сервисом ЮKassa и банками-партнёрами, предоставляем рассрочку от 3 до 36 месяцев.
Как это работает:- На странице курса либо профессии нажмите "Оплатить" и выберите вариант "В рассрочку".
- Далее выберите подходящий вам вариант (Тинькофф, ЮKassa, Халва, Почта Банк, Покупай со СберБанком).
- Выберите срок и размер выплат, другие условия кредита.
- За пару минут заполните короткую анкету.
- Через несколько минут получите решение банка о предоставлении кредита.
- При выборе рассрочки от ЮKassa, погасите полную стоимость обучения в течении 30 (или 60) дней, чтобы избежать переплат. Либо оплачивайте обучение частями в течение 6 или 12 месяцев с переплатой 3,9% в месяц.
- Почему и как мы гарантируем трудоустройство?
Мы гарантируем трудоустройство при успешном прохождении курсов (сданы все домашние задания и исправлены все ошибки), входящих в профессию, и прохождении не менее 10 собеседований.
В случае если после выполнения условий гарантии вы не устроились на работу/стажировку, то за ваше трудоустройство возьмется лично основатель LoftSchool.
- Что нужно для обучения в LoftSchool?
Для прохождения обучения вам понадобятся стабильный интернет и персональный компьютер (или ноутбук).
- Можно ли совмещать обучение с работой или учёбой?
Да, наши курсы спроектированы специально для работающих людей, в том числе с плавающим графиком работы. Домашние задания вы можете выполнять в удобное для себя время, а 90% уроков представлены в виде скринкастов - это заранее записанные видеоуроки в хорошем качестве, с актуальной информацией. Групповые занятия проводим в формате вебинаров, и каждому ученику будет доступна запись.
Период обучения: 25.07 - 25.12
Сумма указана для рассрочки на 12 месяцев. Точная ежемесячная плата зависит от срока и банка.