Code Ready | Frontend

Ir al canal en Telegram

Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_it РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready

Rusia30 573 Tecnologías y Aplicaciones6 150...

📈 Análisis del canal de Telegram Code Ready | Frontend

El canal Code Ready | Frontend (@code_ready) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 22 005 suscriptores, ocupando la posición 6 150 en la categoría Tecnologías y Aplicaciones y el puesto 30 573 en la región Rusia.

📊 Métricas de audiencia y dinámica

Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 22 005 suscriptores.

Según los últimos datos del 13 junio, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -77, y en las últimas 24 horas de -17, conservando un alto alcance.

Estado de verificación: No verificado
Tasa de interacción (ER): El promedio de interacción de la audiencia es 9.97%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 5.43% de reacciones respecto al total de suscriptores.
Alcance de las publicaciones: Cada publicación recibe en promedio 2 194 visualizaciones. En el primer día suele acumular 1 196 visualizaciones.
Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 20.
Intereses temáticos: El contenido se centra en temas clave como css, браузер, интерфейс, загрузка, api.

📝 Descripción y política de contenido

El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_it РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready”

Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 14 junio, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.

22 005

Suscriptores

-1724 horas

-527 días

-7730 días

2 194

Visitas de la publicación

~ 1 19624 horas

~ 1 35948 horas

9.97%

Tasa de compromiso

~ 1

Mensajes por día

Ads index

beta

Archivo de publicaciones

21 998

✅ Ночная информация про плагины для VS Code Плагины это очень важная часть разработки, многие облегают работу и помогают допускать меньше ошибок при написании кода. Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины. ⬇️ ☑️ Мы подобрали топ 3 лучших плагинов для VS Code, которые точно тебе пригодятся. Live Server - Автоматически перезагружает страницу после изменений в JavaScript-коде, CSS и HTML-разметке. Чтобы запустить, наведите на строчку кода, нажмите на правую кнопку мыши, выберите «Open with Live Server». Auto rename tag - Автоматически переименовывает парные теги в HTML. Меняете открывающий тег — меняется и закрывающий. WakaTime - В ваш редактор устанавливается плагин Wakatime, который собирает активность работы в программе. Затем на основе этих данных на сайте Wakatime строятся графики активности по дням, проектам, языкам программирования, редакторам. #теория

21 998

Существующие типы данных в JS

Anonymous voting

21 998

✅ Языки программирования для Frontend разработки В прошлой теории мы разобрали кто такие Frontend, Backend и Fullstack разработчики, но каждый из них использует разные языки программирования и инструменты для работы. ⬇️ ☑️ Frontend разработчики используют 3 главных языка: HTML, CSS и JavaScript, все они нужны для разных задач и целей программиста. 1. HTML - язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Он позволяет размещать на веб-страницах аудио, видео, электронные таблицы и другие приложения. Он также облегчает навигацию внутри веб-страниц или между веб-сайтами с помощью гипертекста. Кроме того, создатели веб-сайтов могут использовать HTML для разработки форм для заказа товаров, бронирования или поиска. Нужен для создания скелета сайта. 2. CSS - язык описания внешнего вида документа, то есть он отвечает за то, как выглядят веб-страницы: цвет фона и декоративных элементов, размер и стиль шрифтов. CSS взаимодействует с другим языком разметки — HTML, который отвечает за размещение элементов на странице. Нужен для стилизации сайта. 3. JavaScript - полноценный язык программирования, который используют разработчики для создания интерактивных веб-страниц. Функции JavaScript могут улучшить удобство взаимодействия пользователя с веб-сайтом: от обновления ленты новостей в социальных сетях и до отображения анимации и интерактивных карт. JavaScript является языком программирования при разработки скриптов для выполнения на стороне клиента, что делает его одной из базовых технологий во всемирной сети Интернет. Нужен для взаимодействий с пользователем. Существует также часть Backend разработчика. Что он использует и зачем расскажем в следующей теории. #теория

21 998

✅ Как разделить цвет на два разных цвета? Лучший способ заменить плавный градиент это разделить текст на 2 разных цвета. Данный эффект поможет сделать резкое разделение под любым углом, как и под косым, так и под ровным, нужно просто поменять deg в свойстве background: linear-gradient. В этом эффекте участвуют 3 свойства: -webkit-background-clip: text, -webkit-text-fill-color: transparent и background: linear-gradient. Всё остальное это дополнительная стилизация. Мы сделали вариант разделения текста под кривым углом, в коде ниже вы можете исправить цвет и угол на любой другой: ⤵️

