Полная программа

HTML/CSS
HTML/CSS

Длительность курса: 148 часов

Модуль 1. Введение в Web

Тема 1 Цель занятия

Введение в Web познакомиться;
обсудить программу;
узнать историю развития веба, об основных технологиях,
рассматриваемых на курсе и их место в общей картине современного
интернета;
разобрать необходимые инструменты для начала работы (фигма,
редактор кода и его настройка).

Краткое содержание
организационные вопросы;
история WWW. зачем изобрели Web;
изучаемые на курсе технологии;
инструменты:
фигма
редактор кода на примере VSCode
онлайн-редактор кода.
инспектор кода в браузере.

Тема 2 Цель занятия

Version Control научиться работать с системой контроля версий Git;
работа в GitHub;
как сдавать домашние работы на курсе.

Краткое содержание
что такое и на чем основано версионирование;
как установить и настроить гит на разные ОС;
терминал в VSCode;
локальная работа с изменениями через терминал (git add, git status,
git commit, git branch, git checkout);
решение мерж-конфликтов;
использование встроенных возможностей редактора для работы с
гит вместо терминала;
регистрация и создание репозитория на GitHub;
работа с удаленным и локальным репозиториями;
плагины и клиенты (GitHub desktop) для помощи в работе;
редактирование файлов markdown на примере Readme.mdå.

Домашние задания
Система контроля версий
Цель
научиться настраивать git и понять как происходит работа с вашими
изменениями в проекте.

Тема 3 Цель занятия

Основы HTML, создать html разметку страницы, используя подходящие;
семантичность семантические теги.

Краткое содержание
основы HTML:
способы создания HTML страниц,
инструменты работы,
редактор VSCode,
онлайн редакторы на примере CodePen.io,
стандарт и где искать ответы на вопросы;
введение в семантическую разметку:
что это такое и почему важно,
доступность,
упражнение на разметку,
нюансы разметки, инспектор кода Chrome DevTools.

Домашние задания
Семантическая разметка страницы
Цель
поработать с семантической версткой;
создать html файл и добавить в него весь текстовый контент для его
дальнейшей стилизации.

Тема 4 Цель занятия

Основы CSS рассмотреть историю появления стилей;
как писать css сегодня;
научиться применять наследование, каскадность в написании
правил;
узнать про специфичность;
стиль написания понятного css-кода.

Краткое содержание
три вида написания CSS:
inline-стили в разметке,
тег style,
CSS файл;
браузерные стили;
наследование, каскадность, специфичность;
как происходит рендеринг HTML страницы - Render Tree;
инспектор кода Chrome DevTools.

Тема 5 Цель занятия

Типографика рассмотреть основы типографики и научиться применять шрифтовые
свойства.

Краткое содержание
узнать что такое типографика;
научиться подключать шрифты по ссылке и локально;
базовая работа со шрифтами и единицы измерения (px, em, rem).

Домашние задания
Основы работы со шрифтами и их css-свойствами
Цель
научиться писать css-правила, подбирать подходящие названия
классов, применять наследование и каскадность на примере
оформления текстовых элементов;
научиться подключать шрифты локально и по ссылке на Google
Fonts.

Тема 6
Консультация по ДЗ

Тема 7 Цель занятия

Box model в деталях обсудить, как браузер рассчитывает высоту и ширину элемента:
типы элементов: блочные и строчные,
свойства display, margin, border, padding, box-sizing, width, height,
рассмотреть особенности размещения элементов на странице;
сделать упражнение на размещение.

Краткое содержание
что такое блочная модель и как влияют на размеры элементов
различные свойства;
свойства display, margin, border, padding, box-sizing, width, height;
блочные и строчные элементы;
инлайн блоки на примере меню/соцсетей;
как применять универсальный селектор *;
практическое задание.

Тема 8 Цель занятия

Selector priority научиться считать приоритеты правил и структурировать свои стили
в соответствии с ними.

Краткое содержание
специфичность и приоритеты правил;
ключевое слово !important;
значение inherit;
различные сложные селекторы.

Домашние задания
Называем классы правильно
Цель
проверить именование ваших классов и поправить согласно
рекомендациям прошлых уроков.

Модуль 2. Layouts (макеты)

Тема 1 Цель занятия

Layout: введение, научиться "читать" сетку макета;
основы понимать как строить ее универсально для всего сайта;
знать про понятие PixelPerfect, уметь верстать резиново.

