клякса клякса клякса заголовок
заголовок заголовок

Не учим основам веб‑вёрстки

Проект создан для изучения продвинутой веб-⁠вёрстки, в уроках не объясняются основы. Чтобы их изучить пройди курс Захара Дня в библиотеке BBE.

Изучить веб-вёрстку с нуля стрелка
BBE BBE
изоляция

Проектируем компоненты в изоляции

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

Читать подробнее стрелка
BBE клякса

Сквозной нейминг «из дизайна в код»

В качестве системы именования компонентов применяется подход Universal Design Framework. Компоненты в дизайне и коде именуются и структурируются одинаково, в названиях используется система префиксов.

Читать подробнее стрелка
нейминг BBE
фишки фишки

Как спрятать скролл

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

Читать подробнее стрелка
скролл клякса
слайдер

Как сделать слайдер

Слайдер — это интерактивный элемент, в котором большая часть контента скрыта, а показывается только один элемент за одно время. Для его создания нужно уметь скрывать элементы и управлять положением элементов на экране.

Читать подробнее стрелка
клякса селект

Как работать с селектом

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

Читать подробнее стрелка
компоненты компоненты

Superorganisms

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

Molecules

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

Quarks

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

О нас О нас

О Нас

ADC Code Tutorial — это веб‑учебник с туториалами для изучения продвинутой веб‑вёрстки, разработанный в рамках зонтичного бренда кафедры «Дизайн и программирование» в Школе Дизайна НИУ ВШЭ.

Этот веб‑учебник появился как дипломный проект студентки профиля Филачевой Полины. Куратором работы является руководитель направления Захар День.

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