HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 9

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 9

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: какие сюрпризы есть при использовании свойства display; о чём нужно помнить при вёрстке кнопки «Показать пароль»; зачем нужны подсказки с помощью атрибута aria-label при разметке областей…

Подробнее
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 8

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 8

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: какие скрытые проблемы с паттерном «visually-hidden» нас ждут; в каких ситуациях кнопка «Закрыть» указывает на выход; чем вредно значение contents у свойства display; почему подсказка с помощью…

Подробнее
Неизвестно полезный CSS. Часть 3

Неизвестно полезный CSS. Часть 3

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его. Сегодня мы рассмотрим: возможность задать несколько фонов с помощью свойства…

Подробнее
Неизвестно полезный CSS. Часть 2

Неизвестно полезный CSS. Часть 2

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его. Сегодня мы рассмотрим: загрузку фоновых изображений для экранов с повышенной плотностью пикселя…

Подробнее
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

За свою карьеру у меня было достаточно много собеседований. Конечно, одной из основных тем вопросов была вёрстка. Немного похвалюсь. Не было вопроса, на который я не ответил. Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется,…

Подробнее
Дизайн-разбор ссылок в вёрстке

Дизайн-разбор ссылок в вёрстке

Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее. Начнём со ссылок, которые обозначаются в HTML тегом . Читать далее

Подробнее
Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих

Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих

Зачем использовать в вёрстке компонентный подход? Разбираемся, как и зачем верстать интерфейсы, используя этот подход, какие параметры и проблемы важно учесть. Разберём азы, забежим вперёд и подробно погрузимся в тему. Кстати, эта статья написана на основе одного из уроков курса «Профессиональная вёрстка на HTML и CSS» Яндекс Практикума. Читать далее

Подробнее
Яндекс Практикум запускает курс по профессиональной вёрстке на HTML и CSS

Яндекс Практикум запускает курс по профессиональной вёрстке на HTML и CSS

За 3 месяца студенты научатся превращать дизайн в код, создавать сайты с нуля и понимать визуальную часть пользовательского интерфейса. Узнают о современных стандартах HTML и CSS и инструментах для профессиональной вёрстки, например, Git, Node.js, PostCSS. HTML и CSS — основные языки для создания интерфейсов в вебе. Без хорошего знания этих инструментов не получится создать удобный, оптимизированный, хорошо работающий интерфейс. Незнание каких-то тонкостей вынудит вас выдумывать

Подробнее
[Перевод] 12 важнейших сайтов для освоения CSS в 2023 году

[Перевод] 12 важнейших сайтов для освоения CSS в 2023 году

Хотите войти в веб-разработку, но не знаете, с чего начать? Освоение CSS станет отличным стартом и, к счастью для вас, в сети существует огромное количество учебных ресурсов. Мы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки. Будь вы начинающий программист или опытный, на этих сайтах есть информация для всех уровней: от полноценных учебных пособий до памяток и фрагментов кода.

Подробнее
[Перевод] Стили заголовков в CSS: картинки, тени, анимации

[Перевод] Стили заголовков в CSS: картинки, тени, анимации

Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек. Читать далее

Подробнее
Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры

Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры

Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских. Горячее Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax(). Узнайте о JavaScript контейнерах. Что случится если вы откажетесь от React? Ещё один сайт на HTML. Да, так тоже можно. Остальные новости и статьи — под катом. Что там у вас ещё

Подробнее
Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая. — Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5. — Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений. – Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс,…

Подробнее