- Регистрация
- 26.05.2022
- Сообщения
- 26 726
- Реакции
- 161
- Баллы
- 63
HTML и CSS для начинающих [Lectrum]
Об интенсиве
Курс будет полезен, если вы:
Новички, желающие начать свой путь в ИТ и освоить новую профессию
Фронтенд-разработчики, которые хорошо владеют 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
Возьмём другую задачу из бэклога
Финальное демо
Каждый студент проведёт короткое демо своих фич, которые были выполнены в рамках спринта
Ретроспектива
Разберём все достижения и неудачи, которые были в рамках спринта
Продажник
Об интенсиве
Курс будет полезен, если вы:
Новички, желающие начать свой путь в ИТ и освоить новую профессию
Фронтенд-разработчики, которые хорошо владеют 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
Возьмём другую задачу из бэклога
Финальное демо
Каждый студент проведёт короткое демо своих фич, которые были выполнены в рамках спринта
Ретроспектива
Разберём все достижения и неудачи, которые были в рамках спринта
Продажник
