Демонстрационные курсы
Progressive enhancement на примере формы входа
В этой демонстрации создаётся простая, но красивая форма входа в соответствии с подходом «прогрессивное улучшение» (progressive enhancement).
Используются новые селекторы и свойства CSS3: тени, градиенты, скругления.
Использование псевдокласса :nth-child
В деталях разбирается использование псевдокласса :nth-child, который позволяет выбирать элементы по их порядковому номеру.
Демонстрация сделана по мотивам http://nthmaster.com/. В нём сильно не хватало интерактивности и мы это исправили.
Миллиметровка на CSS
С помощью линейных CSS-градиентов и множественных фоновых изображений создаём сложный фон, напоминающий миллиметровую бумагу.
Разбираются linear-gradient, background-position, background-size. Демонстрируется, как работают множественные фоны.
Основы HTML и CSS
В этой демонстранции мы будем верстать страничку новостного портала Flashnews, закрепим базовые знания о разметке и стилях.
Список задач с drag & drop
Создадим интерактивный список задач, элементы которого можно перетаскивать. Используем для этого HTML Drag and Drop API.
График на Canvas
С помощью Canvas API создадим график, который динамически формируется на основе введённых данных.
Испытание: Галерея путешествий. Оформление
В этой демонстрации мы разберём испытание «Галерея путешествий. Оформление» из части «Основы CSS».
Испытание: Список задач
В этой демонстрации мы разберём испытание «Список задач» из части «Условия и создание элементов».
Решения пользователей. Испытание: Виртуальная клавиатура.
Успешные решения испытания из части «Коллекции и свойства элементов».
Решения пользователей. Испытание: Оцените сайт.
Успешные решения испытания из части «Прокрутка и операторы».
Решения пользователей. Испытание: Пиксель арт.
Успешные решения испытания из части «Динамические стили элементов».
Решения пользователей. Испытание: Список задач.
Успешные решения испытания из части «Условия и создание элементов».
Создание семантической вёрстки по макету
Семантическая разметка макета магазина часов для открытого урока HTML Academy
Базовая стилизация макета интернет-магазина часов Conquest
Базовая стилизация макета для открытого урока HTML Academy
Сравнение флексов и гридов на карточке товара
Сравнение флексов и гридов для открытого урока HTML Academy
Вёрстка простого лэндинга
Вёрстка простого проекта на HTML и CSS для открытого урока HTML Academy