Профессиональная вёрстка на HTML и CSS

Учёбе нужно уделять не меньше 15 часов в неделю. Можно заниматься в любое время, главное — не пропускать воркшопы и вовремя сдавать проекты.

1 модуль — бесплатно, чтобы вы попробовали себя в роли верстальщика или верстальщицы. Вы узнаете правила HTML-разметки и научитесь работать со стилями. Все знания сразу же будете применять на практике.

Понятие, как вёрстка соотносится с современной веб-разработкой

Что делают разработчики, базовые элементы, HTML, CSS

Теги HTML, заголовки, абзац, ссылка, об атрибутах, один тег в другом, изображения, структура HTML-документа, правила CSS, тег style, CSS-файл, блоки, отступы, подпись к обложке, playground

Собрать лендинг, размеры в пикселях, размеры в процентах и долях, цвета в HTML, фон элемента, позиция, размер, повтор фона, прозрачность, коробка в коробке, наследование, типографика

Пик вёрстки, новая секция, классы, типографика, поток и блочная модель, внешние и внутренние отступы, границы, блочные + строчные, расположение элементов по центру, тени, подвал сайта, центрировать по вертикали

Знакомство с платформой и командой курса, сколько времени нужно на учёбу, что вы будете изучать и какие проекты вам предстоят

Изучите основы HTML и CSS, сверстаете обложку для плейлиста и первый сайт, узнаете больше о программе курса и процессе обучения

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

Основы, установка Git, командная строка, настройка и подключение Git к проекту, первый коммит, командная работа, регистрация на GitHub, SSH-ключи, локальный и удалённый репозитории, клонирование репозитория

Подключение шрифтов к странице, настройки шрифтов, подключение внешних шрифтов, оформление текста, переполнение текстовых блоков

Контейнеры HTML5, семантика и выразительность HTML, таблицы, приведение кода в порядок, язык документа и его элементов, идентификаторы

Флекс-контейнер, направление внутри флекс-контейнера, выравнивание по основной и дополнительной осям, перенос флекс-элементов, gap, свойства флекс-элементов, flex basis, flex-grow и flex-shrink

Гриды, терминология гридов, столбцы и строки внутри грид-контейнера, отступы, функция repeat(), фракция, расположение элементов, грид-области, выравнивание сетки и содержимого грид-областей, наложение элементов

Сверстаете мобильную страницу с текстом и cайт для аукциона. Отработаете разные виды лэйаутов и узнаете, как делать навигацию.

Подготовите графику для работы с разными экранами. Поработаете над адаптивным интерфейсом.

Настройки страницы, описание сайта для браузеров и поисковых машин, фавикон, разметка OpenGraph, страница в странице, API YouTube, виджеты-информеры, тег 

LVHA, фокусы,.:marker,.:selection, скринридеры, базовые правила a11y при вёрстке, дерево доступности, декоративные и контентные изображения, поля форм, ARIA, настройки уменьшения движения и повышения контрастности

Статическое, относительное и абсолютное позиционирования, z-index, фиксированное и липкое позиционироване, inset, стилизация полей ввода, кнопок и ярлыков, псевдоклассы валидации, выпадающие списки, accent-color

Сделаете страницу с видеофоном и сайт с медиаконтентом

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

Дизайн в мире множества устройств, разница между резиновой и адаптивной вёрсткой, адаптивный макет, синтаксис медиазапросов, характеристики устройств, пользовательские предпочтения, синтаксис диапазонов, выражения от контейнера

Форматы, оптимизация изображений, плотность пикселей, картинки на выбор (браузера), image-set(), loading="lazy", относительные размеры блоков и текстовых элементов, функции calc(), min(), max(), clamp()

Создадите страницу с тёмным и светлым фоном, а также адаптивный сайт с разными цветовыми темами

Разберёте инструменты декорирования ваших страниц. Градиенты, тени, фильтры, режимы смешивания — всё это здесь. Научитесь использовать векторную графику на страницах и пользоваться интерактивными инструментами, которые встроены в HTML. Вишенка на торте спринта — анимации страниц.

Экспорт svg, использование svg: инлайн, , фон, use, fill, stroke, анимация и оптимизация svg, svg-маски

Transition, матрица трансформаций, transform, transform-origin, translate, rotate, skew, scale, применение нескольких трансформаций

Animation (name, duration, iteration-count, direction, timing-function, delay, play-state, fill-mode), @keyframes, дешёвые свойства для анимации, will-change

Бордер-имидж, фильтры, тени, линейный, радиальный и конический градиенты, репит-градиент, множественные градиенты, бленд-мод

Матрица 3D-преобразований, transform-style, perspective и perspective-origin, backface-visibility

Сверстаете веб‑приложение с муд‑бордами