Описание

• Овладейте современной адаптивной версткой с нуля
• Новейшие стандарты: HTML5, CSS3, Sass, Gulp, Flexbox, Grid…
• Реально много практики: три работы в портфолио по итогу
• Только то, что применяется в реальной жизни и востребовано

Только востребованные технологии
Новый видеокурс от Webformyself дает только востребованные современные технологии и стандарты верстки. Только то, за что работодатели и заказчики готовы платить.

После прохождения курса и небольшой практики вы узнаете, как выполнять верстку практически любой сложности с использованием современных стандартов верстки:
HTML5
CSS3
Препроцессор Sass
Сборщик проектов Gulp
Flexbox
CSS Grid Layout
Медиазапросы
Градиенты
Множественные фоны
Новые инструменты с фонами
Анимации
Трансформации
Адаптивная графика
Адаптивное видео
Адаптация таблиц
Адаптация любого контента

Подробная программа курса:
Основы HTML
Урок 1. Введение. Установки редактора
Урок 2. Обзор HTML-документа
Урок 3. Теги форматирования текста
Урок 4. Вставка изображений. Часть 1 – 2
Урок 5. Работа со ссылками
Урок 6. Списки
Урок 7. Таблицы
Урок 8. Формы. Часть 1 – 2
Урок 9. Вставка видео. Часть 1 – 2
Урок 10. Вставка аудио
Из урока вы узнаете, как правильно вставить аудио на HTML-страницу и что для этого нужно предусмотреть.
Урок 11. Семантические теги

Основы CSS
Урок 1. Подключение CSS
Урок 2. Назначение классов
Урок 3. Свойства шрифта
Урок 4. Свойства текста
Урок 5. Назначение фона
Урок 6. Ширина, высота
Урок 7. Рамка
Урок 8. Отступы
Урок 9. Центрирование
Урок 10. Единицы измерения
Урок 11. Выравнивание
Урок 12. Видимость элементов
Урок 13. Блочные и строчные элементы
Урок 14. Позиционирование

Практика. Верстка сайта креативного агентства
Урок 1. Введение. Обзор макета
Урок 2. Подготовка. Нарезка изображений
Урок 3. HTML-разметка шапки сайта
Урок 4. CSS-стили для всей страницы
Урок 5. CSS-стили для шапки сайта
Урок 6. HTML-разметка блока текста
Урок 7. CSS-стили для блока текста
Урок 8. HTML-разметка формы контактов
Урок 9. CSS-стили формы контактов
Урок 10. HTML-разметка подвала страницы
Урок 11. CSS-стили подвала страницы
Урок 12. Заключение

Практика. Верстка лендинга мобильного приложения
Урок 1. Введение
Урок 2. Подготовка. Экспорт изображений
Урок 3. HTML-разметка шапки сайта
Урок 4. Подключение reset.css
Урок 5. CSS-стили для шапки сайта. Часть 1 – 2
Урок 6. HTML-разметка блока «О приложении»
Урок 7. CSS-стили блока «О приложении»
Урок 8. HTML-разметка блока «Возможности»
Урок 9. CSS-стили блока «Возможности»
Урок 10. HTML-разметка блока «Технологии»
Урок 11. CSS стили блока «Технологии»
Урок 12. HTML-разметка блока «Скачать»
Урок 13. CSS-стили блока «Скачать»
Урок 14. HTML-разметка блока контактов
Урок 15. CSS-стили блока контактов
Урок 16. HTML-разметка подвала страницы
Урок 17. CSS-стили подвала страницы
Урок 18. Адаптация макета. Часть 1 – 4
Урок 19. Адаптация макета. Часть 5. Заключение

Практика. Верстка лендинга подбора подарков
Урок 1. Введение
Урок 2. HTML-разметка шапки сайта
Урок 3. CSS-стили для шапки сайта. Часть 1 – 2
Урок 4. Адаптация шапки сайта
Урок 5. HTML-разметка блока «О компании»
Урок 6. CSS-стили для блока «О компании». Часть 1 – 2
Урок 7. Адаптация блока «О компании»
Урок 8. HTML-разметка блока подарков
Урок 9. CSS-стили блока подарков
Урок 10. Адаптация блока подарков
Урок 11. HTML-разметка блока регистрации
Урок 12. CSS-стили блока регистрации
Урок 13. Адаптация блока регистрации
Урок 14. HTML-разметка блока постов
Урок 15. CSS-стили блока постов. Часть 1 – 2
Урок 16. Адаптация блока постов
Урок 17. HTML-разметка подвала страницы
Урок 18. CSS-стили подвала страницы
Урок 19. Заключение