Доклад: CSS, который рвёт шаблоны
При написании стилей разработчики часто сталкиваются с проблемами, которые сложно решить через CSS — приходится прибегать к помощи JS и в целом использовать «костыли».
На вебинаре рассмотрят эти проблемы и расскажут как их решать, применяя современный стандарт CSS.
https://www.youtube.com/live/TV_CqFriagI?si=PNn3Ae66PlKUJuAw
#доклад #css #frontend #ru
При написании стилей разработчики часто сталкиваются с проблемами, которые сложно решить через CSS — приходится прибегать к помощи JS и в целом использовать «костыли».
На вебинаре рассмотрят эти проблемы и расскажут как их решать, применяя современный стандарт CSS.
https://www.youtube.com/live/TV_CqFriagI?si=PNn3Ae66PlKUJuAw
#доклад #css #frontend #ru
YouTube
CSS, который рвёт шаблоны | Вебинар | karpov.courses dev
Курс Frontend: https://bit.ly/3rDMypt
При написании стилей мы часто сталкиваемся с проблемами, которые сложно решить через CSS — приходится прибегать к помощи JS и в целом использовать «костыли».
На вебинаре «CSS, который рвёт шаблоны» рассмотрим эти проблемы…
При написании стилей мы часто сталкиваемся с проблемами, которые сложно решить через CSS — приходится прибегать к помощи JS и в целом использовать «костыли».
На вебинаре «CSS, который рвёт шаблоны» рассмотрим эти проблемы…
Статья: Новые единицы измерения svh, lvh, dvh в CSS для адаптивной верстки
Единицы области просмотра были впервые представлены в CSS в 2012 году, и с тех пор стандарты практически не изменялись. Для создания адаптивного дизайна часто прибегали к использованию единиц измерения, таких как vh, vw, vmin и vmax.
В статье рассматривают новые единицы измерения svh, lvh и dvh, а также рассказывают, в чём существенные отличия этих новых единиц от традиционной vh.
Ссылка на статью
#статья #css #frontend #ru
Единицы области просмотра были впервые представлены в CSS в 2012 году, и с тех пор стандарты практически не изменялись. Для создания адаптивного дизайна часто прибегали к использованию единиц измерения, таких как vh, vw, vmin и vmax.
В статье рассматривают новые единицы измерения svh, lvh и dvh, а также рассказывают, в чём существенные отличия этих новых единиц от традиционной vh.
Ссылка на статью
#статья #css #frontend #ru
Tproger
Адаптивный CSS и новые единицы измерения svh, lvh, dvh
Рассказываем, зачем нужны новые единицы измерения svh, lvh и dvh в CSS для адаптивной верстки, и чем они отличаются от прежней единицы vh.
Урок: Адаптивная верстка сайтов. Общая теория и примеры
Адаптивная верстка сайтов — это не просто тренд, а важный инструмент, позволяющий создавать веб-сайты, которые выглядят хорошо на любых устройствах.
Сохраняйте урок, в котором разбирают основные концепции адаптива и учат, как применять их на практике. В видео вы узнаете о принципах адаптивности, фиксированной, резиновой и адаптивной вёрстке, а также о медиа-запросах и роли бутстрапа.
#урок #frontend #ui #css #ru
Адаптивная верстка сайтов — это не просто тренд, а важный инструмент, позволяющий создавать веб-сайты, которые выглядят хорошо на любых устройствах.
Сохраняйте урок, в котором разбирают основные концепции адаптива и учат, как применять их на практике. В видео вы узнаете о принципах адаптивности, фиксированной, резиновой и адаптивной вёрстке, а также о медиа-запросах и роли бутстрапа.
#урок #frontend #ui #css #ru
YouTube
Адаптивная верстка сайтов. Общая теория и примеры
Привет!
Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео важно разобраться с очень важными фундаментальными понятиями. Поэтому сегодня - про фиксированную, резиновую, адаптивную…
Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео важно разобраться с очень важными фундаментальными понятиями. Поэтому сегодня - про фиксированную, резиновую, адаптивную…
Forwarded from Веб-страница
Гигантскую библиотеку CSS-анимаций заказывали?
Animista позволяет играть с коллекцией готовых CSS-анимаций и скачивать только те, которые вы собираетесь использовать. Отличный вариант для веб-дизайнеров и разработчиков, которые хотят добавить динамичность и интерактивность в свои проекты.
Берите на заметку.
#css #инструменты
Animista позволяет играть с коллекцией готовых CSS-анимаций и скачивать только те, которые вы собираетесь использовать. Отличный вариант для веб-дизайнеров и разработчиков, которые хотят добавить динамичность и интерактивность в свои проекты.
Берите на заметку.
#css #инструменты
Статья: Где учить HTML и CSS без платных курсов
Чтобы стать фронтендером, не обязательно закупать гору платных курсов. Большинство актуальной и полезной теории можно найти и в общедоступных источниках.
Многие онлайн-школы предоставляют базовый курс изучения HTML и СSS бесплатно, такие курсы можно найти у htmlacademy.ru, ru.hexlet.io, wayup.in, itproger.com и stepik.org.
Но что изучать дальше, когда база уже пройдена? Сохраняйте статью, где специалист делится рекомендуемыми ресурсами для бесплатного изучения фронтенд-стека. Среди них видео-уроки, курсы и справочники.
#статья #frontend #html #css #ru
Чтобы стать фронтендером, не обязательно закупать гору платных курсов. Большинство актуальной и полезной теории можно найти и в общедоступных источниках.
Многие онлайн-школы предоставляют базовый курс изучения HTML и СSS бесплатно, такие курсы можно найти у htmlacademy.ru, ru.hexlet.io, wayup.in, itproger.com и stepik.org.
Но что изучать дальше, когда база уже пройдена? Сохраняйте статью, где специалист делится рекомендуемыми ресурсами для бесплатного изучения фронтенд-стека. Среди них видео-уроки, курсы и справочники.
#статья #frontend #html #css #ru
Tproger
Как бесплатно выучить HTML и CSS
Как выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ.
Forwarded from Веб-страница
Годных инструментов вам в ленту: MightyMeld — набор предварительно настроенных веб-компонентов
Это — большая база компонентов, которые полностью совместимы с Tailwind CSS и React. Просто выбираете нужный объект из большой библиотеки шаблонов, перетаскиваете его на рабочую панель и настраиваете под свои нужды. В проекте есть встроенный ИИ ассистент.
Основная функицональность инструмента бесплатна, но есть и платные фичи: https://www.mightymeldfortailwind.com/
#инструменты #react #css
Это — большая база компонентов, которые полностью совместимы с Tailwind CSS и React. Просто выбираете нужный объект из большой библиотеки шаблонов, перетаскиваете его на рабочую панель и настраиваете под свои нужды. В проекте есть встроенный ИИ ассистент.
Основная функицональность инструмента бесплатна, но есть и платные фичи: https://www.mightymeldfortailwind.com/
#инструменты #react #css
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированное руководство по CSS flex
flex — свойство в CSS, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства.
Вариантов использования flex много — про популярные способы рассказали в этом гайде. Всё с гифками, поэтому можно будет сразу определить нужную конфигурацию flex.
#frontend #css #ru
flex — свойство в CSS, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства.
Вариантов использования flex много — про популярные способы рассказали в этом гайде. Всё с гифками, поэтому можно будет сразу определить нужную конфигурацию flex.
#frontend #css #ru
Интерактивная шпаргалка по CSS Grid
Все шпаргалки можно разделить на 3 категории: регулярки, css grid и всё остальное. В данном случае это — второй вариант.
Шпаргалка объёмная, можно на месте сравнить как будут отображаться те или иные варианты конфигурации.
Ссылка на шпаргалку
#шпаргалка #css
Все шпаргалки можно разделить на 3 категории: регулярки, css grid и всё остальное. В данном случае это — второй вариант.
Шпаргалка объёмная, можно на месте сравнить как будут отображаться те или иные варианты конфигурации.
Ссылка на шпаргалку
#шпаргалка #css
10 игр для изучения CSS
Учиться разработке через игры во многом интересней и эффективней, чем делать это же самое в видео и статьях. Ловите целых 10 таких игрушек для изучения CSS: Flexbox froggy, Flexbox defense, Knights of the Flexbox Table, Flex Box adventure, Flexbox zombies, Grid garden, Grid attack, CSS Diner, Guess CSS, CSS Speedrun.
Подробней про каждую игру с описанием смотрите в источнике.
#frontend #css
Учиться разработке через игры во многом интересней и эффективней, чем делать это же самое в видео и статьях. Ловите целых 10 таких игрушек для изучения CSS: Flexbox froggy, Flexbox defense, Knights of the Flexbox Table, Flex Box adventure, Flexbox zombies, Grid garden, Grid attack, CSS Diner, Guess CSS, CSS Speedrun.
Подробней про каждую игру с описанием смотрите в источнике.
#frontend #css
Целых 10 шпаргалок по HTML и CSS
В шпаргалках как обычно — полезная всячина, которую удобней хранить где-то в заметках, чем теснить в памяти. Ту часть, которая в картинках, прикрепляем к посту.
Полный список шпаргалок в источнике.
#шпаргалка #web #html #css
В шпаргалках как обычно — полезная всячина, которую удобней хранить где-то в заметках, чем теснить в памяти. Ту часть, которая в картинках, прикрепляем к посту.
Полный список шпаргалок в источнике.
#шпаргалка #web #html #css
Это не свист рака на горе, но что-то похожее
В CSS появилось удобное центрирование объектов одной строкой кода через
Это обновление устраняет необходимость в сложных обходных решениях, которые ранее требовались для вертикального центрирования элементов. Теперь достаточно всего одной строки кода, чтобы контент оказался там, где нужно.
#css
В CSS появилось удобное центрирование объектов одной строкой кода через
align-content.Это обновление устраняет необходимость в сложных обходных решениях, которые ранее требовались для вертикального центрирования элементов. Теперь достаточно всего одной строки кода, чтобы контент оказался там, где нужно.
#css
Best шпаргалка по CSS Flexbox
У этой шпаргалки есть всё, что нужно для удобства: лаконичные описания, понятные объяснения в картинках и примеры кода.
Сохраняем, ведь оно по-любому однажды понадобится
#шпаргалка #css #frontend
У этой шпаргалки есть всё, что нужно для удобства: лаконичные описания, понятные объяснения в картинках и примеры кода.
Сохраняем, ведь оно по-любому однажды понадобится
#шпаргалка #css #frontend
Forwarded from Веб-страница
Ловите небольшую, но полезную шпаргалку по флексбоксах. Здесь все основные свойства и варианты их значений наглядно.
Сохраняйте, чтобы не потерять!
#шпаргалка #css
Сохраняйте, чтобы не потерять!
#шпаргалка #css
Крутая шпаргалка по CSS
Тут можно найти множество свойств CSS с их подробным описанием, примерами кода и визуальным объяснением — всё, чтобы можно было разобраться даже в самых сложных ситуациях.
Мастхев для верстальщиков: cssreference.io
#шпаргалка #css #frontend #en
Тут можно найти множество свойств CSS с их подробным описанием, примерами кода и визуальным объяснением — всё, чтобы можно было разобраться даже в самых сложных ситуациях.
Мастхев для верстальщиков: cssreference.io
#шпаргалка #css #frontend #en
Большая и интерактивная шпаргалка по CSS
Эта шпаргалка не просто список параметров, а наглядный инструмент для работы с атрибутами и настройками. Ползунки и кнопки позволяют настроить значения, а итоговый CSS-код легко копируется. Включены параметры для работы с цветами, обводками, шрифтами, тенями, анимациями и многим-многим другим.
Такое терять нельзя
#шпаргалка #css #frontend
Эта шпаргалка не просто список параметров, а наглядный инструмент для работы с атрибутами и настройками. Ползунки и кнопки позволяют настроить значения, а итоговый CSS-код легко копируется. Включены параметры для работы с цветами, обводками, шрифтами, тенями, анимациями и многим-многим другим.
Такое терять нельзя
#шпаргалка #css #frontend
Что почитать по вёрстке сайтов?
— "HTML и CSS. Разработка и дизайн веб-сайтов" — Джон Дакетт. Красочная и понятная книга для изучения HTML и CSS с акцентом на визуал.
— "CSS для профессионалов" — Эрик А. Мейер. Глубокое руководство по CSS с разбором продвинутых техник и нюансов.
— "JavaScript и jQuery. Разработка интерактивных веб-сайтов" — Джон Дакетт. Простое введение в динамическое взаимодействие на веб-страницах с помощью JS и jQuery.
— "Адаптивный веб-дизайн" — Аарон Густафсон. Практики для создания сайтов, которые выглядят отлично на любых устройствах.
— "Секреты CSS" — Лиа Веру. Сборник эффективных приемов и трюков, которые помогут прокачать CSS.
— "Элементы пользовательских интерфейсов. CSS и HTML в действии" — Аарон Уолтер. Создание привлекательных и удобных интерфейсов с помощью базовых технологий.
— «Отзывчивый веб-дизайн. HTML5 и CSS3 в действии" — Итан Маркотт. Базовые принципы и практические примеры использования HTML5 и CSS3 в адаптивной вёрстке.
#подборка #книга #frontend #html #css
— "HTML и CSS. Разработка и дизайн веб-сайтов" — Джон Дакетт. Красочная и понятная книга для изучения HTML и CSS с акцентом на визуал.
— "CSS для профессионалов" — Эрик А. Мейер. Глубокое руководство по CSS с разбором продвинутых техник и нюансов.
— "JavaScript и jQuery. Разработка интерактивных веб-сайтов" — Джон Дакетт. Простое введение в динамическое взаимодействие на веб-страницах с помощью JS и jQuery.
— "Адаптивный веб-дизайн" — Аарон Густафсон. Практики для создания сайтов, которые выглядят отлично на любых устройствах.
— "Секреты CSS" — Лиа Веру. Сборник эффективных приемов и трюков, которые помогут прокачать CSS.
— "Элементы пользовательских интерфейсов. CSS и HTML в действии" — Аарон Уолтер. Создание привлекательных и удобных интерфейсов с помощью базовых технологий.
— «Отзывчивый веб-дизайн. HTML5 и CSS3 в действии" — Итан Маркотт. Базовые принципы и практические примеры использования HTML5 и CSS3 в адаптивной вёрстке.
#подборка #книга #frontend #html #css
13 приемов CSS, которые изменят подход к верстке
CSS давно вышел за рамки базовых стилей и стал мощным инструментом для создания адаптивных, удобных и современных интерфейсов. Многие крутые техники редко встречаются в обычных гайдах, но активно применяются в реальных проектах.
Например, можно прижать футер к низу страницы без хаков, адаптировать UI под разные устройства ввода или даже стилизовать родительский элемент в зависимости от его содержимого. Эти приемы не только упрощают код, но и делают его более гибким и понятным.
Собрали их всех в статье
#советы #css #ru
CSS давно вышел за рамки базовых стилей и стал мощным инструментом для создания адаптивных, удобных и современных интерфейсов. Многие крутые техники редко встречаются в обычных гайдах, но активно применяются в реальных проектах.
Например, можно прижать футер к низу страницы без хаков, адаптировать UI под разные устройства ввода или даже стилизовать родительский элемент в зависимости от его содержимого. Эти приемы не только упрощают код, но и делают его более гибким и понятным.
Собрали их всех в статье
#советы #css #ru
Шпаргалка: советы по CSS
CSS – это не просто стили, а целое искусство, где мелочи решают всё. Даже опытные разработчики иногда пропускают полезные фишки, которые могут сделать код чище и понятнее.
Например, вместо стандартного сброса стилей можно использовать
Полный список с примерами кода есть тут.
#шпаргалка #веб #css #ru
CSS – это не просто стили, а целое искусство, где мелочи решают всё. Даже опытные разработчики иногда пропускают полезные фишки, которые могут сделать код чище и понятнее.
Например, вместо стандартного сброса стилей можно использовать
unset, а для навигации – :not(), чтобы не прописывать исключения вручную. А ещё, aspect-ratio упрощает адаптивность, сохраняя пропорции элементов без сложных вычислений.Полный список с примерами кода есть тут.
#шпаргалка #веб #css #ru
Наконец доступный гайд по CSS Container Queries
Container Queries дают возможность стилям реагировать на размер контейнера, а не всего экрана, что сильно упрощает жизнь при создании карточек, виджетов или целых дашбордов.
Ловите настоящий путеводитель по Container Queries, написанный простым языком и с кучей интерактивных примеров. Он погружает в тему без лишнего занудства, наглядно показывая, как компоненты могут подстраиваться под любой контейнер.
#урок #css #начинающим #en
Container Queries дают возможность стилям реагировать на размер контейнера, а не всего экрана, что сильно упрощает жизнь при создании карточек, виджетов или целых дашбордов.
Ловите настоящий путеводитель по Container Queries, написанный простым языком и с кучей интерактивных примеров. Он погружает в тему без лишнего занудства, наглядно показывая, как компоненты могут подстраиваться под любой контейнер.
#урок #css #начинающим #en