Необходимо разработать и записать курс по HTML/CSS для новичков (ориентировочно 16 разделов) для онлайн-школы по web-разработке.
Кандидат желательно девушка.
Примерная программа:
Раздел 1. Введение
О сайтах: из чего состоят и кто их разрабатывает.
— Что такое сайт и из чего он состоит?
— Кто отвечает за разработку сайта: дизайнер, верстальщик, фронтенд и бэкенд. Чем отличаются верстальщик и фронтенд-разработчик.
— За что ответственен верстальщик: доступность и удобство.
Инструменты для разработки.
Процесс работы над проектом.
— Браузеры: разновидность и отличия. Панель разработчика. Кроссбраузерность. Табличка how to use.
— Графические редакторы и инспекторы: Figma и Photoshop
— Редакторы кода. Работа с Visual Studio Code.
— Системы контроля версий: их предназначение и разновидности. GitHub.
— Процесс работы над проектом. Работа с Github.
Раздел 2. Введение в HTML
Язык разметки HTML. Синтаксис HTML.
— Что такое разметка и из чего она состоит. Теги.
— Разновидности тегов: парные и одиночные. Правила записи тегов. Основные ошибки в записи.
— Вложенность тегов и дерево документа.
— Атрибуты тегов
Базовая структура HTML-страницы.
— Основные составляющие разметки
— Теги подробнее
— Метаданные
— Подключение ресурсов к странице. (Убираем стили и смотрим что будет)
Разметка текста
— Списки, списки определений, вложенные списки
— Цитаты, время, код, индексы,;зачеркнутые
— div span
Ссылки и изображения
— Ссылка, адреса, якорь, на файл
— Изоображение, форматы, размеры, alt
Медиа-теги.
Семантичная и валидная верстка.
— Семантика: роли и предназначение тегов.
— Стандарты языка HTML. Правила вложения тегов.
— Логическое и физическое форматирование.
Раздел 3. Введение в CSS
Таблица стилей CSS. Синтаксис CSS.
— CSS-правила. Синтаксис. Свойство и значение.
Селекторы.
— Селекторы. По тегам и классам. Вложенность. Множественные классы.
Атрибут style.
Наследование, каскадирование и приоритеты.
— Наследование. Свойства наследуемые и ненаследуемые. Стили по умолчанию. Каскадирование. Специфичность.
Единицы измерения.
— Абсолютные. Относительные.
Составные свойства.font
Шрифты и оформление текста.
Цвета и фоны. Прозрачность. Разница transparent и opacity.
Раздел 4. Работа с дизайном в графическом редакторе.
— Обзор графических редакторов и инспекторов.
— Работы с фигма. Работа с макетом.
— Измерение параметров элементов.
— Работа с графикой. Форматы. Как вытаскивать графику.
Раздел 5. Боксовая модель элемента.
— Высота, ширина блоков.
— Блочные/строчные элементы.
— Аналогия HTML/CSS на примере линейных и блочных элементов.
— Box-model. Box-sizing.
— Отступы. Центрирование блоков.
Раздел 6. Продвинутый CSS.
— Селекторы.
— Поток.
— Обтекание. Флоты.
— Позиционирование. Z-index
— Псевдоклассы и псевдоэлементы.
Раздел 7. Продвинутый CSS 2.
— Фоны подробнее. Тени и тд.
— Анимация.
— Переполнение контента.
— Cursor: pointer
— CSS-tricks
— ещё что-то там
Раздел 8. Адаптив/респонсив.
Раздел 9. Сетки. Flexbox.
Раздел 10. Формы. Фреймы.
Раздел 11. БЭМ.
Раздел 12. SASS.
Раздел 13. Доступность.
Раздел 14. Bootstrap
Раздел 15. JavaScript. Роль. Подключение к странице элементов типа слайдер и тд.
