HTML и CSS. Профессиональная вёрстка сайтов (2021) [HTML Academy]

Описание

Курс “HTML и CSS. Профессиональная вёрстка сайтов” от HTML Academy – это обучающий курс, который предназначен для тех, кто хочет научиться создавать качественные и современные веб-страницы. Курс разработан для всех уровней подготовки – от начинающих до опытных веб-разработчиков.

В ходе курса вы изучите основные принципы HTML и CSS, которые являются основой веб-разработки. Вы научитесь создавать различные элементы страницы, включая заголовки, абзацы, списки, таблицы, изображения и кнопки. Вы также изучите, как правильно организовывать код и структуру страницы, чтобы она была читаемой и понятной.

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

 

Программа курса и ее особенности.
Обзор и обсуждение личных проектов участников.
Понимание технического задания и критериев качества.
Структура обучения и его ключевые этапы.
Роль и вклад авторов, кураторов и наставников.
Эффективное сотрудничество с наставником для достижения лучших результатов.
Защита и презентация личного проекта.
Роли и задачи разработчиков веб-сайтов.
Ключевые компоненты сайтов в интернете: сервер, браузер, веб-вёрстка.
Распределение обязанностей между дизайнерами, веб-разработчиками и бэкенд-специалистами.
Важность удобства использования, доступности и быстродействия при веб-вёрстке.
Необходимые инструменты и рабочий процесс.
Редакторы графики: Figma, Photoshop.
Редакторы кода, браузеры, отладчики.
Использование системы контроля версий.
Состояние процесса работы над проектом.

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

Анализ макета перед приступлением к веб-вёрстке, освоение синтаксиса HTML и базовой структуры веб-страницы, изучение спецификации и решение сложных ситуаций, связанных с разметкой.

Создание веб-страниц на основе макета.
Тщательный анализ дизайна макета.
Организация структуры проекта.
Основы синтаксиса HTML.
Различие между парными и одиночными тегами.
Вложенность и иерархия документа.
Виды атрибутов и их использование.
Основные элементы веб-страницы.
Теги для отображения и подключения контента.
Применение семантики и спецификаций.
Стандарты и технические требования.
Категории и правила вложения тегов.
Более глубокое изучение правил разметки.

Раздел 3
Стилизация

 

Разбивка макета на блоки, создание структуры стилей, основы CSS, работа с типографикой и подключение шрифтов для создания стильного интерфейса.

Организация и структура блоков в макете.
Выделение различных блоков из дизайна.
Определение уникальных и повторяющихся элементов.
Создание переменных для управления цветами.
Структурирование и организация файлов проекта.
Методы подключения стилей на веб-странице.
Освоение основных концепций CSS для блоков.
Разделение контента и интерфейса в стилях.
Правильное именование классов и использование тегов.
Селекторы, блоки правил и пары свойство-значение.
Понимание разнообразных видов селекторов.
Объяснение применения классов в верстке.
Наследование, каскадирование и специфичность в CSS.
Понимание взаимосвязи свойств и элементов.
Особенности наследования и каскадирования.
Применение разных единиц измерения и выравнивание блоков.
Использование макетов в Figma для измерения блоков.
Выбор и использование шрифтов.
Основные способы подключения системных шрифтов.
Методы добавления и настройки Google Fonts.
Использование шрифтов в стилях веб-страницы.

Раздел 4
Графика

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

Различия между редакторами и инспекторами графики.
Обзор основных редакторов: Photoshop, Illustrator, Sketch, Figma.
Обзор инспекторов: Zeplin, Avocode.
Выбор подходящего инструмента для работы.
Освоение интерфейса Figma и работы с макетом.
Основные элементы: страницы, фреймы, слои, инспектор.
Параметры для блоков: прозрачность, фон, тени, позиция.
Параметры для текста: шрифт, размер, начертание.
Основные форматы графики и методы выбора правильного формата.
Особенности растровой, векторной и генерируемой графики.
Использование форматов GIF, JPEG, PNG, WebP и SVG.
Выбор оптимального формата в зависимости от деталей изображения.
Настройка экспорта графики из Figma.
Оптимизация изображений после экспорта.
Установка и настройка инструментов Squoosh и SVGOMG.
Оптимизация графики пакетно.
Организация файлового хранения графики.
Структура папок для хранения графических ресурсов.
Установка путей к ресурсам, используемым в проекте.

