Профессиональный HTML и CSS, уровень 1 c 11 мая по 12 июля 2020До 10 апреля цена 14 400 14 900

Программа обучения

Предлагаем путеводитель по интерактивным заданиям, следуя которому вы станете настоящим профессионалом.

Начать

Эпичный курс По подписке

Применяйте полученные знания на практике!

Вы с нуля сверстаете настоящий сайт, используя графический макет. Всё, как у настоящих профессионалов.

Эпичный курс открывается постепенно, по мере прохождения программы обучения.

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

Основы HTML и CSS0/12Знакомство с HTML и CSS

В этой главе мы под руководством инструктора Кекса познакомимся с основами вёрстки на примере небольшого лендинга.

Кексби. Знакомство

Кексби. Знакомство0/10

Размечаем основные блоки главной страницы магазинчика Кекса.

Структура HTML-документа0/17Знакомство с HTML и CSS

Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.

Разметка текста0/20Знакомство с HTML и CSS

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

Кексби. Разметка, оформление текста

Кексби. Разметка, оформление текста0/11

Добавляем в разметку текстовые теги: заголовки, списки, цитаты.

Ссылки и изображения0/16Знакомство с HTML и CSS

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

Кексби. Ссылки и изображения

Кексби. Ссылки и изображения0/15

Вставляем содержательные картинки и добавляем ссылки.

Основы CSS0/16Знакомство с HTML и CSS

Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.

Оформление текста0/19Знакомство с HTML и CSS

Завершаем оформление страниц блога, учимся оформлять тексты с помощью CSS: задаём шрифты, цвета, отступы, размеры.

Основы JavaScript0/16Знакомство с JavaScript

Познакомимся с JavaScript, с его помощью изменим вёрстку на странице, напишем переключатель тем, сделаем интерактивную форму подписки и научимся пользоваться консолью.

Условия и создание элементов0/15Знакомство с JavaScript

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

Коллекции и свойства элементов0/16Знакомство с JavaScript

Познакомимся с коллекциями элементов и циклом for of, научимся с помощью свойств получать данные и управлять элементами, сделаем всплывающие подсказки и валидацию формы.

Основы PHP0/15Знакомство с PHP

Познакомимся с основами PHP. Научимся внедрять PHP в вёрстку, работать с веб-сценариями и адресной строкой, запрограммируем интернет-магазин.

Условия в PHP0/14Знакомство с PHP

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

Массивы и циклы в PHP, часть 10/15Знакомство с PHP

Узнаем, что такое массивы и циклы, и почему они отлично работают вместе. Поработаем с разными массивами и циклами на страницах интернет-магазина. Добавим фильтрацию товаров и решим ещё пару задач.

Возможности HTML и CSS0/20Продвинутый HTML и CSS

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

Знакомство с таблицами0/23Продвинутый HTML и CSS

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

Кексби. Таблицы

Кексби. Таблицы0/9

Создаём таблицу прайс-листа и задаём ей базовое оформление.

Формы, часть 10/18Продвинутый HTML и CSS

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

Кексби. Формы

Кексби. Формы0/11

Завершаем разметку страницы формой вопросов.

Формы, часть 20/27Продвинутый HTML и CSS

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

Селекторы, часть 10/18Продвинутый HTML и CSS

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

Наследование и каскадирование0/18Продвинутый HTML и CSS

Наследование, каскадирование, специфичность: что это и как их правильно использовать?

Кексби. Базовая стилизация

Кексби. Базовая стилизация0/23

Начинаем базовую стилизацию страницы.

Фоны, часть 10/16Продвинутый HTML и CSS

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

Кексби. Графика и оформление

Кексби. Графика и оформление0/6

Добавляем декоративные изображения.

Селекторы, часть 20/20Продвинутый HTML и CSS

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

Блочная модель документа0/23Построение сеток

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

Сетки0/32Построение сеток

Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства float и блочно-строчных элементов. Отработаем основные приёмы построения сеток.

Кексби. Сетки

Кексби. Сетки0/20

Создаём сетку страницы.

Флексбокс, часть 10/31Построение сеток

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

Флексбокс, часть 20/28Построение сеток

Узнаем как управлять размерами и отступами флекс-элементов и как работают коэффициенты растяжения и сжатия, а также потренируемся создавать «гибкие» раскладки и элементы интерфейса.

Знакомство с гридами0/30Построение сеток

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

Позиционирование0/20Декоративные эффекты

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

Кексби. Четвертьфинал

Кексби. Четвертьфинал0/17

Завершаем вёрстку шапки, преимуществ и справочника.

Игра теней0/17Декоративные эффекты

