Code Ready | Frontend

Всем привет, я автор этого канала, и хочу обратиться к вам. Есть ли тут хорошие фронтенд разработчики, у которых достаточно свободного времени? Отпишите в личку @energy_it. Нужен 1 человек для долгосрочного, оплачиваемого сотрудничества. Html, css, js и свободное время, всё что нужно. Спасибо 🔥

✅ Горячие клавиши для ускорения верстки • Alt + ↓ / ↑ — переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш. • Ctrl + Shift + ← / → — выделит слова после или перед курсором. • Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах. @code_ready | #клавиши

✅ Переключаем видимость пароля Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.

<input type="password" id="passwordInput">
  <input type="checkbox" id="showPasswordCheckbox"> Показать пароль

const passwordInput = document.getElementById('passwordInput');
const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
showPasswordCheckbox.addEventListener('change', function() {
    if (showPasswordCheckbox.checked) {
        passwordInput.type = 'text';
    } else {
        passwordInput.type = 'password';
}});

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

Всем привет! Сейчас хочу поделиться, лучшими шпаргалками, которые я делал для этого канала. Судя по вашим репостам и реакциям, вот лучшие: 1. Регулярные выражения 2. Обработчики событий 3. Методы массива 4. Работа с DOM 5. Основные операторы Ну а все подобные шпаргалки, можно посмотреть с помощью одного хештега #шпаргалка. 🔥

✅ Улучшение читаемости кода Indent Rainbow - плагин для VSCode, который добавляет цветовую разметку для каждого уровня отступа в вашем коде, улучшая его читаемость и понимание структуры. Благодаря этому плагину вы сможете легко отслеживать вложенность блоков кода, делая процесс разработки более удобным и эффективным. @code_ready | #плагин

HTML, CSS, JS, Node.JS, 🤯 - пора бы всё объединить! Все для изучения веба 👉 Фронтенд - самый большой канал для изучения фронта 👉 Верстка - все о верстке 👉 Node.JS - для тех кто хочет писать бэк на JS Собрано всё, проверяй🔥

Всем привет! По прошлому голосованию, мне предложили множество прикольных идей для нового канала, и я решил создать, 1 канал про фронтенд и бэкенд вместе. Объясняю идею: Будет создан канал "Roadmap Ready", в нем я буду публиковать: 1. Полезные ссылки на статьи, видео с ютуба, книги, кодпены, репозитории и т.д. Все эти ресурсы я буду скидывать про фронтенд и бэкенд. 2. Затем, будет идти тест про эту тему (консоль, опрос, true/false), и в комментариях объяснение. Примерно как сейчас в этом канале #консоль, но добавится ещё и бэкенд опросы (Python, PHP...) 3. Ну и конечно же, будет разбор вопросов с собеседований (codewars). Также как на этом канале #собеседование. Но добавится бэкенд. Как вам идея нового канала? Пишите мнение в комментариях и ставьте реакцию 🔥

В этом канале будут такие языки программирования как: (Html, Css, JavaScript, Python, Php, Java, и возможно что то ещё)

✅ Делаем генератор паролей Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль длиной 12 символов из указанных в charset.

<div class="password-generator">
    <input type="text" id="password" readonly>
    <button onclick="generatePassword()">Генерировать</button>
  </div>

function generatePassword() {
  const length = 12;
  const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
  let password = "";
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * charset.length);
    password += charset[randomIndex];
  }
  document.getElementById("password").value = password;
}

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

Факт №1: 90% фрилансеров не зарабатывают на фриланс биржах достаточно денег, что бы закрыть свои базовые потребности, не говоря уже о путешествиях и остальном. Факт №2: Подавляющее количество новичков, прошедших обучение на веб дизайнера, верстальщика, программиста в первый год не заработают нормальных денег, просто потому что для стабильного дохода в какой-либо области необходимо быть опытным специалистом. Но решение есть. Основные нюансы можно узнать запустив бот Внеконкурентного Подхода На нём рассказывается, как зарабатывать на веб разработке ПОЛНОГО ЦИКЛА. — Без фриланс бирж — Без наработки собственного портфолио — Без необходимости быть опытным специалистом — Без работодателей — Без круглосуточного прожигания глаз возле монитора Запустите бота и будьте внедрите в свою жизнь стабильный заработок на разработке сайтов, а фриланс оставьте тем, у кого есть на это время и нервы. Бот: @vp_podhod_bot

