- Регистрация
- 24.09.2021
- Сообщения
- 38 365
Курс будет полезен, если вы: Новички, желающие начать свой путь в ИТ и освоить новую профессию Фронтенд-разработчики, которые хорошо владеют 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 Работа с навигацией Основы работы со ссылками Безопастность ссылок при переходе на новую страницу Абсолютные и относительные пути Работа с якорями Работа с формой Тег <form> и его атрибуты Типы <input> и их атрибуты Radio-кнопки Сheckbox-кнопки Datalist-cписок Работа со списками Теги <ul> и <ol> Основные отличия и для чего их применять Работа с картинками Тег <img> и его атрибуты Тег <picture>: отличия и для чего применять Основное предназначение тега <figure> Падинг-хак Работа с 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 Возьмём другую задачу из бэклога Финальное демо Каждый студент проведёт короткое демо своих фич, которые были выполнены в рамках спринта Ретроспектива Разберём все достижения и неудачи, которые были в рамках спринта Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть... 
|
