Выберите правильный вариант 👇🏼 #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

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

▍Часть 9

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

▍RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))

В этом примере мы объединим некоторые из рассмотренных концепций создания отзывчивого интерфейса с автоматически позиционируемыми и гибкими дочерними элементами. Довольно удобно. Ключевые термины repeat, auto-(fit|fill) и minmax() можно запомнить с помощью акронима RAM.

Всё вместе это выглядит так:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

В следующей части продолжим данную тему.

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

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

#советы #coding #css

🛠 Tina CMS — набор инструментов для редактирования сайтов на основе React. После подключения Tina к проекту Gatsby или Next.js ваш сайт становится полностью редактируемым, что дает возможность изменять текст, переупорядочивать элементы и многое другое.

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

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

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

2. Sortable — библиотека JavaScript для создания переупорядочиваемых перетаскиваемых списков.

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