- FLEXBOX FROGGY
- GRID GARDEN
- Blend
- CSS Stripes Generator
- SVG Waves
- CSS Separator Generator
- Coding Fonts
- Коллекция из 120 шаблонов HTML и CSS
- Шпаргалка по Grid Layout
- Примеры JS-кода для управления DOM
- List.js
- GITHUB CLI
- Can I email
Ссылки на них я разместил в самом начале списка. С их помощью можно ознакомится с 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 – это полезная и познавательная игра, играя в которую можно поучиться работе с CSS Flexbox. По принципу прохождения приложение построено от простого к сложному. Оно знакомит с различными аспектам Flex-верстки. Очень хорошо помогает начинающим специалистам разобраться в различных css-свойствах, относящихся к указанной технологии. Например, такими как: justify-content, align-items, flex-direction и многими другими.
GRID GARDEN https://cssgridgarden.com/#ru
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/
Замечательный инструмент для создания CSS градиентов. Выбираем два цвета: начальный и конечный, далее жмем кнопку «Let’s blend» и получаем результат. Если он вас устраивает, то можно получить код CSS. Кстати инструмент может генерировать 2 вида градиентов: линейный и радиальный. При выборе линейного появляется возможность указания угла, под которым будут меняться цвета.
CSS Stripes Generator https://stripesgenerator.com/
Очень интересный и простой инструмент для создания полосатого фона для элементов страниц. Сгенерировать его не составит труда, потому что на странице есть удобная форма с параметрами. Изначально фон чередуется из 2 полосок разного цвета, но вы можете добавить дополнительные полоски и выбрать их цвет. Кроме этого можно указать угол наклона и размер. Вы может увидеть результат в специально отведенном блоке и скопировать CSS-код, который будет сгенерирован в процессе создания фона.
SVG Waves https://www.svgwaves.io/
Генератор волнообразных изображений в формате svg, а также CSS-кода для их вывода странице. Эти изображения на мой взгляд замечательно подойдут для разделения основных блоков станицы. Например, шапки от основного содержимого или основного содержимого от подвала. Инструментом пользоваться удобно: можно добавлять точки и изменять кривизну сегментов изображения.
CSS Separator Generator https://wweb.dev/resources/css-separator-generator/
Еще один генератор разделителей блоков для использования на страницах. В отличии от предыдущего инструмента в нем больше различных вариантов изображений. Хотя в данном случае изображений как таковых нет, все сделано с помощью CSS правил. Есть форма с настройками для кастомизации отображения разделителей. Также на сайте кроме упомянутого инструмента есть раздел с интересными статьями по различным темам веб-разработки.
Coding Fonts https://coding-fonts.css-tricks.com/fonts/courier-prime/
Приятно, когда есть возможность установить в своем любимом редакторе шрифт, которым будет удобно пользоваться. С инструментом Coding Font вы сможете подобрать себе шрифт по вкусу. Правда не все перечисленные шрифты бесплатные, но их не так уж и мало.
Коллекция из 120 шаблонов HTML и CSS https://csslayout.io/patterns/
На сайте csslayout.io представлена очень богатая коллекция различных шаблонов кода HTML и CSS. С помощью этих примеров вы сможете сверстать различные блоки на своих страницах или макет страницы целиком. Примеры на сайте разделены на секции. Представлены разделы Layout – в нем собраны различные примеры вёрстки макетов страниц, Navigation – варианты верстки навигационных элементов, Input – верстка полей форм, Display – примеры верстки популярных блоков, используемых на страницах и Feedback – в котором хранится коллекция для показа различных уведомлений.
Шпаргалка по Grid Layout https://grid.malven.co/
С помощью этой подробной шпаргалки вы узнаете все о свойствах, доступных в CSS Grid Layout. У каждого свойства есть не только описание, но и простые наглядные примеры. Аналогичную шпаргалку по Flexbox можете найти здесь: https://flexbox.malven.co/
Примеры JS-кода для управления DOMhttps://htmldom.dev/
Понимание способов взаимодействия с DOM играет важную роль в веб-разработке. Даже если ваше приложение работает использует современные инструменты, такие как Angular, Vue, React, Svelte или другие, оно все равно имеет дело с DOM. На предлагаемом вашему вниманию сайте представлено большое количество примеров на JavaScript для взаимодействия с элементами страницы. Ознакомьтесь с ними, возможно, найдете для себя что-нибудь интересное. Кстати, у каждого примера указан уровень его сложности.
List.js https://listjs.com/
Крошечный и простой, но невероятно мощный и быстрый инструмент на JavaScript, который добавляет поиск, сортировку, фильтры и гибкость в простые списки HTML, таблицы и некоторые другие элементы страниц. Не требует никаких дополнительных библиотек. На официальном сайте этого инструмента имеется подробная документация и наглядные примеры его использования.
GITHUB CLI https://cli.github.com/
Бесплатное приложение GitHub CLI (gh) обеспечивает более удобный способ взаимодействия с вашими репозиториями GitHub из командной строки. Он обрабатывает pull-запросы, issues и другие концепции GitHub прямо в стандартном терминале вашей операционной системы. Со списком команд, которые можно использовать в этом инструменте можно ознакомиться в разделе документация или вызвав команду gh –help.
Can I email https://www.caniemail.com/
Скорее всего вы когда-нибудь пользовались очень полезным инструментов для разработчиков, который называется Can I Use. Сервис Can I email как раз основан на нем. Отличается тем, что в нем собрана справочная информация о HTML-элементах и CSS-свойствах, которые используются при создании email-рассылок. Вы можете узнать какие из них поддерживаются различными клиентами электронной почты.