desing Дневник веб-инноваций и поиска 
Нужно добавить текст на HTML-страницу, сделать отдельное слово жирным, изменить цвет или оформить несколько абзацев? Для этого используются HTML-теги и CSS: HTML задаёт структуру и смысл содержимого, а CSS управляет его внешним видом. Если нужен самый простой вариант: обычный текст в HTML чаще всего размещают внутри тега <p>. Заголовки создают с помощью <h1>–<h6>, важные фрагменты […]
Я обычно не считаю верстку готовой в тот момент, когда страница впервые совпала с макетом. Это только половина работы. Настоящая проверка начинается позже: когда сайт открывают на телефоне, меняют ширину экрана, вставляют длинный заголовок и нажимают все, что должно нажиматься. И вот там часто всплывают мелочи, которые на макете не видны: горизонтальная прокрутка, обрезанный текст, […]
Меню съезжает на телефоне, карточки разной высоты, кнопка не выглядит кликабельной, а форма ломается при длинной ошибке? Часто проблема не во всей странице, а в отдельных элементах интерфейса. Верстка элементов сайта — это создание отдельных компонентов интерфейса: меню, кнопок, форм, карточек, шапки, футера и повторяемых блоков. Качественный элемент должен быть адаптивным, доступным, понятным и устойчивым […]
Вы получили макет в Figma, нашли нескольких исполнителей и увидели разброс цен в несколько раз. Один готов сверстать страницу за 1500 грн, другой считает лендинг за 12000 грн, а студия предлагает смету выше, но с тестированием, адаптивом и посадкой на CMS. В 2026 году верстка сайта в Украине обычно стоит от 1500 грн за простую […]
Вы хотите сверстать первый сайт, открываете пустой файл index.html — и сразу возникает вопрос: что писать первым, куда подключать CSS, нужен ли JavaScript и как вообще из кода получается нормальная страница в браузере? В этой статье вы узнаете, как сверстать сайт с нуля на HTML и CSS: какие файлы создать, как написать базовый HTML-каркас, как […]
Макет сайта может выглядеть идеально: аккуратные блоки, красивые кнопки, продуманная мобильная версия. Но пока дизайн не перенесён в код, это всё ещё картинка, а не рабочая веб-страница. Именно верстка превращает макет в сайт, который открывается в браузере, адаптируется под экран и позволяет пользователю читать, нажимать, отправлять формы и переходить по ссылкам. Коротко: верстка сайта — […]
Приветствую всех, кто, как и я, не может спокойно спать без новых идей по развитию сайтов и их продвижению. Хочу поделиться своими мыслями и опытом об очень важной штуке, которая однажды спасла мой сайт от позорного провала. Речь идет про адаптивный дизайн css. В конце статьи дам несколько рекомендаций, которые и меня когда-то выручили, когда […]
Сайт может хорошо выглядеть на ноутбуке и быть почти непригодным на телефоне: мелкий текст, кнопки слишком близко, форма уезжает за экран, таблица не помещается, меню неудобно открыть пальцем. Обычно проблема не в одном CSS-свойстве, а в том, что адаптивная логика не была продумана заранее. Адаптивный дизайн нужен, чтобы один сайт удобно работал на смартфонах, планшетах, […]