Краткое содержание
модульная сетка;
верстка PixelPerfect - за и против;
базовый лейаут с центровщиком margin: 0 auto;
как сделать изображение фоновым;
резиновость (%, vw, wh), свойства max-width, min-width.

Домашние задания
Структура сайта, меню и первая секция
Цель
начать работу с лейаутом и сверстать первые секции.

Тема 2 Цель занятия

Позиционирование рассмотреть возможности свойства position;
элементов в деталях фиксированное меню при прокрутке сайта.

Краткое содержание
свойство position: relative, absolute, fixed, sticky и координатные
свойства;
как центрировать элемент с помощью position и transform;
как закрепить навигацию при прокрутке страницы;
практическое задание.

Тема 3 Цель занятия

Flexbox layout рассмотреть flexbox layout.

Краткое содержание
все о flexbox layout.

Домашние задания
Использование flex для оформления секции Biography
Цель
сверстать секцию макета Biography, используя flex.

Тема 4 Цель занятия

Grid layout рассмотреть grid layout.

Краткое содержание
все о grid layout.

Домашние задания
Применение grid для оформления секции Testimonials
Цель
сверстать секцию макета Testimonials, используя гриды.

Тема 5 Цель занятия

Workshop по сеткам получить навык самостоятельной работы с технологиями.

Краткое содержание
решить несколько задач по расположению элементов, научиться
применять и выбирать подходящие для этого технологии (флексы
или гриды).

Домашние задания
Выбор подходящего способа расположения элементов для секции
Designers
Цель
самостоятельно выбрать подходящую на ваш взгляд технологию для
расположения элементов секции Designers.

Тема 6 Цель занятия

Поддержка узнать о поддержке браузеров, что такое fallbacks и как их создавать.
браузеров, новые
технологии и fallbacks

Краткое содержание
что такое и зачем нужны fallbacks;
совместимость браузеров с современными CSS технологиями;
сервис caniuse;
новые технологии, к которым уже пора присмотреться;
дирректива @supports;
вендорные префиксы и автопрефиксер.

Домашние задания
Вёрстка с fallback секции преимуществ Strong Points
Цель
сверстать последнюю секцию Strong points, выбрав подходящую на
ваш взгляд технологию.

Тема 7
Консультация по ДЗ

Модуль 3. Адаптивный веб-дизайн

Тема 1 Цель занятия

Введение в media уметь писать media queries;
queries знать как выбрать точки перестроения;
знать отличие адаптивной и отзывчивой верстки.

Краткое содержание
media queries:
как правильно писать media-rules,
как применять media-feature,
как правильно тестировать с помощью Chrome DevTools,
единицы размера вьюпорта,
классические breakpoints,
резиновая, адаптивная и отзывчивая верстка;
практическое задание.

Домашние задания
Адаптивная верстка макета
Цель
начать адаптировать макет под планшет.

Тема 2 Цель занятия

Mobile-first vs обсудить как правильно организовывать медиа-запросы;
desktop-first знать и понимать подходы Mobile/Desktop first.

Краткое содержание
подходы mobile-first vs desktop-first;
организация css-кода;
тестирование верстки;
адаптивные изображения, тег picturer.

Тема 3 Цель занятия

Особенности рассмотреть особенности верстки для мобильных устройств;
мобильной верстки рассмотреть что такое retina-краны;
почему пиксель - это не пиксель;
некоторые моменты usability мобильных интерфейсов.

Краткое содержание
CSS-пиксель;
нюансы в мобильной верстке;
верстка адаптивной навигации;
оптимизация шрифтов (вариативные, display: swap)

Домашние задания
Продолжение работы над адаптивом
Цель
доделать адаптив страницы до мобильной версии.

Модуль 4. Pro верстка

Тема 1 Цель занятия

Организация кода по обсудить как правильно организовывать номенклатуру CSS;
БЭМ линтеры.

Краткое содержание
методология BEM, как применять на практике, сервис проверки имен
классов, линтеры.

Тема 2 Цель занятия

Препроцессоры использовать препроцессоры на примере Sass (SCSS).

Краткое содержание
что такое препроцессор, плагин для VSCode, базовые возможности
scss: переменные, математические и др. операции;
вложенность и наследование селекторов, миксины, импорт.

Домашние задания
БЭМ + препроцессор SCSS
Цель
прменить на практике компонентный подход БЭМ и структурировать
код с помощью препроцессора SCSS.

Тема 3 Цель занятия

Всплывающие верстать модальные окна и попапы, тег dialog.
элементы

