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

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

читать далее

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

За 3 месяца студенты научатся превращать дизайн в код, создавать сайты с нуля и понимать визуальную часть пользовательского интерфейса. Узнают о современных стандартах HTML и CSS и инструментах для

читать далее

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

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

читать далее

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

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

читать далее

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

Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских. Горячее Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства,

читать далее

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

Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая. — Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но

читать далее

Бесплатный интенсив «Основы HTML и CSS за 10 дней»

Кажется, почти все на Хабре сталкивались с HTML и CSS, даже если не занимаются этим на работе. Ну знаете, все эти «сделай кнопку покруглее», «сделай текст более красненьким», или кому-то из друзей

читать далее

[Перевод] Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля.

читать далее

4 способа добавить иконки на сайт из Figma — все плюсы и минусы

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать

читать далее

[Перевод] Безопасный CSS, или как писать универсальные стили

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

читать далее

Критерии качества вёрстки 2021

6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе. С тех пор в разработке

читать далее

[Перевод] Свойства блочной модели CSS. Объяснение с примерами

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

читать далее