Веб‑разработка

Чеклист публикации сайта

Как объяснять разработчикам архитектуру проекта?

Как улучшить сообщение о баге для разработчиков?

clip‑path — обрезка по фигуре в ЦСС

Как проверять соответствие сайта макету в 2024? Какие есть аналоги PixelPerfect?

Ошибки вложенности в ХТМЛ

Откуда берётся отступ под картинкой и как его убрать?

Как добавить видео на сайт?

А что плохого в нестандартных ХТМЛ‑тегах?

Я сверстал себе сайт. Как опубликовать его в интернете?

Почему в Школе бюро снижают оценки за использование абсолюта в ХТМЛ‑вёрстке?

Что дизайнеру стоит знать о редиректах?

Фигурное обтекание текстом, shape‑outside

Как сделать подчёркивание ссылки, как у Бирмана?

Рецепт: модуль с прокруткой содержимого и динамическим затенением по краям

Что думаете о задании цвета через его веб‑название?

Как обрезать текст? Часть 2: умная обрезка с Яваскриптом

Как обрезать текст по ширине и по количеству строк? Часть 1: простые и продвинутые способы

Типовые решения в вёрстке. Как сверстать гамбургерное меню

Рецепт: бегущая строка на сайте без Яваскрипта

Как правильно работать с начертаниями подключаемого шрифта в ЦСС?

Что дизайнеру стоит знать о якорных ссылках?

Чем дизайнеру могут помочь инструменты разработчика? Анализ сетевых запросов

Чем плоха стилизация по айди?

Вредные комментарии: зарубки, тудушки и документашки

Типовые решения в вёрстке. Как сверстать визитку

Когда нужно писать комментарии в коде?

В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать?

Это какие‑то другие пиксели? Как они соотносятся?

Как отключить наведение и нажатие на элемент через ЦСС?

Типовые решения в вёрстке. Как сверстать простой подвал

Что нового в ЦСС: Range Syntax в медиавыражениях

Что вы думаете о Тайпскрипте? Используете его в продуктах бюро?

Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA?

Ключевые слова min‑content, max‑content и fit‑content в ЦСС

Как изменить цвет выделения текста на сайте, ::selection

Яваскрипт‑приёмы лаконич­ного решения типовых задач

Что такое «доступность» в веб‑разработке?

Гриды «на пальцах». Четвёртая часть: ключевое слово auto

Что дизайнеру стоит знать о разметке для поисковиков

Как сверстать пропорциональный модуль в 2023?

Подскажите, пожалуйста, как начать понимать разработчиков?

Как сделать индикатор прохождения задания, как в книгах бюро

Как сделать анимацию на сайте, чтобы она шла параллельно скроллу?

Лайфхак: что делать с широкими модулями на узком экране

Расскажите о современных способах и тонкостях вёрстки таблиц

Как переключить тему оформления страницы Яваскриптом?

Как отлаживать странное? Вторая часть

Магические числа в коде. Почему это плохо и что с ними делать

Инструменты разработчика на Айфоне и Айпаде

Логические свойства в ЦСС

Когда в вёрстке неуместен КАПС?

Guard Clause. Избавляемся от вложенных условий в программировании

Что думаешь о ChatGPT?

Как сделать тоненькое подчёркивание ссылок?

Принцип «никто не забыт, ничто не забыто»

ЦСС‑трюк: увеличиваем область клика

Каким образом вы копите различные знания в виде текста, картинок, видео?

Где использовать гриды, а где флексбоксы

Выпадающие подсказки для полей ввода без программирования

ImageOptim — полезная программа для оптимизации картинок на сайте

Расскажите о выравнивании текста в гридах

Рецепт вёрстки: эффект подсветки от движения курсора

Как в Телеграме показать Опенграф‑картинку сайта крупно?

Гриды «на пальцах». Третья часть: выравнивание

Как на сайте добавить фоновое, а не контентное, изображение через ЦСС, с учетом обычных экранов и ретины?

Гриды «на пальцах». Вторая часть: раскладка

Анимации в ЦСС. Транзишены

Гриды «на пальцах». Первая часть: ячейки и направляющие

Есть ли смысл учить HTML и CSS без JS?

Как лучше всего сверстать листинг на текстовой странице?

Зачем верстать самому, если есть Бутстрап?

Флексбокс «на пальцах». Четвёртая часть: автоматические маржины

Эммет. Как писать ХТМЛ и ЦСС в десять раз быстрее?

Некоторые приложения спрашивают действующий пароль, если я хочу его поменять. Зачем?

Мастер‑класс по оживлению ХТМЛ‑форм

Градиенты для текста в ЦСС

Градиенты в ЦСС

Что делают разработчики бюро, пока у дизайнеров ещё не готовы макеты

Нужен ли jQuery в 2022?

Флексбокс «на пальцах». Третья часть: размеры и порядок элементов

Трюк с псевдоэлементом. Верстаем таблетку со счётчиком

Что писать в атрибуте alt у картинок?

Флексбокс «на пальцах». Вторая часть: перенос элементов

Когда правильно padding, а когда margin?

Возможно ли делать сайты, где человек остаётся на том месте, где читал

Флексбокс «на пальцах». Первая часть: оси и выравнивание

Подкаст с техноконтуром

Как экспортировать картинки в правильном формате из Фигмы?

Псевдокласс :not

Расскажите о типографике в вёрстке. Часть 5

Как сегодня защитить код проекта от политических диверсий?

Расскажите о типографике в вёрстке. Часть 4

Псевдоклассы структуры в ЦСС

Расскажите о типографике в вёрстке. Часть 3

Псевдоклассы взаимодействия в ЦСС

Расскажите о типографике в вёрстке. Часть 2

Хитрость с падингом. Верстаем пропорциональный модуль

Расскажите о типографике в вёрстке. Часть 1

Как используют ЦСС‑переменные и когда они неуместны?

Как лучше задавать отступы в потоке модулей и элементов?

Игорь, добрый день! Как вы учились кодить? Можете посоветовать книги или курсы? Часть 2

Как улучшить процесс модерации

Игорь, добрый день! Как вы учились кодить? Можете посоветовать книги или курсы?

Что нового в ЦСС? Селекторы :is и :where

Вы говорили о забугорных сервисах конструкторах сайтов, которые не известны у нас

Как опубликовать веб‑страницу в интернете?

Как оформить страницу языком ЦСС?

Как сверстать страницу, если совсем новичок и никогда не верстал?

Итоги КУСа «Как сверстать анимированный флаг»

КУС. Как сверстать анимированный флаг?

Графические фильтры в ЦСС

Принцип «чем меньше изменений, тем лучше»

Тестирование мобильной вёрстки. Почему инструментов разработчика в браузере недостаточно?

Как работает обратный отсчёт в письме

Менеджер тегов Гугля. Как установить несколько систем сбора статистики на сайт

Как изменять стили сайта в зависимости от пропорций окна браузера?

Расскажите, как устроены тесты в Школе бюро

Яндекс‑метрика для анализа посещаемости и посетителей сайта

Как быстро и без миганий загружать веб‑шрифты. Вторая часть: сабсеты

Как разработчики бюро получают задачи от дизайнеров?

Расскажите о каскаде в CSS

Как в бюро создают картинки для превью советов?

Как правильно называть цвета в дизайн‑системе?

Быстрая оценка качества страницы Гугль Лайтхаусом

Превью страницы для соцсетей и чатов

Какие ступени пройти, чтобы стать лучше, как дизайнер, будучи разработчиком?

Вёрстка слева направо и сверху вниз

Расскажите о горячих клавишах на сайтах

Чем опасны размеры в пикселях в ЦСС?

Как менеджеру продукта учиться разбираться в технологиях разработки?

Советы по вёрстке и фронтенду

Не получается разбивать большие эпики или стори на более мелкие таски

Типовые решения в вёрстке. Как сверстать плашку с текстом и фоном

Сколько времени тратите на планирование реализации «фичи» и сколько времени на написание самого кода?

Как сбросить дефолтные стили браузера

Как сделать вынос ссылок в отдельную колонку?

Почему не стоит использовать атрибут id для стилизации элементов

А может быть маг полководцем или полководец магом?

Как вы оцените с технической точки зрения новый редактор публикаций в «Деле Модульбанка»?

Как переключить тему оформления на сайте в зависимости от настройки ОС

Как в аврале уделять время росту?

Что изучать в ЦСС в 2021 году

Как вы понимаете, что интерфейс будет хорошо смотреться на «неретинах»?

Какие технологии вы бы порекомендовали для создания статичных и не самых сложных сайтов

Как называть классы в ЦСС. Часть вторая

Как объяснить значимость фичи разработчику?

Как называть классы в ЦСС. Часть первая

Расскажите об обязанностях технического директора в бюро. Вторая часть: встречи один на один

Как быть, если твой руководитель некомпетентнее или незаинтересованнее тебя?

Насколько уместно использование ЦСС‑стилей cursor: default и user‑select: none

Как бороться с багами? Часть третья: source maps

Как искать баланс между пользой для команды и пользой для себя?

Как бороться с багами? Часть одиннадцатая: не утонуть в багах и глюках

