[loftschool] Основы вёрстки сайтов 2019

Складчина: [loftschool] Основы вёрстки сайтов 2019

За 5 недель качественно освойте верстку на HTML и CSS, и получите первый проект в портфолио.​

За 5 недель вы научитесь
​

Программа обучения

Спойлер: Неделя 1 — Работа с хостингом, HTML

Открытие курса. Устройство интернета
Открытие курса

• Введение в профессию.
• Платформа обучения.
• Устройство курса.
• Редакторы кода: Sublime Text 3, VS Code, Atom.

Устройство интернета
Видеокурс

• Основы HTTP.
• Модель “клиент/сервер”.
• Хостинг, хостер.
• Регистратор, домен.
• IP, DNS.

Работа с хостингом
Видеокурс

• Использование панели хостинга
• Выгрузка сайта в сеть Интернет
• Работа с файлами по FTP
• Необходимое ПО для работы с хостингом

HTML. Теги и работа с разметкой
Видеокурс

• Структура HTML-документа
• Emmet — инструмент, ускоряющий работу с HTML
• Необходимые в работе теги и их атрибуты
• Форматирование кода, комментирование
• Ссылки — предназначение и применение
• Теги форм и таблиц

Разметка элементов страницы
Практический вебинар

• Анализ макета для последующей разметки.
• Логические составляющие элементов страницы.
• Разметка элементов.
• Семантика верстки.
• Бэм-Нейминг.
• Ответы на вопросы.

Спойлер: Неделя 2 — CSS, работа с PSD-макетом, Perfect Pixel

CSS
Видеокурс

• Добавление стилей к HTML-страниц.
• hex, text, rgb, rgba, hsla.
• Создаём начальную структуру проекта.
• Разбираемся с CSS-селекторами и их синтаксисом.
• Отношение блоков между собой.
• Работа со шрифтами.
• Абсолютные и относительные пути.

Работа с PSD-макетом
Видеокурс

• Работа с дизайн-макетом
• Разбор PSD-макета на необходимые верстальщику изображения
• JPEG, PNG, SVG, GIF — различие в форматах хранения изображений
• Работа со слоями — необходимые команды и инструменты
• Настройка рабочего пространства Photoshop
• Горячие клавиши и приемы, ускоряющие работу
• Альтернативные инструменты для работы с макетом (adobe.Assets, Avocode, zeplin.io)

Основы вёрстки
Видеокурс

• Основы “блочной” вёрстки
• Поведение элементов: блочное и строчное
• Блочная модель элементов. Свойства и настройка поведения блоков
• Расположение блоков на странице. Вёрстка
• Свойства позиционирования элементов и приоритет наложения блоков
• Точные и относительные единицы измерения

Стилизация элементов страницы
Практический вебинар

• Часто используемые свойства CSS
• Оформление элементов страницы
• Переиспользование элементов. Модификаторы
• Префиксы
• Модификация готовых элементов
• Perfect Pixel

Спойлер: Неделя 3 — Flexbox, БЭМ-нейминг

Flexbox
Видеокурс

• Разбираем новый модуль CSS — Flexbox
• Основные понятия в Flexbox
• Поведение Flexbox-layout
• Преимущества перед блочной версткой
• Управление пропорциями и порядками блоков
• Использование Flexbox в мобильной вёрстке
• Применение знаний на практике: верстаем макет на Flexbox

Построение лейаута и БЭМ-нейминг
Видеокурс

• Подготовка структуры документа для «боевого» шаблона
• Настройка стилей для рабочего шаблона. Normalize.css
• Теория логических блоков — смотрим на макет «издалека»
• Модульность. Правила и способы верстать независимыми блоками
• Методологии именований блоков и создания структуры
• БЭМ-нейминг: продвинутые техники использования

Вёрстка страниц
Практический вебинар

• Применение знаний на практике
• Вёрстка «боевых» страниц
• Применение знаний на практике
• Старт проекта «с нуля»
• Построение шаблона для работы

Спойлер: Неделя 4 — CSS-анимации

Частые приемы вёрстки
Видеокурс

• Частые приемы в вёрстке типовых элементов
• Приведение страниц в соответствие с дизайн-макетом
• Подготовка вёрстки для динамических элементов
• Вёрстка анимированных элементов
• CSS3-свойства
• Префиксы «новых» CSS-свойств. Кроссбраузерная работа со стилями

Анимации CSS
Видеокурс

• Плавное изменение состояний элементов
• CSS3-анимации. Рассмотрение свойств и принципов работы
• Keyframes: пишем покадровую анимацию
• Трансформация элементов
• Бесконечная анимация

Применение анимаций на практике
Практический вебинар

• Реализуем заданные анимации.
• Полезные навыки при работе с анимациями.
• Управление свойствами.
• Покадровые анимации.

Спойлер: Неделя 5 — Защита выпускного проекта

Подводим итоги курса
Выпускной вебинар

• Выпускной
• Строим планы на будущее
• Подводим итоги

Спойлер: Выпускной проект

В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий корпоративный сайт для одной из трёх выдуманных компаний.

Начало обучения: 01.10.2019

Сайт курса: