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: 7 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
-
[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
-
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
-
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
- Color Hunt
- uiGradients
-
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. |
-
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
-
Free inspirational snippets and tutorials
-
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
- Design Fridge
- Design Fridge
-
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
-
Responsiveness testing tools
- BrowserStack
- Am I Responsive?
- Deviceponsive
- Responsively App - have devtool for web developers for quicker responsive web development. 🚀 |
- Am I Responsive?
-
Mockup placeholder
-
Website icons for browsers
-
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
-
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. |
-
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. |
-
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
56
[Vanilla JavaScript](https://plainjs.com/) plugins
29
CSS library
28
[Node.js](http://nodejs.org/) feature module and bundler
27
Web tools
26
List of lists of lists
21
Design inspiration
21
Frameworks
15
CSS tutorials
15
CheatSheet😎
14
Package manager
12
CSS reference
11
The type system
9
[jQuery](http://jquery.com/) plugins
8
CDN library
8
Webmaster tools
7
Free inspirational snippets and tutorials
7
JavaScript library
7
Wiki
7
HTML forms
6
Jamstack
5
JavaScript preprocessor
5
Responsiveness testing tools
5
Placeholder
4
HTML preprocessor
4
PNG, JPEG, GIF compressor toolkit
4
Website icons for browsers
4
HTML5 themes
3
Browser compatibility wiki
3
Sass frameworks
3
JavaScript compressor toolkit
2
Performance testing tools
2
Front-end components
2
Infographics
1
Mobile Web apps frameworks
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