CSS Viewer - расширение Chrome для анализа CSS свойств элементов сайта

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

При наведении на элемент вы увидите используемые шрифты и их размеры, ширину и высоту, цветовые решения, отступы и многое другое.

#расширение

Autocomplete - библиотека для создания поиска с функцией автозаполнения

Библиотека поможет вам реализовать быстрое и динамическое автозаполнение поискового поля, основанное на введенных пользователем данных.

Хоть Autocomplete всё ещё находится в разработке, им уже можно полноценно пользоваться. Он прост в установке и имеет множество полезных настроек, для создания уникального поискового поля в каждом проекте.

#библиотека #javascript

Placeholder Loading - CSS-библиотека для создания скелета загрузки страницы

С этой библиотекой вы сможете создать простой анимированный эффект загрузки скелета страницы, как на Facebook и VK.

Placeholder Loading написана на чистом CSS. Для управления цветами, размерами и закруглениями скелета достаточно изменить значения встроенных SASS-переменных.

#библиотека #CSS

Glyphter - SVG генератор иконочных шрифтов

На этом сервисе вы сможете довольно быстро создать свой иконочный шрифт для дальнейшего использования в своих проектах.

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

#сайт

Git Graph - расширение VS Code для работы с Git репозиторием

Это расширение позволяет просматривать структуру репозитория и выполнять с ним различные операции.

С Git Graph вы сможете в удобной форме просматривать ветки репозитория, делать поиск по истории коммитов, совершать pull-request и производить множество других операций.

#расширение #vscode

📘 Каталог уроков канала за 2021:

• Урок 45. Редактор "Sublime Text"
• Урок 46. Молниеносная верстка при помощи плагина "Emmet"
• Урок 47. Подсветка и выбор цветов в CSS-файлах
• Урок 48. Выравнивание кода в Sublime Text
• Урок 49. Автоматическая перезагрузка страницы в браузере при сохранении файла
• Урок 50. Библиотека для анимаций "Anime.js"
• Урок 51. Zeplin.io - лучший помощник для дизайнера и верстальщика
• Урок 52. Красивые анимации с bounce.js
• Урок 53. Высокоскоростная библиотека Pixi.js
• Урок 54. Полезных хитростей Chrome DevTools
• Урок 55. Адаптивный интерфейсный фреймворк Foundation
• Урок 56. Среда веб-разработки для разработчиков и интерфейсных дизайнеров "Codepen"
• Урок 57. Библиотека для создания анимаций Animate.css
• Урок 58. Библиотека для создания каруселей Embla Carousel
• Урок 59. Библиотека для создания капчи RVerify.js
• Урок 60. Библиотека для создания скелета загрузки Placeholder Loading
• Урок 61. Библиотека hover-эффектов для фотографий «imagehover.css»
• Урок 62. Webpack - сборщик модулей JavaScript с открытым исходным кодом
• Урок 63. Библиотека для создания 3D графики "Three.js"
• Урок 64. Библиотека для создания push уведомлений push.js
• Урок 65. Pixel Perfect - расширение Chrome для качественной верстки
• Урок 66. Backbone.js – фреймворк для разработки сложных веб-приложений
• Урок 67. SVG.js - библиотека для работы с SVG-графикой
• Урок 68. CSS Peeper - расширение Chrome для удобного просмотра CSS-кода
• Урок 69. GitHub Pages - сервис для хранения статических HTML-страниц
• Урок 70. HTML Hint - расширение VS Code для проверки HTML-кода
• Урок 71. GitLab - система управления репозиториями
• Урок 72. WOW.js - библиотека для создания анимаций при прокрутке
• Урок 73. HTML5Boilerplate – фронтенд-шаблон для создания веб-приложений
• Урок 74. Figma – инструмент для прототипирования сайтов и приложений
• Урок 75. HAML – HTML-препроцессор и шаблонизатор
• Урок 76. Selenium - инструмент автоматизации действий на сайтах
• Урок 77. D3.js – библиотека JavaScript для визуализации данных
• Урок 78. Adonis JS – фреймворк для Node.js
• Урок 79. Premonish – библиотека JavaScript для предсказывания действий пользователя
• Урок 80. CSS Peek – расширение для работы со стилями
• Урок 81. Empire of Code – игра для изучения JavaScript
• Урок 82. Programming Hero - игра для обучения программированию
• Урок 83. Elevator Saga – игра для изучения JavaScript
• Урок 84. Code Spell Checker – расширение для редактирования кода
• Урок 85. FullPage.js – библиотека JavaScript для создания эффектов прокрутки
• Урок 86. Knockout.js – библиотека JavaScript для работы с каркасом веб-приложений

