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

Направление
Веб-дизайн
Формат
Прямые эфиры
Видео в записи
Домашние задания
Есть
Итоговый экзамен
Нет
Количество уроков
10
Документ об обучении
Сертификат
Обратная связь
Есть
Доступ
Сразу после покупки
Последнее обновление 03.07.2022

О курсе

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

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

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

Другие курсы по этой теме