Как организовать процесс сдачи задачи и код‑ревью в рамках спринта?

Типовые решения в вёрстке. Как форматировать ХТМЛ

Что нужно, чтобы сайт на Айфоне выглядел также как на Андроиде, а не в два раза меньше?

Стоит ли менять работу, если уже порядком поднадоело, но есть новые проекты и в целом хоть какой‑то прогресс ощутим?

Как сделать всю страницу полем для загрузки файла по методике дрэг энд дроп

Как бороться с багами? Часть пятая: отслеживать производительность

Что такое непрерывная доставка?

Специфичность селекторов в ЦСС

Как написать аккуратный код? Часть четвёртая: ответственность

Расскажите, как автор советов работает с маргиналиями?

Отслеживаете ли вы производительность программистов?

Как и когда зарождающийся стартап в процессе своего развития должен подходить к вопросу имплементации билинга?

Типовые решения в вёрстке. Простой рецепт колоночной раскладки

Новичок в команде считает, что стандарты качества продуктов низкие, а знания и опыт устарели из‑за инертности

Как быть разработчикам, которые хотят получать больше денег, но не хотят разбираться в бизнесе?

Что делать, если меня, технического директора, потихоньку отстраняют от дел?

Типовые решения в вёрстке. Почему не стоит использовать float

Почему какие‑то значения font‑weight в СSS пишут цифрами, а какие‑то словами?

Как написать аккуратный код? Часть третья: заменяемость

Типовые решения в вёрстке. Обёртка для страницы

Чеклист безопасности в интернете. Что можно сделать прямо сейчас?

Есть СТО, он классный, но при этом редко выходит в свет. Насколько, на твой взгляд, это может быть важно или полезно компании в целом?

Типовые решения в вёрстке. Как подключить шрифты

Какую библиотеку вы используете при смещении фона?

Как быть, если всё моё время уходит на разработку всё новых и новых фич?

Типовые решения в вёрстке. Как сверстать простую шапку страницы с меню

Как написать аккуратный код? Часть вторая: связность

Адаптивные изображения, тег picture

Автотесты «на пальцах». Четвёртая часть: гигиена

Как написать аккуратный код? Часть первая: зацепление

Адаптивные изображения, атрибуты srcset и sizes

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

Почему лучше разделить фронтенд и бэкенд?

Что показывает уровень развития инженерной культуры?

Как избежать эффекта Упячки при загрузке картинок

Разработчик, который не думает, а просто делает — не нужен?

Что делает тег meta с атрибутом name="viewport"? Зачем его указывать?

Автотесты «на пальцах». Вторая часть: что и как тестировать у модуля

Как следить за качеством кода? Часть третья: процессы

Принципы надёжной вёрстки

Автотесты «на пальцах». Первая часть: пирамида тестов

Как следить за качеством кода? Часть вторая: метрики

Что такое СВГ и как его использовать в ХТМЛ‑вёрстке?

Джанго или Рельсы?

Как следить за качеством кода? Часть первая: зачем

Вы используете Зеплин?

Несколько месяцев назад меня повысили из обычного разработчика до «тимлида»

Как правильно, эффективно и уважительно ставить KPI?

Как готовить макеты для технологов?

Как отслеживать и обрабатывать чит‑коды

Существует ли способ проверить компетентность веб‑разработчика, если сам ничего не понимаешь в этом?

ЦСС‑переменные: как использовать и для чего могут пригодиться

Принцип «не протыкал — не сделал»

Как менеджеру ставить задачи, чтобы ротация в команде не заставляла пережёвывать все задачи устно по 100 раз?

Режимы наложения в ЦСС

Есть ли смысл учить Ruby on Rails в 2019 году?

Где провести границу MVP?

Как дизайнеру стать разработчиком и зачем

Как переходить на переписанные с нуля сервисы?

Как организовать работу удалённой команды разработчиков?

С чего начать вёрстку ХТМЛ‑страницы

Как донести подход HADI до руководства?

Гугль‑док, чтобы упорядочить командное обсуждение

Что почитать, чтобы прокачаться в Гите?

С чего начать вёрстку ХТМЛ‑страницы

Как резать фичи на основе экспериментов?

Расскажите о безголовом Хроме

Советы о фронтенде

Советы об управлении разработкой

Cверстать рамку с прерыванием без мороки с маской не получится

Логотип в вёрстке сильно отличается от логотипа в макете

Принцип «в письме всё есть»

Руст, а чем плох br?

Как устроено ограничение максимальной ширины сайта бюро

При клике на кнопку нужно плавно прокрутить страницу к форме

