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: 8 days ago
JSON representation
-
CheatSheet😎
- github-cheat-sheet
- tldr pages
- Markdown Cheatsheet
- Devhints
- cheat.sh
- Manual GitHub CLi
- tldr InBrowser.App
- tldr-book.pdf
- Brew basic commands - Devsheet |
- Homebrew cheatsheet
- cheatsheet.md
- Octonator on Twitter: "Add .pibb to the end of any Gist URL in order to get the HTML only version suitable for embedding in any other site. http://t.co/HYtfQBM2DO" / Twitter
- cheatsheet.md
- cheatsheet.md
- Octonator on Twitter: "Add .pibb to the end of any Gist URL in order to get the HTML only version suitable for embedding in any other site. http://t.co/HYtfQBM2DO" / Twitter
-
[Node.js](http://nodejs.org/) feature module and bundler
- rimraf - rf` for node. |
- Chokidar
- npm
- Bower
- Webpack
- Prettier
- ESLint
- stylelint
- PurgeCSS
- Parcel
- commitlint
- nodemon - perfect for development. |
- node-sass
- del
- express
- http-server - configuration command-line http server. |
- Concurrently - js & npm run watch-less` but better. |
- npm-run-all - scripts in parallel or sequential. |
- npm-check-updates
- server.js
- linkinator
- onchange
- Parallel Shell
- Concat
- cpy-cli
- serve
- Browsersync
-
List of lists of lists
- Awesome Awesomeness
- Unheap
- Libraries.io
- Gradient Backgrounds
- 56 Unique Lorem Ipsum Generators
- Abstract Guide to HTTP Status Codes
- Bootstrap Snippets
- Design essentials, GitHub collections
- JavaScript Plugins Repository
- Javascript Territory
- List of HTTP status codes
- Stock photos that don't suck
- Text editors, GitHub collections
- Bootstrap Resources
- JavaScripting
- Awesome
- Design Resources For Developers
- Awesome Awesome
- Social Share URLs
- GitHub - Open source showcases
- 56 Unique Lorem Ipsum Generators
- Abstract Guide to HTTP Status Codes
- Bootstrap Resources
- Bootstrap Snippets
- Javascript Territory
-
Mobile Web apps frameworks
-
JavaScript preprocessor
-
[Vanilla JavaScript](https://plainjs.com/) plugins
- Anime.js
- Anchor.js
- Favico.js
- Holder.js
- Responsive nav
- Slideout.js
- Tether
- ZeroClipboard.js
- ZeroClipboard.js
- Velocity.js
- lazysizes.js
- react-burger-menu - canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations. |
- Tooltip.js
- Highlight.js
- Turbolinks
- Darkmode.js - mode-switch) | 🌓 Add a dark-mode / night-mode to your website in a few seconds |
- Tippy.js
- littlefoot.js
- FluidVids.js
- Pace.js
- Favico.js
- Holder.js
- Responsive nav
- Tabella.js
- Typeset - processor for your HTML which uses zero client-side JavaScript. |
- Tabella.js
- ZeroClipboard.js
- Prism.js
- Smartcrop.js
- Anchor.js
- Headroom.js
-
Jamstack
- Netlify - click HTTPS, and all the services you need. Get started for free. |
- utterances
- Staticman - generated content and uploads it as data files to a GitHub and/or GitLab repository. |
- Gitalk
- StaticGen - source static site generators list. |
-
Web tools
- 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. |
- Abstract API's
- WebGradients
- Bootstrap 5 Cheat Sheet
- Snazzy Maps
- AutoDraw
- Binary Translator
- 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
- SRI Hash Generator - practice, whenever libraries are loaded from a third-party source. |
- Superdomain
- Web Code Tools
- What's My Screen Resolution
- Create LaTeX tables online - cells merging is supported together with borders editing. |
- Colors.css
- Base16
- Solarized - Precision colors for machines and people
- CSS3 Generator
- CSSmatic
- Flat Colors
- Binary Translator
- Unminify
- Web Code Tools
- What's My Screen Resolution
-
CDN library
- Google Hosted Libraries - speed, globally available content distribution network for the most popular, open-source JavaScript libraries. |
- cdnjs
- CoralCDN - to-peer technologies, comprised of a world-wide network of web proxies and nameservers. |
- Microsoft Ajax CDN
- BootstrapCDN
- CoralCDN - to-peer technologies, comprised of a world-wide network of web proxies and nameservers. |
- FontCDN
- jsDelivr - fast CDN for developers and webmasters. |
- Open Source Software CDN
-
Performance testing tools
-
CSS reference
-
Frameworks
- Tailwind CSS - first CSS framework for rapidly building custom designs. |
- Basscss - level CSS toolkit. |
- Furtive CSS - thinking, CSS micro-framework. |
- Skeleton
- HTML5 Boilerplate - end template. |
- Photon
- Cardinal - first" CSS framework built with performance and scalability in mind. |
- Juiced
- Pure
- Skeleton
- Photon
- Cardinal - first" CSS framework built with performance and scalability in mind. |
- Juiced
- Skel
- Material Design Lite
- Base
-
Free inspirational snippets and tutorials
- CodyHouse
- Moving to HTTPS
- NavNav
- PDF Candy - a free online PDF editor. Convert PDF to Word, PDF to JPG, merge PDF, split PDF, compress PDF, etc. |
- NavNav
- Codrops
- Scotch
- CodeMyUI
- Papersizes.io - The best resource for Paper Sizes
- Smashing Magazine
-
Design inspiration
- Dribble
- One Page Love
- The Best Designs
- Behance
- DeviantArt
- CSS Gallery
- Design Fridge
- html inspiration
- Inspiration for Search UI Effects
- Nice One I Like
- Very nice sites
- Web Design Inspirations
- webdesign - Tumblr Search
- CodePen
- html inspiration
- Very nice sites
- GoodUI
- Google Design
- CSS Gallery
- Admire The Web
- Best Website Gallery
- Design Fridge
- Favourite Website Awards (FWA)
- Nice One I Like
- Siiimple
- Web Design Inspirations
-
Wiki
-
JavaScript library
-
HTML forms
-
The type system
-
SVG, PNG, and Font icons library
- Noun Project - Icons for everything
- Feather
- Simple Icons
- Bootstrap Icons
- SVG Icons
- Octicons
- IcoMoon
- How to work with SVG icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Creative Commons license icons
- FontForge
- The Big List of Flat Icons & Icon Fonts - Triks | There are many such roundups. This one is mine. |
- Perfect 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 - |
- 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 - |
- svg-icon
- Font-Awesome-SVG-PNG
- We Love Icon Fonts
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Vector Icons Roundup - by-side comparison between popular icon fonts. |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Align SVG Icons to Text and Say Goodbye to Font Icons - |
- Ionicons
- How to work with SVG icons - |
- Creative Commons license icons
- FontForge
-
Responsiveness testing tools
- BrowserStack
- Am I Responsive?
- Deviceponsive
- Responsively App - have devtool for web developers for quicker responsive web development. 🚀 |
- Am I Responsive?
- Deviceponsive
-
Mockup placeholder
-
Website icons for browsers
- Favicon Generator
- Build My Pinned Site
- Configuring Web Applications for Apple
- Installable Web Apps with the Web App Manifest in Chrome for Android
- 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
-
HTML preprocessor
-
Webmaster tools
- Schema.org
- JSON for Linking Data - LD organizes and connects it, creating a better Web. |
- JSON-LD
- Latitude and Longitude Finder
- Microformats
- Understand how structured data works
- Microformats
-
CSS tutorials
- Grid Garden
- Grid by Example
- Browser safe fonts
- CSS outline property - outline: none and outline: 0
- CSS Selector Reference
- CSS Specificity
- Griddy
- Hash tag links that don't headbutt the browser window - Tricks post by Chris Coyier. |
- Learn CSS Grid
- 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
- CSS outline property - outline: none and outline: 0
- Smarter link underlines for every website
- Browser safe fonts
- CSS Font Stack
- Griddy
-
CSS library
- CSSgram
- CSS Filters Playground
- EQCSS - style element query syntax in CSS. |
- Flex Grid
- Mastering the `:nth-child` - child ranges. |
- 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. |
- Graaf
- Graaf
- Mastering the `:nth-child` - child ranges. |
- Mastering the `:nth-child` - child ranges. |
- Mastering the `:nth-child` - child ranges. |
- Mastering the `:nth-child` - child ranges. |
- Spectrum CSS
- Normalize.css - ready alternative to CSS resets. |
- Mastering the `:nth-child` - child ranges. |
- Flex Grid
- EQCSS - style element query syntax in CSS. |
- Graaf
- Toast - nonsense CSS grid. |
- Raisin CSS
- Toast - nonsense CSS grid. |
- Mueller Grid System
- RTLCSS - To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL). |
-
Placeholder
-
PNG, JPEG, GIF compressor toolkit
- TinyJPG
- Compress PNG - |
- Compress JPEG - |
- Compress GIF - |
-
Front-end components
-
HTML5 themes
-
Sass frameworks
-
[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. |
- bigSlide.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. |
-
Browser compatibility wiki
-
Package manager
- 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. |
- yarn
- rvm - line tool which allows you to easily install, manage, and work with multiple ruby environments from interpreters to sets of gems. |
- pyenv
- rbenv
- nodenv
- goenv
-
JavaScript compressor toolkit
-
Infographics
- Home Office Posters - research, access needs, accessibility, design. |
Programming Languages
Categories
SVG, PNG, and Font icons library
59
[Vanilla JavaScript](https://plainjs.com/) plugins
31
CSS library
30
Web tools
28
[Node.js](http://nodejs.org/) feature module and bundler
27
Design inspiration
26
List of lists of lists
25
CSS tutorials
18
Frameworks
16
CheatSheet😎
15
Package manager
12
CSS reference
12
[jQuery](http://jquery.com/) plugins
11
The type system
10
Free inspirational snippets and tutorials
10
CDN library
9
Webmaster tools
7
JavaScript library
7
Website icons for browsers
7
Wiki
7
HTML forms
6
Responsiveness testing tools
6
Jamstack
5
HTML5 themes
5
JavaScript preprocessor
5
HTML preprocessor
5
PNG, JPEG, GIF compressor toolkit
4
Placeholder
4
Browser compatibility wiki
3
Performance testing tools
3
Sass frameworks
3
JavaScript compressor toolkit
2
Front-end components
2
Mobile Web apps frameworks
1
Infographics
1
Mockup placeholder
1
Sub Categories
Keywords
javascript
8
awesome
3
awesome-list
3
nodejs
3
npm
3
shell
3
typescript
2
scss
2
dom
2
node
2
react
2
css
2
server
2
npm-package
2
npm-module
2
lazy-evaluation
1
static
1
http
1
lazyload
1
lazysizes
1
performance
1
responsive-images
1
hosting
1
command-line
1
animations
1
component
1
hamburger-menu
1
sidebar
1
syntax-highlighting
1
transitions
1
syntax-highlighter
1
language-grammars
1
highlighting
1
express
1
ruby-versions
1
bash
1
ruby
1
ruby-installation
1
git
1
github
1
list
1
chokidar
1
filesystem
1
fsevents
1
watch-files
1
watcher
1
lists
1
resources
1
unicorns
1
python
1