📕 Каталог уроков, статей и материалов канала за 2020 год

CSS Button Generator - CSS-Генератор кнопок для сайтов

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

Предложено большое количество настроек - шрифт и его величина, размеры, тени, границы, а также есть готовые шаблоны кнопок.

#сайт

👨🏻‍💻[УРОК 59] Библиотека для создания капчи RVerify.js

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

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья

GLightbox - JS-библиотека для создания галерей

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

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

#библиотека #javascript

PageSpeed Insights - инструмент для анализа скорости загрузки страницы

Данный инструмент разработан компанией Google для определения скорости загрузки страницы. Он выведет показатель скорости в виде шкалы от 0 до 100 и даст рекомендации для её увеличения.

Чтобы проверить ваш сайт, достаточно ввести его адрес. Кроме рекомендаций по увеличению скорости загрузки страницы, вы также можете получить рекомендации по увеличению производительности вашего сайта в целом.

#сайт

RegEx Previewer - расширение VS Code для тестирования регулярных выражений

Это полезное расширение VS Code поможет вам тестировать регулярные выражения прямо в редакторе кода.

RegEx Previewer применяет написанный вами шаблон регулярного выражения к текстовому файлу и выделяет все совпадения. Это позволит значительно ускорить разработку и избежать ошибок.

#расширение #vscode

imagehover.css - библиотека hover-эффектов для фотографий

Библиотека предоставляет более 40 различных бесплатных CSS-эффектов при наведении на фотографии.

Все эффекты можно посмотреть на сайте библиотеки. Там же можно её скачать для использования в своих проектах.

#библиотека #CSS

👨🏻‍💻 [УРОК 60] Библиотека для создания скелета загрузки Placeholder Loading

Данная статья поможет вам разобраться в создании скелетов сайтов перед загрузкой всего контента, а также объяснит, зачем это нужно.

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья

transition.css - библиотека для создания эффектов перехода

Это CSS-библиотека, которая позволяет вам использовать различные transition-эффекты. В библиотеке более 40 эффектов и все они отлично кастомизируются.

Она проста в использовании. Для добавления в проект достаточно подключить её, как CSS-файл. Чтобы присвоить эффект элементу, необходимо добавить класс с названием этого эффекта. На сайте библиотеки можно посмотреть, как выглядят все эффекты.

#библиотека #css

CSS Grid Generator - сервис для создания Grid-сетки

Данный сервис поможет вам начать работать с технологией CSS Grid. На сайте вы сможете легко собрать нужную вам сетку для макета, а сервис сгенерирует CSS-код данной сетки. Если вы уже знакомы с данной технологией - сервис поможет вам представить вашу сетку визуально.

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

#сайт

CSS Accordion Generator - сервис, генерирующий аккордеон-слайдеры

Это полезный сервис, который поможет вам через простой графический интерфейс создавать различные аккордеон-слайдеры для ваших сайтов без использования JavaScript.

Благодаря настройкам на сайте можно собрать аккордеон под свои нужды - настроить цветовые решения, размеры, внутреннюю геометрию и другое. После применения всех настроек можно скопировать HTML и CSS-код результата.

#сайт

👨🏻‍💻 [УРОК 61] Библиотека hover-эффектов для фотографий «imagehover.css»

Эта статья покажет вам возможности библиотеки imagehover и научит ей пользоваться. После прочтения статьи вы сможете создавать красивые hover-эффекты для изображений даже если никогда раньше этого не делали.

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья

Materialize - CSS-фреймворк в стиле Material Design

Это фреймворк, разработанный компанией Google. Он предназначен для упрощения разработки и включает в себя готовые компоненты, основанные на принципах Material Design.

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

#фреймворк #CSS