h1 {
  font-size: 200px;
  font-family: sans-serif;
  text-align: center;
  background: linear-gradient(150deg, #2f455a 0%, #2f455a 50%, #436b9d 50.5%, #436b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

#практика #css

21 998

Чему равен 1rem в px по умолчанию?

Anonymous voting

21 998

✅ Как создать движущею тень для текста? Интересно стилизованные тени, всегда делали красивее и улучшали любые текста. Сегодня мы рассмотрим очень эффективную движущею тень, которая запомнится надолго! Работает данная тень достаточно сложно, поэтому сейчас разберем только как делается сама тень. ⬇️ ☑️ Мы должны создать с помощью свойства data-shadow так называемый второй текст, для того чтобы позже поставить его за наш главный текст. Обязательно текста должны быть одинаковы, или же движущая тень не будет совпадать с главным текстом. После этого останется только правильно стилизовать тень. Чтобы вы не мучались, мы делимся уже готовым кодом для создания крутой движущей тени: HTML ⤵️ <h1 data-shadow='code_ready'>code_ready</h1> CSS ⤵️

body {
  text-align: center;
  background-color: hsla(230,40%,50%,1);
}
h1 {
  position: relative;
  display: inline-block;
  color: white;
  font-family: cursive;
  font-size: 100px; 
  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
}
h1:after {
  content: attr(data-shadow);
  position: absolute;
  top: .06em; left: .06em;
  z-index: -1;
  text-shadow: none;
  background-image:
    linear-gradient( 45deg, transparent 45%,hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0);
  background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dang 25s linear infinite;
}
@keyframes dang {
0% {background-position: 0 0}
0% {background-position: 100% -100%}
}

#обучение #html #css

21 998

body {
  text-align: center;
  background-color: hsla(230,40%,50%,1);
}
h1 {
  position: relative;
  display: inline-block;
  color: white;
  font-family: cursive;
  font-size: 100px; 
  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
}
h1:after {
  content: attr(data-shadow);
  position: absolute;
  top: .06em; left: .06em;
  z-index: -1;
  text-shadow: none;
  background-image:
    linear-gradient( 45deg, transparent 45%,hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0);
  background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dang 25s linear infinite;
}
@keyframes dang {
0% {background-position: 0 0}
0% {background-position: 100% -100%}
}

#обучение #html #css

21 998

✅ Как добавить видео внутрь текста? Чтобы привлечь внимания к особому тексту, нужно сделать к нему особый эффект, обычно для этого используется CSS свойство text-shadow, но с помощью него нельзя создавать живые эффекты. Также можно делать и анимации для привлечения внимания, тем не менее это нельзя назвать текстовым эффектом. ⬇️ ☑️ Это не простая задача, поэтому мы делимся уже готовым HTML & CSS кодом ниже для добавления видео внутрь текста: HTML ⤵️

<div class="wrapper">
        <video autoplay playsinline muted loop preload poster="http://i.imgur.com/xHO6DbC.png">
          <source src="https://storage.coverr.co/videos/7RzPQrmB00s01rknm8VJnXahEyCy4024IMG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjI5MTg2NjA0fQ.M8oElp5VNO8bWEWmdF2nGiu3qDOOYRFfP8wkKvl8I20"/></video>
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 285 80" preserveaspectratio="xMidYMid slice">
      <defs>
        <mask id="mask" x="0" y="0" width="100%" height="100%">
          <rect x="0" y="0" width="100%" height="100%"/>
           <text x="72" y="50">Simon</text>
       </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%"/>
   </svg>
</div>

CSS ⤵️

.wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1000px;
  video {
    width: 100%; 
  }
  svg { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 40px;
    }
    > rect {
      -webkit-mask: url(#mask);
      mask: url(#mask);
    }
    rect {
      fill: #fff;
    }
  }
}

#практика #html #css

21 998

Как правильно подлючить JS на сайт?

Anonymous voting

21 998

✅ Разница между Frontend и Backend разработчиками В создании Web сайтов работают очень много программистов, которые разбиты на несколько категорий. И каждая из них служит для определенного дела. ⬇️ ☑️ Frontend-разработчик — это специалист, который занимается разработкой пользовательского интерфейса, то есть той части сайта или приложения, которую видят посетители страницы и могут взаимодействовать с ней. Главная задача фронтенд разработчика — перевести готовый дизайн-макет в код так, чтобы все работало правильно. ⬇️ ☑️ Backend-разработчик — это специалист, который занимается разработкой серверной части веб-приложений и сайтов. Он отвечает за работу баз данных, серверов и логику, которая происходит на серверной стороне. Его работа заключается в настройке базы данных и разработке API для взаимодействия с фронтенд-решением. ⬇️ ☑️ Существует также вид разработчика, который делает сразу Frontend и Backend часть, он называется Fullstack. Такой разработчик может самостоятельно сделать любой сайт. У каждой специальности есть свой язык программирование, который они используют для работы. Например HTML, CSS или же PHP, о которых мы расскажем в последующих постах. #теория

21 998

✅ Как создать градиентную анимацию текста? Сегодня разберем создание градиентного переливания текста. Данный эффект очень интересно смотреться на черном фоне, хотя если поменять градиентное переливание на другие цвета, можно будет добавлять и на белый фон. ⬇️ ☑️ Так вот, для создания градиентной анимации, помогут свойства background: linear-gradient, background-size и background-clip: text. Но чтобы запустить анимацию, нужно добавить keyframes и правильно их настроить. Делимся уже готовым HTML & CSS кодом ниже для создания прекрасной градиентной анимации: ⤵️ HTML ⤵️

<h1 id="background">@code_ready</h1>

CSS ⤵️

body {
  background-color: black;
}

#background {
  animation: gradient 10s linear infinite;
  background: linear-gradient(to right, rgb(76, 217, 105), rgb(52, 170, 220), rgb(88, 86, 217), rgb(255, 45, 83), rgb(255, 45, 83), rgb(88, 86, 217), rgb(52, 170, 220), rgb(76, 217, 105));
  background-size: 400%;
  -webkit-background-clip: text;
  color: rgba(255, 255, 255, .1);
  font-family: sans-serif;
  font-size: 45px;
}
@keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}

