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


Данный курс позволит вам на практике рассмотреть приемы использования технологии Flexbox. Вы познакомитесь с общими понятиями и принципами логики работы технологии, научитесь применять основные свойства, рассмотрите способы взаимодействия между элементами, увидите то, как можно комбинировать медиа запросы с флексбоксом и многое другое.

Скачать курс 👉 https://t.me/coursesjunnot/23

#css #html #web

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

Скачать курс 👉 https://t.me/coursesjunnot/24

#css #web

Основы HTML/CSS

Курс Основы HTML/CSS подходит для начинающих веб-разработчиков, для тех, кому нужно освежить или улучшить свои знания. Также рекомендуем пройти этот курс тем, кто уже создает сайты, и при написании кода часто делает ошибки и не может самостоятельно найти место поломки. Закройте все пробелы в самых основах знаний HTML/CSS - базовых языков, без которых сегодня не существует ни один сайт в интернете.

#css #html

Адаптивный дизайн высоты

Статья рассматривает очень интересный вопрос касательно адаптивности сайта по высоте

👉 https://cutt.ly/jgRhDuu

#css #web

WebP in CSS — PostCSS плагин и крошечный JS-скрипт (128 байт) для использования WebP в качестве CSS background

https://github.com/ai/webp-in-css

#css #imageOptimization

Мыслить шире вместе с CSS GRID

👉 https://cutt.ly/Ahoxc2e

#web #css #cssgrid

https://codepen.io/frankyjo/pen/qBXEbaZ - Делаем красивый hover effect при наведении на карточку, на чистом css.

#html #css

https://www.youtube.com/watch?v=N8wKJ5dyBWs - делаем красивый видео-фон для текста на чистом HTML и CSS 😎

Изучаем SCSS

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

Так как браузеры не воспринимают SCSS, его надо конвертировать в CSS с помощью специальных программ или сборщиков проектов таких как gulp или webpack

Рассмотрим все преимущества работы с SCSS

1. Переменные

Чтобы создать переменную, просто добавьте $ к имени переменной и установите их как обычное свойство CSS.

Кстати, в примере сразу виден пример вложенности.

2. Вложенность

Вложенность в SCSS - очень полезная штука. При помощи нее вы можете выстраивать код так, что SCSS будет визуально напоминать иерархию в вашем HTML.

3. Наследование

@extends помогает вам наследовать свойства другого классаю.


4. Миксины

Миксины в SCSS позволяют нам создавать группы правил CSS и переиспользовать их в своем коде. В миксины, можно даже передавать значение, чтобы сделать их более гибкими


5. Математические операторы

В SCSS можно использовать математические операторы +, -, *, /, %
Например, их можно использовать в тех же миксинах.


6. Циклы

В SCSS можно использовать циклы. Таким образом, вы можете избежать копипаста.


7. Условия

Условия SCSS можно использовать тоже для создания различных условий внутри ваших миксинов.

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

#вебразработка #вебразработчик #изучаемфронтенд #фронтенд #версткасайта #изучаемфронтенд #цсс #css #scss