Статьи по тегу «верстка»

3 месяца назад

Roadmap верстальщика сайтов в 2024 году

В 2024 году верстка сайтов — это не просто про HTML и CSS. Это уже целое ремесло, которое требует понимания современных инструментов, доступности, адаптивности и производительности.

Frontend 229

1 год назад

Курс по React: основы JSX

JSX — это мощный инструмент в React, который позволяет вам создавать ваши пользовательские интерфейсы в стиле HTML, но с возможностью интегрировать JavaScript.

Frontend 849

2 года назад

Обзор популярных библиотек для верстки сайтов

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

Frontend 983

2 года назад

Создаем корзину товаров на JavaScript

Корзина товаров — один из самых главных компонентов любого интернет-магазина. Корзина показывает все выбранные товары в одном месте, считает скидку и общую стоимость заказа.

Frontend 30 016

2 года назад

Руководство по форматам изображений для WEB

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

Frontend 617

2 года назад

Простая сборка Gulp для верстки сайта.

Пример простой настройки Gulp для макета сайта с комментариями. В этом примере мы определили три задачи: стили, скрипты и изображения. Задача стилей компилирует Sass в CSS, добавляет префиксы поставщиков, минимизирует CSS и объединяет выходные данные в один файл.

Инструменты сборки 1 393

2 года назад

Настраиваем Gulp для верстки: создание и оптимизация ресурсов

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

Инструменты сборки 2 094

2 года назад

UI-компоненты. Ползунок диапазона

Ползунок диапазона позволяет выбрать между минимальным и максимальным значением. Данный элемент повышает интерактивность на сайте. Браузерные ползунки зачастую не подходят, поэтому мы сделаем свой кастомный ползунок.

Frontend 1 165

2 года назад

UI-компоненты. Кастомные радиокнопки на CSS

Радиокнопки используются для выбора одного из множества значений. Если текст радиокнопки короткий, то уместно использовать переключатель. Такой вариант мы реализуем в этой статье с использованием чистого CSS.

Frontend 658

2 года назад

UI-компоненты. Кастомные чекбоксы на CSS

Чекбокс используется для выбора двух состояний у одного параметра. Он может использоваться для выбора элементов списка, например, для выбора нескольких документов, или для активации уведомлений и выбора конкретных ситуаций, в которых их следует отправлять.

Frontend 1 125

2 года назад

UI-компоненты. Переключатель на CSS

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

Frontend 1 322

2 года назад

Как сделать фон градиентом в CSS

Вы ищете способ добавить немного цвета на свой сайт? С помощью всего нескольких строк CSS вы можете создать красивые градиентные фоны, которые выделят ваш сайт среди других.

Frontend 2 001

2 года назад

Создаем карточки товаров на HTML и CSS

Карточки с товарами — неотъемлемая часть любого интернет-магазина. Они позволяют в удобном виде презентовать товары или услуги потенциальному клиенту. В этой статье мы сделаем верстку карточек товаров, выведем их в сетку, а также адаптируем сетку под мобильные устройства.

Frontend 57 233

2 года назад

Лучшие плагины VS Code для верстки сайтов

За последние несколько лет Visual Studio Code стал одним из самых популярных редакторов кода. Он легкий и быстрый, и у него огромная экосистема расширений, которые могут добавить всевозможные функциональные возможности.

Софт 3 965

2 года назад

Полезные библиотеки и плагины для ускорения верстки

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

Frontend 818

2 года назад

Верстка сайтов для начинающих

При создании веб-сайта одним из наиболее важных аспектов является макет. Макет — это то, как организован ваш сайт и как посетители будут перемещаться по нему.

Frontend 707

2 года назад

Верстка форм авторизации и регистрации по макету Figma

Рассмотрим, как сверстать две формы: одну для авторизации, вторую для регистрации пользователя. Данные формы вы можете адаптировать под себя: дизайн у них довольно простой, так же как сам код.

Frontend 6 511

3 года назад

Фиксированное боковое меню на чистом CSS

В этой статье создадим простое боковое меню с логотипом. Каждый элемент меню имеет свою иконку. При наведении элемент меню выделяется. Делать боковое меню будет на чистом CSS.

Frontend 6 764

3 года назад

Форма обратной связи: пишем основу на HTML и CSS

В этой статье напишем форму обратной связи на HTML и CSS. Данная форма будет включать в себя две колонки: в первой отображается информация о вашей компании, во второй находятся поля для ввода и кнопка «Отправить».

Frontend 25 160

3 года назад

Простое бургер-меню на чистом JavaScript

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

Frontend 38 866