#обучение #html #css

21 998

✅ Как сделать розовый 3D текст? Различные текстовые эффекты можно воплотить с помощью CSS свойства text-shadow, достаточно правильно его настроить. Один из примеров использования этого свойства - розовый 3D текст, он украсит любой дизайн сайта и добавление данного эффекта, точно не будет лишним. ⬇️ ☑️ Помимо правильно настроенного свойства text-shadow, можно добавить шрифт "Kanit", чтобы 3D текст был более симпатичным. Оставляем для вас готовый код ниже для создания розового 3D текста на красивом фоне: ⤵️

@import url('https://fonts.googleapis.com/css?family=Kanit:900');

body {
  background-color: #ecc;
  text-align: center;
}
h1{
  color: #fff;
  font-family: "Kanit";
  font-size: 65px;
  text-shadow: 0 1px 0 #e4adad, 0 2px 0 #e1a6a6, 0 3px 0 #df9e9e, 0 4px 0 #dc9696, 0 5px 0 #da8f8f, 0 6px 0 #d78787, 0 7px 0 #d58080, 0 8px 0 #d27878, 0 0 5px rgba(237, 154, 154, .05), 0 -1px 3px rgba(237,154,154,.2), 0 9px 9px rgba(237,154,154, .5),0 12px 12px rgba(237, 154, 154, .5), 0 15px 15px rgba(237,154,154, .5);
}

#практика #css

21 998

✅ Как создать разные виды курсоров? В CSS есть множество разных типов курсоров, и все они созданы с помощью одного свойства cursor. CSS Свойство cursor определяет тип отображаемого курсора при наведении мыши на объект ⬇️ ☑️ Указатель мыши на разных элементах выглядит по-разному. При этом, в CSS есть возможность напрямую указать вид курсора. Это можно сделать для любого элемента на странице. Для этого нужно указать свойство cursor и для него добавить определенное значение. Мы создали готовый код ниже для создания трех значений курсора, которые используются чаще всего. HTML ⤵️

<button class="progress">progress</button>
 <button class="wait">wait</button>
 <button class="not-allowed">not-allowed</button>

CSS ⤵️

.progress        { cursor: progress; }
.wait            { cursor: wait; }
.not-allowed     { cursor: not-allowed; }

body {
  font-family: sans-serif;
  margin-top: 100px;
  display: flex;
  justify-content: center;
}
button {
  width: 100px;
  height: 35px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #fff;
  margin: 0 10px 10px 0;
}
button:hover {
  background: #eee;
}

#обучение #html #css

21 998

✅ Как создать анимацию вспышки? Эффект вспышки - очень простой способ поймать зрительный контакт с каждым пользователем. Он использует лишь одно правильно настроенное свойство text-shadow. Данная анимация работает непрерывно, поэтому текст с этим эффектом будет легко заметить. Делимся готовым кодом ниже для создания анимации вспышки на чистом CSS: ⤵️

body {
  background-color: #000;
  text-align: center;
}

h1 { 
  font-size: 40px;
  color: #fff;
  font-family: sans-serif;
  text-transform: uppercase;
  animation: flash 1s ease-in infinite;
}

@keyframes flash {
from {
   text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff,  0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff,0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;
  }
}

#практика #css

21 998

✅ Как сделать эффект исчезновение текста? Используя эффект анимации исчезновение блестящего текста, вы можете легко привлечь внимание к сообщению, которое хотите донести. Точнее, белый свет проходит через темный текст и заставляет текст светиться на темном фоне. ⬇️ ☑️ Он работает непрерывно, поэтому ваш текст и ваше сообщение будут привлекать людей. Давайте прямо сейчас воспользуемся эффектами блестящей текстовой анимации и создадим потрясающий веб-сайт! ⤵️

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}

