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

Часть 1

В данной серии советов мы рассмотрим эффективные строки CSS-кода, которые выполняют серьезную работу и помогают создавать надёжную современную разметку.

Суперцентрирование: place-items: center

В первом примере "однострочной" раскладки давайте решим самую главную загадку во всём CSS: центрирование. Хочу, чтобы вы знали, что 'place-items: center' это проще, чем кажется.

Сначала задайте родительскому элементу свойству display со значением grid, а затем для него же place-items: center. Свойство place-items это краткая форма записи для align-items и justify-items, с помощью которого мы устанавливаем оба эти свойства в значение center.

.parent {
  display: grid;
  place-items: center;
}

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

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

#советы #coding #css

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

1. Создание favicon для сайта 2020.

2. DarkModeJS — сверхлегкая и кроссбраузерная библиотека JS, которая поможет вам реализовать темные и светлые темы.

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

📑 Объектно-ориентированный JavaScript: наследование

Это продолжение серии статей об объектно-ориентированном JavaScript, в данной статье рассматриваем наследование.

Представьте, вы получили заказ на создание небольшой онлайн игры. Всё что от вас требуется — создать понятный API для работы с персонажами. Техническое задание выглядит следующим образом:

Вы также можете ознакомиться с предыдущими статьями:

Примитивы и объекты | Работа с объектами | Функции-конструкторы | Прототипы |Немного практики.

#статьи #js

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

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

🛠 Craft.js — отличный React фреймворк, который помогает создавать удобные редакторы страниц. Это позволяет изменять содержимое веб-страницы с помощью перетаскивания, подробных текстовых элементов управления, встраивания мультимедиа и т. д. Идеально подходит для создания систем управления контентом и приложений WYSIWYG.

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

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

▍Часть 2

Первая часть.

▍Адаптивные блоки: flex: <grow> <shrink> <baseWidth>

Это распространённая раскладка, например, для лендингов, в которой может располагаться ряд из 3 элементов, обычно содержащих изображение, заголовок и текст, описывающих особенности продукта. А что на счёт адаптивности?

Если использовать Flexbox, вам не придётся настраивать расположение элементов для разных размеров экрана с помощью медиа-запросов.

Свойство flex является сокращением и позволяет задать набор значений flex: <flex-grow> <flex-shrink> <flex-basis>

Если нужно, чтобы блоки имели <flex-basis> размер, сжимались на меньших размерах, но не увеличивались для заполнения дополнительного свободного пространства, следует указать flex: 0 1 <flex-basis>. В данном случае <flex-basis> равно 150px.

В следующей части будет:

Примеры кода и как сделать, чтобы при переносе на новую строку блоки растягивали и заполняли пространство.

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

#советы #coding #css

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

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

📑 Выбор CSS макета — Grid или Flexbox?

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

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

#статьи #css

🛠 Yarn 2 — отличная альтернатива NPM с рядом замечательных функций, таких как кеширование модулей для использования в автономном режиме и «плоский режим», который отлично подходит для уменьшения количества дублирующихся пакетов.

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

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

▍Часть 3

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

▍Адаптивные блоки: flex: <grow> <shrink> <baseWidth>

Код ко второй части:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

Если вы хотите, чтобы при переносе на новую строку блоки растягивали и заполняли пространство, установите <flex-grow> в значение 1.

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

В следующей части рассмотрим боковую панель.

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

#советы #coding #css

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

1. Выбор CSS макета — Grid или Flexbox?

2. Craft.js — отличный React фреймворк, который помогает создавать удобные редакторы страниц.

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

Полноценные курсы по программированию за 12.99$. Домашнее задание, ответы на ваши вопросы и удобная платформа

На образовательной площадке Udemy проводится распродажа курсов по направлению Frontend-разработки.

Присоединиться к 24 000 студентов и узнать полную информацию можно тут:
https://taplink.cc/petrychenko_ivan

📑 Объектно-ориентированный JavaScript: наследование

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

Вы также можете ознакомиться с другими статьями из этой темы:

Примитивы и объекты | Работа с объектами | Функции-конструкторы | Прототипы |Немного практики.

#статьи #js

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

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