Как в бюро верстают электронные письма и рассылки. Третья часть: рассылки Школы и Издательства бюро

Cтоит задача придумать интересные эффекты и анимации

Как в бюро верстают электронные письма и рассылки. Вторая часть: рассылка советов

Сайты для слабовидящих

Руст, можно ли сделать такую кнопку без фоновой картинки? Продолжение

Как оттипографить текст там, куда ручным типографом не добраться

Можно ли сделать такую кнопку без фоновой картинки?

Как в бюро верстают электронные письма и рассылки

Есть способ заставить такую анимацию работать в зависимости от скролла?

Каким способом сделать простую анимацию на спрайтах

Как работает кнопка «Скопировать»?

Как устроена беспарольная аутентификация почтой

Как сверстать такие чекбоксы и радиокнопки без Яваскрипта

Как сверстать прокручивающееся меню для мобильных? Вторая часть

Как вы проверяете соответствие вёрстки макету

Как спрятать экранную клавиатуру в Айфоне?

Расскажите об обязанностях технического директора в бюро

EM или REM?

Как попросить клиента помочь с дебагом?

Заметил, что это не просто линейный градиент, а с использованием блюра или чего‑то такого

Как бороться с багами? Часть десятая: порефлексировать

Заголовок на этой картинке можно сверстать текстом. Как?

Как бороться с багами? Часть девятая: исправить

Можно ли достичь эффекта переливания без встраивания видео на сайт?

Можно ли сверстать заголовок так, чтобы вместо цвета он был залит изображением?

Как бороться с багами? Часть восьмая: изолировать

Как сверстать прокручивающееся меню для мобильных?

Как бороться с багами? Часть седьмая: повторить

Почему вы используете jQuery для хождения по дереву и управления событиями?

Как бороться с багами? Часть шестая: алгоритм

Если картинка отвалится или окажется неправильного размера — сломаются блоки. Как быть?

Что должен уметь ведущий разработчик в бюро?

Что делать с версткой под ИЕ?

Как бороться с багами? Часть четвёртая: логи

Не преступление использовать Бутстрап?

Как бороться с багами? Часть вторая: отслеживание ошибок

Плитка, ховер с тенью, можно листать, двухпиксельная обводка

Как бороться с багами? Часть первая: гигиена кода

Чем дизайнеру могут помочь инструменты разработчика в браузере (отладка анимаций)

Как сменить домен сайта, не теряя пользовательских данных?

Можно ли применять вариативные шрифты в вебе

Что за font‑family? Где его взять?

Как сверстать плашку с размытием фона?

Заметил, что сайт бюро перешёл на HTTPS. Расскажите, как переходили?

Как сделана залипающая кнопка на странице книжной полки

Расскажите о дизайне REST API

Как избавиться от пробелов между инлайн‑блоками

Как быстро и без миганий загружать веб‑шрифты?

Как верстать электронные письма?

Как отлаживать странное?

Почему при оборачивании картинки появляется лишний пробел

Почему заголовку надо задавать дополнительный отступ, чтобы он попал в интерлиньяж (продолжение)

Как железобетонно определить, печатный ли символ ввёл пользователь?

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

Зачем дизайнеру Бутстрап?

Что дизайнеру стоит знать об адаптивном дизайне в вёрстке?

Чем дизайнеру могут помочь инструменты разработчика в браузере?

Как раскладывать ХТМЛ‑элементы на странице. Часть третья: флексбоксы в каталогах и выдаче

Как раскладывать ХТМЛ‑элементы на странице. Часть вторая: флексбоксы

Cуществует ли современный способ вывода знака рубля для всех устройств

Как в ХТМЛ верстать картинки, списки и таблицы

Часто у страницы есть несколько блоков, имеющих фон шириной в 100% и несколько блоков без фона

Как раскладывать ХТМЛ‑элементы на странице. Часть первая: боксы и позиционирование

С помощью чего собрать простой прототип на веб‑технологиях?

Хочу научиться верстать, но не знаю с чего начать (продолжение)

Зачем дизайнеру прототипирование при помощи веб‑технологий? С чего начать?

Планируете ли выложить Педанта в открытый доступ?

Что писать в комментарии к коммиту?

Хочу научиться верстать, но не знаю с чего начать

Вы говорили, что картинки в книге выгружаются из памяти, чтобы повысить производительность. Как это устроено?

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

Как устроен сайт бюро изнутри

Что думаешь про точки с запятой в Яваскрипте? Зачем их ставить?

В одном из советов про редизайн Михаил упомянул, что раскладка работает без админки

Как элегантно вставить любое ХТМЛ‑содержимое в треугольный контейнер (продолжение)

