Всем привет! Это будут не только полезные плюшечки, но и крайне эффективны в вашей работе! Погнали по порядку :).
1) Изображения.
При верстке сайтов каждый из нас должен проверять скорость работы страницы, наши изображения сжирают много памяти поэтому я предлагаю быстрый способ решения проблем большого веса изображений формата jpg, png и т.д
Для начала нам понадобится сайт конвертор, который переформатирует наше изображение в современный формат .webp. Я рекомендую вам сервис https://squoosh.app. Это не реклама а моя рекомендация, вы можете использовать любой сервис. При переходите вы увидите данную страницу перекидываем и конвертируем в современный формат в меню справа, готово! Смотрим результат ;). Если вы не хотите делать так постоянно, вам нужно ознакомится с Gulp, моя статья на эту тему.
2) Адаптив изображений.
Если вам нужно чтобы контент заполнял какую-либо определенную область и сделала это сохранением пропорций, ты можешь использовать свойство object fit со значением cover.
3) Текст.
Иногда при верстке сайтов нужно сделать чтобы текст шел в одну строку и не перескакивал на другую, это можно сделать с помощью 3 свойств к классу стилей.
- Text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
4) Используйте редакторы.
На данный момент в сети очень много годных редакторов, например grid-generator, где вы можете за пару секунд задать grid-сетку. Но не нужно увлекаться, используйте только самых простейших задачах.
5) Шрифты.
Используй стандартные шрифты заданные в изображении ниже, если тебе не хочется прописывать определенные шрифты. Это используют такие сайты как: Bootstrap, Medium и другие. Быстро, четко, удобно.
Надеюсь подкинул вам мыслей, и плюшечек. Какими фичами пользуетесь вы? Пишите в комментарии. Всем добра, прокачиваемся каждый день.