Краткое содержание
что такое модальное окно и поп-ап;
какими способами их можно реализовать;
тег dialog для верстки модальных окон.

Домашние задания
Добавление модального окна
Цель
выполнить новое задание от заказчика и добавить модальное окно
согласно макету;
убедиться, что модальное окно можно отобразить и скрыть с
помощью классов, внутренняя часть окна будет делаться в
дальнейших ДЗ, сейчас ее добавлять не нужно.

Тема 4 Цель занятия

Разметка форм корректно размечать формы с помощью form, input, textarea, fieldset,
label и др. и работать с атрибутами полей форм.

Краткое содержание
как правильно размечать формы;
теги form, input, textarea, fieldset, label и другие;
как работать с атрибутами элементов форм.

Домашние задания
Разметка формы
Цель
добавить корректную семантическую разметку формы внутри
модального окна;
можно настроить базовый лейаут для элементов, но само их
оформление на данном шаге делать не нужно.

Тема 5 Цель занятия

Микро-сетки и знать микро сетки для небольших элементов, псевдоэлементы
декоративные before/after;
элементы работать с иконками FontAwesome и svg.

Краткое содержание
микро сетки для небольших элементов, псевдоэлементы before/after,
иконки FontAwesome и svg.

Домашние задания
Добавление декоративных элементов
Цель
дооформить декоративные элементы полей ввода формы.

Тема 6
Консультация по ДЗ

Тема 7 Цель занятия

Стилизация работать со стилизацией полей ввода, чекбоксов и радио;
элементов форм псевдоклассы hover, focus, active, valid, invalid и др.

Краткое содержание
как происходит стилизация полей ввода, чекбоксов и радио;
что такое псевдоклассы hover, focus, active, valid, invalid и др.

Домашние задания
Стилизация формы
Цель
стилизовать переключатели формы согласно макету, добавить
состояния всем элементам формы;
это финальное задание по верстке модального окна с формой,
проверьте, что оно полностью соответствует макету.

Тема 8 Цель занятия

Анимации CSS: использовать анимации transition;
transition. использовать свойство transform для анимаций;
оптимизация свойств для анимаций с точки зрения процесса
рендеринга страницы.

Краткое содержание
transform и оптимизация свойств для анимаций с точки зрения
процесса рендеринга страницы;
transition по наведению и фокусу на элемент;
кривые безье для временной функции;
простые примеры переходов при наведении на элемент.

Домашние задания
Добавление анимированных переходов
Цель
добавить простые анимации для ссылок и кнопок.

Модуль 5. Работа с библиотеками

Тема 1 Цель занятия

Анимации CSS: знать анимации animation, библиотеки для работы с анимациями.
animation

Краткое содержание
свойство animation;
отличие от переходов;
как создавать анимации;
библиотеки готовых анимаций.

Тема 2 Цель занятия

Компонентный подход обсудить как работать с Bootstrap.
в Bootstrap

Краткое содержание
компоненты в Bootstrap, использование адаптивных сеток.

Тема 3 Цель занятия

Атомарные классы в обсудить как работать с Tailwind.
Tailwind

Краткое содержание
что такое атомарный css на примере библиотеки Tailwind.

Модуль 6. Проектная работа

Тема 1 Цель занятия

Консультация по ДЗ и получить ответы на вопросы по проекту, ДЗ и по курсу.
проектной работе

Краткое содержание
вопросы по улучшению и оптимизации работы над проектом;
затруднения при выполнении ДЗ;
вопросы по программе.

Тема 2 Цель занятия

Организация выбрать и обсудить тему проектной работы;
проектной работы. спланировать работу над проектом;
Деплой ознакомиться с регламентом работы над проектом.

Краткое содержание
правила работы над проектом и специфика проведения итоговой
защиты;
требования к результату проекта и итоговой документации.

Домашние задания
Проектная работа
Цель
В этом ДЗ необходимо утвердить в чате по ДЗ тему проекта: Лендинг
Mod studio. Разработать презентацию о личных итогах курса,
презентовать проект и прислать ссылку на задеплоенную итоговую
версию. В файле readme.md должна быть вся информация о проекте:
базовая информация о вас и проекте, есть ли ветки с отдельными
фичами, что не задеплоены в мастер. Все устаревшие ветки должны
быть удалены.

Тема 3 Цель занятия

Защита проектных защитить проект и получить рекомендации экспертов.
работ

Краткое содержание
презентация проектов перед комиссией;
вопросы и комментарии по проектам.