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

Описание

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

Урок 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 элементами, создание медиа запросов для адаптивного сайта, особенности работы с flexbox адаптивного сайта.

Урок 8. Создание адаптивного сайта

Адаптация текста под любое разрешение экрана, знакомство с новыми единицами измерения vh, vw, знакомство с bootstrap, создание адаптивного гамбургер меню с использованием bootstrap, разбор адаптивного сетки bootstrap, создание адаптивного слайдера с использованием bootstrap.

Урок 9. Стандарты web и вспомогательные инструменты

Загрузка проектов на сервер. Стандарты HTML/CSS. Знакомство с js, php, что такое фремворк, что такое cms, для чего необходимы базы данных, чем отличаются статические и динамические страницы. Проверка нашего сайта на удобство вёрстки. Создание простой анимации на сайте, эффекты перехода и трансформации элементов нашего сайта.

Урок 10. Разбор макета для верстки

Ответы на вопросы по курсу, как проверить свою верстку на ошибки, на что стоит обращать внимание при проверке сайта по вашему макету, знакомство с библиотекой jquery, создание слайдера на javascript php