Code Ready | Frontend

Всем доброго дня! Нужны Frontend Разработчики) Для долгосрочного оплачиваемого сотрудничества. Достаточно простая подработка, нужно будет писать код, объяснять разные функции и писать авторские текста. Требования:

• Хорошо уметь работать с Figma • Отлично владеть html, css • Знать JavaScript

У кого есть много свободного времени, отпишите мне — @energy_it

Удобная фукнция от VS Code 👨‍💻 VS Code позаботился об управлении контролями версий и содержит себе много фишек, связанных с git Здесь показано, как можно удобно отменить последний коммит, всего лишь одной кнопкой 📣 Code Ready | #vscode

👩‍💻 Очередной атрибут — spellcheck Который определяет, должна ли проверяться орфография содержимого элемента. Всё максимально просто. Он может использоваться в таких элементах, как input, textarea, и даже в некоторых других контейнерных элементах, поддерживающих ввод текста. Он имеет всего два значения:

• spellcheck="true" — Проверка орфографии включена. • spellcheck="false" — Проверка орфографии отключена.

📣 Code Ready | #атрибут

✅️ GitHub теперь в Telegram! Подписывайтесь: @GitHub

🤯 Очень красивый эффект для блока карточки на CSS На самом деле, это совсем не так тяжело, главное знать пару функций — blur, calc и самые базовые в языке стилей. Вот код карточки, но без доп. эффектов:

.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  justify-content: center;
  align-items: center;
  color: rgb(88 199 250 / 0%);
}

Разберем самые важные функции: • CSS-функция var() — подставляет кастомные свойства в качестве значения свойств • Стилевая функция blur() — задаёт размытие по Гауссу изображений, фоновых картинок или текста. • Функция calc() — производит математические вычисления прямо в css. ▶️ И конечно же полный код карточки на codepen.io 📣 Code Ready | #css

👩‍💻 Добавим эффекты на ваш сайт! В этом посте мы рассмотрим несколько различных hover эффектов, с которыми можно сделать сайт красивее и более динамичным. Всё создано на чистом Css, а посмотреть кода, можно чуть ниже.

- Эффект обводки - Мягкий впад - Эффект переворота - Минималистичный

🔥 И как же без кода на codepen.io 📣 Code Ready | #css

Устали работать по кривым ТЗ? Коллеги из moab поделились готовой рыбой технического задания на разработку лендов. ⚡️Это таблица, которой можно пользоваться, как конструктором. ⚡️В документе предусмотрены все ключевые блоки и объясняется, зачем они нужны, из чего состоят, как должны отображаться на фронте. Захотели — поменяли местами, выкинули лишнее, перекроили под себя. Есть 2 типа заказчиков: «сделайте на свое усмотрение» и «никто лучше меня не знает мой продукт». Для первых — передаем файл копирайтеру, пусть вставит тексты в отмеченные поля. Для вторых — отправляем файл заказчику, пусть заполняет в свое удовольствие. А дизайнер/frontend-разработчик в результате получит готовое структурированное ТЗ. К доку прилагается статья-лонгрид с объяснениями базы и примерами. Почитать и утащить к себе можно на VC: https://vc.ru/marketing/1679135-kak-sostavit-gramotnoe-tz-na-prodayushii-lending-za-60-minut-i-nichego-ne-upustit/?erid=LjN8KUxkC

Grid Garden — игра, которая учит основам CSS Grid, позволяя управлять растениями в саду, используя свойства для прохождения уровней. 📌 Ссылочка: cssgridgarden.com 📣 Code Ready | #ресурсы

👩‍💻 Простое раскрывающееся меню Всем привет! Сегодня попробую показать, как создать и анимировать простое меню для сайта на Html, Css и Js! Анимировать меню будем с помощью свойства transform, благодаря которому мы сместим элементы при нажатии на кнопку. 📣 Code Ready | #css #js

⚡️XMAS HACK к нам мчится!  С 20 по 23 декабря под звон Jingle bells пройдет самый яркий и праздничный хакатон 2024 года - XMAS HACK.  🎁Дед Мороз и Снегурочка уже положили под елочку XMAS HACK особый подарок - 900 000 рублей!  ✨Кейс от Интерюнис-ИТ: Реновация пользовательского интерфейса программного обеспечения акустико-эмиссионного измерительного комплекса 👨‍💻Задача: Улучшить текущий пользовательский интерфейс программы без модификации содержательной части кода. Основной фокус модификации визуальных элементов, навигации и общем удобстве использования, сохраняя при этом все существующие функциональные возможности. ✨Кейс от CardON: Высокоэффективный платежный конвейер 👨‍💻Задача: Необходимо реализовать алгоритм, который будет динамически подстраиваться под меняющиеся условия, выбирая оптимальный маршрут для транзакции. 🚀Осталось собрать команду и до 19 декабря подать заявку на участие: https://xmas-hack.ru/ 🎅XMAS HACK к нам мчится, скоро все случится!🌟

