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

compare_arrows

Урок 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.