Jatin Raoоригинал, лицензияNew Frontendперевести.
За последние месяцы я собрал множество ссылок на ресурсы, которые могут значительно повысить эффективность разработки, и некоторыми из них я поделюсь в этой статье. Эти ресурсы были очень полезны для меня и, надеюсь, для вас. Без лишних слов, вот несколько отличных бесплатных ресурсов!
HTML
- W3C Markup ValidatorПроверьте, является ли разметка файла веб-страницы законной.
- Meta TagsИзменить, чтобы создать метатеги для сайтов, таких как социальные сети, и просмотреть эффект.
- Favicon GeneratorПреобразование файлов изображений в формате GIF, PNG, JPG в формат ICO
CSS
- W3C CSS ValidatorПроверьте, является ли файл CSS законным
- Animate.cssКроссбраузерная анимация CSS из коробки
- animistaНастройка эффектов анимации CSS по запросу
- CSSeffectsSnippetsНабор эффектов анимации CSS. Нажмите на эффект, чтобы скопировать соответствующий фрагмент кода в буфер обмена.
- SpinKitКоллекция фрагментов кода CSS для различных эффектов загрузки.
- CSS MinifierОнлайн-инструмент минимизации/минификации кода CSS
JavaScript
- JavaScript 30Завершите 30 проектов за 30 дней, используя нативный JavaScript.
- CodewarsСовершенствуйте свои навыки, выполняя реальные задачи по кодированию вместе с другими.
- ESLintОбнаружение и устранение проблем с кодом JavaScript
- PrettierФорматирование кода JavaScript
значок
- Font AwesomeСамые популярные наборы иконок для веб-разработки
- FeatherПростые и красивые иконки с открытым исходным кодом
- IoniconsТщательно прорисованные иконки с открытым исходным кодом
- Simple IconsИконки SVG для популярных брендов
- Material Design IconsЛегкие, красивые значки символов, включая общие действия и вещи
- Tabler Icons681 настраиваемый значок SVG с открытым исходным кодом
цвет
- Material Design ColorsЦвета дизайна материалов
- Flat UI Colors 214 цветовых комбинаций, 280 цветов
- Color HuntБесплатная и открытая платформа для обмена подбором цветов, включая тысячи выбранных вручную подборов цветов, из которых вы можете черпать вдохновение для подбора цветов.
- Color SpaceЦветовая схема, генератор цветового градиента CSS
- uiGradientsКрасивый цветовой градиент
- Colors and FontsИнструменты цвета и шрифта
- Coolorsгенератор цветовой схемы
иллюстрация
- UndrawКоллекция красивых иллюстраций SVG, которые постоянно обновляются.
- manypixelsбесплатный набор иллюстраций
- IRA DesignНастраивайте иллюстрации, смешивая градиенты и сопоставляя нарисованные вручную компоненты.
- Free Illustrations by Lukasz AdamБесплатные SVG-иллюстрации
- BlobmakerОнлайн-генератор форм SVG
- Get WavesОнлайн-генератор сигналов SVG
рисунок
- UnsplashБесплатные изображения
- PexelsКрасивые бесплатные изображения и видео
- BurstБесплатные изображения высокого разрешения для веб-сайта и коммерческого использования
- ISO RepublicБесплатные изображения и видео высокого разрешения под лицензией CC0
- PixabayПотрясающий сайт с бесплатными (общественными достояниями) фотографиями и видео
- StockSnap.ioКрасивые бесплатные изображения, также под лицензией CC0
- PhotopeaОнлайн-инструмент для редактирования фотографий, который поддерживает множество расширенных функций.
- Online Image CompressorОнлайн-инструмент сжатия изображений, который может сжимать до 20 изображений одновременно.
- Bulk Resize PhotosСамый быстрый онлайн-инструмент для масштабирования изображений (масштабирование и сжатие изображений выполняется локально, нет необходимости загружать их на сервер)
Ссылаться на
- Front-end Developer Handbook 2019Front-end Developer's Handbook 2019 Edition, исчерпывающее руководство по изучению методов фронтенд-разработки.
- HackerRank 2020 Developer Skills ReportОтчет HackerRank о навыках разработчиков за 2020 год, в котором приняли участие 116 648 разработчиков.
- Stack Overflow Developer Survey 2020Отчет о опросе разработчиков Stack Overflow за 2020 год, в котором приняли участие почти 65 000 разработчиков.
- HTML & CSSХороший материал для изучения HTML и CSS
- Refactoring UIОбъясняет, как применять определенные стратегии для разработки красивых пользовательских интерфейсов с точки зрения разработчика.
- Airbnb JavaScript Style GuideРуководство по стилю JavaScript от Airbnb — самое популярное руководство по стилю кода JavaScript в отрасли.
- JavaScript & jQueryХороший источник для изучения JavaScript и jQuery
- You Don't Know JSГлубокое понимание основных механизмов языка JavaScript
- Eloquent JavaScriptУчебники по JavaScript для начинающих
- Learning JavaScript Design PatternsШаблоны проектирования JavaScript для разработчиков JavaScript и jQuery
- Web Content Accessibility Guidelines (WCAG) 2.1Различные предложения, чтобы сделать ваш сайт более доступным
доступность
- NV AccessПрограммы чтения с экрана для платформ Windows
- ChromeVox Chrome ExtensionПрограмма чтения с экрана Chrome от Google
- axe Chrome ExtensionПлагин для добавления тестирования доступности в Chrome DevTools.
развертывать
- GitHub PagesБесплатный хостинг статических сайтов от GitHub
- NetlifyРазверните свой сайт за 30 секунд
- VercelРазверните свой веб-сайт быстро
- SurgeОпубликуйте свой сайт всего одной командой
- HerokuСоздайте и запустите свое приложение в облаке
разное
- web.devОценка производительности веб-сайта (на основе Lighthouse)
- Shape DividerИнструмент для настройки SVG разделов веб-сайта в различных формах.
- GTmetrixИнструмент анализа производительности веб-страницы
- Can I UseБраузерная поддержка интерфейсных технологий
- CarbonКод для инструмента изображения
- WappalyzerОпределить стек технологий, используемый веб-сайтом