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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
😄

Как прошли выходные дни? ☕️
Please open Telegram to view this post
VIEW IN TELEGRAM
😁88🔥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
Что же выведет консоль?
Anonymous Quiz
24%
A
22%
B
42%
C
12%
D
👍14🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Знал ли ты, что можно открыть браузер прямо в VS Code?

Даже скачивать ничего не нужно, ведь всё уже встроено в редактор. Как и что можно настроить показано на видео выше от Miguel Ángel Durán

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥15🤝5
👩‍💻 CS50 на русском (Гарвардский курс по основам программирования)

Переведённые на русский язык лекции топового Гарвардского курса CS50 по основам программирования. Курс охватывает ключевые концепции информатики, такие как алгоритмы, структуры данных, веб-разработка и многое другое.

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


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25👍7
🔥76😁18👍8🤝1
Media is too big
VIEW IN TELEGRAM
Хочу поделиться с вами наверное одним из лучших репозиториев по JS — awesome-javascript

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

Оставляю ссылочку: github.com 😸


📣 Code Ready | #репозиторий
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍9😁3
0618.gif
2 MB
👩‍💻 Знаете как можно перенести html элементы в javascript всего одной командой?

Для этого есть плагин Selector Js, который предоставляет функционал из нескольких команд, позволяющих переносить html элементы по именам классов, id или имени тега.

Для его работы необходимо установить плагин, выделить нужный фрагмент html и выбрать подходящую команду.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥7