НТМL и CSS для начинающих. Тариф - Я сам [Lectrum]

[Robot]

Ссылка на картинку

Курс будет полезен, если вы:

• Новички, желающие начать свой путь в ИТ и освоить новую профессию
• Фронтенд-разработчики, которые хорошо владеют 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
  • Возьмём другую задачу из бэклога
• Финальное демо
  • Каждый студент проведёт короткое демо своих фич, которые были выполнены в рамках спринта
• Ретроспектива
  • Разберём все достижения и неудачи, которые были в рамках спринта

Читать далее...