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

📈 Подборка статей для вашей карьеры • В какой момент профессия программиста свернула не туда? • Офис Intel в Израиле отменил бесплатный кофе • Войти в IT – в 37 и с дипломом филфака • Путь к мастерству: Как стать успешным разработчиком • Галера от HH или джуны по-дешевке

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка для вас и 3-х ваших близких 30 дней бесплатно. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте сейчас❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

📝 Подборка вакансий для сеньоров Middle+/Senior Frontend developer (СберНПФ) • Angular, TypeScript, JavaScript, Node.js, PostgreSQL, Apache Kafka, REST • Уровень дохода не указан | от 3 лет опыта Frontend-разработчик Angular (middle+/senior) • Angular, JavaScript, HTTP, REST API, Agile, CI/CD, NGINX, Unit-тестирование • Уровень дохода не указан | от 3 лет опыта Fullstack Typescript Developer [Senior] • TypeScript, Node.js, React, SQL, Kubernetes, Docker • Уровень дохода не указан | от 4 лет опыта

👩‍💻 Scroll-Driven Dock Настраиваемая панель инструментов. Сделана на SVG, CSS и JavaScript. Открыть код...

Научим детей программировать игры на С++. Бесплатно! Мастер-класс для школьников 6-11 классов! За 1.5 часа ребёнок с нуля создаст свою первую компьютерную игру и сможет использовать полученные знания в дальнейшем! Педагоги Университета Иннополис покажут Вашему ребёнку, как можно с пользой проводить время за компьютером и как хобби в виде разработки приложений или игр может стать будущей профессией или интересной подработкой уже в школе. Регистрируйтесь на бесплатный мастер-класс. Количество мест ограничено. Не упустите шанс подарить ребенку уникальные знания от самых лучших педагогов ведущего ИТ-ВУЗа страны! Зарегистрироваться #реклама 16+ progmatica.innopolis.university О рекламодателе

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

Новые бесплатные курсы в канале Selectel Newsfeed. Подойдут всем: от новичков до продвинутых айтишников. Вас ждут обзоры, инструкции и статьи, которые помогут разобраться в темах структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel. Подписаться #реклама 16+ О рекламодателе

👩‍💻 Адаптивная сетка карточек товаров с 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 О рекламодателе

📝 Подборка вакансий для мидлов Frontend Developer (Видеоплеер) • JavaScript, TypeScript, HTML, CSS, React, Webpack, Rollup, HLS, MPEG-DASH • Уровень дохода не указан | Требуемый опыт: от 1 года Frontend developer (Vue.js) • Vue.js, Nuxt.js, JavaScript, CSS, HTML, Webpack, Vite, Git • от 200 000 до 300 000 ₽ | Требуемый опыт: от 3 лет Frontend разработчик middle/middle+ • JavaScript, TypeScript, React, Node.js, REST API, Webpack, Gulp, CSS-препроцессоры, Git • Уровень дохода не указан | Требуемый опыт: от 3 лет

👩‍💻 В чем разница между em и rem в CSS? В CSS em и rem — это относительные единицы измерения, используемые для задания размеров шрифтов, отступов, полей и других стилей. em основывается на размере шрифта родителя, тогда как rem ориентирован на размер шрифта корневого элемента (html), что делает его предсказуемым и удобным для масштабирования. ➡️ Пример:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  font-size: 2em; /* 32px, основывается на размере родителя */
  margin: 1rem;   /* 16px, независимо от родителя */
}

🗣️ Использование rem помогает сохранить консистентность размеров при вложенных элементах, а em подходит для адаптивного дизайна, когда размеры зависят от родителей.

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

👩‍💻 Rollback Toggle Переключатель с имитацией физики. Сделан на SCSS и TypeScript. Открыть код...

🔎 Подборка вакансий для джунов JavaScript Software Engineer 🟢JavaScript, Node.js, SQL, Git, HTML, CSS, GraphQL, REST API, gRPC/Protobufs 🟢от 1 000 до 3 000 $ на руки | 3–6 лет опыта Fullstack программист-разработчик WEB-приложений (NodeJS, React, PostgreSQL) 🟢JavaScript, Node.js, React, PostgreSQL, HTML, CSS, Express.js, SQL 🟢от 70 000 до 120 000 ₽ на руки | 1–3 года опыта JavaScript-разработчик в ФинТех проект 🟢JavaScript, Angular, REST API, HTTP, Git, HTML, CSS 🟢от 150 000 ₽ на руки | 1–3 года опыта

👩‍💻 Создание анимированного переключателя темы (светлая/тёмная) Создайте переключатель, позволяющий пользователю менять тему страницы между светлой и тёмной. При переключении должна происходить плавная анимация перехода. Реализуйте переключение тем с помощью 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); });

👨‍💻 В телеграме появился новый канал по Фронтенду Всё что нужно для Frontend-разработчика теперь в одном месте: обучающие видео, статьи, онлайн сервисы, шпаргалки и многое другое... ➡️ Перейти в канал "Фронтенд заметки"

🔝 Самые интересные статьи за последние дни: • Знакомьтесь: input, output и model. Новые функции в Angular • Мой путь в мире веб-рендеринга: от статических страниц к гибридным архитектурам • Новый этап эволюции Vue — Vapor • Как сделать один плагин сразу для всех сборщиков фронтенда? • Личный опыт: добавление микроразметки на сайт

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

<div class="card"> <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-img"> <div class="card-text">Текст внизу карточки</div> </div> .card { width: 200px; height: 300px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .card-img { width: 100%; height: auto; max-height: 70%; /* Ограничиваем высоту изображения */ } .card-text { padding: 10px; background-color: #f9f9f9; text-align: center; }

👩‍💻 Ошибки при работе с tailwindcss Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения. Читать...

🔎 Подборка зарубежных вакансий Senior Frontend Developer (Team Lead) 🟢TypeScript, React, Redux Toolkit, Amazon IVS Broadcast SDK, hls.js, WebSocket, Formik, Yup, CSS (Sass/Scss), Swagger, Postman 🟢Уровень дохода не указан | 3–6 лет опыта PHP Developer 🟢PHP, Symfony, Laravel, SQL (MS SQL, MySQL), Git, JavaScript, HTML, CSS, AJAX, Unit Testing 🟢Уровень дохода не указан | 3–6 лет опыта PixiJS Frontend Developer 🟢PixiJS, JavaScript, Git, Unit Testing, API Integration, Game UI Development 🟢Уровень дохода не указан | 1–3 года опыта