Узнайте о снижении цены

Оставьте ваш email и мы напишем вам когда цена снизится

Основы вёрстки для веб-дизайнера

Вы узнаете, как правильно работать с макетом сайта, тегами и стилями, создавать адаптивные страницы и проверять вёрстку на ошибки.
15 000 ₽
стоимость обучения
Узнать о снижении цены
Уровень сложности
для новичков
Длительность
1.5 мес.
Демо доступ
нет
Формат обучения
онлайн
Домашние задания
да
Обратная связь
нет
Стажировка
нет
Помощь в трудоустройстве
нет
Документ по окончании
сертификат

Программа обучения

  • Основное
  • Содержание программы

Обучение не требует специальной подготовки. Вы поймёте, как происходит работа над макетом сайта: что нужно предусмотреть на этапе проектирования, как происходит вёрстка и сколько это занимает времени. Изучите основы HTML, CSS, узнаете о блочной модели, правильном позиционировании элементов, адаптивной модели сайта и вспомогательных инструментах верстальщика. Курс состоит из 10 онлайн-уроков с методическими указаниями и практическими заданиями.

Урок 1. Введение. Разбор макета для вёрстки
  • Общение с веб-разработчиком
  • Разбор ошибок в создании дизайна для вёрстки
  • Добавление эффектов наведения и нажатия в макете
  • Чем отличается frontend и backend разработчик
  • Что необходимо frontend разработчику, чтобы начать работать с макетом.
  • Mobilefirst разработка макета.
Урок 2. Основы языка разметки документов HTML
  • Структура HTML-документа.
  • Основные теги оформления текста.
  • Простой пример HTML-странички.
  • Пример сложной веб-страницы.
  • Гиперссылки.
  • Загрузка изображений на страницу.
  • Списки.
  • Формы и их элементы.
Урок 3. Основы языка оформления стилей документа CSS
  • Что такое CSS.
  • Синтаксис CSS.
  • Способы объявления CSS.
  • Селекторы (id, class, tag).
  • Основные свойства стилей.
  • Наследование и группирование свойств.
  • Проверка подключения файла стилей.
  • Создание эффектов наведения и активации на странице.
Урок 4. Формирование блочной модели
  • Создание блочной структуры сайта.
  • Отступы элементов (margin и padding).
  • Обтекаемые элементы.
  • Как добавить эффект наведения на странице.
  • Создание контента с использованием CSS.
Урок 5. Работа с макетом
  • Знакомство с figma глазами frontend разработчика.
  • Какие стили не нужно копировать, при создании верстки.
  • Основные функции и знакомство с визуальной версткой.
  • Выделение основных частей макета.
  • Верстка макета сайта при помощи блоков, подключение шрифтов из макета.
Урок 6. Позиционирование элементов
  • Разбор технологии flexbox.
  • Вертикальное и горизонтальное центрирование элементов.
  • Адаптивное расставление блоков.
  • Гибкие параметры ширины для блоков.
  • Разбиение сайта на блоки для позиционирования.
  • Выставление элементов по проекту.
Урок 7. Адаптация макета под планшетные устройства
  • Задание гибких размеров для всех блоков сайта.
  • Минимальные значения высоты для блоков с произвольным контентом.
  • Flex-grow, flex-basis параметры для блоков, работа с inline-flex элементами.
  • Cоздание медиа запросов для адаптивного сайта.
  • Особенности работы с flexbox адаптивного сайта.
Урок 8. Создание адаптивного сайта
  • Адаптация текста под любое разрешение экрана.
  • Знакомство с новыми единицами измерения vh, vw.
  • Знакомство с bootstrap, создание адаптивного гамбургер меню с использованием bootstrap.
  • Разбор адаптивного сетки bootstrap, создание адаптивного слайдера с использованием bootstrap.
Урок 9. Стандарты web и вспомогательные инструменты
  • Загрузка проектов на сервер.
  • Стандарты HTML/CSS.
  • Знакомство с js, php, что такое фремворк, что такое cms.
  • Для чего необходимы базы данных, чем отличаются статические и динамические страницы.
  • Проверка нашего сайта на удобство вёрстки.
  • Создание простой анимации на сайте, эффекты перехода и трансформации элементов нашего сайта.
Урок 10. Разбор макета для верстки
  • Ответы на вопросы по курсу.
  • Как проверить свою верстку на ошибки.
  • На что стоит обращать внимание при проверке сайта по вашему макету.
  • Знакомство с библиотекой jquery, создание слайдера на javascript.

Чему научат

Разбор дизайнерского макета для вёрстки
Основы HTML и CSS
Создание адаптивного сайта
Вёрстка по стандартам web-разработки

Отзывы пользователей

Оставить отзыв о курсе

    Оставьте отзыв о курсе

    Ваш адрес e-mail не будет опуликован
    Ваша оценка:
    Ваш отзыв:
    Достоинства:
    Недостатки:
    Имя:
    Email: