Рубрика «верстка» - 3

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

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

Сегодня мы рассмотрим:

  • возможность задать несколько фонов с помощью свойства background;
  • свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
  • как заставить псевдо-элемент nth-child выбрать элементы без привязки к позиции;
  • где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.

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

Читать полностью »

Предисловие

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

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

Давайте посмотрим.

1. Повторно отправить запрос XHR

Читать полностью »

Данная статья поможет улучшить взаимодействие между дизайнерами и верстальщиками для минимизации ошибок и повышения продуктивности работы.

Работа богата практическими примерами. Она будет полезна специалистам разного профиля.

Дизайн является основой качественной верстки и помогает успешно продолжить создание веб-приложения.

Критерии хорошего дизайна:

  1. Стандартизированные свойства элементов дизайна (цвета, шрифты, размеры, отступы и т.д.)

  1. Читать полностью »

Хочу поделиться личным опытом (об/м)учения в Яндекс.Практикуме на курсе "Веб-разработчик", и почему, вернувшись на год назад в прошлое, я бы никогда не стал там учиться даже за бесплатно.

Для начала расскажу о причинах, по которым я решил войти в IT (спойлер: и в итоге всё-таки вполз), и почему я выбрал именно Яндекс.Практикум.

Читать полностью »

Спойлер: атомарный дизайн
Спойлер: атомарный дизайн

Это работа является логическим продолжением моего первого подробного текста для сообщества об актуальных подходах к верстке Как верстать веб-интерфейсы быстро, качественно и интересноЧитать полностью »

Эту статью я задумал еще на втором курсе, когда впервые решил перейти с Word'а на LaTeX. В конце третьего курса я ее начал, и, наконец, после защиты диплома я нашел в себе силы ее дописать. Здесь я постарался собрать свой опыт (и созданные костыли, куда же без них) в использовании LaTeX при подготовке текста, связанного с химией и в решении тех проблем, с которыми столкнулся я.
Читать полностью »

Как быстро создать Bootstrap-сайт для бизнеса: 6 полезных инструментов - 1

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

41 термин в дизайне, полезный для UX-исследователя - 1

Работа с UX-дизайнерами и знакомство с их словарным запасом — это почти изучение нового языка. Давайте посмотрим на 41 часто используемый дизайнерский термин. Для лучшего взаимопонимания в команде.

Читать полностью »

Перевод «Practical CSS Scroll Snapping» Max Kohler

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

Пример использования CSS Scroll Snapping

Читать полностью »

В CSS существует несколько способов представления цветов. Один из них — система HSL. В этой статье я покажу вам, какие возможности она открывает для верстальщика.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js