За 5 недель качественно освойте верстку на HTML и CSS, и получите первый проект в портфолио.Программа обучения
1 неделя
Открытие курса. Устройство интернета
- Введение в профессию.
- Платформа обучения.
- Устройство курса.
- Редакторы кода: Sublime Text 3, VS Code, Atom.
Видеокурс
- Основы HTTP.
- Модель “клиент/сервер”.
- Хостинг, хостер.
- Регистратор, домен.
- IP, DNS.
Видеокурс
- Использование панели хостинга
- Выгрузка сайта в сеть Интернет
- Работа с файлами по FTP
- Необходимое ПО для работы с хостингом
Видеокурс
- Структура HTML-документа
- Emmet — инструмент, ускоряющий работу с HTML
- Необходимые в работе теги и их атрибуты
- Форматирование кода, комментирование
- Ссылки — предназначение и применение
- Теги форм и таблиц
Разметка элементов страницы
Практический вебинар
- Анализ макета для последующей разметки.
- Логические составляющие элементов страницы.
- Разметка элементов.
- Семантика верстки.
- Бэм-Нейминг.
- Ответы на вопросы.
CSS
Видеокурс
- Добавление стилей к HTML-страниц.
- hex, text, rgb, rgba, hsla.
- Создаём начальную структуру проекта.
- Разбираемся с CSS-селекторами и их синтаксисом.
- Отношение блоков между собой.
- Работа со шрифтами.
- Абсолютные и относительные пути.
Видеокурс
- Работа с дизайн-макетом
- Разбор PSD-макета на необходимые верстальщику изображения
- JPEG, PNG, SVG, GIF — различие в форматах хранения изображений
- Работа со слоями — необходимые команды и инструменты
- Настройка рабочего пространства Photoshop
- Горячие клавиши и приемы, ускоряющие работу
- Альтернативные инструменты для работы с макетом (adobe.Assets, Avocode, zeplin.io)
Видеокурс
- Основы “блочной” вёрстки
- Поведение элементов: блочное и строчное
- Блочная модель элементов. Свойства и настройка поведения блоков
- Расположение блоков на странице. Вёрстка
- Свойства позиционирования элементов и приоритет наложения блоков
- Точные и относительные единицы измерения
Практический вебинар
- Часто используемые свойства CSS
- Оформление элементов страницы
- Переиспользование элементов. Модификаторы
- Префиксы
- Модификация готовых элементов
- Perfect Pixel
Flexbox
Видеокурс
- Разбираем новый модуль CSS — Flexbox
- Основные понятия в Flexbox
- Поведение Flexbox-layout
- Преимущества перед блочной версткой
- Управление пропорциями и порядками блоков
- Использование Flexbox в мобильной вёрстке
- Применение знаний на практике: верстаем макет на Flexbox
Видеокурс
- Подготовка структуры документа для "боевого" шаблона
- Настройка стилей для рабочего шаблона. Normalize.css
- Теория логических блоков — смотрим на макет "издалека"
- Модульность. Правила и способы верстать независимыми блоками
- Методологии именований блоков и создания структуры
- БЭМ-нейминг: продвинутые техники использования
Практический вебинар
- Применение знаний на практике
- Вёрстка "боевых" страниц
- Применение знаний на практике
- Старт проекта "с нуля"
- Построение шаблона для работы
Частые приемы вёрстки
Видеокурс
- Частые приемы в вёрстке типовых элементов
- Приведение страниц в соответствие с дизайн-макетом
- Подготовка вёрстки для динамических элементов
- Вёрстка анимированных элементов
- CSS3-свойства
- Префиксы "новых" CSS-свойств. Кроссбраузерная работа со стилями
Видеокурс
- Плавное изменение состояний элементов
- CSS3-анимации. Рассмотрение свойств и принципов работы
- Keyframes: пишем покадровую анимацию
- Трансформация элементов
- Бесконечная анимация
Практический вебинар
- Реализуем заданные анимации.
- Полезные навыки при работе с анимациями.
- Управление свойствами.
- Покадровые анимации.
Подводим итоги курса
Выпускной вебинар
- Выпускной
- Строим планы на будущее
- Подводим итоги
В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий корпоративный сайт для одной из трёх выдуманных компаний.
Начало обучения 1.10.2019 года.
https://privatelink.de/?https://loftschool.com/course/html-css/