- Новички, желающие начать свой путь в ИТ и освоить новую профессию
- Фронтенд-разработчики, которые хорошо владеют JavaScript и хотят подтянуть вёрстку
- Бекенд-разработчики, которые переходят в фуллстек
Что вы получите после курса
- Освоите работу основных и трендовых инструментов верстальщика
- Практические навыки работы с макетами, простыми анимациями, тенями и градиентами, а также навыки создания страниц по технике Pixel Perfect
- Научитесь управлять слоями документов, стилизировать скролл бар, работать с параллакс эффектом
- Основу для своего портфолио
- Умение ориентироваться в вакансиях на рынке IT
Программа:
Неделя 1
Модуль: Основное обучение
-Как устроен веб
Разберёмся чем отличается HTTP от HTTPS. Познакомимся с понятиями доменного имени и URL-адреса, узнаем для чего нужен DNS.
- Организационные вопросы
- Обзор процесса обучения
- Обзор инструментов
- Настройка окружения
- Настройка стартовой точки
- Сравнение популярных редакторов кода
- Настройка редактора для комфортной работы
- Настройка веб-браузера
- Процесс запроса веб-страницы
- Внешние и внутренние IP-адреса, веб-сервер
- DNS и его роль в интернете
- Домены, поддомены и URL-адреса
- HTTP vs HTTPS
- HTTP/1.1 vs HTTP/2
- Жизненный цикл загрузки веб-страницы
-Работа с графическим редактором
Разберёмся со стандартным воркфлоу, по которому происходит разработка веб-приложения. Научимся работать с макетами в приложениях Figma, Zeplin, Avocode и Adobe XD.
- Стандартная среда процеса веб-разработки
- Разбор ключевых ролей в процесе разработки
- Разбор основных терминов которые описывают процесс разработки
- Как выглядит процесс разработки веб-приложения
- Популярные организационные ошибки начинающих программистов
- Работа с графическим редактором
- Зачем верстальщику нужен графический редактор кода
- Разбор основных инструментов для работы с макетом в приложениях Figma, Adobe XD, Adobe Photoshop
- Сравнение Adobe Photoshop и Adobe XD
Неделя 2
Модуль: Основное обучение
-Создаем полноценную разметку
Научимся создавать правильную семантическую разметку на основании макета и технического задания.
- Работа с разметкой
- Знакомство со спецификацией
- Семантика, структура и API HTML-документа
- Основные элементы HTML-страницы
- Синтаксис HTML-тегов
- Разбор основных тегов
- Отличие между логическими и физическими тегами
- Какую вёрстку можно считать семантичной
- Разбор популярных ошибок при создании разметки страницы
- HTML-атрибуты
- Комментарии в HTML
- Работа с навигацией
- Основы работы со ссылками
- Безопастность ссылок при переходе на новую страницу
- Абсолютные и относительные пути
- Работа с якорями
- Работа с формой
- Тег и его атрибуты
- Типы и их атрибуты
- Radio-кнопки
- Сheckbox-кнопки
- Datalist-cписок
- Работа со списками
- Теги и
- Основные отличия и для чего их применять
- Работа с картинками
- Тег и его атрибуты
- Тег : отличия и для чего применять
- Основное предназначение тега
- Падинг-хак
- Работа с table
- Основные теги
- Особенности работы
- Лучшие практики по работе с таблицами
- Работа с iframe
- Основы работы с iframe
- Атрибуты тега
- Применение на практике
- Работа с quotation elements
- Основные теги
- Работа с HTML Media
- Воспроизведение аудио при загрузке сайта
- Встроенные возможности воспроизведения видео
- Работа с HTML Graphics
- Из чего состоит svg и его атрибуты
- Примеры использования
-Настроим базовые стили
Научимся оживлять разметку с помощью стилей для того, чтобы приблизить наше приложение к макету.
- Работа со стилями
- Зачем нужны cтили
- Синтаксис CSS правил
- Что такое каскад
- Способы подключения CSS к веб-документу
- Разбор основных селекторов
- Фильтры [class^=”…”]
- Как посчитать вес селекторов
- В чем разница псевдо-классов и псевдо-элементов :before или :before)
- Относительные значения
- Функции в CSS. Работаем с calc
- Порядок CSS-свойств
- Описание шрифтов
- Свойство box-sizing или как посчитать размер элемента
- Состояния :link, :visited, :hover, :focus, :active
- Что такое normalize и reset
- Работа с margin и padding
- Разбор популярных ошибок при работе со стилями
- Познакомимся с caniuse, caniemail, cssdb
- Переменные в CSS
- Пространства имён и независимые компоненты
Неделя 3
Модуль: Основное обучение
-Создаем глобальную сетку для веб-страницы
Научимся создавать полноценный layout для веб-страницы, разберём приёмы для создания строк и колонок.
- Работа с CSS Grids
- Разбор понятия сетка документа
- Разбор блочной модели документа
- Работа с Grid-контейнером, элементами и линиями
- Практическое применение Grid track, cell и area
- Разбор популярных ошибок при работе с CSS Grids
- Знакомство с рецептами решения багов
-Создаем Layout внутри компонента
Научимся управлять расположением элементов внутри компонента.
- Работа с Flexbox
- Разбор основной терминологии
- Работа с разными типами осей внутри Flexbox-контейнера
- Управление расположением элементов
- Управление порядком элементов
- Разбор популярных ошибок при работе с Flexbox
- Знакомство с рецептами решений багов
Неделя 4
Модуль: Основное обучение
-Продвинутые приёмы для улучшения стилей
Научимся делать PixelPerfect веб-страницы, которые будут идентичными графическим макетам. Превратим статические элементы в динамические с помощью CSS-анимаций. Научимся добавлять на страницу графические элементы разного типа.
- Продвинутые техники работы со шрифтами
- Управление рендерингом шрифта
- Разбор свойств для настройки параметров букв и слов
- Управление отступами
- Разбор разных типов подчеркиваний
- Разбор популярных ошибок при работе с кастомными шрифтами
- Продвинутые техники работы с графическими элементами
- Абсолютное и относительное позиционирование. Координаты, изменение точки начала координат
- Как и когда применять фиксированное позиционирование
- Слои и управление порядком слоёв
- Работа с градиентом
- Настройка теней
- Особенности при работе с графическими элементами в формате .png, .jpg, .svg
- Разбор популярных ошибок при работе с графическими элементами
-Введение в анимацию
Научимся добавлять динамику к веб-страницам с помощью CSS-анимаций. Разберёмся, когда стоит использовать CSS Transition, а когда CSS Keyframes.
- Базовые анимации с помощью CSS Transition
- Управление CSS-свойствами, которые нужно анимировать
- Настройка продолжительности анимации
- Разбор популярных ошибок при работе с CSS Transition
- Продвинутые анимации с помощью CSS Keyframes
- Что такое раскадровка и группировка кадров
- Работа с повторяющимся анимациями
- Настройка направления анимации
- Задержка начала анимации
- Работа с состоянием до и после анимации
- Разбор популярных ошибок при работе с CSS Keyframes
Неделя 5
Модуль: Работа над проектами
-Первая неделя практики
Подготовим окружение и приступим к работе над персональным проектом.
- Рабочий процесс
- Изучим рабочий воркфлоу, по которому будет происходить практика
- Получим техзадание для первого проекта
- Настроим стартовую точку
- Получим дополнительные материалы
- Приступим к выполнению первых фич для своего проекта
Неделя 6
Модуль: Работа над проектами
-Вторая неделя практики
Отправим проект на код-ревью, имплементируем фидбек от наставника.
- Рабочий процесс
- Завершим работу над основной частью своего проекта
- Откроем пул-реквест и отправим проект на код-ревью
- Имплементируем фидбек от наставника
- Откроем пул-реквест и отправим проект на повторное код-ревью
- Завершим работу над проектом
- Откроем пул-реквест и отправим проект на финальную проверку
- Приступим к работе над вторым проектом
Неделя 7
Модуль: Работа над проектами
-Третья неделя практики
Отправим второй проект на код-ревью, имплементируем фидбек от наставника по второму проекту.
- Рабочий процесс
- Завершим работу над основной частью своего второго проекта
- Откроем пул-реквест и отправим проект на код-ревью
- Имплементируем фидбек от наставника
- Откроем пул-реквест и отправим второй проект на повторное код-ревью
- Завершим работу над вторым проектом
- Откроем пул-реквест и отправим второй проект на финальную проверку
- Приступим к работе над третьим проектом
Неделя 8
Модуль: Работа над проектами
-Четвертая неделя практики
Отправим третий проект на код-ревью, имплементируем фидбек от наставника по третьему проекту.
- Рабочий процесс
- Завершим работу над основной частью своего третьего проекта
- Откроем пул-реквест и отправим проект на код-ревью
- Имплементируем фидбек от наставника
- Откроем пул-реквест и отправим проект на повторное код-ревью
- Завершим работу над проектом
- Откроем пул-реквест и отправим проект на финальную проверку
-Работа над групповым проектом
Выполним задачи для групового проекта, научимся работать в формате Agile-спринтов.
- Подготовительная работа
- Настроим стартовую точку
- Изучим рабочий воркфлоу, по которому будет происходить работа в груповом проекте
- Групповое планирование спринта
- Рабочий процесс
- Выберем интересную задачу из бэклога
- Получим дополнительные материалы
- Приступим к выполнению задачи
- Выполним задачу
- Отправим задачу на QA-проверку
- Имплементируем фидбек
- Отправим задачу на повторный раунд QA
- Возьмём другую задачу из бэклога
Неделя 9
Модуль: Работа над проектами
-Работа над груповым проектом
Выполним задачи для групового проекта, научимся работать в формате Agile-спринтов.
- Рабочий процесс
- Выберем интересную задачу из бэклога
- Получим дополнительные материалы
- Приступим к выполнению задачи
- Выполним задачу
- Отправим задачу на QA-проверку
- Имплементируем фидбек
- Отправим задачу на повторный раунд QA
- Возьмём другую задачу из бэклога
- Финальное демо
- Каждый студент проведёт короткое демо своих фич, которые были выполнены в рамках спринта
- Ретроспектива
- Разберём все достижения и неудачи, которые были в рамках спринта
Этот курс в скором времени появится на сайте courses24.net Проверьте по поиску, возможно данный курс уже добавлен.