​Полный самоучитель по CSS Grid со шпаргалкой

Модуль CSS Grid предлагает систему разметки на основе сетки, со строками и столбцами, что облегчает разработку веб-страниц без необходимости использования плавающих элементов и позиционирования.

Объяснение того, как работают все свойства CSS Grid, и шпаргалка, которая охватывает всё, что можно сделать с помощью этого модуля:

https://tproger.ru/articles/polnyj-samouchitel-po-css-grid-so-wpargalkoj/

#css #шпаргалка

​Интерактивная шпаргалка по CSS Grid Layout

CSS Grid Layout — это способ двумерной раскладки. Flexbox позволяет полноценно управлять элементами только по одной оси и чем-то похож на display: table.

Grid даёт возможность контролировать одновременно и строки, и столбцы, в которых располагаются элементы. Эти элементы можно двигать внутри Grid-сетки практически как вздумается.

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

#css #фронтенд

​Игры для освоения CSS

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

От «Flexbox froggy», где вы помогаете лягушке найти свой путь, до «CSS Diner», где вы учитесь применять селекторы.

#задачи #css

​Четыре новые функции CSS

Вы умеете создавать красивые анимации на сайтах? Хотите, чтобы пользователи оставались на ваших страницах подольше? Тогда эта статья для вас!

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

#статья #css

​Доводы в пользу REM в CSS

Размеры экранов постоянно меняются, и статичные px уже не подходят. Клиенты настраивают браузеры под свои нужды, и сайты должны к ним адаптироваться.

Единицы rem позволяют создать масштабируемый дизайн, который сохраняет пропорции. В этой статье вы узнаете, почему лучше использовать rem вместо px и зачем соблюдать этот тренд.

#статья #css

​​Вопросы с собеседований: что такое специфичность CSS-селекторов и как она работает?

Типы селекторов расположены по возрастанию специфичности:
— Селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
— Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover)
— Селекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. Но селекторы, объявленные внутри :not(), влияют.

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности:
— тег и псевдоэлемент имеют специфичность 0001;
— класс, псевдокласс, атрибут — 0010;
— id имеет специфичность 0100;
— инлайновый стиль имеет приоритет 1000.

#основы #собеседование #css

Учимся анимировать в CSS за 20 минут

CSS предлагает два метода анимирования: переходы (transitions) и анимации (animations). Переходы плавно изменяют свойства, а анимации контролируются по ключевым кадрам.

Для создания перехода используются свойства transition: duration, timing function, delay. Анимации создаются с помощью @keyframes и параметров, таких как имя и длительность.

Также есть утилитарные классы, которые упрощают использование анимаций: slideInLeft, slideInRight, rotate и bounce.

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

#css #frontend

Разбор вопросов с собеседований frontend-разработчика

Держите целую серию небольших видео, в которых автор разбирает распространённые вопросы с собеседований на тему HTML, CSS и JS. Например, «позиционирование в CSS», «разница между == и ===», «чем отличается адаптивный и отзывчивый дизайн» и многое другое.

@prog_point #frontend #трудоустройство

Где бесплатно выучить HTML и CSS?

Не обязательно покупать платные курсы, чтобы стать фронтенд-разработчиком. Нужный для обучения материал можно найти на бесплатных ресурсах.

Например, вот тут много курсов для начинающих:
— htmlacademy.ru
— hexlet.io
— wayup.in
— itproger.com
— stepik.org

Для продолжающих тоже есть площадки с обучающими материалами. Например сайт htmlacademy или канал ВебКамеди. Но ещё больше полезных ресурсов по изучению HTML и CSS вы можете найти в этой статье.

@prog_point #web #frontend #html #css

​​Шпаргалка по CSS Grid в картинках, ещё и с единорогами

В статье собрали полный комплект материала по CSS Grid – с объяснениями в картинках и практиками, чтоб вы ощутили всю мощь этого инструмента. Тут рассказывают про базовые понятия и трюки, дают примеры кода. И конечно, не обошлось без пары полезных хитростей – для новичков и бывалых, чтоб выжать максимум из CSS Grid.

Приглашаем к прочтению

@prog_point #web #frontend #css

Шпаргалка по CSS, ещё и интерактивная

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

Кидайте в закладки эту шпаргалку

@prog_point #web #frontend #css

Всё о CSS Grid за 13 минут

CSS Grid — это мощный инструмент для упрощения создания сложных макетов на веб-страницах. Он позволяет разработчикам легко управлять расположением элементов на странице, обеспечивая гибкость и контроль над их позиционированием.

Также использование CSS Grid помогает сократить количество кода, улучшить читаемость стилей и сделать макеты более предсказуемыми и контролируемыми.

Видео начинается с теории, а затем автор показывает, как настроить сетку с помощью CSS Grid, включая создание колонок и строк, зазоры между элементами, автоматические строки, а также выравнивание и позиционирование элементов. Тут также рассматривается работа с областями и настройка начала и конца строк и колонок.

https://youtu.be/MEOR2b69Pl4?si=Jk6MQxo7VHO-VP_v

@prog_point #web #frontend #css

​​24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое

На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.

На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ

#css

Детальный справочник для веб-разработчиков от А до Я

Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!

https://doka.guide/

#шпаргалка #веб #javascript #html #css

​​​Old but gold: Десять советов по улучшению CSS-переходов и анимации

Одни анимации и переходы только украшают приложение — другие делают его хуже. Пользователи могут не понимать, что такого особенного в переходах или анимации, но они могут чётко определить разницу между хорошим и плохим.

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций:

https://joshcollinsworth.com/blog/great-transitions

#css

6 полезных свойств CSS за 10 минут

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

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

Если хотите смотреть оригинал, то он доступен по ссылке.

#видео #css #веб