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

Станьте AI-разработчиком на Python и зарабатывайте от 150.000₽ в месяц 🔥🔥🔥 Мы научим вас создавать и тренировать нейронные сети, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тыс. ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тыс. ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате На интенсиве будет много практики: создадим 9 нейросетей за 1 вечер: 🧬 Прогноз стоимости золота 🧬 Сегментация изображения для робота доставщика 🧬 Трекинг людей на видео Ведущий интенсива - Senior AI-разработчик и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайшую среду

👩‍💻 Создание анимированного переключателя темы (светлая/тёмная) Создайте переключатель, позволяющий пользователю менять тему страницы между светлой и тёмной. При переключении должна происходить плавная анимация перехода. Реализуйте переключение тем с помощью CSS-переменных и JavaScript. ➡️ Пример: Переключатель переключает тему страницы между светлой и тёмной, изменяя цвета фона и текста. При смене темы фон плавно меняется за 0.3 секунды. Решение задачи🔽

<div class="theme-toggle"> <label class="switch"> <input type="checkbox" id="theme-switcher"> <span class="slider"></span> </label> <p>Нажмите, чтобы переключить тему</p> </div> /* Переменные для тем */ :root { --bg-color-light: #ffffff; --bg-color-dark: #333333; --text-color-light: #000000; --text-color-dark: #ffffff; --transition-duration: 0.3s; } /* Общие стили */ body { background-color: var(--bg-color-light); color: var(--text-color-light); transition: background-color var(--transition-duration), color var(--transition-duration); } /* Тёмная тема */ body.dark-theme { background-color: var(--bg-color-dark); color: var(--text-color-dark); } /* Стили для переключателя */ .theme-toggle { display: flex; align-items: center; gap: 10px; margin-top: 20px; } .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 24px; transition: background-color var(--transition-duration); } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 3px; background-color: white; border-radius: 50%; transition: transform var(--transition-duration); } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(26px); } document.getElementById('theme-switcher').addEventListener('change', (event) => { document.body.classList.toggle('dark-theme', event.target.checked); });

👩‍💻 Использование async и defer для управления скриптами В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать. Читать...

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🔎 Подборка вакансий для мидлов Frontend-разработчик Middle 🟢HTML, CSS, SCSS, JavaScript, Vue 3, Vuex, Vue-router, Vite, JSON RPC, I18n 🟢Уровень дохода не указан | не требуется Middle Frontend Developer 🟢JavaScript, TypeScript, React, Redux, Next.js, TailwindCSS 🟢Уровень дохода не указан | 1–3 года Javascript middle frontend developer 🟢JavaScript, TypeScript, Vue.js, Git, HTML, CSS 🟢от 220 000 ₽ | 3–6 лет Middle frontend-разработчик 🟢HTML, CSS, JavaScript, TypeScript, Vue.js, Nuxt.js, WebSocket, REST, GraphQL 🟢от 150 000 до 200 000 ₽ | 3–6 лет Junior+/middle frontend разработчик 🟢JavaScript, TypeScript, CSS, React 🟢до 160 000 ₽ | 1–3 года

Переходите на impulseCRM на выгодных условиях! Мы предлагаем вам максимально комфортные условия для перехода на нашу систему: ✅Беслпатный перенос вашей клиентской базы - Мы возьмем на себя всю техническую работу по переносу ваших данных - клиентов, абонементов, платежей и многого другого. ✅Бесплатное обучение для ваших сотрудников - Мы позаботимся, чтобы ваша команда быстро освоила все возможности нашей CRM. ✅Техническая поддержка - У вас всегда будет возможность получить квалифицированную помощь от наших специалистов. Переходите на impulseCRM прямо сейчас и получите максимальную выгоду! 📞 Для получения подробной информации - свяжитесь с нами и мы предложим вам все условия перехода. Узнать больше #реклама impulsecrm.ru О рекламодателе

👩‍💻 Как работает свойство object-fit в CSS? Свойство object-fit позволяет управлять масштабированием содержимого (например, изображений или видео) внутри контейнера, не искажая его соотношение сторон. Это особенно полезно при создании адаптивных и аккуратных галерей. ➡️ В этом примере изображение заполняет контейнер, сохраняя пропорции, благодаря значению cover:

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

🗣 Свойство object-fit помогает контролировать отображение изображений в контейнерах, не растягивая и не искажая их.

👩‍💻 Profile Card UI Стильная карточка-портфолио с анимированными кнопками. Сделан на Svg, SCSS и JavaScript. Открыть код...

ТОП-4 Курса по Программированию ⚡Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. ✅Хотите стать программистом, но не знаете с какого языка начать? Помогаем разобраться в самых популярных и востребованных языках программирования. Подарок в конце подборки! Выбрать #реклама 16+ tutortop.ru О рекламодателе

Введение в смарт-контракты и пример создания своего токена Бесплатный вебинар для погружения в смарт-контракты и написание на языке Solidity Время и дата проведения: 31.10.2024 в 20:00 Особенности вебинара: - Общая информация про блокчейн, смарт-контракты - Введение в смарт-контракты - Практическая часть - написание своего токена Спикер: Александр Куперман, Senior Solidity Engineer (Швейцария). Программирует более 20 лет, специалист по Solidity, блокчейн стеку. Работал в Blue Brain Project, Cleverdist, Huawei, Valory. Образование: НГТУ (Россия), UOU (Корея), RPI (США). Этот вебинар — часть курса Solidity Developer. В рамках курса вы получите знания и сможете применять их на практике под руководством опытных преподавателей. 👉 Для участия в вебинаре зарегистрируйтесь на сайте: https://otus.pw/mkVE/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🔎 Подборка вакансий для джунов Full Stack JavaScript Developer (Junior/Middle) 🟢JavaScript, Node.js, PostgreSQL, React, HTML, CSS, SQL 🟢Уровень дохода не указан | от 1 года Junior Frontend Developer 🟢JavaScript, Git, CSS, HTML, TypeScript, React, Next.js 🟢от 35 000 до 120 000 ₽ | Без опыта Junior React Разработчик 🟢HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass, TypeScript, Next.js, Docker, Webpack 🟢от 60 000 до 90 000 ₽ | 1–3 года Frontend-разработчик (junior) 🟢React, JavaScript, TypeScript, Redux, CSS, Git, Webpack, Vite 🟢от 65 000 ₽ | 1–3 года PHP-разработчик (junior/junior+) / backend / fullstack 🟢PHP 8, MySQL, MongoDB, Laravel, Vue.js, Nginx, RabbitMQ, Docker, AWS, Yandex Cloud, GitLab CI/CD 🟢от 45 000 до 90 000 ₽ | 1–3 года

👩‍💻 Адаптивная сетка карточек товаров с CSS Grid Напишите разметку и стили для отображения карточек товаров в сетке. Сетка должна адаптироваться к размеру экрана: на больших экранах отображать карточки в три колонки, на планшетах — в две, а на мобильных устройствах — в одну колонку. Карточки должны иметь тень, отступы и закруглённые углы, чтобы выглядеть как отдельные блоки. ➡️ Пример: Для экрана шириной 1024px и выше, массив товаров должен отображаться в виде трёх колонок. При меньшем размере — перестраиваться автоматически. Решение задачи🔽

<div class="product-grid"> <div class="product-card">Товар 1</div> <div class="product-card">Товар 2</div> <div class="product-card">Товар 3</div> <div class="product-card">Товар 4</div> <div class="product-card">Товар 5</div> <div class="product-card">Товар 6</div> </div> /* Основной контейнер */ .product-grid { display: grid; gap: 20px; padding: 20px; } /* Стили карточек */ .product-card { background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; } /* Три колонки на больших экранах */ @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } /* Две колонки на планшетах */ @media (min-width: 768px) and (max-width: 1023px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } /* Одна колонка на мобильных */ @media (max-width: 767px) { .product-grid { grid-template-columns: 1fr; } }

