Логово верстальщика

Старшеклассники, залетайте на PROD Это олимпиада по промышленной разработке с призами от Т-Банка, Центрального университета и НИУ ВШЭ. Тут можно прокачаться в программировании на реальных ИТ-задачах. Победители получат один из призов — грант или скидку на обучение в вузе или упрощенный отбор на стажировку в Т-Банке. Для участия хватит логики и школьных знаний по информатике. Успей зарегистрироваться до 3 декабря. Узнать больше #реклама prodcontest.ru О рекламодателе

👩‍💻 Создание адаптивной карточки с изображением и текстом Создайте карточку, которая содержит изображение сверху и текст ниже. Карточка должна быть адаптивной: на больших экранах занимать 25% ширины контейнера, а на мобильных устройствах — всю ширину. Ожидаемое поведение: • Изображение всегда занимает всю ширину карточки. • Текст расположен под изображением. • Карточка адаптируется к размеру экрана. Решение задачи🔽

<div class="card"> <img src="https://via.placeholder.com/300x200" alt="Image" class="card-image"> <div class="card-text"> <h3>Заголовок</h3> <p>Описание карточки. Это адаптивная карточка с текстом и изображением.</p> </div> </div> /* Контейнер карточки */ .card { display: flex; flex-direction: column; width: 25%; /* Для больших экранов */ border: 1px solid #ccc; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .card:hover { transform: scale(1.05); } /* Изображение в карточке */ .card-image { width: 100%; height: auto; display: block; } /* Текст карточки */ .card-text { padding: 16px; text-align: center; background-color: #f9f9f9; } /* Адаптивность для мобильных устройств */ @media (max-width: 768px) { .card { width: 100%; /* Занимает всю ширину на маленьких экранах */ } }

👩‍💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать. Читать...

Курс по frontend-разработке с junior до middle Стань специалистом по frontend-разработке с помощью менторов. Оставь заявку! Узнать больше #реклама 16+ ykul.ru О рекламодателе

📝 Подборка вакансий для мидлов Frontend Developer (Nuxt) • Vue.js, Nuxt.js, JavaScript, SCSS, Адаптивная верстка, Twitter Bootstrap • до 150 000 ₽ | Средний (Middle) Angular разработчик • JavaScript, Angular, Адаптивная верстка • от 3 500 до 5 000 € | Средний (Middle) Frontend-разработчик Vue/React • React.js, Vue.js, TypeScript, HTML, CSS, JavaScript (ES6), API, JWT, Git • Уровень дохода не указан | Средний (Middle) WordPress Developer • PHP, JavaScript, Git, WordPress, Адаптивная верстка, MySQL, Redis, Английский язык • от 160 000 ₽ | Средний (Middle) Fullstack разработчик (Laravel + Vue.js) • Laravel, PHP, JavaScript, Vue.js, React, Веб-разработка, jQuery, Symfony, Адаптивная верстка • от 1 600 до 2 240 $ | Средний (Middle)

⚙️ Что такое debounce и как он используется в JavaScript? Debounce — это техника оптимизации, которая позволяет контролировать, как часто функция будет вызываться при повторяющихся событиях. Это полезно для обработки событий, таких как ввод текста или изменение размера окна, чтобы уменьшить нагрузку на производительность. ➡️ Пример:

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// Использование debounce
const handleResize = debounce(() => {
  console.log('Окно изменилось!');
}, 300);

window.addEventListener('resize', handleResize);

🗣️ В этом примере обработчик событий на родительском элементе обрабатывает клики по дочерним элементам, включая добавленные динамически. Это упрощает код и повышает производительность.

🖥 Подробнее тут

👩‍💻 Signature animation Поле для ввода подписи с интересной анимацией. Сделана на SVG, CSS и JavaScript. Открыть код...

Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🔎 Подборка вакансий для джунов Laravel/Vue.js PHP разработчик (fullstack) 🟢PHP, Docker, MySQL, Vue.js, Linux, API, Git, Laravel, fullstack 🟢от 50 000 до 100 000 ₽ | Без опыта Junior React Engineer 🟢JavaScript, React, TypeScript, GitHub, HTML, CSS, HTTP, RESTful API, SQL, NoSQL 🟢Уровень дохода не указан | Без опыта HTML верстальщик (Junior) 🟢HTML, CSS, Верстка, Кроссбраузерная верстка 🟢Уровень дохода не указан | 1–3 года HTML верстальщик / Junior Frontend разработчик 🟢HTML5, CSS3, JavaScript, jQuery, Git, Кроссбраузерная верстка 🟢от 45 000 ₽ | 1–3 года Программист PHP (Junior) 🟢CSS, PHP, HTML, jQuery, JavaScript, Git, CRM, Веб-программирование 🟢от 15 000 до 40 000 ₽ | Без опыта

👩‍💻 Кнопка с "волновым" эффектом Создайте кнопку, при нажатии на которую появляется анимация "волн", расходящихся из точки клика. Ожидаемое поведение: • При нажатии на кнопку из точки клика расходится круг, который исчезает через мгновение. • Анимация должна быть плавной и не мешать повторным кликам. Решение задачи🔽

<button class="ripple-button">Нажми меня</button> .ripple-button { position: relative; overflow: hidden; padding: 10px 20px; font-size: 16px; color: white; background-color: #007BFF; border: none; border-radius: 4px; cursor: pointer; } .ripple-button .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-animation 0.6s linear; background-color: rgba(255, 255, 255, 0.6); } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } document.querySelector('.ripple-button').addEventListener('click', function (event) { const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`; ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`; ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`; ripple.className = 'ripple'; this.appendChild(ripple); ripple.addEventListener('animationend', () => ripple.remove()); });

👩‍💻 Стрелочная функция vs. обычная функция в JavaScript Статья раскрывает ключевые отличия между стрелочными и обычными функциями в JavaScript, объясняя их влияние на выполнение кода. Рассматриваются ситуации, в которых предпочтителен каждый тип функций. Читать...

Как мы делаем СУБД Pangolin? Привет! На связи команда разработки СУБД Platform V Pangolin. Мы делаем полезное сообщество для всех профессионалов из мира СУБД и всех, кому интересен наш продукт. Пишем о том, как делаем Pangolin, разбираем ваши кейсы в чате, помогаем решать рабочие задачки, зовем на бесплатные вебинары и митапы, проводим квизы про базы данных, разбираем английский сленг, а еще у нас есть вакансии и идеи для хобби айтишников... Подпишитесь, у нас как раз много нового! Подписаться #реклама 16+ О рекламодателе

👩‍💻 7 советов по очистке кода React В этой статье собраны семь практических рекомендаций, помогающих создавать чистый и поддерживаемый код React. Читать...

👩‍💻 Центрирование текста внутри блока Создайте квадратный блок фиксированного размера, внутри которого текст должен быть идеально выровнен по центру, как по вертикали, так и по горизонтали. Ожидаемое поведение: • Блок имеет фиксированные размеры: 200px на 200px. • Текст находится в центре блока. Решение задачи🔽

<div class="centered-block"> Центрированный текст </div> .centered-block { width: 200px; height: 200px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; text-align: center; border: 1px solid #ccc; }

👩‍💻 Эта информация навсегда изменит ваше отношение к коду JavaScript К концу этой статьи вы превратитесь из простого пользователя JavaScript в того, кто глубоко его понимает и кого не удивляют его уникальные возможности. Это открытие расширит ваши знания и навыки, а также позволит использовать такие "фишки" JS, которых нет в других популярных языках. Читать...

Помощь в трудоустройстве в IT-сфере! По всей России объявили бесплатную программу на шестимесячное обучение по IT-cпециальностям. Запись на участие в программе продлится до конца июля, но чтобы туда попасть, нужно пройти специальный профтест. По результату тестирования сразу узнаете, какая профессия вам подойдет, и проходите ли вы на бесплатное обучение. Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🔎 Подборка зарубежных вакансий Senior Frontend Developer 🟢JavaScript (ES5/ES6), TypeScript, React, Redux, Webpack, Docker, GitlabCI, Figma, WebSockets, Web Workers, Английский язык 🟢до 4 000 $ | 3–6 лет Front-End разработчик 🟢HTML, CSS, JavaScript, React, MySQL, Git, Ajax, jQuery, Английский язык 🟢до 2 500 $ | 3–6 лет Fullstack Developer (.Net/JS) 🟢.NET, C#, ASP.NET (Core), Entity Framework Core, Vue.js, TypeScript, DevExpress, Azure, Kubernetes, GitHub Actions, Terraform, Ansible, Microsoft SQL Server, Oracle DB, PostgreSQL, Английский язык 🟢от 2 500 до 3 250 € до вычета налогов | 3–6 лет Frontend разработчик (Angular, jQuery) 🟢JavaScript, jQuery, HTML, CSS, TypeScript, Angular 9+, HTML5 Canvas 🟢до 700 000 ₸ | 3–6 лет

⚙️ Что такое псевдоэлементы в CSS и как они используются? Псевдоэлементы в CSS — это инструменты, которые позволяют стилизовать определенные части элемента, такие как первая буква, первая строка, или добавлять контент до или после элемента. Они начинаются с :: (например, ::before или ::after) и не требуют изменения HTML-разметки. ➡️ Пример:

<p class="text">Это пример текста.</p>

<style>
  .text::before {
    content: "👉 "; /* Добавляем символ перед текстом */
    color: red;
  }

  .text::after {
    content: " ✔️"; /* Добавляем символ после текста */
    color: green;
  }
</style>

🗣️ В этом примере с помощью псевдоэлементов ::before и ::after добавляются символы перед и после текста. Это удобный способ дополнить стиль без изменения HTML.

🖥 Подробнее тут

⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции Ключевое слово exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода. Читать...

🔎 Подборка вакансий для лидов HTML-верстальщик (Team Lead) 🟢HTML, CSS, JavaScript, Photoshop 🟢от 100 000 ₽ на руки | 1–3 года Ведущий Web-дизайнер 🟢Figma, Photoshop, Illustrator, AfterEffects, HTML, CSS 🟢от 160 000 ₽ на руки | 3–6 лет Lead Frontend-разработчик 🟢HTML, CSS, JavaScript, React, Redux, Redux Saga, TypeScript, Webpack, React Native, PWA, Jest, Git 🟢от 300 000 ₽ на руки | более 6 лет