Code Ready | Frontend

@code_ready | #мем

🤬 Блин, опять эти слайды! Садишься делать презу и впадаешь в творческий ступор. Знакомая тема? Мы нашли решение: Простой PowerPoint - собрали в одном месте лучшие лайфхаки, полезные ссылки и инструменты ИИ. В формате коротких наглядных видеороликов. Сохраняйте, пригодится!

@code_ready | #консоль

✅ Третий канал Недавно я проводил опрос, "про что создать новый канал". Целых 120 человек хотят про бэкенд. Так как у меня уже есть канал про фронтенд и канал про фигму @time_design. Я решил создать что-то новое. Поэтому в середине февраля будет создан третий канал про бэкенд, уже наполненный контентом. Точное содержание канала Я скажу ближе к февралю. Если вам нравится идея нового канала, ставь реакцию под этим постом. 🔥

✅ Как создать анимированные hover кнопки? Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи. ☑️ Я делюсь HTML & SCSS кодом ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<div class="buttons">
    <button class="fill">Fill In</button>
    <button class="pulse">Pulse</button>
  </div>

body {
    color: #fff;
    background: hsl(227, 10%, 10%);
    text-align: center;
  }
button {  
    font-size: 20px;
    background: none;
    border: 2px solid;
    margin: 1em;
    padding: 1em 2em;
    color: var(--color);
    transition: 0.75s;
    cursor: pointer;
}
.fill:hover, .fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
  border-color: var(--hover);
  color: #fff;
}   
.pulse:hover, .pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
$colors: (fill: #a972cb, pulse: #ef6eae,);
@each $button, $color in $colors {
  .#{$button} {
    --color: #{$color};
    --hover: #{adjust-hue($color, 45deg)};
  }
}

@code_ready | #обучение #html #scss

🔤 У нас часто спрашивают: "Какие каналы мы читаем в телеграме?" Хотим посоветовать крутой канал CodeRoll | Frontend, где вы найдете: - задачи для собеседований - полезные статьи - свежие новости из мира Frontend разработки

Соберём под этим постом 60 реакций до 11 утра? Всем спокойной ночи ❤️

✅ Вшешка Теперь на этом канале помимо рекламы телеграмм каналов, иногда будет появляться внешка. Это реклама веб сайтов, курсов и так далее. Они также могут быть полезный для вас, потому что я не рекламирую всякий бред. Их тематика будет про IT, чаще всего про web разработку. Надеюсь это не будет мешать смотреть и получать знания, я стараюсь и делаю 2-4 поста каждый день и думаю что 1 реклама в день, которая через 1 или 2 часа перекрывается другими постами не помешает этому каналу, всё таки труд должен оцениваться. Всем спасибо, удачи! 🫡

18 января в Айтилогии стартует 7-дневный бесплатный интенсив по frontend-разработке, на котором ты с нуля без знаний создашь фронтенд-проект на Angular 🔥 На интенсиве ты: – Сверстаешь лендинг на HTML + CSS – Реализуешь функционал на JavaScript – Используешь фронтенд-фреймворк Angular – Подключишь Backend и загрузишь сайт на хостинг 🎁 Будет общий чат, проверка домашек от экспертов, различные бонусы! А в конце автор подарит своё резюме Senior-разработчика, с помощью которого устроился на ЗП 3500$ Первые 100 мест бесплатно, потом 6 990 руб. Не упусти👇🏻 Frontend Start

✅ Делаем счётчик кликов на JS Простой интерактивный счетчик, который увеличивается при каждом клике пользователя. Когда пользователь наводит на элемент, его цвет меняется, чтобы указать на возможность взаимодействия. ⤵️

<div id="counter">0</div>

body {text-align: center; font-family: 'Segoe UI';}
#counter {
    font-size: 2.5em;
    cursor: pointer;
    padding: 10px 30px;
    border: 2px solid #3498db;
    border-radius: 10px;
    transition: background-color 0.3s;
    user-select: none;
    display: inline-block;
    color: #3498db;
}
#counter:hover {background-color: #3498db;color: #fff;}

let count = 0;
const counterElement = document.getElementById('counter');
counterElement.addEventListener('click', function() {
    count++;
    counterElement.textContent = count;
});

@code_ready | #обучение #js

@code_ready | #мем

Как вам посты на этой неделе? 🤔

✅ Делаем "взрывающиеся" частицы при клике на экран В этом примере каждый раз, когда пользователь кликает по странице, создается и анимируется новая частица. Можете изменять цвет, размер и другие свойства частиц по своему усмотрению. ⤵️

.particle {
    position: absolute;
    background-color: #3498db;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: explode 1s linear;
}
@keyframes explode {
    to { transform: scale(2); opacity: 0; }
}

document.addEventListener("mousedown", (e) => e.preventDefault());
document.addEventListener("click", (e) => {
  const p = document.createElement("div");
  Object.assign(p.style, { left: `${e.clientX}px`, top: `${e.clientY}px` });
  p.className = "particle";
  document.body.appendChild(p);
  setTimeout(() => p.remove(), 1000);
});

@code_ready | #практика #css #js

🚀 Подними свои фронтенд-скиллы на новый уровень с True Frontender! 🚀 👨‍💻 Изучаешь фронтенд или хочешь поднять свой грейд? Хочешь успешно проходить собеседования? True Frontender – это твой навигатор в мире кода! 💡 На канале True Frontender тебя ждет: - Полезные советы на основе реального опыта работы - Примеры задач, которые встречаются на собеседованиях - Фишки и авторские статьи по React, TypeScript, JavaScript, CSS, HTML - Советы которые помогут сделать твой код чище и компактнее - Рекомендации по улучшению качества твоего кода 🌟 True Frontender – это не просто канал, это твой путь к мастерству в фронтенде. Развивайся как в технических, так и в творческих аспектах разработки. 🔥 Присоединяйся сейчас – будущее твоего кода начинается здесь! 👉 @truefrontender 🚀

@code_ready | #консоль