Матвей Земсков

Заметки веб-мастера

Суббота, 29 мая 2021 23:19

13 полезных инструментов для веб-разработчика

Оцените материал
(6 голосов)

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

Ссылки на них я разместил в самом начале списка. С их помощью можно ознакомится с CSS-технологиями Flexbox и CSS Grid Layout. Далее идут ссылки на инструменты которые пригодятся не только начинающим. Эти сервисы генерируют различные элементы, которые используются для оформлении страниц сайта.

При создании страниц в своем любимом редакторе можно использовать различные шрифты. Выбрать шрифт по вкусу можно из списка, ссылка на который есть среди наших ссылок. Если в процессе работы вы что-то забыли или возникли трудности с версткой какого-нибудь блока, всегда можно воспользоваться подсказками по CSS Grid Layout, JavaScript или простой блочной верстке. Ссылки на них здесь тоже представлены.

А если вы создаете выпуск e-mail рассылки вам не помешает список элементов HTML и CSS правил, которые вы можете использовать в этом процессе. В конце списка перечислены 2 полезных инструмента для работы с GitHub и JS-инструмент для сортировки и поиска по спискам и таблицам в HTML.

FLEXBOX FROGGY http://flexboxfroggy.com/#ru

flexbox froggy

FLEXBOX FROGGY – это полезная и познавательная игра, играя в которую можно поучиться работе с CSS Flexbox. По принципу прохождения приложение построено от простого к сложному. Оно знакомит с различными аспектам Flex-верстки. Очень хорошо помогает начинающим специалистам разобраться в различных css-свойствах, относящихся к указанной технологии. Например, такими как: justify-content, align-items, flex-direction и многими другими.

GRID GARDEN https://cssgridgarden.com/#ru

GRID GARDEN

GRID GARDEN – еще одна познавательная игра для изучения CSS Grid Layout. Она аналогична предыдущей, только действующими лицами являются морковки вместо лягушат. Ну и технология CSS совсем другая. Состоит из 28 уровней. Прохождение от простого к сложному. Очень полезный инструмент для понимания устройства CSS Grid Layout. При прохождении вы разберетесь в тонкостях технологии и познакомитесь со следующими полезными свойствами: grid-template-columns, grid-auto-rows, grid-column-start, grid-column-end и другими.

Blend http://colinkeany.com/blend/

Blend

Замечательный инструмент для создания CSS градиентов. Выбираем два цвета: начальный и конечный, далее жмем кнопку «Let’s blend» и получаем результат. Если он вас устраивает, то можно получить код CSS. Кстати инструмент может генерировать 2 вида градиентов: линейный и радиальный. При выборе линейного появляется возможность указания угла, под которым будут меняться цвета.

CSS Stripes Generator https://stripesgenerator.com/

CSS Stripes Generator

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

SVG Waves https://www.svgwaves.io/

SVG Waves

Генератор волнообразных изображений в формате svg, а также CSS-кода для их вывода странице. Эти изображения на мой взгляд замечательно подойдут для разделения основных блоков станицы. Например, шапки от основного содержимого или основного содержимого от подвала. Инструментом пользоваться удобно: можно добавлять точки и изменять кривизну сегментов изображения.

CSS Separator Generator https://wweb.dev/resources/css-separator-generator/

CSS Separator Generator

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

Coding Fonts https://coding-fonts.css-tricks.com/fonts/courier-prime/

Coding Fonts

Приятно, когда есть возможность установить в своем любимом редакторе шрифт, которым будет удобно пользоваться. С инструментом Coding Font вы сможете подобрать себе шрифт по вкусу. Правда не все перечисленные шрифты бесплатные, но их не так уж и мало.

Коллекция из 120 шаблонов HTML и CSS https://csslayout.io/patterns/

Коллекция из 120 шаблонов HTML и CSS

На сайте csslayout.io представлена очень богатая коллекция различных шаблонов кода HTML и CSS. С помощью этих примеров вы сможете сверстать различные блоки на своих страницах или макет страницы целиком. Примеры на сайте разделены на секции. Представлены разделы Layout – в нем собраны различные примеры вёрстки макетов страниц, Navigation – варианты верстки навигационных элементов, Input – верстка полей форм, Display – примеры верстки популярных блоков, используемых на страницах и Feedback – в котором хранится коллекция для показа различных уведомлений.

Шпаргалка по Grid Layout https://grid.malven.co/

Шпаргалка по Grid Layout

С помощью этой подробной шпаргалки вы узнаете все о свойствах, доступных в CSS Grid Layout. У каждого свойства есть не только описание, но и простые наглядные примеры. Аналогичную шпаргалку по Flexbox можете найти здесь: https://flexbox.malven.co/

Примеры JS-кода для управления DOMhttps://htmldom.dev/

Примеры JS-кода для управления DOM

Понимание способов взаимодействия с DOM играет важную роль в веб-разработке. Даже если ваше приложение работает использует современные инструменты, такие как Angular, Vue, React, Svelte или другие, оно все равно имеет дело с DOM. На предлагаемом вашему вниманию сайте представлено большое количество примеров на JavaScript для взаимодействия с элементами страницы. Ознакомьтесь с ними, возможно, найдете для себя что-нибудь интересное. Кстати, у каждого примера указан уровень его сложности.

List.js https://listjs.com/

List.js

Крошечный и простой, но невероятно мощный и быстрый инструмент на JavaScript, который добавляет поиск, сортировку, фильтры и гибкость в простые списки HTML, таблицы и некоторые другие элементы страниц. Не требует никаких дополнительных библиотек. На официальном сайте этого инструмента имеется подробная документация и наглядные примеры его использования.

GITHUB CLI https://cli.github.com/

GITHUB CLI

Бесплатное приложение GitHub CLI (gh) обеспечивает более удобный способ взаимодействия с вашими репозиториями GitHub из командной строки. Он обрабатывает pull-запросы, issues и другие концепции GitHub прямо в стандартном терминале вашей операционной системы. Со списком команд, которые можно использовать в этом инструменте можно ознакомиться в разделе документация или вызвав команду gh –help.

Can I email https://www.caniemail.com/

Can I email

Скорее всего вы когда-нибудь пользовались очень полезным инструментов для разработчиков, который называется Can I Use. Сервис Can I email как раз основан на нем. Отличается тем, что в нем собрана справочная информация о HTML-элементах и CSS-свойствах, которые используются при создании email-рассылок. Вы можете узнать какие из них поддерживаются различными клиентами электронной почты.

Прочитано 8870 раз
Другие материалы в этой категории: « Контрольный список SEO перед запуском веб-сайта
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх