Привет!
Я начинал изучать вёрстку в 2010 году. Я не знал английский, поэтому у меня был ограниченный набор материала. Кто помнит видеоуроки Попова?
Рубрика «верстка» - 2
HTML- и CSS-советы для джуниор фронтенд-разработчиков
2025-08-24 в 13:01, admin, рубрики: css, html, ruvds_статьи, верстка, советы«Великолепный» CSS. Коллекция странностей CSS, на которые я потратил кучу времени
2025-08-19 в 9:01, admin, рубрики: css, ruvds_статьи, верстка, сайты, фронтенд
Привет!
CSS часто преподносит сюрпризы, способные запутать даже опытных разработчиков. Я понимаю их раздражение. Тут всё закономерно.
CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?
2025-07-21 в 10:15, admin, рубрики: css, css3, media queries, postcss, адаптивная вёрстка, верстка, диапазоны css, медиазапросыMedia Queries Level 4: эволюция синтаксиса, которую сложно игнорировать — и сложно внедрить без оглядки.
Адаптивная вёрстка — основа современного фронтенда. Долгое время в CSS было всего два способа задать условия ширины: min-width и max-width. Они отлично справлялись со своей задачей, но имели свои особенности.
С выходом спецификации Media Queries Level 4 в CSS появился новый, более интуитивный синтаксис для написания диапазонов, приближённый к привычной математике:
@media (width < 900px) { ... }
@media (600px <= width <= 900px) { ... }Как сделать ужасный для пользователя интерфейс. Коллекция HTML-CSS лайфхаков
2025-06-03 в 9:01, admin, рубрики: css, ruvds_статьи, верстка, вредные советы
Привет!
Я в течение нескольких лет рассказываю вам, как сделать интерфейс лучше для пользователя. Например, в прошлом месяце я поделился простыми HTML и CSS лайфхаками, которые помогают сделать интерфейс дружелюбнее к пользователю.
А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?
Надо помочь! Я собрал вредные HTML и CSS техники. Они супер простые, но очень действенные. Я уверен на сто процентов, что благодаря им интерфейс вашего проекта заставит пользователя вспомнить несколько «ласковых» слов.
Давайте посмотрим, что я вам подготовил.
ChatGPT vs Гик. Сможет ли AI заменить опытного верстальщика?
2025-05-20 в 9:01, admin, рубрики: chatgpt, ruvds_статьи, верстка, нейросети, создание сайтов
Привет.
Моя подруга постоянно читает новости о том, что искусственный интеллект заменит какую-то профессию. Тестировщик, программист, дизайнер, писатель и т. д. А сможет ли он заменить опытного верстальщика?
Мне стало интересно, сможет ли ChatGPT написать код, как я. Чтобы мог сказать: «Да, вот это мы допускаем в продакшен».
Добиваться этой цели я буду на примере нескольких популярных паттернов. Я уверен, что фронтендеры постоянно верстают их из проекта в проект. Ещё я честно признаюсь, что у меня мало опыта работы с такими системами. Я новичок. Так что тоже учитывайте это при чтении.
Давайте посмотрим, что в итоге получилось.
Как фронтендеру сделать интерфейс дружелюбнее к пользователю. Коллекция HTML-CSS лайфхаков
2025-05-06 в 9:01, admin, рубрики: css, ruvds_статьи, верстка, лайфхаки, фронтенд
Привет.
Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают впечатление пользователя от интерфейса. В итоге у меня получился внушительный список.
Сегодня хочу поделиться с вами некоторыми практиками из него. Я постарался собрать наиболее простые, чтобы вы могли быстро и безболезненно внедрить их.
Давайте посмотрим, что я вам подготовил.
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 12
2025-04-30 в 7:01, admin, рубрики: accessibility, css, html, ruvds_статьи, верстка
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
- что можно сделать лучше для пользователей с дислексией;
- как незаметно улучшить интерфейс для пользователей с травмой кистей рук;
- есть ли сложности с сокращениями для пользователей скринридера.
Давайте начнём!
Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 3
2025-04-22 в 9:01, admin, рубрики: css, ruvds_статьи, sm909_questions, верстка, вопросы и ответы, собеседования, фронтенд
Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется что-то нового. Вызывающего споры. В общем, я пришёл к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».
При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).
Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать.
Так, вы готовы? Давайте посмотрим, что я вам подготовил.
Неизвестно полезный CSS. Часть 8
2025-04-08 в 9:01, admin, рубрики: css, ruvds_статьи, sm909_unknown_css, web-разработка, верстка, лайфхаки
Привет. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
- как можно избежать длинных значений для свойства
transform; - можно ли побороть неоднозначность медиа-запросов;
- малоизвестное и полезное свойство при работе с «гридами»;
- какой нюанс вы можете не знать про свойство
align-content; - древнейшее свойство, помогающее улучшить взаимодействие пользователя клавиатуры с интерфейсом.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.