Статьи на тему «Frontend»

 

Иконка Рубрики
4 недели назад

Как строить переиспользуемые фронтенд-компоненты: пример кнопки лайк

Когда проект становится больше, неизбежно появляется вопрос: как писать интерфейс так, чтобы потом не переписывать одно и то же десятки раз?
Frontend 146
1 месяц назад

Интерактивный HTML с Alpine.js на простых примерах

Большие фронтенд-фреймворки часто требуют сложной настройки: сборщики, роутинг, состояния, хуки, конфигурации. Но для небольших задач вроде выпадающих меню, модалок или табов этого слишком много — иногда хочется просто взять HTML и быстро добавить в него немного интерактивности.
Frontend 433
2 месяца назад

Что должен знать фронтенд-разработчик: база для успешного старта

Junior‑позиции больше не про «сверстать лендинг». От джуна ждут уверенной базы по веб‑платформе, умения читать документацию, пользоваться инструментами разработчика и показывать это на практике — в резюме, пет‑проектах и на собеседовании.
Frontend 461
2 месяца назад

Курс по Tailwind CSS: Container query #8

Раньше адаптивность вёрстки строилась только на медиазапросах (@media) и брейкпоинтах (sm:, md:, lg:). Но у этого подхода есть ограничение: стили меняются в зависимости от ширины экрана, а не от ширины самого блока.
Frontend 167
2 месяца назад

Курс по Tailwind CSS: Grid-сетки #7

В прошлой статье мы разобрали flexbox. Он отлично подходит для выравнивания и простых макетов: меню, хедеры, блоки в строку. Но если нужно выстроить настоящую сетку карточек или галерею — удобнее использовать Grid.
Frontend 447
2 месяца назад

Курс по Tailwind CSS: Flexbox #6

Flexbox — мощный инструмент для построения макетов. Он упрощает управление расположением элементов по горизонтали и вертикали. В Tailwind всё это сводится к простым утилитам, которые легко комбинировать и читать прямо в разметке.
Frontend 468
2 месяца назад

Курс по Tailwind CSS: Цвета и шрифты #4

В прошлой статье мы разобрали базовые утилиты. Теперь углубимся в работу с цветами и шрифтами. В Tailwind CSS v4 эти возможности стали ещё удобнее: библиотека поддерживает современную цветовую модель OKLCH, P3-палитры, а также предоставляет новый способ расширять тему с помощью @theme.
Frontend 501
2 месяца назад

Курс по Tailwind CSS: Первые шаги с утилитами #3

В прошлой статье мы настроили окружение и убедились, что Tailwind работает. Теперь подробнее разберём самые часто используемые утилиты: отступы, цвета, текст и адаптивность.
Frontend 479
2 месяца назад

Курс по Tailwind CSS: Установка #2

Tailwind CSS — это современный CSS-фреймворк, который позволяет быстро и удобно стилизовать сайты, не тратя время на написание «с нуля» длинных стилей.
Frontend 474
2 месяца назад

Курс по Tailwind CSS: Введение #1

Tailwind CSS — это utility-first фреймворк: вы собираете интерфейс из маленьких утилит прямо в разметке, не переключаясь между HTML и длинными кастомными стилями.
Frontend 511
2 месяца назад

Как зарабатывать на создании сайтов на Tilda в 2025 году

Tilda остаётся одной из самых удобных и «быстрых» платформ для запуска сайтов малого бизнеса, лендингов, блогов и небольших интернет-магазинов. В 2025 году экосистема Tilda включает визуальный редактор, Zero Block для свободной вёрстки, собственную CRM, блог Feeds, Members Area для закрытых разделов/курсов, экспорт кода и даже встроенного AI-помощника.
Frontend 548
6 месяцев назад

Быстрый старт в Bootstrap 5: Формы и валидация #5

Bootstrap предлагает продуманные стили для форм, а также стандартный подход к валидации. При оформлении формы важно не только «красиво» сделать поля, но и обеспечить доступность (доступ) для всех пользователей.
Frontend 1 133
6 месяцев назад

Быстрый старт в Bootstrap 5: Утилиты и кастомизация #4

Bootstrap предлагает обширный набор утилит-классов для быстрой стилизации без написания CSS. Это классы для отступов, цветов, теней, обтекания и прочего. Рассмотрим ключевые из них.
Frontend 1 000
6 месяцев назад

Быстрый старт в Bootstrap 5: Компоненты интерфейса #3

Bootstrap содержит множество готовых компонентов, которые можно быстро встраивать в интерфейс. Рассмотрим некоторые из них. Кнопки (Buttons) Класс .btn служит основой для кнопок Bootstrap: он задаёт базовые отступы и выравнивание текста.
Frontend 900
6 месяцев назад

Быстрый старт в Bootstrap 5: Сетка и адаптивная верстка #2

Одним из ключевых механизмов Bootstrap является сетка (Grid) – система на основе Flexbox, позволяющая легко строить адаптивные раскладки. Сетка разбивает страницу на 12 колонок по горизонтали и адаптируется под шесть основных «точек перелома» (размеров экранов) – от самых маленьких до очень больших.
Frontend 965
6 месяцев назад

Быстрый старт в Bootstrap 5: Установка, структура, первые шаги #1

Bootstrap – это бесплатный и открытый фреймворк для адаптивной верстки (mobile-first), который предоставляет готовые HTML, CSS и JavaScript шаблоны для типографики, форм, кнопок, навигации и других элементов интерфейса.
Frontend 1 005
6 месяцев назад

Быстрый старт в Next.js: Как работает рендеринг #2

Когда вы создаёте страницу в Next.js, вы должны понять: где она будет рендериться — на сервере, на клиенте или заранее при сборке.
Frontend 731
6 месяцев назад

Быстрый старт в Next.js: Создание маршрутов и страниц #1

React — это мощный инструмент для создания пользовательских интерфейсов. Однако он предоставляет только "видимую часть айсберга": сам React не решает задачи маршрутизации, рендеринга на сервере, работы с данными или оптимизации загрузки.
Frontend 1 138
7 месяцев назад

Как сделать галерею-карусель со слайдером на OwlCarousel2 и FancyBox

Галерея-карусель со слайдером — это удобный способ показать изображения на сайте с возможностью листания и полноэкранного просмотра. В этом руководстве мы создадим такой компонент с помощью библиотек OwlCarousel2 и FancyBox.
Frontend 1 179
7 месяцев назад

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

Todolist — это не просто «список задач», а идеальный проект для освоения основ любого фронтенд-фреймворка. Сегодня мы сделаем именно такой проект на Vue 3, используя Vite, Pinia для управления состоянием и SCSS для стилей.
Frontend 1 272