👩‍💻 Фишка для корпоративных разработок Если вы уже владеете системой управления версиями, то вам будет полезно знать🙄 Режим отслеживания изменений между версиями позволяет удобно посмотреть как изменялся код Включить можно в меню в верхней панели, также есть режим, который показывает блоки измененного кода 🤩 📣 Code Ready | #vscode

📶 С 1 декабря для граждан РФ открыт доступ к платным материалам по программированию Вот отсортированные базы с тонной материала(книги, курсы, ресурсы и гайды). Выбирай своё направление:: 👩‍💻 Frontend 👩‍💻 PHP ⚙️ Backend 👩‍💻 Моб. Dev 📱 GitHub 👩‍💻 GameDev 🤓 Всё айти 👩‍💻 DevOps 👩‍💻 Python 🖥 Data Science 👩‍💻 Java 🐞 Тестирование 👩‍💻 C# 🤔 Хакинг & ИБ 👩‍💻 С/С++ 📱 Маркетинг 🖥 SQL 🖥 Дизайн 👩‍💻 Golang 👣 Rust Скачивать ничего не нужно — все выложили в Telegram с доступом по ссылке

🖥 Учимся создавать эффект параллакса В этом посте мы создали эффект параллакса, который добавляет глубину и динамичность вашему сайту. Мы рассмотрели, как добавить несколько секций с фоном, настроить их высоту и использовать фиксированный фон для плавного эффекта.

- HTML структура - Добавляем стили в CSS - CSS для контента - JavaScript

📣 Code Ready | #css #js

👩‍💻 Обязательные поля для заполнения Псевдокласс :required в CSS используется для стилизации элементов формы, которые имеют атрибут required. Это означает, что элемент должен быть заполнен перед отправкой формы. 📣 Code Ready | #свойство #css

⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 10 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать фреймворки — Angular и React Вот план обучения: 💡 с 10 по 15 декабря свой киносайт на Angular 💡 а с 17 по 21 декабря свою доску объявлений на React Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способом трудоустройства с помощью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать бесплатно Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первые уроки уже доступны

Порекомендую вам, что из интересного можно добавить на свой сайт. #средничкам Добавление интерактивных элементов — отличный способ оживить вашу веб-страницу. Сегодня мы создадим таймер обратного отсчета, который начнет работать при нажатии на кнопку. HTML-разметка будет простой: блок для отображения времени и кнопка для запуска таймера.

<div id="countdown">10</div>
<button id="start-timer">Старт</button>

Добавим немного стилей, чтобы таймер выглядел аккуратно:

#countdown {
  font-size: 2em;
  text-align: center;
  margin: 20px;
}
button {
  display: block;
  margin: 10px auto;
}

Теперь переходим к JavaScript. Вначале получим элементы страницы, которые будут участвовать в работе таймера:

const countdownEl = document.getElementById('countdown');
const startButton = document.getElementById('start-timer');

Далее реализуем сам таймер. Он будет уменьшать число каждую секунду:

startButton.onclick = () => {
  let time = parseInt(countdownEl.textContent);
  const timer = setInterval(() => {
    time--;
    countdownEl.textContent = time;
    if (time <= 0) clearInterval(timer); // Остановка таймера при достижении нуля
  }, 1000);
};

🔥 Теперь, когда вы нажмете кнопку Старт, таймер начнет обратный отсчет с 10 до 0, а затем остановится. Такой простой механизм может использоваться для создания счетчиков или отображения времени на вашей странице! 📣 Code Ready | #практика

🙄 Знал ли ты, как можно добавить целое видео в любой текст на CSS? Главное, о чем нужно знать — это свойство background-clip: text, которое заставляет фоновое изображение заполнять только сам текст, а не весь блок.

.clip-text {
  background: url (http://i.giphy.com/fsULJFFGv8X3G.gif);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  color: transparent;
}

Из-за этого текст становится "покрашенным" в изображение, а сам цвет текста устанавливается как прозрачный (color: transparent), что позволяет увидеть только фон внутри текста. ▶️ Ещё кому интересно, оставлю ссылку на готовый код 📣 Code Ready | #css

👩‍💻 Полезные горячие клавиши VSCode • Shift + Del — удаляет строку целиком. Не нужно будет выделять мышкой всю строку и потом нажимать Backspace. • Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще. • Ctrl + / — Закомментирует или раскомментирует текущую строку. 📣 Code Ready | #клавиши

👩‍💻 Полезные горячие клавиши VSCode • Shift + Del — удаляет строку целиком. Не нужно будет выделять мышкой всю строку и потом нажимать Backspace. • Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще. • Ctrl + / — Закомментирует или раскомментирует текущую строку. 📣 Code Ready | #клавиши

Готовишься к собеседованию в IT? Разбираем для тебя самые актуальные вопросы для подготовки Выбирай направление: 👩‍💻 Frontend 👩‍💻 Python 👩‍💻 Go 👩‍💻 Java 👩‍💻 C/C++ 👩‍💻 C# 👩‍💻 PHP 👩‍💻 QA 🖥 SQL 👩‍💻 Git