👩‍💻 Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2 Первая часть статьи даёт правила для Handlebars в Superset. Далее — готовый код HTML + CSS, который можно сразу использовать, и разбор CSS-элементов с объяснениями. Читать...

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

🔝 Самые интересные статьи за последние дни: • Family Frontend Meetup #3 • Полезные рецепты ручного создания SVG • Глассморфизм и SVG • Генеративная графика — не только ИИ • Мощь CSS-масок

👩‍💻 Создание адаптивной сетки с переменными CSS Создайте CSS-сетку, которая меняется в зависимости от размера экрана. Используйте CSS-переменные для задания отступов и ширины колонок, чтобы легко настраивать и менять их для разных разрешений экрана. ➡️ Пример: Создайте сетку с тремя колонками для больших экранов, двумя колонками для средних и одной колонкой для мобильных. Решение задачи🔽

:root { --column-gap: 20px; --row-gap: 20px; --column-count: 3; } .container { display: grid; grid-template-columns: repeat(var(--column-count), 1fr); gap: var(--row-gap) var(--column-gap); } @media (max-width: 768px) { :root { --column-count: 2; } } @media (max-width: 480px) { :root { --column-count: 1; } }

👩‍💻 Масштабируемый CSS с архитектурой ITCSS Статья рассказывает об архитектуре Inverted Triangle CSS, которая помогает масштабировать и поддерживать крупные CSS проекты. Обсуждаются причины выбора, пошаговая реализация и сравнение с другими подходами. Читать...

🔎 Подборка валютных вакансий HTML-верстальщик / Front-end разработчик 🟢PHP, jQuery, JavaScript, HTML5, CSS3 🟢от 500 до 500 $ | Без опыта Учитель FrontEnd/Scratch 🟢HTML, CSS, React, Базовый уровень, JavaScript, Figma, Tilda 🟢от 100 000 ₸ | Без опыта Frontend-разработчик 🟢ReactJs, Redux Toolkit, Typescript, Styled-components, React Router, git, Storybook 🟢от 1 200 до 2 000 $ | 3–6 лет Frontend Developer Vue.js / Senior 🟢JavaScript, VueJS, Laravel, HTML, CSS, Figma, Git, MySQL, API, Atlassian Jira, React 🟢до 3 500 $ | Более 6 лет Frontend-разработчик (React) 🟢React, RTK и RTK Query, TypeScript, соблюдение принципов DRY, KISS и SOLID, MUI, Git 🟢от 250 000 до 350 000 ₸ | 1–3 года

💡 Карьера — это не про «идеальную работу», а про опыт и умение адаптироваться В мире, где всё меняется быстрее, чем ты успеваешь обновлять резюме, держаться за одну карьерную траекторию — всё равно что пытаться угнаться за горизонтом. Умение перестраиваться, пробовать новое и брать на себя задачи, которые немного пугают, — вот что реально важно. И это не про «выйди из зоны комфорта», а про осознанный выбор расти и не цепляться за привычное. 🎯 Что делать: пообщайся с коллегой из другой области, возьми на себя один проект вне своей зоны, попробуй новый инструмент или язык, устрой «ревизию» навыков — что сейчас реально работает на тебя, а что пора обновить? Простые шаги, но каждый — ключ к росту и новым возможностям.

❓ Как быстро разобраться в Next.js 14: 5 советов опытного фронтендера Делимся пятью советами, которые помогут быстро разобраться в тонкостях работы с изображениями, переменными окружения, кэшированием и управлением компонентами в Next.js. Читать...