Code Lab
Главная
Блог
Готовые решения
Курсы
Обратная связь
Найдено в рубрике «Frontend»
Рубрики
Обучение
206
Frontend
175
Обзоры
140
Мобильная разработка
68
Backend
41
Железо
30
Сервера
26
CMS
25
Софт
25
Общее
23
GameDev
17
Инструменты сборки
16
Быстрый старт в Bootstrap 5: Установка, структура, первые шаги #1
Bootstrap — это популярный и удобный набор инструментов, который помогает быстро делать красивые, адаптивные сайты. Он уже содержит огромное количество готовых стилей, компонентов и утилит, поэтому многие задачи решаются буквально несколькими классами в HTML.
Быстрый старт в Next.js: Как работает рендеринг #2
Когда вы создаёте страницу в Next.js, вы должны понять: где она будет рендериться — на сервере, на клиенте или заранее при сборке.
Быстрый старт в Next.js: Создание маршрутов и страниц #1
React — это мощный инструмент для создания пользовательских интерфейсов. Однако он предоставляет только "видимую часть айсберга": сам React не решает задачи маршрутизации, рендеринга на сервере, работы с данными или оптимизации загрузки.
Как сделать галерею-карусель со слайдером на OwlCarousel2 и FancyBox
Этот слайдер — полностью готовый, аккуратно сверстанный и адаптивный модуль галереи, который можно вставить на любую страницу сайта. Он построен на базе OwlCarousel 2, использует Fancybox для полноэкранного просмотра изображений и поддерживает все современные устройства: от широких мониторов 4K до смартфонов.
Vue.js на практике: классический Todolist с сохранением состояния
Todolist — это не просто «список задач», а идеальный проект для освоения основ любого фронтенд-фреймворка. Сегодня мы сделаем именно такой проект на Vue 3, используя Vite, Pinia для управления состоянием и SCSS для стилей.
Создаем галерею-сетку со слайдером на OwlCarousel и Fancybox
Эта галерея состоит из сетки карточек и модального окна, которое открывается по клику. Внутри попапа можно листать изображения стрелками. Чтобы адаптировать галерею под свой сайт, нужно изменить всего несколько участков кода.
Библиотеки JavaScript для создания фотогалереи
Веб-разработчики часто сталкиваются с задачей создания фотогалерей для сайтов. Хорошая галерея не только облегчает пользователям просмотр изображений, но и делает сайт более привлекательным и удобным.
Библиотеки JavaScript для всплывающих окон: обзор лучших решений
Всплывающие окна (popups, модальные окна) — важный инструмент в веб-разработке. Они помогают отображать уведомления, формы, изображения и другие элементы без перезагрузки страницы.
Библиотеки JavaScript для работы с таблицами: обзор лучших решений
Таблицы в веб-разработке — вещь незаменимая. Они помогают удобно структурировать данные, будь то финансовые отчёты, списки товаров или статистика пользователей. Но просто сверстать таблицу — половина дела, ведь часто нужно добавить сортировку, фильтрацию, редактирование и другие функции.
Создаем полноэкранный слайдер с помощью Swiper.js
Swiper.js — один из самых мощных и гибких инструментов для создания слайдеров. Он легкий, адаптивный и поддерживает массу функций, включая кастомные анимации, ленивая загрузка изображений и гибкую настройку управления.
Подборка библиотек для создания слайдеров на JavaScript в 2025 году
Слайдеры – это один из самых популярных UI-элементов, который часто используется в веб-разработке. Будь то карусель изображений, отзывы пользователей или список товаров, хороший слайдер делает сайт динамичным и удобным.
Простой интернет-магазин на HTML, CSS, JS с отправкой данных на почту
В этой статье я покажу вам, как создать минималистичный интернет-магазин с базовыми функциональными элементами, такими как карточки товаров, корзина на JavaScript и отправка данных с заказами на почту.
Подробное руководство по Vite
Если вы разработчик, который хоть раз сталкивался с веб-проектами, вы наверняка знаете, что сборка фронтенда может быть настоящим кошмаром. Долгие минуты (иногда часы) на сборку, настройки, конфигурации, которые выглядят как древняя магия, и общая тяжесть инструментов, таких как Webpack.
Подробное руководство по Pinia
Если вы работаете с Vue 3, скорее всего, вы уже слышали о Pinia — современном, легком и мощном инструменте для управления состоянием.
Курс по React 2025: Деплой приложения #15
Вы создали React-приложение, добавили в него крутые функции, и теперь готовы показать его миру. Но как сделать так, чтобы ваше приложение заработало в интернете?
Курс по React 2025: Управление глобальным состоянием #14
В React-компонентах легко управлять локальным состоянием с помощью useState или useReducer. Но что, если нам нужно делиться состоянием между несколькими компонентами, часто находящимися в разных частях дерева?
Курс по React 2025: Оптимизация производительности #13
Ваше React-приложение работает, но со временем становится медленным: при обновлении состояния компоненты рендерятся чаще, чем нужно. Это происходит, потому что React заботится об актуальности интерфейса, но не всегда понимает, когда можно избежать лишней работы.
Курс по React 2025: Работа с API #12
Почти каждое приложение взаимодействует с сервером: загрузка данных пользователей, отправка сообщений, получение списка товаров. Всё это делается через запросы к API.
Курс по React 2025: Маршрутизация в приложении #11
Создание современного веб-приложения невозможно представить без навигации. Как пользователь попадёт с главной страницы на страницу "О нас"? Как переключаться между страницами, не перезагружая сайт?
Курс по React 2025: Формы #10
Формы — это сердце любого приложения, где пользователь взаимодействует с интерфейсом: регистрация, логин, отправка комментариев или фильтрация товаров. Но работа с формами в React немного отличается от традиционного подхода в HTML, и сегодня мы разберёмся, как это устроено.
Загрузить ещё
