Полезные ссылки для веб-разработчика

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

• Готовые CSS стили для таблиц
• jsbin.com - тестирования кода на языке JavaScript, HTML и CSS.
• web-site-map.com/ Онлайн-сервис для создания карты сайта (sitemap.xml) для веб-сайтов. Также помогает найти ошибки и битые ссылки. Самый лучший сервис!!!!
• Спецсимволы HTML — это символы, которые имеют особое значение или специальную функцию в языке разметки HTML.
• Speedtest.net — проверка скорости интернета
• Aspose - Кроссплатформенные Приложения Для Форматов Файлов. Онлайн-обработка файлов для форматов PDF, Word, Excel, PowerPoint, Visio, Project, OneNote, OpenOffice, CAD, 3D. конвертируйте, сжимайте, изменяйте размер, обрезайте и ставьте водяные знаки, не выходя из браузера.
• Adaptivator.ru,
  websitplanet.com,
  Adaptivator.ru,
  - Онлайн сервис проверки адаптивности сайта.
• REM to PX Converter - Конвертер REM в PX
• Fotor — это мощный, универсальный ИИ фоторедактор для каждого, включающий инструменты редактирования фотографий, мастер дизайна и мастер фото коллажей. ИИ Фоторедактор Fotor, созданный на основе технологии искусственного интеллекта, содержит множество инструментов, способных за считанные секунды удовлетворить все ваши потребности редактирования фотографий, например, Улучшение одним касанием, Волшебное удаление на основе ИИ, ИИ-фотошоп, убрать фон ИИ, Повышение разрешения, Эффекты, Фильтры, Дизайнерские шаблоны, Коллажи, Наложение, Цветность, Художественные эффекты на основе ИИ, Наклейки, Обрезка, HSL, Кривая, Текст и другие функции.

Проверка сайта на уникальность

• advego.com/antiplagiat/
• etxt.ru/antiplagiat/
• pr-cy.ru/unique/

Работа с изображениями

• Большое руководство по SEO для картинок: как оптимизировать изображения на сайте
• iloveimg.com Изменить размер .svg - за секунуду! И многое другое! Сжать изображение, добавить водяной знак, удалить фон, редактор...
• compressor.io/ - уменьшить размер файлов изображений без значительной потери качества
• etxt.ru/antiplagiat/ - сжатия изображений в формате PNG. Без значительной потери качества изображения.
• vectorizer.io/ - На сайте можно загрузить растровое изображение (например, в форматах JPEG, PNG, GIF) и преобразовать его в векторное изображение форматов SVG, EPS или PDF.
• online-convert.com/ - это универсальный онлайн-сервис конвертации файлов различных форматов. Он позволяет пользователям преобразовывать файлы из одного формата в другой, включая документы, изображения, аудио, видео и другие типы файлов.
• Convertio.co/ru — Легкий способ конвертировать файлы онлайн. Поддерживаем более 309 различных форматов документов, таблиц, электронных книг, презентаций, аудио и видео.это онлайн-сервис для конвертации файлов различных форматов. (Например, для фавикона из .png в ico)

Картинки

• Pngwing.com — Эксклюзивные PNG изображения, прозрачные изображения в формате png, бесплатная и неограниченная загрузка.
• Freepik.com - Высококачественные фотографии, видео, векторные изображения, PSD, ИИ-изображения, иконки...
• Fonwall.ru - Красивые бесплатные картинки
• Unsplash.com - Интернет-источник визуальных эффектов. Создано создателями со всего мира. Все снимки, опубликованные на сайте Unsplash, имеют лицензию Creative Commons Zero. Вы можете копировать, распространять и использовать фотографии бесплатно, в том числе в коммерческих целях.

Шпаргалки

• Grid - простая визуальная шпаргалка для CSS Grid Layout.
• FlexBox – шпаргалка по Flexbox
• Html5book – шпаргалка по HTML, CSS, JavaScript и jQuery
• HTML Book – шпаргалка по HTML и CSS
• CSS Cheat Sheet – шпаргалка по CSS
• Emmet Cheat Sheet – шпаргалка по Emmet. Для ускорения написания кода веб-разработки.
• WebReference – это онлайн-ресурс, который предлагает справочную информацию и руководства по различным аспектам веб-разработки и программирования. Этот сайт собирает в себе большое количество статей, где можно найти информацию о различных языках программирования, веб-технологиях, библиотеках, фреймворках и других смежных темах.
• Easings – Шпаргалка функций плавности
• FreeCodeCamp – Шпаргалка по FlexBox
• Habr – Шпаргалка по LESS и SASS

Генераторы CSS

• CSS3gen – CSS генератор кнопок, градиентов, бордеров,теней трансформации, фона, анимаций

Шрифты

• Google Fonts – Веб-шрифты от Google
• Transfonter – Конвертер веб-шрифтов
• Фонтов.нет – Подбор шрифта по фразе
• Fonts4web – Шрифты для сайтов
• Type Anything – Калькулятор параметров текста + генератор CSS-кода
• FontStorage – Плагин, простой способ подключить шрифт

Проверка кода

• Can I Use – Кроссбраузерность кода
• Validator W3 – Валидность HTML-кода
• PageSpeed Insights – Проверка оптимизации страницы
• Mobile Friendly – Оптимизирована ли ваша страница для мобильных устройств
• Find Dublicate Content on your site – Проверка уникальности текста на сайте
• Piliapp – Валидность JS-кода

Лайфхаки для верстальщика

• How To Center in CSS – центрируйте всё
• CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
• Генератор Flexbox верстки – Конструктор Flexbox
• Генератор Grid верстки – Конструктор Grid
• Flexbox Defense – игра для изучения Flexbox
• GRID GARDEN – игра для изучения Grid
• Clip-path - Свойство clip-path позволяет создавать сложные фигуры в CSS путем обрезки элемента до базовой формы (круг, эллипс, многоугольник или вставка) или до источника SVG. CSS-анимация и переходы возможны с использованием двух или более фигур контуров с одинаковым количеством точек.

Иконки и графика

• svgrepo.com – онлайн-коллекцию бесплатных векторных изображений в формате SVG (Scalable Vector Graphics). SVG является современным форматом изображений, который позволяет масштабировать графику без потери качества, что делает его идеальным для веб-разработки и дизайна. Бесплатно для коммерческих и личных проектов. Загруженные файлы SVG могут быть легко редактированы и настраиваемы под конкретные потребности проекта. (напр. бургер-меню)
• SVG Porn – векторные логотипы
• Font Awesome – иконочный шрифт + SVG
• UTF-8 Icons – иконки на utf-8
• Fontello – шрифтовые иконки. Шрифты генерируются на ходу из выбранных иконок, доступны иконки из 14 популярных шрифтов.
• IconMonster – бесплатные векторные иконки
• IcoMoon – векторные иконки
• Flaticon.com - Иконки для сайта. Flaticon предлагает огромную коллекцию бесплатных и платных значков, которые можно использовать в проектах различных типов, включая веб-дизайн, разработку мобильных приложений, дизайн интерфейсов и другие творческие проекты.

Библиотеки с анимациями

• Animate.css – библиотека CSS анимаций
• CSS3-анимация – полная статья про анимацию на CSS3

Уроки и учебники

• Web-design.center - Уроки Figma
• W3Schools — это бесплатный образовательный веб-сайт для обучения кодированию онлайн.
• Schoolsw3.com - Хорошо организованные учебники на русском языке для веб-разработчиков по созданию веб-сайтов с множеством бесплатных примеров HTML, CSS, JavaScript, SQL...