Подробное объяснение теста в чате @webb_chat

🛠 AutoNumeric — библиотека Javascript, которая обеспечивает форматирование по мере ввода в реальном времени для международных валют и других числовых стандартов. Она предоставляет полный набор параметров настройки, которые позволяют вам выбирать нужные форматы..

#инструменты #js

💡 Современные и эффективные CSS-раскладки

▍Часть 6

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой и пятой частями.

▍Классический "Святой Грааль": grid-template: auto 1fr auto / auto 1fr auto

В данной раскладке присутствуют хедер, футер, левая и правая боковая панель, а также блок с основным содержимым. Он похож на предыдущий пример, но теперь с боковыми панелями.

Чтобы описать всю сетку с помощью одной строки кода, используйте свойство grid-template. Это свойство позволяет задавать значения для них обоих.

Записывается следующим образом: grid-template: auto 1fr auto / auto 1fr auto. Слеш разделяет значения для рядов (grid-template-rows) и колонок (grid-template-columns) сетки.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

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

#советы #coding #css

Выберите правильный вариант 👇🏼 #test #js

Подробное объяснение теста в чате @webb_chat

🛠 Monolith — интересная библиотека, которая сохраняет целые веб-страницы в виде единого HTML-документа. Она объединяет все стили CSS, изображения, код JS и другие ресурсы, так что вы можете просто хранить всю страницу в одном файле, которым легко можно поделиться. Намного лучше, чем функция «Сохранить страницу как» в браузере.

#инструменты

💡 Современные и эффективные CSS-раскладки

▍Часть 7

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой и шестой частями.

▍12-колоночная сетка: grid-template-columns: repeat(12, 1fr)

В этом примере мы рассмотрим другой классический пример: 12-колоночную сетку. Вы можете быстро создавать подобные сетки в CSS с помощью функции repeat(). Использование repeat(12, 1fr); для шаблона колонок сетки создаёт 12 колонок, каждая шириной 1fr.

.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
grid-column: 1 / 13;
}

Теперь мы можем разместить на ней дочерние элементы. Один из вариантов - использовать grid-линии. Например, колонка со свойством grid-column: 1/13 будет начинаться с первой и заканчиваться последней (13-й) линией, охватывая все 12 колонок. Со свойством grid-column: 1/5 - первые 4 колонки.

В следующей части рассмотрим другой способ размещения дочерних элементов.

#советы #coding #css

Каналы для быстрого поиска работы в it:

Три канала, которые быстро снимут вопрос поиска работы для технических специалистов в it.

@remoteit — только полная удаленка для технических специалистов в it, вакансии отбираются в ручную, минимум 4 в день, включая эксклюзивные позиции.

@relocats — вакансии для it специалистов с переездом в Еропу, Америку и Азию, только адекватные варианты с хорошими релокационными пакетами.

@gamedevjobs — самый регулярный, актуальный дайджест по gamedev вакансиям в тг. Редактирует подборки игровой эйчар с 20 летним опытом.

Подпишись и откликайся, работа найдется для всех.

🔥 Лучшее на канале за неделю

1. Задавать Height и Width для изображений снова важно.

2. AutoNumeric — библиотека Javascript, которая обеспечивает форматирование по мере ввода в реальном времени для международных валют и других числовых стандартов.

3. Современные и эффективные CSS-раскладки - Часть 6 | Часть 7.

Выберите правильный вариант 👇🏼 #test #js

Подробное объяснение теста в чате @webb_chat

🛠 Sortable — библиотека JavaScript для создания переупорядочиваемых перетаскиваемых списков. Она не требует внешних зависимостей, имеет массу полезных функций и работает во всех современных браузерах и на сенсорных устройствах.

#инструменты #js

💡 Современные и эффективные CSS-раскладки

▍Часть 8

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой и седьмой частями.

▍12-колоночная сетка: grid-template-columns: repeat(12, 1fr)

Другой способ размещения дочерних элементов - использование ключевого слова span. В этом случае задаётся начальная линия и количество колонок, которое нужно охватить, начиная со стартовой точки. Например, grid-column: 1 / span 12 будет аналогом grid-column: 1 / 13, а grid-columns: 2 / span 6 - аналогом grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

Видео-демонстрацию смотрите ниже под этим постом.

Продолжение следует...

#советы #coding #css

Выберите правильный вариант 👇🏼 #test #js

Обсудить тест можно в чате @webb_chat