курс
«cтарт во фронтенде»

Ваши первые 100 часов практики во фронтенде

  • Объём практики:

    100 часов
  • Начальные требования:

    нулевой уровень
  • Итоговый уровень:

    новичок / любитель

Завершив курс, вы сделаете свой первый сайт

Начать курс

Курс построен на базе тренажёров

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

  • Обучение на тренажёре — это постоянная практика

    20% времени вы изучаете теорию и 80% времени пишете код. Только такой подход позволяет получить знания и набить руку до автоматизма. То, что нужно для старта.

  • Тренажёры позволяют учиться в комфортном ритме

    Вы можете учиться в комфортном ритме и наглядно отслеживать свой прогресс.

  • Подходит ли вам курс

    Этот курс подойдёт для полных новичков, для тех, кто не сталкивался ни с миром веб-разработки, ни с технологиями HTML, CSS и JavaScript. Мы изучим основы веб-технологий, и вы попробуете себя в роли верстальщика и фронтендера.

  • Ваш уровень после курса

    Когда вы пройдёте курс, вы сможете на любительском уровне верстать простые странички и оживлять небольшие компоненты на сайте. А также будете готовы осваивать продвинутые темы и начать прокачку до уровня фрилансера или стажёра в небольшой веб-студии.

  • Чему вы научитесь:

    • изучите базовые конструкции языков HTML, CSS и JavaScript,
    • разберётесь с тегами и их параметрами, CSS-свойствами, селекторами и каскадностью,
    • изучите команды JavaScript, переменные условия, циклы,
    • попробуете себя в роли фронтендера:
      • внесёте правки в вёрстку и скрипты страницы,
      • сверстаете с нуля сайт из графического макета,
      • напишете с нуля интерактивные компоненты по техническому заданию.

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

    • Что такое HTML? Основные понятия: теги, одиночные и парные теги, атрибуты тегов.
    • Что такое CSS? Основные понятия: CSS-свойства и их значения, CSS-правила, селекторы.
    • Пробуем себя в роли верстальщика, вносим правки в содержание и оформление существующей веб-страницы.
    • Отрабатываем приёмы стилизации по классам и миксование классов.
    • Что такое JavaScript? Основные понятия: скрипт, программа, команда, переменная, консоль, методы, события и их обработчики.
    • Приёмы для работы с элементами страницы: поиск элементов по селектору, управление списком классов, реагирование на событие, получение и изменение значений атрибутов.
    • Пробуем себя в роли фронтендера, оживляем компонент для переключения тем и программируем уведомление в форме.
    • Doctype в HTML. Основные теги страницы html, head, body. Теги для описания служебной информации.
    • Теги для описания смысловых разделов, навигации.
    • Заголовки, параграфы, списки. Вложенные списки.
    • Цитаты, фрагменты кода, дата и время.
    • Нижний и верхний индекс, акцентирование внимания, важная информация.
    • Универсальные теги div и span.
    • Ссылки, адреса ссылок. Относительные и абсолютные адреса. Ссылка-якорь.
    • Тег img, изображение. Обзор основных форматов. Управление размерами изображений.
    • Теги figure и figcaption, демонстративный материал.
    • Синтаксис CSS-правил, селекторов, свойств и значений. Обычные и составные свойства.
    • Типы значений: абсолютные и относительные.
    • Стили по умолчанию, каскад и конфликт свойств.
    • Встроенные стили, атрибут style. Встраивание и подключение внешних стилей.
    • CSS-свойства для управления текстовыми параметрами: семейство, размер и насыщенность шрифта, высота строки, цвет, курсив.
    • Абсолютные и относительные размеры шрифта и высоты строк.
    • Горизонтальное и вертикальное выравнивание текста, отступы.
    • Управление пробелами и регистром символов, подчёркивание, зачёркивание и другие текстовые эффекты.
  1. Раздел 3. Мастер-класс «Создание семантической разметки по макету»
    • Что такое разметка и что такое разметка по макету. Качества хорошей разметки: валидность и семантичность.
    • Пошаговый алгоритм создания разметки по макету.
    • Разбираем примеры разметки страниц и отдельных компонентов на основе графического макета.
    • Практикуемся самостоятельно делать разметку страницы по макету в тренажёре-мастерской.
    • Работаем с учебным проектом: создаём разметку страницы.
  2. Раздел 4. Базовые механики стилизации
    • Селекторы по тегам, по классам и по id. Селекторы атрибутов.
    • Контекстные, соседние и дочерние селекторы.
    • Псевдоклассы. Псевдоклассы :nth-child, :hover, :focus, :link, :visited и :active.
    • Динамические эффекты с помощью :hover.
    • Наследование. Наследуемые и ненаследуемые свойства. Принудительное наследование. «Перекрёстное» наследование.
    • Каскадирование. Специфичность селекторов. Расчёт значения специфичности.
    • Управление цветом фона и фоновыми изображениями.
    • Расположение, повторение и режим прокрутки фоновых изображений.
    • Задание нескольких фонов. Эффекты с повторяющимся фоном.
    • Использование растровых спрайтов.
  3. Раздел 5. Мастер-класс «Экспорт графики и базовая стилизация по макету»
    • Что такое стилизация по макету, какие задачи решаются во время базовой стилизации. Что такое экспорт графики.
    • Графический редактором Figma. Интерфейсы редактора, инструменты редактора для экспорта графики и параметров стилизации из макета.
    • Использование абсолютных и относительных путей в проекте.
    • Пошаговые алгоритмы экспорта графики и выбора формата изображения.
    • Примеры экспорта графики и параметров CSS-свойств из графического макета.
  4. Раздел 6. Боксовая модель и позиционирование
    • Боксовая модель и поток. Свойство display, управление типом бокса.
    • Особенности блочных, строчных и блочно-строчных типов бокса.
    • Ширина, высота, рамки, внутренние и внешние отступы боксов. Особенности внешних отступов блочных боксов.
    • Стандартный режим расчёта размеров блочных боксов. Управление этим режимом с помощью box-sizing.
    • Знакомство с семейством табличных боксов.
    • Режимы позиционирования: статичное, относительное, абсолютное и фиксированное.
    • Управление координатами позиционированных элементов.
    • Точка отсчёта координат. Явная и неявная точка отсчёта.
    • Свойство z-index, управление «глубиной» позиционированных элементов.
  5. Раздел 7. Базовые механики построения сеток
    • Сетка и макет страницы. Отличия сеток страниц от сеток компонентов (микросеток).
    • Основные понятия гридов: грид-шаблон, грид-контейнер и грид-элемент.
    • Описание грид-шаблонов, управление размерами грид-областей и отступами между ними.
    • Создание ассиметричных грид-шаблонов. Грид-шаблоны с динамическим количеством колонок.
    • Распределение грид-элементов по грид-областям, ручное и автоматическое. Режимы автозаполнения грид-контейнера.
    • Управление выравниванием грид-элементов.
    • Основные понятия флексов: флекс-контейнер, флекс-элемент, оси, флекс-ряды.
    • Управление размерами и отступами флекс-элементов. Автоматические внешние отступы.
    • Выравнивание флекс-элементов вдоль главной и поперечной осей.
    • Многострочный флекс-контейнер, выравнивание флекс-рядов.
    • Управление визуальным порядком флекс-элементов.
    • Примеры вёрстки типовых сеток страниц и компонентов на флексах и гридах.
  6. Раздел 8. Мастер-класс «Создание сеток страниц по макету с помощью флексбоксов»
    • Выделим базовые типы сеток, способы их создания и тонкости, которые надо учитывать.
    • Затем научимся комбинировать базовые типы для создания более сложных сеток страницы.
    • Рассмотрим приемы для получения размеров, нужных для создания сеток, из редактора Figma.
  7. Раздел 9. Мастер-класс «Вёрстка компонентов интерфейса по макету»
    • Завершаем стилизацию страницы.
    • Научимся строить сетки отдельных компонентов, стилизовать интерфейсные тексты.
    • Разберемся с тонкостями стилизации текстового потока.
    • Познакомимся с особенностями создания мелких декоративных элементов.
  8. Раздел 10. Базовые механики «оживления» интерфейсов
    • Условия. Булевы значения. Операторы сравнения: больше, меньше, равенство, строгое равенство, неравенство, строгое неравенство.
    • Комбинирование условий с помощью операторов «логическое И» и «логическое ИЛИ».
    • Проверка наличия класса у элемента с помощью classList.contains.
    • Создание элементов с помощью createElement и добавление их на страницу с помощью append.
    • Поиск элементов с помощью querySelectorAll, коллекции, доступ к элементам коллекции по индексу.
    • Цикл for of. Перебор коллекций с помощью цикла.
    • Добавление обработчиков событий внутри цикла.
    • Работа с data-атрибутами.
    • Обработка события отправки формы.
    • Обработчик событий oninput, получение значений из текстовых полей, обработка текста во время ввода.
    • Обработчик событий onchange, получение значений из раскрывающихся списков.
    • Отличия onchange и oninput.
    • Свойство checked. Получение значения чекбокса.
    • Обработка событий прокрутки страницы. Работа с координатами прокрутки.
    • Управление прокруткой c помощью метода scrollTo, плавная прокрутка.
    • Управление стилями элемента с помощью style.
  9. Раздел 11. Мастер-класс «Создание интерактивных компонентов интерфейса»
    • Научимся создавать динамические страницы, которые реагируют на действия пользователя.
    • Узнаем, как управлять элементами веб-страницы через JavaScript.
    • Рассмотрим полезные свойства и методы элементов для работы с содержанием.
    • Запрограммируем несколько типовых компонентов.

Запишитесь на курс прямо сейчас