Полный самоучитель по CSS Grid со шпаргалкой
Модуль CSS Grid предлагает систему разметки на основе сетки, со строками и столбцами, что облегчает разработку веб-страниц без необходимости использования плавающих элементов и позиционирования.
Объяснение того, как работают все свойства CSS Grid, и шпаргалка, которая охватывает всё, что можно сделать с помощью этого модуля:
https://tproger.ru/articles/polnyj-samouchitel-po-css-grid-so-wpargalkoj/
#css #шпаргалка
Модуль 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 Grid Layout — это способ двумерной раскладки. Flexbox позволяет полноценно управлять элементами только по одной оси и чем-то похож на display: table.
Grid даёт возможность контролировать одновременно и строки, и столбцы, в которых располагаются элементы. Эти элементы можно двигать внутри Grid-сетки практически как вздумается.
И вот отличная шпаргалка, которую можно не только почитать, но и посмотреть, что будет, если изменить некоторые параметры. Есть подробности о том, как формировать сетки, изменять расположение элементов, делать выравнивание и интервалы.
#css #фронтенд
Игры для освоения CSS
Представляем вам 10 захватывающих игр, которые превратят процесс изучения CSS в увлекательное приключение.
От «Flexbox froggy», где вы помогаете лягушке найти свой путь, до «CSS Diner», где вы учитесь применять селекторы.
#задачи #css
Представляем вам 10 захватывающих игр, которые превратят процесс изучения CSS в увлекательное приключение.
От «Flexbox froggy», где вы помогаете лягушке найти свой путь, до «CSS Diner», где вы учитесь применять селекторы.
#задачи #css
Четыре новые функции CSS
Вы умеете создавать красивые анимации на сайтах? Хотите, чтобы пользователи оставались на ваших страницах подольше? Тогда эта статья для вас!
Автор расскажет, как при помощи 4 новых функций CSS сделать плавные переходы и анимированные эффекты появления и исчезновения элементов.
#статья #css
Вы умеете создавать красивые анимации на сайтах? Хотите, чтобы пользователи оставались на ваших страницах подольше? Тогда эта статья для вас!
Автор расскажет, как при помощи 4 новых функций CSS сделать плавные переходы и анимированные эффекты появления и исчезновения элементов.
#статья #css
Доводы в пользу REM в CSS
Размеры экранов постоянно меняются, и статичные px уже не подходят. Клиенты настраивают браузеры под свои нужды, и сайты должны к ним адаптироваться.
Единицы rem позволяют создать масштабируемый дизайн, который сохраняет пропорции. В этой статье вы узнаете, почему лучше использовать rem вместо px и зачем соблюдать этот тренд.
#статья #css
Размеры экранов постоянно меняются, и статичные px уже не подходят. Клиенты настраивают браузеры под свои нужды, и сайты должны к ним адаптироваться.
Единицы rem позволяют создать масштабируемый дизайн, который сохраняет пропорции. В этой статье вы узнаете, почему лучше использовать rem вместо px и зачем соблюдать этот тренд.
#статья #css
Forwarded from Веб-страница
Вопросы с собеседований: что такое специфичность CSS-селекторов и как она работает?
Типы селекторов расположены по возрастанию специфичности:
— Селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
— Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover)
— Селекторы идентификаторов (например, #example).
Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. Но селекторы, объявленные внутри :not(), влияют.
Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.
Расчёт специфичности:
— тег и псевдоэлемент имеют специфичность 0001;
— класс, псевдокласс, атрибут — 0010;
— id имеет специфичность 0100;
— инлайновый стиль имеет приоритет 1000.
#основы #собеседование #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). Переходы плавно изменяют свойства, а анимации контролируются по ключевым кадрам.
Для создания перехода используются свойства
Также есть утилитарные классы, которые упрощают использование анимаций:
Держите статью, где подробно разбирают процесс создания различных анимаций и объясняют принцип их работы.
#css #frontend
CSS предлагает два метода анимирования: переходы (transitions) и анимации (animations). Переходы плавно изменяют свойства, а анимации контролируются по ключевым кадрам.
Для создания перехода используются свойства
transition: duration, timing function, delay. Анимации создаются с помощью @keyframes и параметров, таких как имя и длительность. Также есть утилитарные классы, которые упрощают использование анимаций:
slideInLeft, slideInRight, rotate и bounce. Держите статью, где подробно разбирают процесс создания различных анимаций и объясняют принцип их работы.
#css #frontend
Tproger
Как научиться анимациям в CSS за 2 минут
На Youtube-канале Slaying The Dragon вышло видео о том, как можно научиться CSS-анимациям, используя два пути.
Разбор вопросов с собеседований frontend-разработчика
Держите целую серию небольших видео, в которых автор разбирает распространённые вопросы с собеседований на тему HTML, CSS и JS. Например, «позиционирование в CSS», «разница между == и ===», «чем отличается адаптивный и отзывчивый дизайн» и многое другое.
@prog_point #frontend #трудоустройство
Держите целую серию небольших видео, в которых автор разбирает распространённые вопросы с собеседований на тему HTML, CSS и JS. Например, «позиционирование в CSS», «разница между == и ===», «чем отличается адаптивный и отзывчивый дизайн» и многое другое.
@prog_point #frontend #трудоустройство
YouTube
#1 Front-end. Вопросы на собеседовании
#YauhenK #webDev #HTML #CSS #JS
Всем привет!
Добро пожаловать в видеокаст «Front-end. Вопросы на собеседовании».
В данной серии видео я постараюсь помочь вам подготовиться к собеседованиям на позицию Junior и Middle Front-end разработчик. Видеокаст представлять…
Всем привет!
Добро пожаловать в видеокаст «Front-end. Вопросы на собеседовании».
В данной серии видео я постараюсь помочь вам подготовиться к собеседованиям на позицию Junior и Middle Front-end разработчик. Видеокаст представлять…
Где бесплатно выучить HTML и CSS?
Не обязательно покупать платные курсы, чтобы стать фронтенд-разработчиком. Нужный для обучения материал можно найти на бесплатных ресурсах.
Например, вот тут много курсов для начинающих:
— htmlacademy.ru
— hexlet.io
— wayup.in
— itproger.com
— stepik.org
Для продолжающих тоже есть площадки с обучающими материалами. Например сайт htmlacademy или канал ВебКамеди. Но ещё больше полезных ресурсов по изучению HTML и CSS вы можете найти в этой статье.
@prog_point #web #frontend #html #css
Не обязательно покупать платные курсы, чтобы стать фронтенд-разработчиком. Нужный для обучения материал можно найти на бесплатных ресурсах.
Например, вот тут много курсов для начинающих:
— htmlacademy.ru
— hexlet.io
— wayup.in
— itproger.com
— stepik.org
Для продолжающих тоже есть площадки с обучающими материалами. Например сайт htmlacademy или канал ВебКамеди. Но ещё больше полезных ресурсов по изучению HTML и CSS вы можете найти в этой статье.
@prog_point #web #frontend #html #css
HTML Academy
Журнал «Доктайп»
Сборник понятных способов стать веб-разработчиком и не страдать.
Шпаргалка по CSS Grid в картинках, ещё и с единорогами
В статье собрали полный комплект материала по CSS Grid – с объяснениями в картинках и практиками, чтоб вы ощутили всю мощь этого инструмента. Тут рассказывают про базовые понятия и трюки, дают примеры кода. И конечно, не обошлось без пары полезных хитростей – для новичков и бывалых, чтоб выжать максимум из CSS Grid.
Приглашаем к прочтению
@prog_point #web #frontend #css
В статье собрали полный комплект материала по CSS Grid – с объяснениями в картинках и практиками, чтоб вы ощутили всю мощь этого инструмента. Тут рассказывают про базовые понятия и трюки, дают примеры кода. И конечно, не обошлось без пары полезных хитростей – для новичков и бывалых, чтоб выжать максимум из CSS Grid.
Приглашаем к прочтению
@prog_point #web #frontend #css