✅ Тег <optgroup> • Тег <optgroup> в HTML используется внутри тега <select> для группировки пунктов списка выбора. Он позволяет создавать подгруппы или категории для удобства пользователя. Внутри тега <optgroup> вы можете размещать один или несколько тегов <option>, представляющих отдельные пункты выбора. • Атрибут label: Это обязательный атрибут, который задает название группы опций. Этот текст будет отображаться в списке выбора, чтобы пользователи понимали, какие опции принадлежат к какой группе. • Атрибут disabled: Если этот булевский атрибут установлен, ни один из элементов в этой группе опций не может быть выбран.

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetales">
    <option value="carrot">Carrot</option>
    <option value="potato" disabled>Potato</option>
  </optgroup>
</select>

@code_ready | #практика #html

А вы знали, что чтобы стать крутым разработчиком нужен ментор? 🎓Станьте уверенным профессионалом с достойным уровнем дохода в IT индустрии вместе с менторами YKul. ➡️Запишитесь на курс ❗️Не важно, новичок вы или действующий специалист. С нами вы преуспеете – пройдете именно ваш путь вместе с опытным ментором, действующим программистом уровня senior. Не нужно оплачивать фиксированный курс длиной в несколько месяцев. Вы сможете: ✅ писать чистый валидный код ✅ легко верстать сайты ✅ применять JavaScript, TypeScript, HTML/CSS, GIT, npm ✅ использовать фронтенд-фреймворки и библиотеки ✅ решать реальные кейсы ❓Сколько времени это займет❓ 👨🏻‍💻Мы определяем ваш уровень подготовки, и согласуем индивидуальный план занятий. Оплачивайте занятия отдельно за каждый месяц, при необходимости делайте перерыв и возвращайтесь к практике, когда это удобно вам. 👍Мы помогаем с трудоустройством как новичкам, так и работающим специалистам - тем, кто в поиске лучших вакансий! ✅Каждое завершенное задание от YKul – успешный кейс для вашего портфолио. ✅ HR специалист YKul рассмотрит ваш опыт с точки зрения работодателя, вместе с вами подготовит убедительное резюме. ✅ Проработаем все вопросы и темы, важные для успешного прохождения собеседования. ✅ Наш сертификат станет еще одним плюсом в вашем профиле сотрудника. ➡️Запишитесь на курс Хотите протестировать? Убедитесь, что вам подходит формат и содержание занятий: первая неделя обучения – ❗️бесплатно❗️ Реклама: ИП Кулагин Андрей Николаевич, ИНН: 740411652688

✅ Social Media Icons with Popups Анимация иконок социальных сетей с всплывающими окнами. Написано без использования JavaScript. 👨‍💻 Готовый код: Ссылочка @code_ready | #кодпен

Ищешь много полезной практики по JavaScript? Переходи на канал CCODE, где ты найдешь увлекательные уроки, интересные задачи и многое другое для того, чтобы улучшить свои навыки программирования на JavaScript 👉 Подписаться на канал

@code_ready | #консоль

🔥 Это база с 1400 вопросами с собеседований на Frontend разработчика. Фишка в том что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏

✅ Создание простого счетчика кликов Простой и понятный счетчик кликов для вашего веб-сайта. Просто нажмите на кнопку, чтобы увеличить количество кликов, отображаемое на экране.

<button id="clickButton">Нажми на меня</button>
<p>Количество кликов: <span id="clickCount">0</span></p>

const clickButton = document.getElementById('clickButton');
  const clickCountDisplay = document.getElementById('clickCount');
  let clickCount = 0;
  // Функция для обновления счетчика на странице
  function updateClickCount() {
    clickCountDisplay.textContent = clickCount;}
  clickButton.addEventListener('click', function() {
    clickCount++; // Увеличиваем счетчик на 1 при каждом клике
    updateClickCount(); // Обновляем счетчик на странице});

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