- Регистрация
- 29 Июн 2019
- Сообщения
- 11,652
- Баллы
- 113
[HtmlAcademy] HTML и CSS. Профессиональная вёрстка сайтов. 18.09 ― 20.11 (2023)
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Учим делать правильно
Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий на сайте github.com и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать наставник.
Макет в Figma
Доступная разметка
Современные стили
Удобная сетка
Программа курса
Раздел 1
Старт
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.
Разметка
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.
Интерактивные демонстрации по разметке учебного проекта.
ТренажёрыСтатьи
Графика
Экспортируем графику из макета.
Интерактивные демонстрации по внедрению графики учебного проекта.
ТренажёрыСтатьи
Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.
Проекты
Базовая стилизация
Выполним базовую стилизацию страниц проекта.
Интерактивные демонстрации по базовой стилизации учебного проекта.
ТренажёрыСтатьи
Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.
Проекты
Сетки страниц на флексах
Построим крупные сетки страниц с помощью флексов.
Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.
ТренажёрыСтатьи
Сетки компонентов на флексах
Создадим мелкие сетки компонентов страниц при помощи флексов.
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.
ТренажёрыСтатьи
Сетки компонентов на гридах
Создадим мелкие сетки компонентов страниц при помощи гридов.
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.
ТренажёрыСтатьи
Декоративные элементы
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
Интерактивные демонстрации со стилизацией декоративных и контентных элементов учебного проекта.
Тренажёрытатьи
Тренажёры для закрепления навыков создания декоративных элементов.
Проекты
Попапы, слайдеры, формы
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Учим делать правильно
- Актуальные стандарты качества: не нужно переучиваться после курса.
- Понимание полного цикла работы верстальщика.
- Фундаментальные и структурированные знания необходимых технологий.
- Опыт работы с дедлайнами и планирования работы.
Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий на сайте github.com и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать наставник.
Макет в Figma
Доступная разметка
Современные стили
Удобная сетка
Программа курса
- Раздел 1. Старт
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы. - Раздел 2.Разметка
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету. - Раздел 3. Графика
Экспортируем графику из макета. - Раздел 5. Сетки страниц на флексах
Построим крупные сетки страниц с помощью флексов. - Раздел 6. Сетки компонентов на флексах
Создадим мелкие сетки компонентов страниц при помощи флексов. - Раздел 7. Сетки компонентов на гридах
Создадим мелкие сетки компонентов страниц при помощи гридов. - Раздел 8. Декоративные элементы
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки. - Раздел 9. Попапы, слайдеры, формы
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.
Раздел 1
Старт
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.
- Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
- Узнаем, кто такие авторы, кураторы и наставники курса.
- Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
- Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
- Разберём процесс работы над проектом и его защиту.
- Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы браузеров, Git и GitHub.
- Выбираем наставника.
- Настраиваем инструменты разработки, создаём репозитории проектов.
- Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.
Разметка
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.
- Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.
- Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.
- Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.
- Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.
Интерактивные демонстрации по разметке учебного проекта.
ТренажёрыСтатьи
- Тренажёры для знакомства с HTML.
- Статьи о том, как правильно создавать семантическую HTML-разметку.
- Получаем макеты в Figma.
- Создаём и размечаем страницы проекта.
Графика
Экспортируем графику из макета.
- Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
- Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
- Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере графики.
Интерактивные демонстрации по внедрению графики учебного проекта.
ТренажёрыСтатьи
Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.
Проекты
- Экспортируем растровую и векторную графику из Figma.
- Подключаем контентную графику в разметку.
Базовая стилизация
Выполним базовую стилизацию страниц проекта.
- Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов.
- Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.
- Внедрим контентную и декоративную графику на страницы проекта.
- Подключим шрифты, поработаем с типографикой и зададим фоны элементам.
Интерактивные демонстрации по базовой стилизации учебного проекта.
ТренажёрыСтатьи
Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.
Проекты
- Подключаем шрифты.
- Выполняем базовую стилизацию: текстовые параметры, фоны крупных блоков, текстуры.
Сетки страниц на флексах
Построим крупные сетки страниц с помощью флексов.
- Разберёмся в боксовой модели и познакомимся с типами боксов.
- Научимся анализировать сетки на макетах и определять крупные сетки страниц.
- Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.
Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.
ТренажёрыСтатьи
- Статьи, которые помогут разобраться с особенностями флексов, блочной модели и приёмами построения сеток.
- Тренажёры для знакомства с блочной моделью документа, флексами и приёмами построения сеток.
- Описываем крупные сетки страниц на флексах.
- Сравниваем вёрстку с макетом.
Сетки компонентов на флексах
Создадим мелкие сетки компонентов страниц при помощи флексов.
- Разберём особенности мелких сеток.
- Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
- Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.
ТренажёрыСтатьи
- Статьи, которые помогут разобраться с особенностями многострочных флексов.
- Тренажёры для погружения в работу с флексами.
- Описываем мелкие сетки компонентов страниц на флексах.
- Сравниваем вёрстку с макетом.
Сетки компонентов на гридах
Создадим мелкие сетки компонентов страниц при помощи гридов.
- Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
- Разберём типовые ситуации, когда гриды подходят лучше флексов.
- Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.
ТренажёрыСтатьи
- Тренажёры для знакомства с гридами.
- Статьи, которые помогут разобраться с особенностями гридов.
- Описываем мелкие сетки компонентов страниц на гридах.
- Сравниваем вёрстку с макетом.
Декоративные элементы
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
- Научимся использовать оформительскую и программируемую графику.
- Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.
- Рассмотрим псевдоэлементы и точечное позиционирование элементов.
- Погрузимся в тонкости типографики и визуальные правила оформления контента.
- Научимся стилизовать интерактивные состояния ссылок и кнопок.
Интерактивные демонстрации со стилизацией декоративных и контентных элементов учебного проекта.
Тренажёрытатьи
Тренажёры для закрепления навыков создания декоративных элементов.
Проекты
- Добавляем мелкие декоративные и иконочные графические элементы.
- Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
Попапы, слайдеры, формы
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.
- Научимся оформлять нестандартные элементы форм.
- Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
- Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.
Скрытое содержимое. Вам нужно войти или зарегистрироваться.
СКАЧАТЬСкрытое содержимое. Вам нужно войти или зарегистрироваться.