h1 {
  font-family: sans-serif;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffffff, #fff, #ffffff);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

#обучение #css

21 998

✅ Как добавить задний фон к тексту? Добавляя задний фон к тексту, ты не только удивишь пользователей, но и получишь очень интересно стилизованный текст. Данный эффект можно повторить с помощью трех свойств: ⬇️ ☑️ color: transparent, background-clip: text, и самый важный из них это background: url, вот к нему как раз добавляется главный фон. Вы можете добавить любую картинку к тексту, просто копируя URL. Делимся готовым кодом ниже, для создания данного эффекта с картинкой галактики: ⤵️

h1 {
  font-family: sans-serif;
  font-size: 70px;
  text-transform: uppercase;
  color: transparent;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8P6d-nPnqKxgJ5IXUsR08HSGkg8x2haBBOg&usqp=CAU");
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 50%;
}

#обучение #css

21 998

✅ Как сделать подпрыгивающий текст? Создание эффекта подпрыгивания может добавить захватывающий и привлекательный вид вашему веб-дизайну. Прыгающий текстовый эффект с отражением, созданный только с помощью HTML и CSS, что делает его легко переносимым на разные веб-сайты. ⬇️ ☑️ Он использует HTML-элемент span для позиционирования каждой буквы в строке и отскакивает каждую во время текстовой анимации, поэтому будьте осторожны при ее размещении. HTML ⤵️

<div class="waviy">
   <span style="--i:1">J</span>
   <span style="--i:2">U</span>
   <span style="--i:3">M</span>
   <span style="--i:4">P</span>
   <span style="--i:5">I</span>
   <span style="--i:6">N</span>
   <span style="--i:7">G</span>
</div>

CSS ⤵️

.waviy {
  position: relative;
  -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
  font-size: 48px;
}
.waviy span {
  font-family: sans-serif;
  position: relative;
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  animation: waviy 1.2s infinite;
  animation-delay: calc(.1s * var(--i));
}
@keyframes waviy {
  0%,40%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-20px)
  }
}

#html #css #обучение

21 998

✅ Как создать SVG Text анимацию? Если говорить подробно, SVG — Text Animation это мощный текстовый эффект CSS, разработанный автором Webstoryboy. Он предоставляет вам возможность выделить ваш текст, добавив эффекты к контуру и фону текста. ⬇️ ☑️ Сначала будет показан контур вашего текста, чтобы люди могли узнать его содержание, а затем фон. Он работает постоянно, чтобы вы могли привлечь больше внимания посетителей вашего сайта. Мы сделали HTML & CSS код ниже, чтобы вы смогли добавить SVG эффект прямо себе на сайт: HTML ⤵️

<svg viewbox="0 0 1320 300">
  <text>
     webstoryboy
  </text>
</svg>

CSS ⤵️

svg {
  font-family: sans-serif;
  position: absolute; 
  width: 50%; height: 50%;
}
svg text {
  animation: stroke 5s infinite alternate;
  stroke-width: 2;
  stroke: #365fa0;
  font-size: 100px;
  font-weight: 600;
}
@keyframes stroke {
  0%   {
    fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1);
    stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
  }
  70%  {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); }
  80%  {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); stroke-width: 3; }
  100% {
    fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0); 
    stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
  }
}

#обучение #html #css

21 998

✅ Как сделать мультяшный текст? Для данного текстового эффекта достаточно добавить CSS свойство text-shadow, а также использовать мультяшный шрифт "Luckiest Guy". Мы делимся готовым кодом ниже для создания интересного эффекта текста: ⤵️

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

h1 {
  font-size: 140px;
  font-family: 'Luckiest Guy';
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0px -6px 0 #212121, 0px -6px 0 #212121, 0px  6px 0 #212121, 0px  6px 0 #212121, -6px  0px 0 #212121, 6px  0px 0 #212121, -6px  0px 0 #212121, 6px  0px 0 #212121, -6px -6px 0 #212121, 6px -6px 0 #212121, -6px  6px 0 #212121, 6px  6px 0 #212121, -6px  18px 0 #212121, 0px  18px 0 #212121, 6px  18px 0 #212121, 0 19px 1px rgba(0,0,0,.1), 0 0 6px rgba(0,0,0,.1), 0 6px 3px rgba(0,0,0,.3), 0 12px 6px rgba(0,0,0,.2), 0 18px 18px rgba(0,0,0,.25), 0 24px 24px rgba(0,0,0,.2), 0 36px 36px rgba(0,0,0,.15);
}

#практика #css