О курсе
Курс построен как последовательная программа по вёрстке сайтов. В начале рассматривается устройство веба, роли специалистов, инструменты и процесс работы над проектом. Далее разбирается разметка: синтаксис HTML, структура страницы, семантика и спецификации. Отдельные разделы посвящены стилизации: выделению блоков, подключению стилей, селекторам, наследованию, каскаду и специфичности, работе со шрифтами. В блоке о графике рассматриваются редакторы и инспекторы, интерфейс Figma, форматы изображений, экспорт и оптимизация. Значительная часть программы посвящена раскладке: модульным сеткам, Grid Layout, Flexible Boxes и блочной модели. Также рассматриваются декоративные элементы, типографика, интерактивные состояния, переполнение контента, оформление контента из CMS, доступность интерфейсов и формы. В завершение разбирается подключение JavaScript-компонентов и итоги курса.
Что рассматривается в программе
- разметка страниц по макету с использованием HTML
- стилизация блоков и работа с CSS-селекторами, каскадом и специфичностью
- работа с графикой: выбор форматов, экспорт из Figma, оптимизация Squoosh и SVGOMG
- раскладка блоков с помощью Grid Layout и Flexible Boxes
- работа с блочной моделью, позиционированием и переполнением контента
- оформление контента, наполняемого из CMS
- обеспечение доступности интерфейсов и работа с формами
- подключение и настройка JavaScript-компонентов
Кому может быть полезен курс
- тем, кто интересуется вёрсткой сайтов и хочет освоить HTML и CSS
- начинающим специалистам, которым нужно систематизировать знания по фронтенд-разработке
- работающим людям, которые рассматривают смену профессии в IT
- тем, кто хочет ознакомиться с инструментами Figma, Photoshop и оптимизацией графики
- специалистам, которым нужно изучить доступность интерфейсов и работу с формами
Вопросы о программе
Какие инструменты рассматриваются в курсе?
В программе упоминаются Figma, Photoshop, Illustrator, Sketch, Zeplin, Avocode, редакторы кода, браузеры, отладчики, система контроля версий, Squoosh и SVGOMG.
Какие темы по раскладке включены в программу?
Рассматриваются модульные сетки, Grid Layout, Flexible Boxes, блочная модель, выравнивание, ручная и автоматическая раскладка, а также совместное использование гридов и флексов.
Затрагивается ли доступность интерфейсов?
Да, в программе есть раздел о доступности: неконтрастные цвета, встроенные интерактивные элементы, способы взаимодействия, подписи к элементам, инструменты проверки и демонстрация скринридера.
Включает ли курс работу с JavaScript?
В разделе «Оживление интерфейса» рассматриваются JavaScript в браузерах, отличия DOM и HTML-дерева, работа с DOM, создание функций и подключение JavaScript-компонентов.