Разбираемся с селекторами и каскадностью. Учимся задавать фоновые изображения.

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

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

Познакомимся с техниками создания крупных сеток страниц и мелких сеток компонентов. Разберём возможности двух технологий создания раскладок: флексбоксов и гридов.

Выделим базовые типы сеток, научимся их комбинировать для создания более сложных сеток страниц. Рассмотрим приёмы для получения «сеточных» размеров из редактора Figma. Выполним третий этап работы над личным проектом: опираясь на макет, построим сетку страницы.

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

Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы. Будем решать задачи, с которыми регулярно сталкиваются веб-разработчики.

Научимся управлять элементами веб-страницы через JavaScript. Выполним пятый, финальный, этап работы над проектом: c помощью JavaScript мы оживим некоторые элементы интерфейса, опираясь на макет и техническое задание.

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

Погрузимся в основные механизмы создания раскладок: флексбоксы и гриды. Разберём основы и тонкости. Закрепим знания, сверстав несколько раскладок с помощью каждой технологии.

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

Создадим небольшое приложение с фотофильтрами. Подготовим разметку и стили, необходимые для отрисовки приложения, а затем опишем логику работы на JavaScript.

Попрактикуемся в решении задач по программированию на JavaScript. Мы собрали 51 задачу разного уровня сложности. Каждая задача содержит подробный разбор и автоматические тесты для проверки решения.

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

Познакомимся с типовыми приёмами разработки в React, которые упрощают процесс создания сложных приложений. Рассмотрим использование внешних сервисов данных в компонентах. Дополним функциональность приложения.

Разберём почему важна правильная сборка проекта. Узнаем зачем нужно делить проект на модули и как использовать для этого webpack. Познакомимся с Create React App и рассмотрим преимущества и недостатки этого инструмента.

Табличные раскладки необходимы для работы с табличными компонентами в адаптивной вёрстке, а именно для «разрушения» и «пересборки» таблиц в разных версиях макета. Также их используют в некоторых приёмах вёрстки, например, для «идеальной» центровки.

Простые интерфейсные анимации и микроанимации сейчас делаются на чистом CSS. Для этого используются плавные переходы и покадровая анимация.

Главный инструмент для ускорения работы верстальщика и организации эффективной командной разработки над библиотекой компонентов — это препроцессор. Разбираем работу с препроцессором на примере Less.

Одна из популярных задач, для которой нужно знать устройство SVG, — это интерактивные иконки, меняющие цвет при наведении. Более продвинутые техники, в которых используется SVG, связаны с использованием масок, созданием адаптивных элементов интерфейса, а также сложных декоративных эффектов.

Помогаем Кексу запустить магазин кошачьих аксессуаров и фэшена.