Профессиональный интенсив по верстке

|
Live-формат, 9 недель
Старт потока:  
Откроем глаза

Об интенсиве

Теория и практика

8 live-уроков (4 недели), которые проходят по понедельникам и средам с 19:30 до 21:30 по Киеву и Москве. Каждый участник получает максимум внимания. Занятия проходят в интерактивном формате, это не записанное видео, а живое общение в реальном времени.

Если вы пропустили занятие или желаете повторить тему — не переживайте! Вам будет предоставлен доступ к записям уроков.

На практику выделяется 5 недель. За это время будут написаны 3 персональные приложения, а также все студенты группы могут принять участие в групповой разработке проекта.

Материалы

Мы предоставляем неограниченный доступ к учебным материалам курса: записи уроков в видео- и аудио-формате, истории чатов, домашние задания c решениями от преподавателя, исходные коды примеров, которые использовались на уроках, а также списки полезных материалов.

Поддержка

Помощников достаточно! К твоим услугам преподаватель, ментор и целое коммьюнити — Lectrum Club. В курс включена проверка домашних заданий и тестов, а также индивидуальные занятия с автором курса — поддержки получите столько, сколько вам нужно.

Как проходит обучение

  • 💻 Общение в интерактивном формате (видео + аудио)
  • 📝 Домашние задания
  • 📖 3 персональных проекта
  • 👨‍⚕️ Групповой проект в формате Agile спринта
  • Комплексное тестирование
  • 🎥 24/7 доступ ко всем записям занятий
  • 👨‍🎓 Поддержка от преподавателя и общение с группой в закрытом канале Lectrum Club

Для кого курс

  • ✔️ Желающие начать свой путь в ИТ
  • ✔️ Фронтенд-разработчики, которые хорошо владеют JavaScript и хотят подтянуть верстку
  • ✔️ Бекенд-разработчики, которые переходят в фуллстек

Требования к участникам

  • ✔️ Опыт коммерческой разработки не требуется
  • ✔️ Навыки работы с JavaSript не обязательны
  • ✔️ Базовый уровень владения компьютером

Мы проведём персональное skype-собеседование (оплата 650 грн или $25) при условии бронирования места в группе.

От экспертов своего дела

Мы успешно провели:

17 потоков по React, 12 по Redux, 4 по webpack, а также обучили 4 потока по JavaScript и 3 по Backend. В марте 2019 года мы запустили новые курсы по Docker и Redis.

Наша оценка от выпускников — 4.9.

интенсивно

