web-development-resources

A list of open source front-end tools and resources for web designers and developers.
https://github.com/milanaryal/web-development-resources

Last synced: 6 days ago
JSON representation

SVG, PNG, and Font icons library
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- How to work with SVG icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Bootstrap Icons
- Creative Commons license icons
- Flaticon
- Feather
- Font Awesome
- Font-Awesome-SVG-PNG
- FontForge
- Fontello
- IcoMoon
- Ionicons
- Material Design Icons
- The Big List of Flat Icons & Icon Fonts - Triks | There are many such roundups. This one is mine. |
- Noun Project - Icons for everything
- Octicons
- Perfect Icons
- Simple Icons
- SVG Icons
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Flaticon
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
Package manager
- yarn
- goenv
- List of software package management systems
- APT
- Yum
- Homebrew
- winget - us/windows/package-manager/) (aka winget) is a free and open-source package manager designed for Microsoft Windows 10. |
- Chocolatey - level package manager and installer for software packages, built for the Windows platform. |
- rvm - line tool which allows you to easily install, manage, and work with multiple ruby environments from interpreters to sets of gems. |
JavaScript preprocessor
- Babel
- CoffeeScript
- LiveScript
- TypeScript
Sass frameworks
- Bourbon
- Compass - source CSS Authoring Framework. |
- Susy
Wiki
- W3C standards
- cssdb
- MDN Web Docs
- CSS-Tricks
- Smashing Magazine
- WebGlossary.info
- W3Schools
Frameworks
- HTML5 Boilerplate - end template. |
- Bootstrap
- Foundation - end framework in the world. |
- Base
- Basscss - level CSS toolkit. |
- Bulma
- Concise Framework - end framework that provides a number of great features without the bloat. |
- Cardinal - first" CSS framework built with performance and scalability in mind. |
- Furtive CSS - thinking, CSS micro-framework. |
- Juiced
- Material Design Lite
- Materialize - end framework based on Material Design. |
- Photon
- Primer CSS
- Pure
- Responsive
- Semantic UI - friendly HTML. |
- Skeleton
- Tailwind CSS - first CSS framework for rapidly building custom designs. |
- UIkit - end framework for developing fast and powerful web interfaces. |
- Pure
- Skel
- Pure
Mobile Web apps frameworks
- Onsen UI
Front-end components
- Formstone
HTML5 themes
- Bootstrap Starter
- HTML5 Blank WordPress Theme
- HTML5 UP!
- Start Bootstrap
- HTML5 Blank WordPress Theme
HTML preprocessor
- Haml
- Markdown - to-HTML conversion tool for web writers. |
- Slim
- Jade
- Jade
CSS preprocessor
- LESS - processor |
- SCSS / Sass
- Stylus - rich CSS preprocessor. |
- PostCSS
- LESS - processor |
- SCSS / Sass
[Node.js](http://nodejs.org/) feature module and bundler
- npm
- Browserify - side `require()` the node way |
- Grunt
- Gulp
- Parcel
- Webpack
- ESLint
- Prettier
- stylelint
- commitlint
- serve
- Chokidar
- PurgeCSS
- rimraf - rf` for node. |
- Bower
- Browserify - side `require()` the node way |
- Grunt
- Gulp
JavaScript library
- jQuery
- Modernizr
- Bliss.js
- Umbrella JS
- Zepto JS - compatible API. |
[Vanilla JavaScript](https://plainjs.com/) plugins
- Anchor.js
- Anime.js
- Chart.js
- Chartist.js
- Velocity.js
- Favico.js
- Headroom.js
- Holder.js
- lunr.js - text search in your browser. |
- NProgress.js
- Pace.js
- Responsive nav
- Slideout.js
- Tether
- Typeset - processor for your HTML which uses zero client-side JavaScript. |
- NProgress.js
- Pace.js
- ZeroClipboard.js
- ZeroClipboard.js
- Velocity.js
HTML forms
- Chartspree
- Formspree
- Gridspree
- JotForm
- WTF, forms?
- Wufoo
[jQuery](http://jquery.com/) plugins
- Formstone - Background - frame image and video backgrounds.|
- Bigfoot.js
- FitVids.js - to-use jQuery plugin for fluid width video embeds. |
- fullPage.js
- Lazy Load
- Lity - lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box. |
JavaScript compressor toolkit
- UglifyJS
CSS library
- Animate.css - browser library of CSS animations. |
- CSSgram
- CSS Filters Playground
- EQCSS - style element query syntax in CSS. |
- Flex Grid
- Mastering the `:nth-child` - child ranges. |
- Eric Meyer CSS reset
- Graaf
- Hamburgers - animated Hamburgers. |
- Mueller Grid System
- RTLCSS - To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL). |
- CSSWand - based animation library|
- Water.css
- Box-shadows.css
- Mastering the `:nth-child` - child ranges. |
- Mastering the `:nth-child` - child ranges. |
- Graaf
- Mastering the `:nth-child` - child ranges. |
- Graaf
- Mastering the `:nth-child` - child ranges. |
- Mastering the `:nth-child` - child ranges. |
Web tools
- Abstract API's
- AutoDraw
- Binary Translator
- Bootstrap 5 Cheat Sheet
- Color Hex Color Codes - hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. |
- Color Hunt
- CSS3 Generator
- CSSmatic
- Draw.io
- Flat Colors
- Frontend Dogma frontend development tools - based tools for website developers and owners, for analysis and exploration. |
- Styling Wizard: Google Maps APIs
- Snazzy Maps
- SRI Hash Generator - practice, whenever libraries are loaded from a third-party source. |
- Superdomain
- Create LaTeX tables online - cells merging is supported together with borders editing. |
- uiGradients
- Unminify
- Web Code Tools
- What's My Screen Resolution
- WebGradients
- Create LaTeX tables online - cells merging is supported together with borders editing. |
CDN library
- BootstrapCDN
- cdnjs
- CoralCDN - to-peer technologies, comprised of a world-wide network of web proxies and nameservers. |
- FontCDN
- Google Fonts - source fonts optimized for the web. |
- Google Hosted Libraries - speed, globally available content distribution network for the most popular, open-source JavaScript libraries. |
- jsDelivr - fast CDN for developers and webmasters. |
- Microsoft Ajax CDN
- Open Source Software CDN
- Yandex CDN - frameworks and libraries from Yandex servers. |
Browser compatibility wiki
- Can I Use
- Should I Prefix
Responsiveness testing tools
- Am I Responsive?
- BrowserStack
- Deviceponsive
Performance testing tools
- Google PageSpeed Tools
- WebPagetest
- Website speed test
Placeholder
- JSONPlaceholder
- Lorem Ipsum
- lorempixel
- Placehold.it
- lorempixel
Mockup placeholder
- Placeit
Website icons for browsers
- Favicon Generator
- Build My Pinned Site
- Pinned site enhancements on Windows - us/library/dn455106(v=vs.85).aspx) | Setting up live tiles and notifications for Windows |
- Configuring Web Applications for Apple
- Installable Web Apps with the Web App Manifest in Chrome for Android
Free inspirational snippets and tutorials
- CodeMyUI
- CodyHouse
- Codrops
- Moving to HTTPS
- NavNav
- Papersizes.io - The best resource for Paper Sizes
- PDF Candy - a free online PDF editor. Convert PDF to Word, PDF to JPG, merge PDF, split PDF, compress PDF, etc. |
- Scotch
- Smashing Magazine
CSS reference
- Mozilla Web Docs
- CSS Dev Docs
- CSS properties index
- CSS Reference
- CSS Reference - Codrops
- Flexbox - CSS Tricks
- CSS Grid - CSS Tricks
- CSS Flexbox Playground by Gabi
- Flexbox Froggy
- Using CSS Animation - MDN
- Animation - CSS Tricks
Design inspiration
- Google Design
- Admire The Web
- Awwwards
- Behance
- Best Website Gallery
- CSS Gallery
- CSS Winner
- Design Fridge
- DeviantArt
- Dribble
- Favourite Website Awards (FWA)
- GoodUI
- html inspiration
- Inspiration for Search UI Effects
- One Page Love
- Nice One I Like
- Siiimple
- The Best Designs
- Very nice sites
- Web Design Inspirations
- webdesign - Tumblr Search
- CodePen
CSS tutorials
- Browser safe fonts
- CSS Font Stack
- CSS outline property - outline: none and outline: 0
- CSS Selector Reference
- CSS Specificity
- Grid by Example
- Griddy
- Hash tag links that don't headbutt the browser window - Tricks post by Chris Coyier. |
- Learn CSS Grid
- Learn CSS Grid
- Learn CSS Layout
- Overriding the default text selection color with CSS - Tricks post by Chris Coyier. |
- What is the browser-default background color when selecting text?
- Why I switched from LESS to Sass?
- CSS Specificity
- Grid Garden
The type system
- Exploring Responsive Type Scales - Device and Vertical) Rhythm |
- Font Pair
- Generate Type Scales With Stackswell
- Material design type system
- Modular Scale
- Type Connection
- Typography for Developers
- Typewolf
- Type Scale - A Visual Calculator
- WhatFont - Chrome Extension
Webmaster tools
- Schema.org
- Microformats
- Understand how structured data works
- Structured Data Testing Tool
- PageSpeed Insights
- JSON for Linking Data - LD organizes and connects it, creating a better Web. |
- JSON-LD
- Latitude and Longitude Finder
Jamstack
- StaticGen - source static site generators list. |
- Staticman - generated content and uploads it as data files to a GitHub and/or GitLab repository. |
- Gitalk
- utterances
- Netlify - click HTTPS, and all the services you need. Get started for free. |
List of lists of lists
- 56 Unique Lorem Ipsum Generators
- Abstract Guide to HTTP Status Codes
- Awesome Awesomeness
- Bootstrap Resources
- Bootstrap Snippets
- Design essentials, GitHub collections
- GitHub - Open source showcases
- JavaScript Plugins Repository
- Javascript Territory
- JavaScripting
- Libraries.io
- List of HTTP status codes
- Stock photos that don't suck
- Text editors, GitHub collections
- Unheap
- Bootstrap Resources
- Gradient Backgrounds
- JavaScripting
PNG, JPEG, GIF compressor toolkit
- TinyJPG
- Compress PNG - |
- Compress JPEG - |
- Compress GIF - |

Programming Languages

TypeScript 2 Ruby 1

Categories

SVG, PNG, and Font icons library 54 Frameworks 23 Web tools 22 Design inspiration 22 CSS library 21 [Vanilla JavaScript](https://plainjs.com/) plugins 20 List of lists of lists 18 [Node.js](http://nodejs.org/) feature module and bundler 18 CSS tutorials 16 CSS reference 11 The type system 10 CDN library 10 Free inspirational snippets and tutorials 9 Package manager 9 Webmaster tools 8 Wiki 7 CSS preprocessor 6 HTML forms 6 [jQuery](http://jquery.com/) plugins 6 Jamstack 5 JavaScript library 5 Website icons for browsers 5 HTML5 themes 5 Placeholder 5 HTML preprocessor 5 JavaScript preprocessor 4 PNG, JPEG, GIF compressor toolkit 4 Performance testing tools 3 Responsiveness testing tools 3 Sass frameworks 3 Browser compatibility wiki 2 JavaScript compressor toolkit 1 Mobile Web apps frameworks 1 Mockup placeholder 1 Front-end components 1

Sub Categories

Keywords

watcher 1 watch-files 1 nodejs 1 fsevents 1 filesystem 1 chokidar 1