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

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

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

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

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

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

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

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

Рассмотрим продвинутые селекторы, такие как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как ::before и ::after.

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

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

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

Изучим основные принципы программирования на JavaScript. Познакомимся с переменными, условиями и циклами. Закрепим знания, написав несколько программ: фитнес-калькулятор, драйвер принтера, симулятор дартс-машины.

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

Углубляемся во взаимодействие с пользователями и оживление интерфейсов.

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

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

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

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

Продвинутые селекторы используются для улучшения UX форм. Они могут использоваться как в сочетании с JavaScript, так и без. Также с помощью продвинутого поиска по атрибутам можно создавать «умные» элементы интерфейса и диагностические инструменты.

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

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

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

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

Добавляем PHP в разметку, работаем с веб-сценариями, данными и адресом.

Изучим приёмы создания сеток с помощью флоатов и блочно-строчных боксов. Клеарфиксы, хаки с созданием колонок одинаковой высоты, борьба с пробелами между блочно-строчными боксами — всё здесь.

Разбираемся, как верстать типовые элементы интерфейса на флоатах и блочно-строчных боксах, без упора на семантику.

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

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