Создаем галерею-сетку со слайдером: HTML, CSS и JavaScript

#почитать

В этом проекте мы реализуем красивую галерею на примере направлений путешествий для турагентства. Карточки располагаются в сетке, при клике открывается модальное окно со слайдером. Всё работает на чистом JavaScript, без сторонних библиотек.

⏱Читать статью

Библиотеки JavaScript для создания фотогалереи

#почитать

Веб-разработчики часто сталкиваются с задачей создания фотогалерей для сайтов. Хорошая галерея не только облегчает пользователям просмотр изображений, но и делает сайт более привлекательным и удобным. В этой статье рассмотрим несколько популярных библиотек для создания фотогалерей на JavaScript, которые помогут вам быстро и эффективно решить эту задачу.

⏱Читать статью

🪐 Новые вакансии фронтендеров


🚀 Lead Frontend Developer (с функциями системного аналитика) в Senior Soft, до 290 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/lead-frontend-developer-s-funkciyami-sistemnogo-analitika-senior-soft-3dc5daf0

🚀 Frontend-разработчик в Human Help, до 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-human-help-b324db4a

🚀 React Frontend Developer в Ziphy, до 390 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/react-frontend-developer-ziphy-6e7ee0e9

🚀 Angular-разработчик в ИП, 285 000 - 335 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/angular-razrabotchik-nda-cc42d977

🚀 HTML-верстальщик в NDA (веб), 50 000 - 60 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/html-verstalshik-nda-veb-228edc88

🚀 Fullstack-разработчик в DataNest, 200 000 - 280 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/fullstack-razrabotchik-datanest-7c4cf183

🚀 Разработчик (PHP/Symfony/Angular/Node.js) в Core12, 150 000 - 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/razrabotchik-phpsymfonyangularnodejs-core12-e074ee3d

🚀 Дизайнер интерфейсов в Vondo, до 120 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/dizajner-interfejsov-vondo-04cca7d0

🚀 Fullstack PHP JS в IT-компания (Сколково), 250 000 - 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/fullstack-php-js-it-kompaniya-7830d561

🚀 Frontend Developer в Infomediji, 380 000 - 570 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-developer-infomediji-9d262255

🚀 UI Lead Designer в NDA (продуктовый стартап на Кипре), oт 380 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/ui-lead-designer-nda-produktovyj-startap-na-kipre-79327b83

🚀 Frontend-разработчик в HR-tech проект, 300 000 - 400 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-hr-tech-proekt-867f27bb

🚀 React-разработчик (контракт), oт 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/react-razrabotchik-proekt-0b417d4e

🚀 AI-Native Fullstack Developer (React Native) в Unimatch Lab, oт 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/ai-native-fullstack-developer-react-native-unimatch-lab-faa3acf2


Больше вакансий frontend здесь ⤵️
https://jobrocket.ru/?categories=frontend

CSS font-palette: управление цветами шрифтов

#почитать

Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.

⏱Читать статью

Функции в JavaScript: полное руководство для начинающих

#почитать

Функции в JavaScript — это блоки кода, которые выполняют определённую задачу и могут быть вызваны многократно. Они помогают структурировать программу, делая код чище и удобнее для поддержки. В этой статье мы разберём, как создавать функции, какие их виды существуют, и как использовать параметры, возвращаемые значения и другие возможности. Всё с примерами, чтобы вы могли сразу начать применять знания!

⏱Читать статью

Как работает единица измерения em в CSS

#почитать

Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.

⏱Читать статью

Веб-разработка на ванильном HTML, CSS и JavaScript: стилизация и сайты

#почитать

Современные веб-приложения построены на основе богатого инструментария работы с CSS, связанного со множеством пакетов NPM и этапов сборки. Ванильное же веб-приложение может выбрать более легковесный путь, отказавшись от современных методик с предварительно обработанным CSS и выбрав нативные для браузеров стратегии.

⏱Читать статью

Округление в CSS с функцией round()

#почитать

Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

⏱Читать статью

Псевдоклассы валидации форм: делаем интерфейсы понятнее

#почитать

Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.

Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.

⏱Читать статью

focus-visible

#почитать

Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.

⏱Читать статью

Как использовать cause для более понятной обработки ошибок в JavaScript

#почитать

Новое свойство cause в объекте error позволяет узнать исходную причину сбоя и облегчить отладку, особенно при повторении ошибок. Оно помогает выстроить цепочку событий и лучше понимать, где возникла проблема.

⏱Читать статью

Vue.js на практике: классический Todolist с сохранением состояния

#почитать

Todolist — это не просто «список задач», а идеальный проект для освоения основ любого фронтенд-фреймворка. Сегодня мы сделаем именно такой проект на Vue 3, используя Vite, Pinia для управления состоянием и SCSS для стилей. И всё это с сохранением задач в localStorage. Это будет полноценное одностраничное приложение, которое не стыдно положить в портфолио.

⏱Читать статью

Переключение на элемент iframe на примере видеоплеера

#почитать

Итак, в прошлый раз мы рассмотрели, как можно без особых проблем выкатить рабочую страницу на GitHub Pages и попробовать встроить в эту страницу, например, плеер и убедиться, что он работает.
Логично предположить, что следующими этапами будут взаимодействие со встроенными элементами iframe и автоматизация проверок с такими элементами на созданной нами странице.
Для начала давайте немного пройдемся по базе.

⏱Читать статью

Как работает navigator.credentials: API для входа без пароля

#почитать

navigator.credentials — это интерфейс Web Authentication API, который позволяет браузеру управлять учётными данными пользователя. С его помощью можно безопасно получать, сохранять и автоматически подставлять данные для входа: пароли, токены или ключи. Это делает процесс аутентификации проще и безопаснее — особенно на сайтах, где важен пользовательский опыт и скорость входа.

⏱Читать статью

Подборка библиотек для создания слайдеров на JavaScript в 2025 году

#почитать

Слайдеры – это один из самых популярных UI-элементов, который часто используется в веб-разработке. Будь то карусель изображений, отзывы пользователей или список товаров, хороший слайдер делает сайт динамичным и удобным.
В 2025 году JavaScript библиотеки продолжают развиваться, и выбор инструментов для создания слайдеров стал еще шире. Давайте разберем самые интересные библиотеки, которые помогут вам легко и быстро добавить слайдер на ваш сайт.

⏱Читать статью

Справочник по новым математическим функциям CSS

#почитать

За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.

⏱Читать статью

CSS трансформации и матрица

#почитать

Глубокое погружение в матрицу CSS трансформаций, её взаимосвязь с отдельными свойствами CSS трансформаций, взгляд на скрытые возможности форм функций.

⏱Читать статью

Гидратация в React 19: новые подходы и секреты оптимизации

#почитать

До выхода React 19 процесс гидратации был далеко не идеален: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности мешали разработчикам создавать быстрые и отзывчивые приложения. В React 19 были введены важные улучшения, которые значительно повышают эффективность гидратации и снижают время загрузки страниц. Разбираем новые подходы на практических примерах.

⏱Читать статью

Всё самое важное о псевдоклассе :default

#почитать

Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.

⏱Читать статью

Как сделать первую букву абзаца большой — буквица через ::first-letter

#почитать

Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.

Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.

⏱Читать статью