Хабр, привет!

В прошлом месяце я опубликовал статью с вопросами о HTML. Неожиданно для меня, она понравилась многим и стала одной из самых популярных за последнее время. Раз так получилось, то почему бы не сделать то же самое про CSS? Вот я и пришёл со своими вопросами и, конечно, ответами.

Моя цель — это развлечь вас. Хотя вопросы связаны с практикой, на них не так просто ответить. Если вы не сможете ответить на большинство, то ничего страшного. Но, возможно, они покажутся вам легкотнёй.

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

Я начал использовать медиа-запросы ещё в 2011 году. Помню, как на работе руководитель подарил мне книгу Итана Маркотта «Отзывчивый веб-дизайн». В тот день я даже не работал, а сел читать её. В конце дня я сделал свою первую реализацию адаптивной вёрстки.

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

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

Давайте посмотрим, что я вам подготовил.

Хабр, привет!

Многие фронтенд-разработчики часто отдают предпочтение JavaScript при реализации интерфейсных элементов. Я же разработчик старой формации. Мы тогда стремились сделать всё с помощью HTML и CSS.

Так в интернете зародилось множество HTML- и CSS-решений. Думаю, вы видели эти костыли с переключением радиокнопок и стилизацией других элементов. У меня был период, когда я тоже загонялся по ним.

Честно говоря, это всё баловство. Но с развитием HTML и CSS появились классные подходы, которые частично заменяют логику, написанную на JavaScript. И мне хочется, чтобы вы использовали их как можно чаще. Поэтому сегодня я поделюсь с вами несколькими техниками, которые вы уже можете использовать в своих проектах.

Давайте посмотрим, что я вам подготовил.

Хабр, привет!

Меня всегда раздражали вопросы на проверку знаний HTML и CSS. На моей памяти я ни разу не встретил человека, который спрашивал что-то интересное. По этой причине у меня появилось несколько статей с вопросами по CSS, которые собрали достаточно много просмотров для меня.

А что касается HTML, то я ничего не написал. Сегодня буду исправляться. Сразу скажу, что это не будут вопросы в стиле: «А какие HTML5-элементы вы знаете?». Мне хочется, чтобы вам было интересно и чтобы вы узнали что-то новое.

По этой причине большинство вопросов связаны с практикой. И абсолютно точно вы не ответите на все. Хотя, может, я ошибаюсь. Вот и проверим, насколько я прав.

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

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

Как человеку, который является поклонником CSS, мне немного грустно это наблюдать. Столько интересных возможностей остаётся без внимания! А ведь с их помощью код нередко становится короче, надёжнее и проще для понимания. Поэтому я собрал несколько примеров популярных решений прошлого и переписал их, используя новинки CSS, вышедшие за последние несколько лет.

Давайте посмотрим, что у меня получилось.

Привет, Хабр!

Мне всегда нравилось следить за тем, как развивается CSS. Стараюсь следить за новыми возможностями, чтобы не пропускать что-то действительно важное. И недавно подумал: «А почему бы не рассказать о них читателям Хабра?» Так я и оказался здесь.

Я составил список новинок, которые кажутся мне особенно интересными и важными. Они всё ещё экспериментальные. Браузеры только в последние месяцы начали поддерживать их. Так что это суперсвежие штуки.

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

Мне кажется, что сегодня начинающие фронтендеры уже не пишут код сами. Они отдают всё на откуп искусственному интеллекту. Хорошо это или плохо — судить не буду.

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

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

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

Мне нравится рассказывать про HTML и CSS. Отдельное удовольствие — находить очень старые фичи языков, о которых редко кто знает. Сегодня я пришёл как раз с ними.

Я подобрал список фич, которые стали полностью поддерживаться в браузерах восемь лет назад или раньше. Есть даже одна, которая работала, когда я пришёл во фронтенд.

Только, пожалуйста, не думайте, что это какие-то устаревшие возможности. Я считаю, что в сегодняшней разработке они всё так же полезны.

Давайте посмотрим, что я подготовил.

Хабр, привет!

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

По моим ощущениям, сейчас их стало меньше. Все ушли в YouTube, а теперь в ChatGPT. Но мне этот формат не подходит, поэтому я пришёл сюда, к вам.

В прошлом году я создал коллекцию лоадеров. В основе анимации — базовые геометрические фигуры. Я их двигаю, преобразую из одной формы в другую и всё такое.

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

Давайте посмотрим, что я вам подготовил.

Привет, Хабр.

Я часто рассказываю про CSS, потому что очень сильно люблю этот язык. И хочу, чтобы у вас с ним не было проблем. Но я совсем мало внимания уделяю HTML. А он тоже прекрасен и полезен!

