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

Понять, как происходит вёрстка, и освоить её базовые навыки

Дизайнеру важно понимать, что происходит после того, как макет готов. Как происходит вёрстка, сколько времени занимает «оживление» ваших идей, что стоит учесть на этапе проектирования и идей.

Что Вы получите

Видеозаписи всех онлайн-занятий
Методички и практические задания
Общение с одногруппниками
Сертификат об окончании обучения

Средние оценки

4.8 / 5
Программа
4.9 / 5
Преподаватель

Преподаватели

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

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