Правки шаблона
Как устроен готовый шаблон, где искать нужный блок и как менять оформление, ничего не сломав. Отсюда начинали и мы сами.
Бесплатные урокиНаправления обучения
Материалы разложены по трём уровням: разобраться в готовом шаблоне, собрать страницу самому и довести макет до аккуратной вёрстки.
Вёрстка страниц
HTML и CSS по шагам: сетки, отступы, адаптивность. Каждый урок заканчивается работающим примером, который можно повторить в редакторе.
Бесплатные урокиДизайн интерфейсов
Композиция, шрифтовые пары, цвет и состояния элементов. Мини-курсы для тех, кто хочет собирать макет осознанно, а не наугад.
Платные мини-курсыСвежие материалы
Разборы, инструкции и заметки о вёрстке — новые записи блога.
От настройки сайта к осмысленному выбору колледжа
При установке шаблона владелец сайта быстро замечает: привлекательная главная страница не спасает, если меню запутано, формы не работают, а текст расползается на узком экране. Такой опыт пригодится тем, кто рассматривает колледж после 11 класса и пытается отличить содержательную программу от эффектной презентации. Решение стоит принимать после проверки структуры, ограничений и реальных сценариев использования. Поэтому при […]
Бесплатная программа обучения: путь от правки шаблонов до веб-дизайнера
Когда человек впервые открывает шаблон и понимает, что хочет «чуть-чуть подвинуть блок» или заменить цвет кнопки, он уже стоит на пороге профессии. Дальше начинается нормальный путь: от точечных правок в готовой теме — к пониманию HTML и CSS, затем к аккуратной вёрстке, а после и к полноценному веб-дизайну. Именно так и должна выглядеть бесплатная программа обучения […]
Пошаговый гайд: как спроектировать структуру сайта перед дизайном
Когда я только начинал возиться с uCoz, единственной «структурой» было то, что влезало в левую колонку шаблона, а всё остальное считалось декорацией. Но с каждым новым проектом — от фанатского портала до коммерческого лендинга — становилось очевидно: если не продумать логику страниц заранее, даже самый стильный дизайн превращается в кашу из блоков, где пользователь теряется уже на […]
Выбор инструментов для веб-дизайна и вёрстки: Figma, редакторы кода и плагины
Когда-то я начинал с правки готовых uCoz-шаблонов в обычном блокноте — никакой подсветки, только Ctrl+F и надежда на то, что запятая не потеряется. Сейчас инструментарий шагнул далеко вперёд, но вопрос «что ставить?» по-прежнему ставит в тупик новичков. На самом деле для старта достаточно трёх компонентов: Figma для визуальной части, редактор кода для сборки и несколько плагинов, […]
Мы помогаем новичкам превратить желание «подкрутить шаблон» в профессию.
От страха кода до готового сайта
Путь, который проходит каждый читатель блога — четыре понятных шага без спешки.
-
Открыть редактор
Разбираемся, где живёт код страницы, что такое теги и почему файл со стилями важнее, чем кажется.
Первая неделя -
Повторить пример
Берём готовый макет из урока и собираем его целиком: разметка, отступы, шрифты, поведение на телефоне.
Практика по шагам -
Сделать свой макет
Появляется собственная идея: страница мастера, портфолио или блог. Здесь подключаются мини-курсы по дизайну.
Свой проект -
Довести до чистовика
Проверяем вёрстку на разных экранах, наводим порядок в стилях и получаем сайт, который не стыдно показать.
Готовый результат