![[IMG]](/upload/parser/2021/01/58967.0.jpeg)
За 5 недель качественно освойте верстку на HTML и CSS, и получите первый проект в портфолио.
За 5 недель вы научитесь
Программа обучения
Открытие курса. Устройство интернета
Открытие курса
- Введение в профессию.
- Платформа обучения.
- Устройство курса.
- Редакторы кода: Sublime Text 3, VS Code, Atom.
Устройство интернета
Видеокурс
- Основы HTTP.
- Модель “клиент/сервер”.
- Хостинг, хостер.
- Регистратор, домен.
- IP, DNS.
Работа с хостингом
Видеокурс
- Использование панели хостинга
- Выгрузка сайта в сеть Интернет
- Работа с файлами по FTP
- Необходимое ПО для работы с хостингом
HTML. Теги и работа с разметкой
Видеокурс
- Структура HTML-документа
- Emmet — инструмент, ускоряющий работу с HTML
- Необходимые в работе теги и их атрибуты
- Форматирование кода, комментирование
- Ссылки — предназначение и применение
- Теги форм и таблиц
Разметка элементов страницы
Практический вебинар
- Анализ макета для последующей разметки.
- Логические составляющие элементов страницы.
- Разметка элементов.
- Семантика верстки.
- Бэм-Нейминг.
- Ответы на вопросы.
CSS
Видеокурс
- Добавление стилей к HTML-страниц.
- hex, text, rgb, rgba, hsla.
- Создаём начальную структуру проекта.
- Разбираемся с CSS-селекторами и их синтаксисом.
- Отношение блоков между собой.
- Работа со шрифтами.
- Абсолютные и относительные пути.
Работа с PSD-макетом
Видеокурс
- Работа с дизайн-макетом
- Разбор 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-свойств. Кроссбраузерная работа со стилями
Анимации CSS
Видеокурс
- Плавное изменение состояний элементов
- CSS3-анимации. Рассмотрение свойств и принципов работы
- Keyframes: пишем покадровую анимацию
- Трансформация элементов
- Бесконечная анимация
Применение анимаций на практике
Практический вебинар
- Реализуем заданные анимации.
- Полезные навыки при работе с анимациями.
- Управление свойствами.
- Покадровые анимации.
Подводим итоги курса
Выпускной вебинар
- Выпускной
- Строим планы на будущее
- Подводим итоги
В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий корпоративный сайт для одной из трёх выдуманных компаний.
![[IMG]](/upload/parser/2021/01/58967.2.jpeg)
Начало обучения: 01.10.2019
Сайт курса:
Последнее редактирование модератором:
- Статус
- В этой теме нельзя размещать новые ответы.