Пиктограмма с кексом в кепке и блокнотом Индивидуальный курс «Старт в программировании» с преподавателем Старт в любое время Записаться

курс
«погружение в вёрстку»

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

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

    новичок / любитель
  • Итоговый уровень:

    стажёр / фрилансер

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

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

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

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

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

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

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

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

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

    Этот курс подойдёт тем, кто уже познакомился с азами HTML и CSS. В нём мы глубоко погрузимся в возможности этих языков.

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

    Когда вы пройдёте курс и завершите все эксперименты с новыми тегами и свойствами, ваш арсенал умений достигнет такого же объёма, как у верстальщика-стажёра. И вы сможете стажироваться в небольшой веб-студии или брать небольшие заказы на фрилансе.

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

    • добавлять видео- и аудиозаписи на страницу,
    • подключать красивые шрифты,
    • работать с формами,
    • собирать данные пользователя и отправлять их на обработку,
    • исполнять интересные трюки с селекторами,
    • рисовать с помощью CSS-градиентов (и даже флаги стран),
    • делать симпатичные тени,
    • делать нестандартные раскладки элементов с помощью флексбоксов и гридов,
    • работать с таблицами.

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

  1. Раздел 1. Обзор продвинутых возможностей HTML
    • Семантические теги для описания структуры страниц.
    • Подключение и использование нестандартных шрифтов.
    • Добавление на страницу видео с помощь тега <video>.
    • Добавление на страницу аудио с помощью тега <audio>.
  2. Раздел 2. Погружение в формы
    • Формы и их параметры.
    • Поля форм о общие параметры полей.
    • Подписи и способы их привязки к полям.
    • Базовые поля форм: текстовое поле, многострочное поле, раскрывающийся список, чекбоксы, радикнопки, скрытые поля
    • Поля и настройки форм для загрузки файлов.
    • Продвинутые типы полей для ввода чисел, даты и времени, телефонов, email-адресов, цветов. Поле поиска и поле для выбора из диапазона (ползунок).
    • Особенности кнопок отправки и сброса полей формы.
    • Валидация форм: обязательные поля, проверка значений с помощью паттернов.
    • Удобство пользователя: автофокус, плейсходлдеры и подсказки, настройки автозаполнения.
    • Работа с localStorage.
  3. Раздел 3. Погружение в селекторы
    • Продвинутый поиск элементов по порядковому номеру с помощью :nth-last-child, :first-of-type, :last-of-type, :nth-of-type и :nth-of-type.
    • Отрицающий псевдокласс :not, комбинирование :not.
    • Селектор последующих элементов, ~.
    • Псевдоклассы для проверки содержания :empty, :only-child, :only-of-type.
    • Псевдоэлементы для создания «виртуальных» тегов ::before и ::after.
    • Псевдоэлементы для оформления текста ::first-line и ::first-letter.
    • Узнаем как управлять размерами и отступами флекс-элементов и как работают коэффициенты растяжения и сжатия, а также потренируемся создавать «гибкие» раскладки и элементы интерфейса.
  4. Раздел 4. Погружение в декоративные эффекты
    • Создаём тени с помощью box-shadow. Параметры теней: смещение, растяжение, размытие и цвет.
    • Внутренние и внешние тени. Множественные тени.
    • Трюки с тенями: тень только с одной стороны, множественные рамки у элемента.
    • Создание линейных градиентов с помощью linear-gradient().
    • Параметры градиентов: направление и цвета.
    • Пропорции цветов, колорстопы, резкие переходы цветов.
    • Повторяющиеся градиенты.
    • Создание сложных фонов с помощью градиентов: псевдоколонки, орнаменты, флаги.
    • Текстовые тени и их параметры, создание декоративного текста с помощью теней.
    • Мультиколоночный текст.
    • Управление переполнением текста.
    • Мастерская по созданию сложных элементов интерфейса и декоративных эффектов.
  5. Раздел 5. Погружение в техники раскладок
    • Основные понятия флексбокса: флекс-контейнер, флекс-элемент, главная и поперечная оси.
    • Выравнивание флекс-элементов вдоль главной и поперечной оси.
    • Многострочный флекс-контейнер, флекс-строки, выравнивание флекс-строк.
    • Управление порядком флекс-элементов.
    • Особенности блочной модели во флексбоксе. Тонкости поведения автоматические отступов.
    • Гибкие размеры флекс-элементов. Как работают flex-basis, flex-shrink и flex-grow.
    • Примеры создания раскладок на флексах: карточки, «гибкое» меню, поля ввода с динамической шириной, «идеальная» центровка.
    • Основные понятия гридов: грид-контейнер, грид-шаблон, грид-элемент.
    • Понятия грид-шаблона: грид-ячейки, грид-линии, грид-ряды и грид-области.
    • Координаты грид-элементов. Автоматические и явные координаты и их комбинирование.
    • Наложение грид-элементов.
    • Грид-интервалы.
    • Использование именнованных областей грида.
    • Примеры создания раскладок на гридах: сетка целой страницы, раскладка элементов каталога.
  6. Раздел 6. Работа с таблицами
    • Создание таблиц, строк и столбцов.
    • Управление отображением рамок таблицы.
    • Отступы внутри ячеек и между ними.
    • Заголовок таблицы и ячейки заголовки.
    • Объединение ячеек в строках и столбцах.
    • Выравнивание содержимого в ячейках.
    • Управление размерами таблицы, размерами отдельных столбцов и ячеек.
    • Управление цветом ячеек, раскрашивание строк таблицы.

Получить доступ по подписке

Доступ ко всем курсам для новичков по выгодной цене, но с ограничениями по сроку доступа и количеству занятий в неделю.

от1 770 
  • Экономичный вариант
  • На 3 или 12 месяцев
  • 7 занятий в неделю на выбранном курсе
  • Доступ сразу ко всем курсам для новичков
Оформить подписку

Доступ к курсу «Погружение в вёрстку» без каких-либо ограничений.

Купите курс и пользуйтесь им в любое время, без ограничений по длительности или количеству занятий.

7 990 ₽
  • Без ограничений по срокам доступа к курсу
  • Любой удобный вам темп обучения
  • Один платёж — раз и навсегда
Оплатить

Нажимая «Оплатить», вы подтверждаете свое согласие с условиями лицензионного договора.