Code Ready | Frontend

Kanalga Telegram’da o‘tish

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

Ko'proq ko'rsatish

Rossiya30 573 Texnologiyalar & Aralashmalar6 150...

📈 Telegram kanali Code Ready | Frontend analitikasi

Code Ready | Frontend (@code_ready) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 22 005 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 6 150-o'rinni va Rossiya mintaqasida 30 573-o'rinni egallagan.

📊 Auditoriya ko‘rsatkichlari va dinamika

невідомо sanasidan buyon loyiha tez o‘sib, 22 005 obunachiga ega bo‘ldi.

13 Iyun, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -77 ga, so‘nggi 24 soatda esa -17 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.

Tasdiqlash holati: Tasdiqlanmagan
Jalb etish (ER): Auditoriya o‘rtacha 9.97% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 5.43% ini tashkil etuvchi reaksiyalarni to‘playdi.
Post qamrovi: Har bir post o‘rtacha 2 194 marta ko‘riladi; birinchi sutkada odatda 1 196 ta ko‘rish yig‘iladi.
Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 20 ta reaksiya keladi.
Tematik yo‘nalishlar: Kontent css, браузер, интерфейс, загрузка, api kabi asosiy mavzularga jamlangan.

📝 Tavsif va kontent siyosati

Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_it РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready”

Yuqori yangilanish chastotasi (oxirgi ma’lumot 14 Iyun, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.

22 005

Obunachilar

-1724 soatlar

-527 kunlar

-7730 kunlar

2 194

Post ko'rishlar

~ 1 19624 soatlar

~ 1 35948 soatlar

9.97%

Muloqot nisbati

~ 1

Kuniga postlar

Ads index

beta

Postlar arxiv

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