Взглянем на процесс создания теней с помощью CSS. Мы по косточкам разберём свойство box-shadow, научимся использовать множественные тени, а также изучим некоторые продвинутые приёмы работы с тенями.

Линейные градиенты0/23Декоративные эффекты

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

Двумерные трансформации0/32Декоративные эффекты

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

Кекстаграм: Начало. CSS-фильтры0/14Декоративные эффекты

Вместе станем мастерами фильтров в CSS: разберёмся, как применять фильтры к разным элементам, а также комбинировать и анимировать их.

Кекстаграм: Эпилог. JavaScript0/25Декоративные эффекты

В сиквеле курса «Кекстаграм» нам предстоит запрограммировать небольшое фотоприложение с фильтрами на JavaScript.

Мастерская: создаём меню0/28Мастерские

Создадим с нуля несколько типовых навигационных меню: вертикальное, горизонтальное, многоуровневое и с выпадающим подменю. Это прикладной курс, в котором вы будете использовать знания и навыки, полученные в предыдущих курсах.

Кексби. Полуфинал

Кексби. Полуфинал0/13

Завершаем вёрстку отзывов и каталога.

Мастерская: декоративные элементы0/18Мастерские

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

Кексби. Финал

Кексби. Финал0/15

Завершаем вёрстку формы обратной связи и подвала.

Мастерская: декоративные эффекты0/31Мастерские

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

Знакомство с SVG0/15Основы SVG

Мы познакомимся с SVG — форматом векторной графики. Разберём базовые примитивы: линии, прямоугольники, окружности. Научимся позиционировать их, управлять цветом и размерами, собирать из них разные рисунки.

Оформление SVG-фигур0/20Основы SVG

Базовые понятия об оформлении SVG-фигур. Заливки и обводки.

Размеры в SVG0/15Основы SVG

Разберёмся с масштабированием SVG и научимся работать с атрибутами viewBox и preserveAspectRatio.

Основы программирования на JavaScript0/14Программирование на JavaScript

Разберёмся с переменными, операциями и типами данных.

Условия0/16Программирование на JavaScript

Научимся использовать условия на полную. Разберёмся с логическими операциями и сравнениями. Попробуем комбинировать операторы.

Циклы0/26Программирование на JavaScript

Создадим драйвер для печати страниц со множеством режимов. В этом нам помогут циклы, с которыми мы познакомимся в этой главе.

Массивы0/28Программирование на JavaScript

Научимся работать с действительно массивными данными и проведём настоящее аналитическое расследование. А для этого изучим работу с массивами.

Функции0/22Программирование на JavaScript

Отправим Кекса в путешествие, посчитаем зарплаты и доходы, научимся разделять код на отдельные смысловые блоки. И в конце концов научимся работать с функциями.

Объекты0/28Программирование на JavaScript

Будем читать из объектов, использовать встроенные и кастомные методы, узнаем, что такое словари и контекст вызова, отправим котов играть в кости, напишем конфигуратор компьютера. И это ещё не всё!

JavaScript в браузере0/21Погружение в браузерный JavaScript

Углубимся в работу JavaScript с вёрсткой. Научимся менять разметку и создавать её с нуля с помощью скриптов.

Знакомство с событиями0/23Погружение в браузерный JavaScript

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

Манипуляции с DOM0/22Погружение в браузерный JavaScript

Узнаем, что такое DOM API, поработаем с шаблонами, познакомимся с новыми событиями и методами для управления DOM, займёмся клонированием элементов и запрограммируем приложение со списком дел.

Плавные переходы0/29Динамические эффекты

Научимся плавно менять CSS-свойства, будем создавать красивые и функциональные элементы форм в стиле Material Design и построим мини-викторину об HTML и CSS.

Анимация0/31Динамические эффекты

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

Знакомство с Less0/14Препроцессор Less

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

Примеси в Less0/30Препроцессор Less

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

Селекторы, часть 30/18Сборник: Тонкости CSS

Рассмотрим продвинутые селекторы, умеющие искать элементы по подстрокам в атрибутах, а также огромное количество селекторов для стилизации элементов форм, таких как :required, :optional и :checked.

Рамки и фоны, часть 20/33Сборник: Тонкости CSS

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

Оформление текста, часть 20/26Сборник: Тонкости CSS

Мы в прямом смысле «наиграемся со шрифтами», декоративными текстовыми эффектами и тенями, а ещё узнаем, как повысить читабельность текстов с помощью новых CSS-свойств.

Таблицы на CSS0/18Сборник: Тонкости CSS

Взглянем на таблицы с другой стороны: научимся строить их с помощью CSS, исследуем и опробуем на практике редкие табличные свойства. а также нас ждёт интересное и непростое путешествие за Святым Граалем.

Некоторые главы интерактивных курсов были перенесены в архив.