Code Ready | Frontend
20.2K subscribers
700 photos
316 videos
17 files
468 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
Уже были разные сайты, и пришло время быстренько изучить Git

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

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥8🤝6
👩‍💻 Разберем, как максимально просто вставить любую картинку в текст

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

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

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

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

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


📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Вот ещё один сайт, для изучения флексбоксов, думаю лишним не будет точно)

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

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Покажу ещё один необычный атрибут — draggable

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

Атрибут имеет всего два значения:
• draggable="true" — элемент можно перетаскивать.

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


📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥28👍14
This media is not supported in your browser
VIEW IN TELEGRAM
Покажу ещё один хороший сайт, для изучения Git

Git How To
— предлагает пошаговые руководства и практические примеры для изучения системы контроля версий Git, облегчая процесс освоения её основных команд и функционала.

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥6👎1😁1
👩‍💻 Знакомы с shape-outside?

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

Ещё покажу основные параметры:

• circle (radius at position) — круг с заданным радиусом и позицией.
• ellipse (radius-x radius-y at position) — эллипс с заданными радиусами и позицией.
• polygon (point1, point2 ...) — многоугольник, где каждая точка указывается координатами.

Также, для правильного применения обтекания текста с помощью shape-outside, элемент должен быть плавающим. Поэтому обязательно используем float: left

📣 Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥6
Что ж, теперь итоги 2024 года...

Ровно год назад, минуту в минуту, я писал пост про итоги 2023 года, и вот, пришло время для нового года.

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

За 2024, я успел сделать многое, думаю все уже видели мои новые каналы, про пайтон, C++ и другие. Надо их тоже развивать и делать ещё больше, до 2026 нужно успеть везде набрать больше 15000 подписчиков, ну и выйти на совсем другой уровень)

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

С наступающим новым годом! 🎄
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥36🤝14👍2
До нового 2025 года остаётся всего час!
С наступающим всех! 🥂
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥44👍11😁4🤝1
С новым годом!
👍74🔥40👎2
This media is not supported in your browser
VIEW IN TELEGRAM
hcdev — справочник по HTML, CSS и JS, который содержит в себе актуальные знания по всем технологиям, предназначенных для фронтенд-разработки.

📌 Ссылочка: hcdev.ru

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍13
🔥20👍7
Что же выведет консоль?
Anonymous Quiz
59%
A
26%
B
11%
C
5%
D
🔥36👍14🤝3
This media is not supported in your browser
VIEW IN TELEGRAM
Знали, что можно измерить любой элемент на сайте за несколько секунд?

Page Ruler —
расширение для Chrome, которое позволяет пользователям измерять размеры и положение элементов на веб-страницах с помощью виртуальной линейки.

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26🔥11😁1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Познакомимся с download

Это атрибут, который используется в элементах <a> для указания того, что при нажатии на эту ссылку браузер должен загрузить указанный файл, а не открывать его в окне браузера.

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

📣 Code Ready | #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥15
😁100👍18
👩‍💻 Шпаргалка по HTML-сущностям

HTML-сущности — это специальные кодовые обозначения для символов, которые могут быть интерпретированы браузером как часть разметки или недоступные на клавиатуре символы.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝45🔥38👍7👎2