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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
Как выглядит оператор вызова фнукции в JS?
Anonymous Quiz
53%
()
17%
{}
3%
[]
27%
function
👍21🔥3
😁43👍10🔥6👎1
Итоги 2023 года

Всем доброго вечера, буквально через пару часов будет новый 2024 год. Хоть этому каналу всего лишь 4 месяца, мы хотим поделиться итогами за это краткое время. ❤️

Что мы сделали?
За эти 4 месяца мы успели набрать почти 2000 подписчиков, спасибо каждому кто смотрит посты, надеюсь мы для вас полезны! Вы нам помогаете развиваться и делать контент лучше, так как чем больше аудитория, чем больше реакций и комментариев, тем лучше становиться качество постов.

Цели на новый 2024 год. Пожалуй самая главная цель, это 10 тысяч подписчиков на этом канале и 5 тысяч на нашем втором канале @time_design. Помимо этого, мы хотим расширяться и делать новые каналы, где уже будет в разы качественней контент. Также радовать вас и быть полезными для каждого кто смотрит наши каналы. Всем спасибо)

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

С наступающим Новым Годом! 🍾

@code_ready | #новость
Please open Telegram to view this post
VIEW IN TELEGRAM
👍137🔥5🎉1
С наступающим, друзья!

Пусть этот год Дракона будет полон творческих идей и важных событий. Желаю каждому реализовать все свои мечты, стать успешным разработчиком. А также я вам желаю удачи, счастья и здоровья, чтобы вы преодолели любые преграды и добились всех своих целей!
21🎉8👍4
С новым годом! 🎄
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉368👍5
Подробная таблица использования группы child

При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.

@code_ready | #css #шпаргалка
👍23🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Как создать цветной след от курсора

Анимация группы переливающихся квадратиков, движущихся за курсором. Для его создания оставляем SCSS и JavaScript код ниже. ⬇️

.loader-container {
width:100px;
height:100px;
position: absolute;
animation: scaleUp .5s linear;
opacity: 0;
transform: scale(0);
.loader {
background: #fff;
animation: filterHue 2.5s linear infinite;
height:100%;
width: 100%;
}
}
@keyframes scaleUp {
50% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(0.25) }
}

window.addEventListener("mousemove", function (e) {
var to_append = document.getElementsByClassName('loader-container')[0];
var all = document.getElementsByClassName('loader-container');
var parent_div = document.createElement('div');
parent_div.className = "loader-container";
var inner_div = document.createElement('div');
inner_div.className = "loader";
parent_div.appendChild(inner_div)
var d = document.body.appendChild(parent_div);
parent_div.style.left = (e.clientX - 50)+'px';
parent_div.style.top = (e.clientY - 50)+'px';
if(document.getElementsByClassName('loader-container').length > 50) {
document.body.removeChild(to_append)
}
});


@code_ready | #практика #scss #js
👍204🔥3
Шпаргалка с методами строк в JS

@code_ready | #js #шпаргалка
👍25🔥105
This media is not supported in your browser
VIEW IN TELEGRAM
Горячие клавиши для быстрой верстки

Ctrl + F2 — Выделяет все вхождения текущего слова.

Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.

Shift + Tab — Удаляет отступы.

@code_ready | #клавиши
👍32🔥75
Какое значение не принимает свойство border-style
Anonymous Quiz
38%
ridge
30%
color
16%
none
17%
dashed
👍12🔥4👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Создание таймера с помощью JS

В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.

Ниже оставляем HTML, CSS и JavaScript код для создания крутого таймера. ⤵️

<div id="timer">00:00:00</div>
<button onclick="startStopTimer()">Старт/Стоп</button>
<button button onclick="resetTimer()">Сброс</button>

body { font-family: Arial, sans-serif; text-align: center; margin: 50px; }
#timer { font-size: 2em; margin-bottom: 20px; }
button { font-size: 1em; padding: 10px 20px; cursor: pointer; }

let timer, s = 0, m = 0, h = 0, t = 0;
function startStopTimer() {
if (t) {
clearInterval(timer);
} else {
timer = setInterval(() => {
t ? s++ : clearInterval(timer);
updateTimer();
}, 1000);
} t ^= 1;}
function resetTimer() {
clearInterval(timer);
timer = undefined;
s = m = h = 0;
updateTimer();
t = 0; }
function updateTimer() {
const padZero = (value) => (value < 10 ? '0' : '') + value;
document.getElementById('timer').innerText = `${padZero(h)}:${padZero(m)}:${padZero(s)}`; }


@code_ready | #html #css #js
👍24🔥5👎2
Как вам посты на этой неделе? 🤔
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥55👍196🎉3
This media is not supported in your browser
VIEW IN TELEGRAM
Создание бесконечных часов на JS

Этот код создает простые часы, отображающие текущее время в формате "часы:минуты:секунды". Функция setInterval вызывает функцию updateClock каждую секунду для обновления отображаемого времени. ⤵️

<div id="clock"></div>

#clock { font-size: 50px; font-family: Arial, sans-serif; text-align: center; margin: 100px; }

function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
document.getElementById('clock').innerText = `${hours}:${minutes}:${seconds}`;
}
// Обновляем часы каждую секунду
setInterval(updateClock, 1000);
// Запускаем обновление сразу, чтобы избежать задержки в отображении времени
updateClock();


@code_ready | #обучение #js
👍193🔥3👎1
Важный опрос, какие посты вам нравятся больше всего и какие выпускать чаще?
Anonymous Poll
76%
Готовый код для эффектов
47%
Опросы и опросы с консолью
18%
Мемы
👍14🔥6
🔥34😁25👍5👎1
Важное объявление, с 8 до 12 и с 15 до 18 числа будут ежедневные рекламы, для меня это отличный результат и прогресс, но для вас эти рекламы могут быть раздражающие. Поэтому делюсь графиком выхода постов: ⬇️

• В 11:30 интересный опрос или мемчик
• После него реклама, точное время не знаю, примерно будет или в 13 или в 15
• И спустя 2 часа после рекламы выходит крутой пост про создание эффектов или что-то другое.

Также повторюсь, рекламы будут полезны для вас, потому что я рекламирую только хорошие каналы про web разработку или про дизайн. Поэтому на классные каналы можете подписываться)

Удачи 🫡

@code_ready | #новость
Please open Telegram to view this post
VIEW IN TELEGRAM
25👍16🔥5
Как обозначить степень в JS?
Anonymous Quiz
36%
^
55%
**
4%
//
4%
%%
🔥13👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Готовый макет 2rism

Оставляю уже готовый макет с кодом — Github (без адаптива)

• Сложность: Лёгкий
• Язык: Английский
• Адаптив: Нет

Ссылка на макет — Figma

Это новая рубрика — готовые сайты, она будет выходить только раз в неделю. Надеюсь вы зацените)

@code_ready | #github
🔥26👍125
Code Ready | Frontend pinned « Важное объявление, с 8 до 12 и с 15 до 18 числа будут ежедневные рекламы, для меня это отличный результат и прогресс, но для вас эти рекламы могут быть раздражающие. Поэтому делюсь графиком выхода постов: ⬇️ • В 11:30 интересный опрос или мемчик • После…»