👍21🔥3
✅ Итоги 2023 года
Всем доброго вечера, буквально через пару часов будет новый 2024 год. Хоть этому каналу всего лишь 4 месяца, мы хотим поделиться итогами за это краткое время.❤️
Что мы сделали? За эти 4 месяца мы успели набрать почти 2000 подписчиков, спасибо каждому кто смотрит посты, надеюсь мы для вас полезны! Вы нам помогаете развиваться и делать контент лучше, так как чем больше аудитория, чем больше реакций и комментариев, тем лучше становиться качество постов.
Цели на новый 2024 год. Пожалуй самая главная цель, это 10 тысяч подписчиков на этом канале и 5 тысяч на нашем втором канале @time_design. Помимо этого, мы хотим расширяться и делать новые каналы, где уже будет в разы качественней контент. Также радовать вас и быть полезными для каждого кто смотрит наши каналы. Всем спасибо)
Пожелания. Пусть этот год будет полон творческих идей и важных событий. Желаем каждому выполнить все свои цели, стать успешным разработчиком, желаем удачи, счастья и здоровья. ❤️
С наступающим Новым Годом! 🍾
@code_ready | #новость
Всем доброго вечера, буквально через пару часов будет новый 2024 год. Хоть этому каналу всего лишь 4 месяца, мы хотим поделиться итогами за это краткое время.
Что мы сделали? За эти 4 месяца мы успели набрать почти 2000 подписчиков, спасибо каждому кто смотрит посты, надеюсь мы для вас полезны! Вы нам помогаете развиваться и делать контент лучше, так как чем больше аудитория, чем больше реакций и комментариев, тем лучше становиться качество постов.
Цели на новый 2024 год. Пожалуй самая главная цель, это 10 тысяч подписчиков на этом канале и 5 тысяч на нашем втором канале @time_design. Помимо этого, мы хотим расширяться и делать новые каналы, где уже будет в разы качественней контент. Также радовать вас и быть полезными для каждого кто смотрит наши каналы. Всем спасибо)
Пожелания. Пусть этот год будет полон творческих идей и важных событий. Желаем каждому выполнить все свои цели, стать успешным разработчиком, желаем удачи, счастья и здоровья. ❤️
С наступающим Новым Годом! 🍾
@code_ready | #новость
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤7🔥5🎉1
✅ Подробная таблица использования группы child
При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.
@code_ready | #css #шпаргалка
При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.
@code_ready | #css #шпаргалка
👍23🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать цветной след от курсора
Анимация группы переливающихся квадратиков, движущихся за курсором. Для его создания оставляем SCSS и JavaScript код ниже. ⬇️
@code_ready | #практика #scss #js
Анимация группы переливающихся квадратиков, движущихся за курсором. Для его создания оставляем 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
👍20❤4🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Горячие клавиши для быстрой верстки
• Ctrl + F2 — Выделяет все вхождения текущего слова.
• Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.
• Shift + Tab — Удаляет отступы.
@code_ready | #клавиши
• Ctrl + F2 — Выделяет все вхождения текущего слова.
• Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.
• Shift + Tab — Удаляет отступы.
@code_ready | #клавиши
👍32🔥7❤5
Какое значение не принимает свойство 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 код для создания крутого таймера. ⤵️
@code_ready | #html #css #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
Что будет в консоли?
Anonymous Quiz
10%
false, null, err
20%
false, undefined hello, null
36%
false, undefined hello, NaN
34%
false, NaN, NaN
👍20🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание бесконечных часов на JS
Этот код создает простые часы, отображающие текущее время в формате "часы:минуты:секунды". Функция setInterval вызывает функцию updateClock каждую секунду для обновления отображаемого времени. ⤵️
@code_ready | #обучение #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
👍19❤3🔥3👎1
Важный опрос, какие посты вам нравятся больше всего и какие выпускать чаще?
Anonymous Poll
76%
Готовый код для эффектов
47%
Опросы и опросы с консолью
18%
Мемы
👍14🔥6
• В 11:30 интересный опрос или мемчик
• После него реклама, точное время не знаю, примерно будет или в 13 или в 15
• И спустя 2 часа после рекламы выходит крутой пост про создание эффектов или что-то другое.
Также повторюсь, рекламы будут полезны для вас, потому что я рекламирую только хорошие каналы про web разработку или про дизайн. Поэтому на классные каналы можете подписываться)
Удачи
@code_ready | #новость
Please open Telegram to view this post
VIEW IN TELEGRAM
❤25👍16🔥5
🔥13👍7
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Готовый макет 2rism
Оставляю уже готовый макет с кодом — Github (без адаптива)
• Сложность: Лёгкий
• Язык: Английский
• Адаптив: Нет
Ссылка на макет — Figma
Это новая рубрика — готовые сайты, она будет выходить только раз в неделю. Надеюсь вы зацените)
@code_ready | #github
Оставляю уже готовый макет с кодом — Github (без адаптива)
• Сложность: Лёгкий
• Язык: Английский
• Адаптив: Нет
Ссылка на макет — Figma
Это новая рубрика — готовые сайты, она будет выходить только раз в неделю. Надеюсь вы зацените)
@code_ready | #github
🔥26👍12❤5
Code Ready | Frontend pinned «❗ Важное объявление, с 8 до 12 и с 15 до 18 числа будут ежедневные рекламы, для меня это отличный результат и прогресс, но для вас эти рекламы могут быть раздражающие. Поэтому делюсь графиком выхода постов: ⬇️ • В 11:30 интересный опрос или мемчик • После…»