Сегодня буду исправляться. Я собрал список полезных фич HTML. Большинство из них почему-то используются очень ограниченно. Хотя они могут помочь вам сделать интерфейсы проектов более дружелюбными к пользователям.

Особое внимание я уделил тому, как просто будет их внедрить в существующие проекты. Мне кажется, что они легко сочетаются с любым современным фреймворком.

Давайте посмотрим, что я вам подготовил.

Привет, Хабр.

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

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

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

CSS часто преподносит сюрпризы, способные запутать даже опытных разработчиков. Я понимаю их раздражение. Тут всё закономерно.

Как человек, хорошо знающий CSS, могу сказать, что он умеет удивлять. Причём так, что в замешательстве оказываются даже опытные разработчики. Поэтому я понимаю разные мемчики по поводу CSS. Они возникли не на пустом месте.

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

Пришёл поделиться с вами. Давайте посмотрим, что я подготовил.

Привет, Хабр!

Мне нравятся красивые и удобные интерфейсы. С самого начала карьеры я всегда старался делать всё, что мог для комфорта пользователя. Этим я выделялся среди коллег. Большая часть из них не тратили время, продумывая взаимодействие пользователя с интерфейсом.

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

Сегодня я рассмотрю несколько практических ловушек, из-за которых пользователи вспомнят разработчиков не очень хорошим словом. Будьте в этом уверены. В основном мы будем использовать только HTML. Так что вы быстро сможете внедрить их в свои проекты.

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

Мне грустно, что вы не используете многие HTML- и CSS-фичи. Я не могу смотреть на это, бездействуя, поэтому пришёл к вам. Хочу поделиться своим списком фич, которые уже давно пора использовать.

Конечно, я подумал о кроссбраузерности. Поэтому все фичи хорошо поддерживаются во всех современных браузерах с 2023 года. Я специально проверил их в «Can I use».

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

Вопросы по HTML и CSS всё реже встречаются на собеседованиях для фронтендеров. Но в основном это касается позиций middle и выше. А вот для начинающих специалистов они всё ещё есть.

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

А главное, отвечать на них будет ChatGPT. Я же буду его дополнять, если потребуется. Многие же используют его для подготовки. Вот и посмотрим, как он справится.

Сразу скажу, что буду душнить. Так что вы сами рассудите, кто из нас лучше отвечает.

Давайте начнём!

Привет, Хабр!

Мне нравится смотреть, как верстают современные фронтендеры. Забавно наблюдать, как меняется вёрстка с годами. И сразу скажу, что не всё «плохо». Но ошибки, конечно же, есть. Раньше были свои примеры «плохого» кода, сейчас другие. О них хочу поговорить в этой статье.

Я составил список распространённых примеров кода «с душком». Старался быть объективным, но судить только вам, насколько это у меня получилось.

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

Во фронтенде изменения происходят постоянно. Только разобрался с одним инструментом, он уже считается устаревшим. Плюс на смену ему появляются новые. В JavaScript регулярно добавляются новые методы и API, а HTML и CSS, разумеется, не отстают.

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

Давайте посмотрим, что я вам подготовил.

Привет, Хабр.

Каждый год я смотрю, какие новые фишки в HTML и CSS стали поддерживаться современными браузерами. Таким образом понимаю, что уже можно использовать. Так как я люблю делиться всем с вами, то я подумал: «А почему бы не рассказать о новинках на Хабре?». Вот я и пришёл.

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

Моё главное правило для отбора фич заключается в том, чтобы она стала «зелёной» в 2025 году на сайте «Can I Use». Смотрю последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Chrome.

Не буду больше тянуть. Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

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

Этот год не стал исключением. Я составил список понравившихся новинок в CSS, которые появились к началу 2026 года. Сразу скажу, что это совсем новые фишки. Их браузерная поддержка ограничена в основном только браузером Google Chrome.

Давайте посмотрим, что я вам подготовил.

Привет, Хабр!

У меня есть хобби — смотреть записи собеседований фронтенд-разработчиков. К моей радости, во многих из них встречаются вопросы про accessibility. На этом хорошие новости заканчиваются.

Далее я начинаю тихо плакать в уголку. Что интервьюер, что кандидат строят весь диалог в стиле: «Это про адаптацию для слепых». В общем, набрался я сил, решил написать статью, чтобы показать всем, где у нас ошибки.

Я на практике покажу, в каких местах появляется accessibility. Дам несколько советов. Также важно сказать, что все термины, используемые в статье, моя вольная интерпретация. Пожалуйста, учтите это и больше обращайте внимание на смысл.

Давайте посмотрим, что я вам подготовил.