CSS Gradient — Этот сайт позволяет легко создавать градиенты с помощью интуитивно понятного интерфейса и генератора кода. Вы можете настроить цвета и сохранить свои градиенты для дальнейшего использования.

📣 Code Ready | #ресурсы

👩‍💻 Простой атрибут — translate

Он управляет тем, должно ли содержимое элемента переводиться, если страница переведена с использованием автоматических переводчиков.

Имеет два значения:

• translate="yes" (по умолчанию) — Должно быть переведено.

• translate="no" — Не должно быть переведено.

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

📣 Code Ready | #html

Знал ли ты, что можно не перепечатывать текст из видео вручную?

selectext — это расширение для Chrome, с помощью которого можно скопировать текст из видео, выделив область с текстом.

⬆️ Скачать расширение

➡️ Code Ready | #ресурсы

Уже были 2 игры для изучения флексов, но недавно нашел интересную игру уже для JavaScript

JSRobot — небольшая игра, в которой вам предстоит управлять роботом с помощью Javascript для преодоления препятствий и решения головоломок.

📌 Ссылочка: lab.reaal.me/jsrobot

📣 Code Ready | #ресурсы

👩‍💻 Настраиваемая маска в CSS

Cвойство mask устанавливает изображение, которое используется как слой маски для элемента.

Принимаемые аргументы:

• mask-clip — определяет область распространения маски
• mask-size — размер маски
• mask-position — размещает маску относительно элемента
• mask-repeat — указывает, должна ли повторяться маска
• mask-mode — определяет, будет ли ссылка на маску
• mask-origin — задает начало координат маски.

📣 Code Ready | #css

👩‍💻 HTML для новичков с нуля!

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

Ссылочка на видео: YouTube 🖤

📣 Code Ready | #ресурсы

Уже были разные сайты, и пришло время быстренько изучить Git

learngitbranching — небольшая браузерная игра, которая поможет вам изучить Git. В ней вы познакомитесь с основными командами, которые пригодятся вам в повседневной работе.

📌 Как всегда, ссылочка: learngitbranching.js

📣 Code Ready | #ресурсы

👩‍💻 Разберем, как максимально просто вставить любую картинку в текст

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

• background-image — добавляет фоновое изображение

• background-size: cover — делает так, чтобы изображение полностью покрывало текст

• background-clip: text — обрезает фоновое изображение по форме текста.

• color: transparent — делает текст прозрачным, чтобы был виден только фон изображения.

📣 Code Ready | #css

Вот ещё один сайт, для изучения флексбоксов, думаю лишним не будет точно)

Flexer — CSS-песочница, в которой можно легко сгенерировать и расположить блоки. Нужно просто задать размеры и отступы элементам, а сайт сгенерирует CSS-код с flexbox.

📌 Куда без ссылочки: flexer.dev

📣 Code Ready | #ресурсы

👩‍💻 Покажу ещё один необычный атрибут — draggable

С помощью него можно создать интерактивные элементы на веб-странице, которые пользователи смогут перетаскивать.

Атрибут имеет всего два значения:

• draggable="true" — элемент можно перетаскивать.

• draggable="false" — элемент нельзя перетаскивать.

📣 Code Ready | #атрибут