Code Lab
Главная
Блог
Готовые решения
Курсы
Обратная связь
Найдено в рубрике «Frontend»
Рубрики
Обучение
206
Frontend
175
Обзоры
140
Мобильная разработка
68
Backend
41
Железо
30
Сервера
26
CMS
25
Софт
25
Общее
23
GameDev
17
Инструменты сборки
16
Готовая форма обратной связи для сайта: обзор, установка и настройка SMTP
Грамотно сделанная форма обратной связи — один из самых простых и в то же время самых эффективных инструментов коммуникации на сайте.
Новые стандарты CSS 2025: nesting, container queries и scoped-стили
CSS в 2025 году переживает крупнейшее обновление со времён появления Flexbox и CSS Grid. Язык стал гораздо мощнее, гибче и ближе к компонентной разработке.
React уже не №1? Обзор современных фреймворков: Solid, Qwik, Svelte 5
В течение почти десяти лет React был фактическим стандартом веб-разработки. Его использовали повсюду: от небольших стартапов до крупнейших корпораций. Любой новый разработчик начинал путь именно с него, а любые альтернативы казались экспериментами для энтузиастов.
Кредитный калькулятор с диаграммой на JavaScript
Этот кредитный калькулятор — готовый визуальный модуль, который можно вставить на любой сайт. Он рассчитывает ежемесячный платеж, переплату, общую сумму выплат и показывает структуру кредита на диаграмме.
Что на самом деле делает фронтенд: путь данных от сервера до вашего экрана
Фронтенд обычно представляют как «кнопки» и «красивые интерфейсы». Но это очень поверхностное понимание. На самом деле фронтенд — это слой приложения, который работает между пользователем и сервером, управляет данными, обновляет экран без перезагрузки и обеспечивает взаимодействие с системой.
Как строить переиспользуемые фронтенд-компоненты: пример кнопки лайк
Когда проект становится больше, неизбежно появляется вопрос: как писать интерфейс так, чтобы потом не переписывать одно и то же десятки раз?
Интерактивный HTML с Alpine.js на простых примерах
Большие фронтенд-фреймворки часто требуют сложной настройки: сборщики, роутинг, состояния, хуки, конфигурации. Но для небольших задач вроде выпадающих меню, модалок или табов этого слишком много — иногда хочется просто взять HTML и быстро добавить в него немного интерактивности.
Что должен знать фронтенд-разработчик: база для успешного старта
Junior‑позиции больше не про «сверстать лендинг». От джуна ждут уверенной базы по веб‑платформе, умения читать документацию, пользоваться инструментами разработчика и показывать это на практике — в резюме, пет‑проектах и на собеседовании.
Курс по Tailwind CSS: Container query #8
Раньше адаптивность вёрстки строилась только на медиазапросах (@media) и брейкпоинтах (sm:, md:, lg:). Но у этого подхода есть ограничение: стили меняются в зависимости от ширины экрана, а не от ширины самого блока.
Курс по Tailwind CSS: Grid-сетки #7
В прошлой статье мы разобрали flexbox. Он отлично подходит для выравнивания и простых макетов: меню, хедеры, блоки в строку. Но если нужно выстроить настоящую сетку карточек или галерею — удобнее использовать Grid.
Курс по Tailwind CSS: Flexbox #6
Flexbox — мощный инструмент для построения макетов. Он упрощает управление расположением элементов по горизонтали и вертикали. В Tailwind всё это сводится к простым утилитам, которые легко комбинировать и читать прямо в разметке.
Курс по Tailwind CSS: Цвета и шрифты #4
В прошлой статье мы разобрали базовые утилиты. Теперь углубимся в работу с цветами и шрифтами. В Tailwind CSS v4 эти возможности стали ещё удобнее: библиотека поддерживает современную цветовую модель OKLCH, P3-палитры, а также предоставляет новый способ расширять тему с помощью @theme.
Курс по Tailwind CSS: Первые шаги с утилитами #3
В прошлой статье мы настроили окружение и убедились, что Tailwind работает. Теперь подробнее разберём самые часто используемые утилиты: отступы, цвета, текст и адаптивность.
Курс по Tailwind CSS: Установка #2
Tailwind CSS — это современный CSS-фреймворк, который позволяет быстро и удобно стилизовать сайты, не тратя время на написание «с нуля» длинных стилей.
Курс по Tailwind CSS: Введение #1
Tailwind CSS — это utility-first фреймворк: вы собираете интерфейс из маленьких утилит прямо в разметке, не переключаясь между HTML и длинными кастомными стилями.
Как зарабатывать на создании сайтов на Tilda в 2025 году
Tilda остаётся одной из самых удобных и «быстрых» платформ для запуска сайтов малого бизнеса, лендингов, блогов и небольших интернет-магазинов. В 2025 году экосистема Tilda включает визуальный редактор, Zero Block для свободной вёрстки, собственную CRM, блог Feeds, Members Area для закрытых разделов/курсов, экспорт кода и даже встроенного AI-помощника.
Быстрый старт в Bootstrap 5: Формы и валидация #5
Bootstrap предлагает продуманные стили для форм, а также стандартный подход к валидации. При оформлении формы важно не только «красиво» сделать поля, но и обеспечить доступность (доступ) для всех пользователей.
Быстрый старт в Bootstrap 5: Утилиты и кастомизация #4
Bootstrap предлагает обширный набор утилит-классов для быстрой стилизации без написания CSS. Это классы для отступов, цветов, теней, обтекания и прочего. Рассмотрим ключевые из них.
Быстрый старт в Bootstrap 5: Компоненты интерфейса #3
Bootstrap содержит множество готовых компонентов, которые можно быстро встраивать в интерфейс. Рассмотрим некоторые из них. Кнопки (Buttons) Класс .btn служит основой для кнопок Bootstrap: он задаёт базовые отступы и выравнивание текста.
Быстрый старт в Bootstrap 5: Сетка и адаптивная верстка #2
Bootstrap кажется простым, пока не доходишь до адаптивности — и именно здесь всё начинает складываться в единую систему. Чтобы верстка выглядела аккуратно на любом устройстве, важно понимать три ключевые вещи: точки останова, контейнеры и сетку.
Загрузить ещё
