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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
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
This media is not supported in your browser
VIEW IN TELEGRAM
Держите сайт, где собраны все хорошие css анимации — Animate.css

Это библиотека CSS-анимаций. Она предоставляет множество готовых эффектов анимации для элементов веб-страниц.

📌 Ссылочка animate.style

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥10
👩‍💻 JavaScript курс 2024

Плейлист из 22 уроков охватывает различные аспекты JavaScript, начиная с основ и заканчивая более продвинутыми темами. Курс предназначен для новичков и продвинутых пользователей.

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


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥16
👩‍💻 Держите классную картинку, на которой расписаны все горячие клавиши для VS Code

Сохраняйте и пользуйтесь! ❤️

⬇️ Скачать pdf версию

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20👍10
This media is not supported in your browser
VIEW IN TELEGRAM
Если надоело искать разные иконки самому, то вот вам хороший сайт — Tabler Icons

Это набор из более чем 5250 бесплатных высококачественных SVG-иконок, которые вы можете использовать в своих проектах.

📌 Ссылочка: tabler.io/icons

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥7
👍7🔥2
Что же выведет консоль?
Anonymous Quiz
34%
A
44%
B
10%
C
12%
D
🔥22😁8👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Держите сайт, который поможет при изучении регулярных выражений — Regulex

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

📌 Ссылочка: jex.im/regulex

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26🔥1