Структура курса

  • Неделя 1

    Модуль: Основное обучение

    +Базовые операции с системой Git и настройка окружения

    Разберем воркфлоу по которому происходит обучение. Настроим все необходимые инструменты для комфортной разработки. Познакомимся с системой контроля версий Git.

    Подробнее...

    • Организационные вопросы

      • Обзор процесса обучения
      • Обзор инструментов
    • Git

      • Что такое система контроля версий
      • Когда стоит использовать Git
      • Создание коммита с помощью системы Git
      • Просмотр истории коммитов
      • Базовые операции с ветками кода
      • Обзор сервиса GitLab и GitHub
      • Работа с Pull Request
    • Настройка окружения

      • Настройка стартовой точки
      • Сравнение популярных редакторов кода
      • Базовая настройка редактора для комфортной работы
      • Настройка браузера

    Практика

    • Научимся настраивать проект для разработки
    • Научимся выбирать удобный инструмент для написания кода
    • Создадим первые файлы с разметкой кода
    • Научимся отправлять код в репозиторий

    +Работа с графическим редактором

    Разберем стандартный workflow по которому происходит разработка web приложения. Научимся работать с макетами в приложениях Adobe Photoshop, Adobe XD.

    Подробнее...

    • Стандартный workflow процеса web разработки

      • Разбор ключевых ролей в процесе разработки
      • Разбор основных терминов которые описывают процес разработки
      • Как выглядит процес разработки веб приложения
      • Популярные организационные ошибки начинающих программистов
    • Работа с графическим редактором

      • Зачем верстальщику нужен графический редактор кода
      • Сравнение Adobe Photoshop и Adobe XD в контексте работы верстальщика
      • Разбор основных инструментов для работы с макетом в приложении Adobe Photoshop
      • Разбор основных инструментов для работы с макетом в приложении Adobe XD

    Практика

    • Научимся работать с техническим заданием
    • Подготовим все необходимые компоненты для начала разработки
  • Неделя 2

    Модуль: Основное обучение

    +Создаем полноценную разметку

    Научимся создавать правильную семантическую разметку на основании макета и технического задания.

    Подробнее...

    • Работа с разметкой

      • Компоненты HTML документа
      • Синтаксис HTML тегов
      • Разбор основных тегов
      • Какую верстку можно считать семантичной
      • Разбор популярных ошибок при создании разметки страницы

    Практика

    • Создадим первые HTML страницы
    • Научимся трансформировать идею из макета в полноценный каркас для HTML документа

    +Настраиваем базовые стили

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

    Подробнее...

    • Работа со стилями

      • Зачем нужны CSS стили
      • Синтаксис CSS правил
      • Способы подключения CSS к веб документу
      • Разбор основных селекторов
      • Написание CSS стилей c помощью SASS
      • Разбор популярных ошибок при работе со стилями

    Практика

    • Напишем стили для наших HTML страниц
    • Научимся делать веб страницы похожими на графические макеты согласно технического задания
  • Неделя 3

    Модуль: Основное обучение

    +Создаем глобальную сетку для веб страницы

    Научимся создавать полноценный layout для веб страницы. Разберем приемы для создания строк и колонок.

    Подробнее...

    • Работа с CSS Grids

      • Разбор понятия сетка документа
      • Разбор блочной модели документа
      • Работа с Grid контейнером
      • Работа с Grid элементом
      • Работа с Grid линией
      • Работа с Grid track
      • Работа с Grid cell
      • Работа с Grid area
      • Разбор популярных ошибок при работе с CSS Grids

    Практика

    • Создадим сетку документа на основании графического макета согласно технического задания
    • Научимся работать с разными типами сеток

    +Создаем Layout внутри компонента

    Научимся управлять расположением элементов внутри компонента.

    Подробнее...

    • Работа с Flexbox

      • Разбор основной терминологии
      • Работа с разными типами осей внутри Flexbox контейнера
      • Управление расположением элементов
      • Управление порядком элементов
      • Разбор популярных ошибок при работе с Flexbox

    Практика

    • Расположим все элементы внутри компонентов согласно графического макета
    • Научимся полностью контролировать расположение элементов внутри компонента
  • Неделя 4

    Модуль: Основное обучение

    +Продвинутые приемы для улучшения стилей

    Научимся делать веб страницы максимально похожими на графические макеты, другими словами научимся делать PixelPerfect страницы. Превратим статические элементы в динамические с помощью CSS анимаций. Научимся добавлять на страницу графические элементы разного типа.

    Подробнее...

    • Продвинутые техники работы со шрифтами

      • Управление рендерингом шрифта
      • Разбор свойств для настройки параметров букв и слов
      • Управление отступами
      • Разбор разных типов подчеркиваний
      • Разбор популярных ошибок при работе с кастомными шрифтами
    • Продвинутые техники работы с графическими элементами

      • Работа с позиционированием элемента
      • Управление задним фоном элемента
      • Работа с градиентом
      • Настройка теней
      • Особенности при работе с графическими элементами в формате png
      • Особенности при работе с графическими элементами в формате svg
      • Разбор популярных ошибок при работе с графическими элементами

    Практика

    • Добавим полупрозрачные маски с помощью CSS градиентов
    • Научимся работать с тенями
    • Задекорируем компоненты с помощью svg изображений

    +Введение в анимации

    Научимся добавлять динамику к веб страницам с помощью CSS анимаций. Разберем когда стоит использовать CSS Transition а когда CSS Keyframes.

    Подробнее...

    • Базовые анимации с помощью CSS Transition

      • Управление CSS свойствами которые нужно анимировать
      • Настройка продолжительности анимации
      • Разбор популярных ошибок при работе с CSS Transition
    • Продвинутые анимации с помощью CSS Keyframes

      • Что такое раскадровка
      • Групировка кадров
      • Работа с повторяющимся анимациями
      • Настройка направления анимации
      • Задержка начала анимации
      • Работа с состоянием до и после анимации
      • Разбор популярных ошибок при работе с CSS Keyframes

    Практика

    • Добавим плавные переходы для основных операций
    • Настроим продвинутую анимацию с помощью CSS Keyframes
  • Неделя 5

    Модуль: Работа над проектами

    +Первая неделя практики

    Подготовим окружение и приступим к работе над персональным проектом

    Подробнее...

    • Рабочий процесс

      • Изучить рабочий workflow по которому будет происходить практика
      • Получить ТЗ для первого проекта
      • Настроить стартовую точку
      • Получить дополнительные материалы
      • Приступить к выполнению первых фич для своего проекта
  • Неделя 6

    Модуль: Работа над проектами

    +Вторая неделя практики

    Отправим проект на Code Review, имплементируем фидбек от наставника

    Подробнее...

    • Рабочий процесс

      • Завершаем работу над основной частью своего проекта
      • Открываем Pull Request и отправляем проект на Code Review
      • Имплементируем фидбек от наставника
      • Открываем Pull Request и отправляем проект на повторное Code Review
      • Завершаем работу над проектом
      • Открываем Pull Request и отправляем проект на финальную проверку
      • Приступаем к работе над вторым проектом
  • Неделя 7

    Модуль: Работа над проектами

    +Третья неделя практики

    Отправим второй проект на Code Review, имплементируем фидбек от наставника по второму проекту

    Подробнее...

    • Рабочий процесс

      • Завершаем работу над основной частью своего второго проекта
      • Открываем Pull Request и отправляем проект на Code Review
      • Имплементируем фидбек от наставника
      • Открываем Pull Request и отправляем второй проект на повторное Code Review
      • Завершаем работу над вторым проектом
      • Открываем Pull Request и отправляем второй проект на финальную проверку
      • Приступаем к работе над третьим проектом
  • Неделя 8

    Модуль: Работа над персональными и групповыми проектами

    +Четвертая неделя практики

    Отправим третий проект на Code Review, имплементируем фидбек от наставника по третьему проекту

    Подробнее...

    • Рабочий процесс

      • Завершаем работу над основной частью своего третьего проекта
      • Открываем Pull Request и отправляем проект на Code Review
      • Имплементируем фидбек от наставника
      • Открываем Pull Request и отправляем проект на повторное Code Review
      • Завершаем работу над проектом
      • Открываем Pull Request и отправляем проект на финальную проверку

    +Работа над групповым проектом

    Выполним задачи для групового проекта, научимся работать в формате Agile спринтов

    Подробнее...

    • Подготовительная работа

      • Настроить стартовую точку
      • Изучить рабочий workflow по которому будет происходить работа в груповом проекте
      • Групповое планирование спринта
    • Рабочий процесс

      • Выбрать интересную задачу из Backlog
      • Получить дополнительные материалы
      • Приступить к выполнению задачи
      • Выполнить задачу
      • Отправить задачу на проверку (QA)
      • Имплементировать фидбек
      • Отправить задачу на повторный раунд QA
      • Взять другую задачу из Backlog
  • Неделя 9

    Модуль: Работа над групповым проектом

    +Работа над груповым проектом

    Выполним задачи для групового проекта, научимся работать в формате Agile спринтов

    Подробнее...

    • Рабочий процесс

      • Выбрать интересную задачу из Backlog
      • Получить дополнительные материалы
      • Приступить к выполнению задачи
      • Выполнить задачу
      • Отправить задачу на проверку (QA)
      • Имплементировать фидбек
      • Отправить задачу на повторный раунд QA
      • Взять другую задачу из Backlog
    • Финальное демо

      • Каждый студент проводит короткое демо своих фич, которые были выполнены в рамках спринта
    • Ретроспектива

      • Разбор всех достижений и неудач которые были в рамках спринта

весь htmlCss

Куратор программы

Андрей Мулык

Chief Technology Officer в компании Lectrum и преподаватель. За его плечами опыт работы с крупными международными outsource и outstaff компаниями, а также кураторство и проведение курсов фронтент и бекенд направлений.

Автор продвинутых фронтенд-курсов. Опыт в IT более 10 лет.

профессионалы

Выберите пакет участия

Я сам

  • Посещение live-занятий
  • Доступ к записям live-занятий
  • Исходные коды и файлы презентаций
  • Список дополнительных материалов для углубленного изучения
  • 2 собственных приложения по окончании курса
  • Участие в групповой разработке проекта
  • Финальное тестирование
  • Доступ к закрытому комьюнити Lectrum Club
  • Онлайн-сертификат
  • Домашние задания с проверкой
  • ❌ Код-ревью домашних заданий
  • ❌ Персональный ментор на время обучения
  • ❌ Исходный код всех проектов
Для ранних пташек — 
С 11 июня — 
С 8 октября — 

С наставником

  • Посещение live-занятий
  • Доступ к записям live-занятий
  • Исходные коды и файлы презентаций
  • Список дополнительных материалов для углубленного изучения
  • 3 собственных приложения по окончании курса
  • Участие в групповой разработке проекта
  • Финальное тестирование
  • Доступ к закрытому комьюнити Lectrum Club
  • Онлайн-сертификат
  • Домашние задания с проверкой
  • Код-ревью домашних заданий
  • Персональный ментор на время обучения
  • Исходный код всех проектов
Для ранних пташек — 
С 11 июня — 
С 8 октября — 
Спасибо за участие на воркшопе!  В течение 0 часов несколько секунд для вас действует специальное предложение.
Чтобы зафиксировать текущую стоимость достаточно оставить заявку и внести предоплату в размере .
мы открыты вам

Бронирование

Участие в пакете «Я сам»
Участие в пакете «С наставником»
Участие в пакете Premium

Ответы на вопросы

Какими необходимыми навыками я должен обладать перед началом курса?
Для участия в курсе опыт коммерческой разработки не нужен. Но чтобы не возникало сложностей в процессе обучения, необходимо иметь базовые навыки работы с компьютером. Никакие другие специфические навыки не требуются для участия в интенсиве. После бронирования мы проведём персональное техническое собеседование и поможем закрыть необходимые пробелы в знаниях.
Какая информация будет содержаться в сертификате, если я не буду разрабатывать персональные проекты?
Онлайн-сертификат будет с информацией о прослушанном курсе, без оценки.
Я очень хорошо знаю HTML & CSS и хочу быть у вас ментором.
Обычно, после тестирования оказывается, что вы знаете HTML & CSS не так уж и хорошо. Это одна из причин, почему мы сделали этот курс. Если чувствуете в себе силы, позвоните нам и мы протестируем вас. Для менторства требуется не только идеальное знание HTML & CSS, но и миллион других навыков для профессионального обучения людей.
Могу ли я перейти на более продвинутый пакет, если уже оплатил курс?
Да, для этого нужно обратиться к нам на электропочту и мы пришлём вам счет на доплату.
Чем вы лучше других обучающих компаний?
Во-первых, у нас большая экспертиза в образовании, во-вторых, мы очень фанатично относимся к качеству курса и менторской поддержки, а в третьих, мы не просто учим, а ежедневно пишем на том стеке, которому обучаем. Мы практики, теоретики, а еще идеалисты.
У меня остались вопросы/Я всё еще сомневаюсь.
Оставьте заявку на получение бесплатной консультации и мы с удовольствием вас проконсультируем, посоветуем или просто пообщаемся.
мы открыты вам