Как начать писать тесты в «махровом легаси»?

Как элегантно вставить любое ХТМЛ‑содержимое в треугольный контейнер

Как программировать многоязычные сайты

Какую систему именования выбрать для небольшого проекта? (Продолжение)

Как собираются превьюшки в книгах

Какую систему именования выбрать для небольшого проекта — БЭМ, SMACSS или что‑то другое?

Как устроен поиск в книгах

Вы кто такие?

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично?

С чего начать изучение ЦСС?

Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера?

Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере?

Как правильно сверстать такое меню?

Как правильно организовать взаимодействие разработчиков фронтенда и бэкенда?

Удачное ли решение на сайте в поле пароля указывать, что нажат капслок, как на Маке?

Как сверстать точечки в таком меню?

Как принудительно включать полную версию на мобильном устройстве?

Как сделать такой же клёвый таймлайн, как на главной бюро

Расскажите, пожалуйста, как реализованы фотографии участников в Бюросфере

Верстаю зубчатый край у резинового блока, смущает, как он не вовремя обрывается

Можно ли реализовать всплывание блочка на чистом ЦСС?

Необходимо сделать text‑align: justify, но чтобы последняя строка центрировалась, как с text‑align: center

Текст в центре отталкивает двойные боковые линии в зависимости от своих размеров

Заметил, что выделение текста иногда странно себя ведёт

Меня интересует вопрос миграции базы данных

Как вы храните данные для многоязычных сайтов?

Как наиболее простым способом сверстать такую таблицу?

Как сверстать этот блок, чтобы он корректно отображался в разных браузерах и системах?

Как правильно задавать отступы у заголовков и абзацев?

Как реализовать вёрстку блоков с разной высотой?

Как реализована висячая пунктуация на сайте бюро?

Как правильно сделать подчёркивание многострочного текста, чтобы линия была в три пикселя?

Как сделать клёвый вертикальный градиент на тексте?

Можно ли оценить кандидата на вакансию верстальщика, попросив его написать несколько ЦСС3‑конструкций на бумажке?

Как реализовать самым простым способом скрипт, превращающий ссылку в текстовое поле?

Как правильно сверстать таббар на ХТМЛ5 и ЦСС3?

Есть какая‑нибудь функция Яваскрипта для масштабирования картинок?

Каким способом можно сделать загрузку кастомных шрифтов приятной?

Артём, объясните, пожалуйста, в чём преимущество div перед table

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

Из‑за большого интерлиньяжа между строк образуется «дыра», в кототорой ссылки перестают ховериться

Как размыть объект?

Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива?

Как правильно разделять разряды чисел?

Как вы относитесь к иннициативе Микрософта по выводу ИЕ 6 с рынка?

Как пользоваться mod_rewrite, чтобы получались красивые урлы?

Артём, как вы подключаете стили для ИЕ?

Научите, пожалуйста, правильно верстать формы авторизации

Как верстать радиокнопки имени Плотникова?

Как проработать верстальщиком всю жизнь?

Подскажите, как лучше сверстать данные элементы без ЦСС 3?

Как правильно делать синхронное подсвечивание одинаковых ссылок?

Стоит ли наращивать вложенность тегов для структурированности кода?

Как можно с помощью ЦСС реализовать этот пример, используя в разметке только один тег?

Хочу сделать смену языка на сайте без перезагрузки страницы (и без аякса)

Как на сайте бюро реализована разрядка у прописных букв?

В чём особенности стандарта XHTML, как его применяют при создании веб‑страниц?

Как сделать крутящийся прелоадер, независящий от фона?

Действительно ли необходимо цитаты внутри предложения заключать в тег q?

Когда лучше использовать одинарные, а когда двойные кавычки?

Как гибко сверстать текст на подложке?

Хочется, чтобы много красивых картинок на сайте быстро загружались

В каких единицах стоит задавать размеры шрифта?

В Сафари на Маке можно прокрутить страницу за её пределы

Используете ли вы готовые ЦМС?

Как победить кривой рендеринг трансформированного (skew) текста на Винде?

Как правильно делать подчёркивание ссылок другим цветом?

Размеры картинки заранее неизвестны

Как выровнять два плавающих блока по базовой линии, если в одном из них кнопка?

Как в ЦСС работать с родителями?

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

В какой кодировке всё же лучше делать сайт?

Как верстать ссылки вида http://site.ru/#news, чтобы при нажатии на них сайт не загружался заново?

Как вы обходитесь без проверки на робота?

Как проще всего сверстать нестандартный select?

Проблема в том, что ширина таблиц зависит от контента

Для определения цвета я использую пипетку