Раздел 5
Сетки на основе Grid Layout

Освоение системы сеток и размещения блоков с помощью Grid Layout. Обучение определению сеток на макетах и изучение блочной модели документа.

Принципы работы модульной системы сеток.
Использование направляющих, колонок, строк и отступов.
Роль сетки как основы, но не строгое правило.
Изучение спецификации Grid Layout и размещение блоков на сетке.
Работа с шаб

Раздел 6
Сетки на флексах

Ознакомление с системой сеток и расположением блоков на примере Flexible Boxes. Выбор наиболее подходящих случаев для использования флексов вместо гридов.

Изучение спецификации Flexible Boxes и раскладки внутри блоков.
Оси: основная, поперечная и направление их расположения.
Возможности растяжения, сужения и базового размера флексов.
Сравнение применения флексов и гридов.
Особенности систем раскладки.
Ситуации, идеально подходящие для использования гридов.
Ситуации, идеально подходящие для использования флексов.
Возможность их совместного использования.

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

 

Рассмотрение принципов дизайна, применяемых при создании макетов. Анализ состояний и позиционирования элементов на странице. Создание интерфейса, который не будет нарушаться переполнением.

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

Раздел 8
Оформление контента

 

Освоение стилизации содержимого на внутренних страницах, где контент наполняется с помощью CMS. Подготовка к защите личного проекта.

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

 

Раздел 9
Доступность и формы

 

Разговор о значимости доступности и рассмотрение способов улучшения удобства пользовательских интерфейсов. Работа с инструментами проверки и отладки доступности.

Анализ ситуаций, где пользовательский интерфейс неудобен, и введение в проблему доступности.
Решение проблемы неконтрастных цветов и использование подложек для текста.
Улучшение доступности, основываясь на универсальном доступе, физиологических особенностях и условиях пользователей.
Использование альтернативных средств, таких как поисковые системы, режимы чтения и скринридеры.
Рассмотрение доступности элементов, встроенных в HTML.
Понимание особенностей взаимодействия с интерфейсом с помощью скринридеров.
Способы взаимодействия с интерфейсом через мышь и ховер.
Работа с клавиатурой и использование фокуса.
Использование клавиатуры и голосовой ввод взамен мыши.
Распространённые паттерны пользовательского интерфейса.
Проектирование кнопок-ссылок.
Работа с радиокнопками, чекбоксами и выпадающим списком.
Добавление подписей к интерактивным и контентным элементам.
Определение областей контента с помощью заголовков.
Добавление подписей к контентным элементам, таким как картинки, видео и фреймы.
Обеспечение доступности вставки SVG графики.
Оформление форм и добавление подписей к полям.
Определение подписей в сложных случаях, таких как заголовки и иконки.
Использование инструментов для проверки и отладки доступности.
Использование доступного дерева в браузерных отладчиках.
Проверка доступности с помощью расширений, таких как aXe и Siteimprove.
Практическое испытание скринридера.

Раздел 10
Оживление интерфейса

 

Исследование области применения JavaScript, различия между DOM и HTML-деревом. Подключение и настройка компонентов JavaScript.

Рассмотрение использования JavaScript в браузерах.
Обзор различных JavaScript-движков в браузерах и за их пределами.
Изучение отличий между DOM и HTML-деревом.
Работа с DOM: поиск элементов и сохранение в переменных.
Создание функций, вызов и передача параметров.
Создание интерактивных компонентов Барбершопа.
Анализ требований учебного проекта и создание скриптовых файлов JavaScript.
Настройка компонентов JavaScript.

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

 

Обсуждение проделанной работы и дальнейший путь развития.

Результаты и статистика курса.
Разговор о сложностях, возникавших в процессе обучения.
Положение участника на профессиональном пути.
То, чему вы научились в ходе прохождения курса.
Возможности, которые вы уже можете применять.
Варианты развития и дальнейшего обучения.
Информация о профессиях, предлагаемых Академией.
Развитие навыков через дополнительные курсы.
Возможность присоединения к Акселератору и Лиге А.