Онлайн-курс «HTML и CSS. Профессиональная вёрстка сайтов»

Онлайн-курс по обучению верстке сайтов на HTML и CSS. HTML и CSS являются фундаментальными инструментами для web-разработчика и позволяют создавать адаптивные и кросс-браузерные интерфейсы. Обучение предназначено на всех, кто интересуется веб-разработкой, хочет освоить профессиональные навыки верстки, чтобы зарабатывать на создании сайтов или продолжить развиваться в одной из профессий: «Фронтенд-разработчик», «JavaScript-разработчик», «Фулстек-разработчик».

Курс подготовлен экспертами образовательного проекта HTML Academy. В процессе подготовки студенты пройдут по всем важным этапам, изучат создание макетов сайтов в Figma, научаться, как оптимизировать код, чтобы создавать эффективные и быстро загружающиеся веб-страницы. Учащиеся будут активно работать над проектами. Практические упражнения и задания помогут лучше усвоить материал и научиться применять его на практике.

Краткое описание курса «HTML и CSS. Профессиональная верстка сайтов»:

1. Установка и настройка инструментов для работы.
2. Разметка страниц проектов по макету. Интерфейс Figma. Базовая структура страницы.
3. Основы CSS. Кастомные свойства в CSS. Внедрение декоративной графики.
4. Сетки страниц и компонентов.
5. Добавление всплывающих элементов.
6. Выпускная защита своего проекта.

В результате вы станете уверенным специалистом в создании визуально привлекательных и функциональных веб-страниц с использованием HTML и CSS. А сертификат академии станет пропуском в захватывающий мир веб-разработки.

Обучение. Участие в живых лекциях, работа над проектом с наставником.

Раздел 1.Старт

• Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.
• Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
• Узнаем, кто такие авторы, кураторы и наставники курса.
• Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
• Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
• Разберём процесс работы над проектом и его защиту.

Раздел 2. Разметка

• Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.
• Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.
• Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.
• Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.
• Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.

Раздел 3. Графика

• Экспортируем графику из макета.
• Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
• Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
• Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере графики.

Раздел 4. Базовая стилизация

• Выполним базовую стилизацию страниц проекта.
• Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов.
• Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.
• Внедрим контентную и декоративную графику на страницы проекта.
• Подключим шрифты, поработаем с типографикой и зададим фоны элементам.

Раздел 5. Сетки страниц на флексах

• Построим крупные сетки страниц с помощью флексов.
• Разберёмся в боксовой модели и познакомимся с типами боксов.
• Научимся анализировать сетки на макетах и определять крупные сетки страниц.
• Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.

Раздел 6. Сетки компонентов на флексах

• Создадим мелкие сетки компонентов страниц при помощи флексов.
• Разберём особенности мелких сеток.
• Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
• Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.

Раздел 7.Сетки компонентов на гридах

• Создадим мелкие сетки компонентов страниц при помощи гридов.
• Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
• Разберём типовые ситуации, когда гриды подходят лучше флексов.
• Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.

Раздел 8. Декоративные элементы

• Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
• Научимся использовать оформительскую и программируемую графику.
• Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.
• Рассмотрим псевдоэлементы и точечное позиционирование элементов.
• Погрузимся в тонкости типографики и визуальные правила оформления контента.
• Научимся стилизовать интерактивные состояния ссылок и кнопок.

Раздел 9. Попапы, слайдеры, формы

• Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.
• Научимся оформлять нестандартные элементы форм.
• Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
• Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.
• Защита проекта. Подготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.

Раздел 10.Подготовка к защите

• Проверим проект на соответствие критериям качества и подготовим его к публикации.
• Доработаем доступность и интерактивность интерфейса.
• Протестируем контент на изменение количества и размеров элементов, текста и графики.
• Проверим проект на соответствие макету и стайлгайду.
• Защита проекта
• Проверка проекта проверяющим наставником по критериям качества, его улучшение и защита.

Раздел 11.Финал

• Поговорим о том, как прошёл курс и куда вам двигаться дальше.
• Результаты курса.
• Сделаем обзор статистики по студентам и проектам.
• Обсудим, что вы узнали в процессе курса и что уже можете делать.
• Поговорим о вариантах вашего дальнейшего развития.

• Формат
  Самостоятельно с наставником
  Живые вебинары / Видеоуроки / Консультации
  Обучение в ЛК на сайте автора
• Продолжительность
  2 месяца
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  Строго по расписанию
• Домашние задания
  ЕстьС проверкой
• Документ об обучении
  Сертификат Освоение программы курса
• Обязательное выполнение итоговой работы
• Сопровождение
  Куратором
• Техническая поддержка
  В рабочее времяЧат в вкЧат в мессенджере
• Что понадобится для обучения
  Для прохождения курса достаточно завершить тренажёры по основам HTML и CSS. Курс подразумевает, что вы обладаете достаточной компьютерной грамотностью, чтобы устанавливать и запускать программы.
• Год выхода
  2023 Последнее обновление: 22.02.2024