Code Ready | Frontend
20.8K subscribers
731 photos
331 videos
17 files
489 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
👩‍💻 Доброе утро! Нашел вам классную шпаргалку по основным свойствам Css

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


⬇️ Скачать полную версию

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥5
👩‍💻 Разница между методами slice() и splice()

Эти методы JavaScript часто вызывают путаницу, т.к их названия похожи, но цели и поведение — разные. Разберем, за что отвечает каждый из них:

slice — создает новый массив, копируя выбранную часть исходного массива, при этом сам оригинал остается неизменным.
Он принимает два аргумента: начальный индекс и конечный индекс.


splice — модифицирует исходный массив, позволяя удалять, добавлять или заменять элементы.
Он принимает три аргумента: начальный индекс, количество удаляемых элементов и элементы для добавления.


Использование с примером кода и доп. информацию, смотри на картинках выше 👆

🔥 — если было полезно
🤝 если уже пользовался

📣 Code Ready | #метод
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥38👍14🤝8
This media is not supported in your browser
VIEW IN TELEGRAM
Недавно я публиковал шпаргалку по флексам, теперь пришло время показать вам — CSS Flex Generator

Это онлайн-инструмент, который позволяет визуально настраивать и генерировать код для CSS Flexbox, упрощая создание гибких макетов.

📌 Ссылочка: cssflex-generator

📣 Code Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥8👎2
👩‍💻 Отличие между drop-shadow и box-shadow

В общем, это два разных CSS-свойства для создания теней, но они применяются в разных случаях и имеют разные особенности. Рассмотрим их по очереди:

• box-shadow — добавляет тень к рамке элемента, то есть вокруг его границ. Это свойство работает с любыми элементами, создавая тень, повторяющую контуры элемента.

• drop-shadow — применяется с функцией filter и позволяет создавать более сложные тени для графики и текстов. Оно учитывает прозрачность и форму содержимого элемента, что особенно полезно для изображений и SVG.

📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35🔥10
😄

Как прошли выходные дни? ☕️
Please open Telegram to view this post
VIEW IN TELEGRAM
😁89🔥11🤝1
👩‍💻 Полный курс по HTML (2024)

18 подробных уроков для изучения html с самого нуля. В курсе подробно рассматриваются основы HTML, включая создание и структуру веб-страниц. Курс предназначен для начинающих.

Ссылочка на плейлист: YouTube 🖤


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35🔥6🤝1
👍13😁10🔥4
Что же выведет консоль?
Anonymous Quiz
22%
A
4%
B
23%
C
51%
D
👍24😁15🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 А вы знали, как легко создавать красивые скриншоты кода?

Это можно сделать, с помощью плагин VS Code — CodeSnap, который предназначенный для создания как раз скриншотов кода.

Чтобы не париться, а быстро понять его интерфейс и научиться правильно использовать, я оставляю ссылку на видео для настройки этого плагина.

📣 Code Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍48🔥21
👩‍💻 Полный курс по CSS (2024)

21 урок для изучения css с самого нуля. Курс охватывает основы CSS, включая стилизацию и оформление веб-страниц, и предназначен для начинающих.

Ссылочка на курс: YouTube 🖤


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥7
👩‍💻 Фильтры к фрагментам элемента

Знакомы с этим свойством? Благодаря свойству backdrop-filter в CSS, вы можете применить фильтры к элементу, который находится за ним, создавая уникальные и привлекательные визуальные эффекты.

Может принимать следующие значения:

none — фильтры не применяются (по умолчанию)
blur — размывает элемент
brightness — изменяет яркость
contrast — изменяет контрастность
grayscale — преобразует элемент в оттенки серого
hue-rotate — вращает цветной круг элемента
invert — инвертирует цвета
opacity — изменяет прозрачность
saturate — изменяет насыщенность цветов
sepia — применяет сепийный фильтр к элементу


📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Screeps: World — это многопользовательская стратегическая игра, в которой игроки программируют своих юнитов на Javascript для управления колониями и сражаются за ресурсы в открытом мире.

Ссылочка: store.steampowered 🙄


📣 Code Ready | #игры
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥23👍11
👩‍💻 Разница между «сбросом» и «нормализацией»

Сброс и нормализация CSS — это два подхода к управлению базовыми стилями на веб-странице, но их цели и методы различаются.

• Сброс — это процесс удаления всех браузерных стилей по умолчанию. Цель сброса — создать абсолютно «чистую» страницу, где все элементы, такие как отступы, шрифты и марджины, будут иметь нейтральные значения, чтобы устранить различия между браузерами.

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

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

📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Stepik — это обучающая платформа, которая предоставляет онлайн-курсы и интерактивные задания по программированию.

📌 Ссылочка: stepik.org

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16👍8
👩‍💻 Знаете как можно красиво оформить любой код в Telegram?

Часто задаваемый вопрос, как создать нормальное оформление кода? Сегодня пришло время раскрыть тайну и показать как это сделать на самом деле.

Для того чтобы сделать оформление, нужно:

1. Начинаем с указания языка
:
Чтобы Telegram правильно распознал формат кода, на первой строке пишем три обратных кавычки (```) и указываем язык, например html (```html)

2. После кавычек, на второй строке уже можно вставить сам код, который хотим оформить:
(<div class="div"> <h1>Любой код</h1></div>)

3. После того как вставили код, не забываем в конце добавить еще три обратных кавычки без пробела (```)

Как это выглядит:
```html
<div class="div">
<h1>Любой код</h1>
</div>```


Результат:
<div class="div">
<h1>Любой код</h1>
</div>


📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍14
This media is not supported in your browser
VIEW IN TELEGRAM
Уже было много постов про css свойства, но есть один сайт, на котором собрано сразу всё.

CSS Click Chart
— ресурс, с помощью которого можно кликнуть на любое css свойство, и сразу увидеть его пример и как оно работает. Также отображается поддержка браузерами.

📌 Ссылочка: css3clickchart.com

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥6
🔥15👍5