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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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