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

 

Иконка Рубрики
2 года назад

Создаем модальное окно для сайта

Модальное окно — это всплывающее окно, которое появляется поверх основного окна. Обычно оно используется для отображения дополнительной информации или для того, чтобы попросить пользователя подтвердить действие.
Frontend 3 832
3 года назад

Создаем слайдер карусель для сайта

Карусельный слайдер — это тип слайдера, который позволяет пользователям прокручивать серию изображений или другой контент. Карусельные слайдеры обычно имеют элементы управления навигацией со стрелками или точками, которые позволяют пользователю прокручивать содержимое.
Frontend 12 273
3 года назад

Делаем кнопку наверх на JavaScript

При скролле страницы на сайте часто возникает потребность вернутся наверх. Например, в контентных сайтах при прочтении статьи необходимо вернуться обратно в меню.
Frontend 6 779
3 года назад

Маска для ввода телефона на JavaScript

Маска телефонного номера — это строка символов, которая используется для представления реального телефонного номера. Маска используется для того, чтобы облегчить пользователям ввод номера телефона в поле формы.
Frontend 18 111
3 года назад

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

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

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

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

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

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

Пишем темную тему для сайта

В этом уроке мы напишем скрипт на JS для переключения на темную и светлую тему. Мы будем использовать localStorage для сохранения данных о текущей темы, чтобы при перезагрузке страницы и выходе из браузера наша тема не «слетала».
Frontend 1 834
3 года назад

Анимированные табы

В данном уроке мы создадим стильные табы на JS. Сделаем их на чистом JS и CSS, без использования библиотек. В процессе вы поймете как сделать табы, сможете стилизовать их под свои требования.
Frontend 1 863
3 года назад

Адаптивная галерея для сайта

Рассмотрим создание полноразмерной галереи для сайта. В первой части напишем адаптивную сетку на CSS и выведем все фотографии в виде плитки.
Frontend 4 295
3 года назад

Руководство для начинающих по Sass

В этой статье вы узнаете основы препроцессора SASS/SCSS, что это такое и как использовать его возможности для быстрого написания стилей. Предполагается, что вы уже знакомы с основами HTML, CSS.
Frontend 14 070
3 года назад

Создаем аккордеон на JavaScript

Всем привет! Мы продолжаем создавать элементы пользовательского интерфейса (UI). Сегодня коснемся такой темы, как аккордеоны. Аккордеон позволяет скрывать часть контента и при нажатии на бокс у нас плавно раскрывается весь контент.
Frontend 8 571
3 года назад

Текст поверх картинки на CSS

В этой статье расскажу, как наложить и выровнять текст поверх картинки методом CSS. Часто возникает такая необходимость при разработке сайтов. Текст будем выравнивать по центру.
Frontend 2 829
3 года назад

Неоновая кнопка на чистом CSS

Неоновые кнопки добавляют приятный футуристический любому веб-сайту. Мне всегда нравилась магия неоновых вывесок, и я хотел воссоздать их с помощью CSS.
Frontend 4 896
3 года назад

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

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

Форма обратной связи: отправка формы на почту без перезагрузки

В заключительной статье мы сделаем отправку формы на почту. Важно, что отправляться данная форма будет без перезагрузки страницы (асинхронно). После отправки формы пользователь получит уведомление, что данные отправлены, либо сообщение со статусом ошибки.
Frontend 17 383
3 года назад

Форма обратной связи: валидация формы на JS

Мы напишем универсальный скрипт на JS для валидации полей формы. Данный скрипт будет сам определять, что поле проверяется на валидность. Для этого достаточно добавить в HTML-разметке кастомный атрибут в input.
Frontend 6 990
3 года назад

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

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

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

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