Code Ready | Frontend

✅ Создание вдавленного текста Вдавленный текст очень часто используется с применением свойства text-shadow. Тень немного смещается по оси Y для создания эффекта небольшого углубления.

.recessed {
   font-size: 50px;
   font-weight: 800;
   text-align: center;
   text-shadow: 2px 2px 2px rgba(255,255,255,0.3);
   background-color: #b9b9b9;
   background-clip: text;
   color: transparent;
   font-family: 'M PLUS 1p', sans-serif;
}

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

Заметки про React Канал про React, в котором вы найдете: ◼ Новые и полезные библиотеки ◼ Подходы к архитектуре приложений ◼ Новости из мира React ◼ Обзоры полезных практик и паттернов ◼ Гайды по оптимизации приложения 📢 Подпишись, чтобы быть в курсе: https://t.me/ru_react_notes

✅ Тег <details> Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть. Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия. Внутрь можно поместить тег <summary>, его используют для определения видимого заголовока для элемента <details>.

<details>
  <summary>Details</summary>
   Something small enough to escape casual notice.
</details>

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

Сколько зарабатывает фрилансер-программист в 16 лет? Вчера взял проект за 500$ — сегодня купил здесь рекламу. Перестань писать код бесплатно, начни монетизировать своё дело. А о том, как это сделать расскажет канал «Фриланс с Хаямом Алиевым» Будь первым, кто познает все тонкости фриланса: https://t.me/+fLYRr1QLUhk4MzIy

@code_ready | #мем

✅ Создание небольшой "галереи" Этот код добавляет функциональность для увеличения изображений в галерее при клике на них. Он заменяет путь к изображению, чтобы загрузить его увеличенную версию, и открывает новое окно с этим изображением.

  <div class="gallery">
    <img src="img.png" alt="image">
</div>

const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
    image.addEventListener('click', function() {
        const enlargedSrc = this.src.replace('thumbnail', 'large');
        window.open(enlargedSrc, '_blank');
    });
});

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

Вместе уютно собираемся по вечерам каждый у себя дома и учимся верстать сайты с нуля. В комплекте приятная музыка, тёмная тема и добрейшее сообщество неопытных верстальщиков, которые вообще-то огого и всем ещё покажут. Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 20 по 25 марта. За 6 дней вы: — Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика; — Напишете в тренажёрах свои строчки кода и увидите как изменяется страница сайта в реальном времени; — Поймёте нравится ли вам веб-разработка Вступить в кружок.

✅ Звёздный рейтинг с анимацией Написан без использования JavaScript. 👨‍💻 Готовый код: Ссылочка @code_ready | #кодпен

✅ Шпаргалка по методам объекта в JS Эта шпаргалка содержит полный список методов объекта в JavaScript, предоставляя краткое описание каждого из них для удобства использования. @code_ready | #js #шпаргалка

👨‍💻 Изучаешь Frontend-разработку? Давай продолжим вместе. idk Frontend — дневник начинающего разработчика, который познаёт новую профессию с нуля. Канал будет полезен: - начинающим фронтендерам; - практикующимся менторам; - всем, кто любит наблюдать за чужими косяками и их исправлениями. Присоединяйся ко мне, будем обучаться вместе 🤝

✅ Вопрос с собеседования Что такое анонимная функция в JS? Ответ: Анонимная функция в JavaScript — это функция, которая не имеет имени и обычно создается в месте использования или передается в качестве аргумента другой функции. Они особенно полезны, когда вам нужно использовать функцию только один раз или когда не требуется ссылка на нее в другом месте кода. Часто используются для: • Колбэки (Callback Functions) • Обработчики событий (Event Handlers) • Функций обратного вызова. • Самовызывающиеся функции (Immediately Invoked Function Expressions) Они позволяют писать более компактный и выразительный код, уменьшая необходимость в дополнительных именованных функциях.

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

@code_ready | #собеседование

✅ Продвинутые Комментарии Better Comments — это расширение для VSCode, способствующее улучшению структурирования комментариев в вашем коде. Оно предлагает возможность категоризировать комментарии и выделять их разными цветами, что поможет вам почеркнуть важные моменты, задачи или замечания. @code_ready | #плагин

Прокачай знания по JavaScript! Приветствую! Я Андрей Шопинский — Frontend-разработчик из крупного банка, ментор по Frontend-разработке. На моём канале: — Полезные статьи; — Уникальные прямые эфиры; — Разбор вопросов с собеседований и многое другое. 👉 Подписывайтесь и начните прокачиваться уже сегодня!

@code_ready | #консоль

@davidobryakov — фуллстак-разработчик, преподаватель по фронтенду и бэкенду в университете, который любит делиться своими знаниями в личном блоге. Рассказывает самое интересное о современной веб-разработке: ▫️важные события сферы; ▫️интересные статьи и находки; ▫️разбор различных технологий и подходов.

✅ Подборка крутых анимированных hover кнопок Реализовано с помощью HTML, CSS и JS. 👨‍💻 Готовый код: Ссылочка @code_ready | #кодпен

✅ Как сделать градиентную обводку текста? Стилевое свойство text-stroke одновременно устанавливает цвет и толщину контура вокруг букв и символов текста.Но также чтобы создать градиент нужно добавить 2 свойства: background-clip: text и background-image: linear-gradient.

<h1>Stroke</h1>

body {
    background-color: #000119;
    display: grid;
    font-family: sans-serif;
    place-items: center;
  }
  h1 {
    background-clip: text;
    background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
    font-size: 100px;
    -webkit-text-stroke: transparent 6px;
  }

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