Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpsantos7/awesome
This is an awesome project about Web Development resources. ⚡
https://github.com/jpsantos7/awesome
List: awesome
Last synced: 16 days ago
JSON representation
This is an awesome project about Web Development resources. ⚡
- Host: GitHub
- URL: https://github.com/jpsantos7/awesome
- Owner: jpsantos7
- Created: 2023-01-11T19:23:30.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-10T18:43:44.000Z (almost 2 years ago)
- Last Synced: 2024-05-21T16:03:27.277Z (7 months ago)
- Language: HTML
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- ultimate-awesome - awesome - This is an awesome project about Web Development resources. ⚡. (Other Lists / PowerShell Lists)
README
# Awesome Web Dev Resources ![Awesome][awesome-badge]
This is an awesome project about Web Development resources. ⚡
Resources are added frequently! ⚡
Enjoy!
If you like this repo, be sure to ⭐ it.
Please read [`contributing guidelines`](./CONTRIBUTING.md) before submitting new resources.****
---
## Table of Content
- [Awesome Web Dev Resources ](#awesome-web-dev-resources-)
- [Table of Content](#table-of-content)
- [Hosting](#hosting)
- [Learning Platforms](#learning-platforms)
- [Coding Challenge Platforms](#coding-challenge-platforms)
- [Photos](#photos)
- [Videos](#videos)
- [Illustrations](#illustrations)
- [Icons](#icons)
- [Fonts](#fonts)
- [Youtube Channels](#youtube-channels)
- [Podcasts](#podcasts)
- [Code Editors](#code-editors)
- [Color Palettes](#color-palettes)
- [UI Inspiration](#ui-inspiration)
- [Docs](#docs)
- [Animation Libraries](#animation-libraries)
- [Charts](#charts)
- [Chrome Extensions](#chrome-extensions)
- [Website Optimization Tools](#website-optimization-tools)
- [HTML/CSS/JavaScript templates](#htmlcssjavascript-templates)
- [Newsletters](#newsletters)
- [CSS Generators](#css-generators)
- [Online Tools](#online-tools)
- [UI Components](#ui-components)
- [Vue UI libraries](#vue-ui-libraries)
- [React UI libraries](#react-ui-libraries)
- [Angular UI libraries](#angular-ui-libraries)
- [Front-end checklists](#front-end-checklists)
- [Useful Snippets](#useful-snippets)
- [JavaScript](#javascript)
- [Accessibility](#accessibility)
- [Others](#others)
## Hosting
| Website | Description |
| --------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| https://netlify.com | **Netlify** unites an entire ecosystem of modern tools and services into a single, simple workflow for building high performance sites and apps. |
| https://firebase.google.com | **Firebase** helps you build and run successful apps. It is backed by Google and loved by app development teams - from startups to global enterprises |
| https://aws.amazon.com | **Amazon** Web Services offers a broad set of global cloud-based products and services help organizations move faster, lower IT costs, and scale. |
| https://pages.github.com | **GitHub** Pages are websites for you and your projects. It is hosted directly from your GitHub repository. You just have to edit, push, and your changes are live. |
| https://vercel.com | **Vercel** combines the best developer experience with an obsessive focus on end-user performance. It enables frontend teams to do their best work. You just have to develop preview and ship. |
| https://surge.sh | **Surge** is static web publishing for Front-End Developers. It is simple, single-command web publishing. It publishes HTML, CSS, and JS for free, without leaving the command line. |
| https://render.com | **Render** is a unified cloud to build and run all your apps and websites with free TLS certificates, a global CDN, DDoS protection, private networks, and auto deploys from Git. |
| https://docs.gitlab.com/ee/user/project/pages | **GitLab** Pages - static websites directly from a repository in GitLab. To publish a website one can use any static site generator or any plain written HTML, CSS, and JavaScript. |
| https://stormkit.io | **Stormkit** can easily manage your frontend infrastructure. It integrates perfectly with your git flow. It helps you build, deploy and scale your web apps seamlessly. |
| https://www.digitalocean.com/ | **DigitalOcean** has the cloud computing services you need, with predictable pricing, robust documentation, and scalability to support your growth at any stage. It is simpler cloud for happier devs to have better results. |
| https://www.000webhost.com/ | **000webhostapp** is zero cost website hosting with PHP, MySQL, Cpanel & no ads. Its servers use advanced firewalls and include DDoS protection. |
| https://infinityfree.net/ | **InfinityFree** is fully featured, completely free website hosting with PHP, MySQL and no ads on site. |
| https://pages.cloudflare.com/ | **Cloudflare Pages** is a JAMstack platform for frontend developers to collaborate and deploy websites. It offers free unlimited bandwidth. |
| https://supabase.com | **Supabase** is an open source Firebase alternative. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage.
| https://railway.app/ | **Railway** is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.|
[⬆ back to top](#table-of-contents)
## Learning Platforms
| Website |
| ---------------------------------------------------------------- |
| https://freecodecamp.org |
| https://www.lambdatest.com/learning-hub/ |
| https://codecademy.com |
| https://javascript30.com |
| https://frontendmentor.io |
| https://testautomationu.applitools.com |
| https://coursera.org |
| https://edx.org |
| https://khanacademy.org |
| https://sololearn.com |
| https://www.scaler.com/topics/ |
| https://www.theodinproject.com |
| https://javascript.info/ |
| https://vueschool.io/ |
| https://www.guru99.com/ |
| https://trailhead.salesforce.com/ |
| https://ocw.mit.edu/ |
| https://open.appacademy.io/ |
| https://web.dev/ |
| https://scrimba.com |
| https://thegymnasium.com |
| https://www.amigoscode.com |
| https://cssbattle.dev/ |
| https://bento.io/ |
| https://fullstackopen.com/en/ |
| https://upskillcourses.com/courses |
| https://www.geeksforgeeks.org/web-development/ |
| https://hackdesign.org/lessons |
| https://javatpoint.com |
| https://learn.microsoft.com/en-gb/training/ |
| https://www.codementor.io/events |
| https://eloquentjavascript.net/ |
| https://skillcombo.com/courses/development/web-development/free/ |
| https://www.interviewbit.com/ |
| https://css-tricks.com/ |
[⬆ back to top](#table-of-contents)
## Coding Challenge Platforms
| Website |
| ---------------------------------- |
| https://codewars.com |
| https://topcoder.com |
| https://codingame.com |
| https://hackerrank.com |
| https://projecteuler.net |
| https://coderbyte.com |
| https://codechef.com |
| https://exercism.io |
| https://leetcode.com |
| https://spoj.com |
| https://codeforces.com |
| https://codesignal.com |
| https://frontendmentor.io |
| https://devchallenges.io |
| https://www.hackerearth.com |
| https://www.frontendpractice.com |
| https://www.codementor.io/projects |
| https://css-challenges.com |
| https://100dayscss.com |
| https://codepip.com |
| https://triplebyte.com |
| https://www.w3schools.com/codegame |
| https://edabit.com |
| https://www.jschallenger.com |
| https://www.codingninjas.com |
[⬆ back to top](#table-of-contents)
## Photos
| Website |
| -------------------------- |
| https://unsplash.com |
| https://pixabay.com |
| https://pexels.com |
| https://reshot.com |
| https://librestock.com |
| https://visualhunt.com |
| https://freephotos.cc |
| https://picjumbo.com |
| https://www.pxfuel.com |
| https://www.splitshire.com |
[⬆ back to top](#table-of-contents)
## Videos
| Website |
| -------------------------- |
| https://dareful.com |
| https://www.videvo.net |
| https://www.videezy.com |
| https://pixabay.com/videos |
| https://mixkit.co |
| https://www.vidsplay.com |
| https://mazwai.com |
| https://lifeofvids.com |
| https://www.pexels.com |
| https://coverr.co |
| https://www.splitshire.com |
| https://www.clipstill.com |
[⬆ back to top](#table-of-contents)
## Illustrations
| Website |
| ------------------------------------------ |
| https://icons8.com/illustrations |
| https://www.opendoodles.com |
| https://undraw.co/illustrations |
| https://drawkit.io |
| https://icons8.com/ouch |
| https://iradesign.io |
| https://interfacer.xyz |
| https://blush.design |
| https://storyset.com |
| https://themeisle.com/illustrations |
| https://www.manypixels.co/gallery |
| https://www.artify.co/illustrations-figma |
| https://www.artify.co/vector-illustrations |
[⬆ back to top](#table-of-contents)
## Icons
| Website |
| ----------------------------------------- |
| https://fontawesome.com |
| https://flaticon.com |
| https://icons8.com |
| https://iconfinder.com |
| https://material.io/resources/icons |
| https://iconmonstr.com |
| https://heroicons.com |
| https://boxicons.com |
| https://css.gg |
| https://lineicons.com |
| https://icons.modulz.app |
| https://remixicon.com |
| https://tablericons.com |
| https://simpleicons.org |
| https://feathericons.com |
| https://svgrepo.com |
| https://iconic.app |
| https://icomoon.io |
| https://iconscout.com/unicons |
| https://holasvg.com/icons |
| https://fontello.com |
| https://fontastic.me |
| https://ionic.io/ionicons |
| https://icons.getbootstrap.com |
| https://react-icons.github.io/react-icons |
| https://www.iconspedia.com |
| https://favicons.beaubus.com/ |
| https://www.3dicons.com/ |
[⬆ back to top](#table-of-contents)
## Fonts
| Website |
| ------------------------ |
| https://fonts.google.com |
| https://fontspace.com |
| https://1001fonts.com |
| https://fontsquirrel.com |
| https://ffonts.net |
| https://fontfabric.com |
| https://urbanfonts.com |
| https://www.fontpair.co |
| https://fonts.bunny.net |
[⬆ back to top](#table-of-contents)
## Youtube Channels
| Website |
| ----------------------------------------------------------------------------- |
| [Traversy Media](https://www.youtube.com/c/TraversyMedia) |
| [freeCodeCamp.org](https://www.youtube.com/c/FreeCodeCamp) |
| [The Net Ninja](https://youtube.com/c/TheNetNinja) |
| [Google Chrome Developers](https://www.youtube.com/c/GoogleChromeDevelopers) |
| [Derek Banas](https://www.youtube.com/c/derekbanas) |
| [Academind](https://www.youtube.com/c/Academind) |
| [CodingTech](https://www.youtube.com/c/CodingTech) |
| [Codú Community](https://www.youtube.com/channel/UCvI5azOD4eDumpshr00EfIw) |
| [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified/) |
| [Dev Ed](https://www.youtube.com/c/DevEd/) |
| [CodeSTACKr](https://youtube.com/c/codeSTACKr) |
| [Coding Addict](https://www.youtube.com/c/CodingAddict) |
| [Kevin Powell](https://youtube.com/kepowob) |
| [Code with Ania Kubów](https://youtube.com/c/AniaKub%C3%B3w) |
| [The Coding Train](https://www.youtube.com/c/TheCodingTrain/) |
| [kudvenkat](https://www.youtube.com/user/kudvenkat) |
| [Program With Erik](https://www.youtube.com/c/ProgramWithErik) |
| [Coder Coder](https://www.youtube.com/c/TheCoderCoder) |
| [clever programmer](https://www.youtube.com/channel/UCqrILQNl5Ed9Dz6CGMyvMTQ) |
| [JavaScript Mastery](https://www.youtube.com/c/JavaScriptMastery) |
| [Adrian Twarog](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ) |
| [Wes Bos](https://www.youtube.com/wesbos) |
| [DesignCourse](https://www.youtube.com/c/DesignCourse) |
| [codedamn](https://www.youtube.com/c/codedamn) |
| [ProgrammingWithMosh](https://www.youtube.com/c/programmingwithmosh) |
| [Fireship](https://www.youtube.com/c/Fireship) |
| [Codevolution](https://www.youtube.com/c/Codevolution) |
| [Buddy](https://youtube.com/c/BuddyWorks) |
| [CSS Weekly](https://www.youtube.com/c/cssweekly) |
[⬆ back to top](#table-of-contents)
## Podcasts
| Website |
| --------------------------------------------------------------------------- |
| [Syntax](https://syntax.fm/) |
| [Fullstack radio](https://fullstackradio.com) |
| [The Changelog](https://changelog.com/) |
| [The Laracasts Snippet](https://laracasts.com/podcast) |
| [Front End Happy Hour](https://frontendhappyhour.com/) |
| [JavaScript Jabber](https://javascriptjabber.com/) |
| [Commit Your Code!](https://anchor.fm/commityourcode) |
| [Shop Talk](https://shoptalkshow.com/) |
| [Ladybug Podcast](https://www.ladybug.dev/) |
| [CodePen Radio](https://blog.codepen.io/radio/) |
| [JAMStack Radio](https://www.heavybit.com/library/podcasts/jamstack-radio/) |
| [Modern Web](https://www.thisdot.co/modern-web) |
| [DevDiscuss](https://dev.to/devdiscuss) |
| [DevNews](https://dev.to/devnews) |
| [React Native Radio](https://reactnativeradio.com/) |
| [Html All The Things](https://podcast.htmlallthethings.com/) |
| [The CSS Podcast](https://thecsspodcast.libsyn.com/) |
| [The Stack Overflow Podcast](https://stackoverflow.blog/podcast/) |
[⬆ back to top](#table-of-contents)
## Code Editors
| Website |
| -------------------------------------------- |
| [VS Code](https://code.visualstudio.com/) |
| [Sublime Text](https://www.sublimetext.com/) |
| [Atom](https://atom.io/) |
| [Brackets](http://brackets.io/) |
| [emacs](https://www.gnu.org/software/emacs/) |
| [Vim](https://www.vim.org/) |
| [Spacemacs](https://www.spacemacs.org/) |
| [Emacs](https://www.gnu.org/software/emacs/) |
| [Neovim](https://neovim.io/) |
| [Fleet](https://www.jetbrains.com/fleet/) |
[⬆ back to top](#table-of-contents)
## Color Palettes
| Website |
| --------------------------- |
| https://coolors.co |
| https://colorhunt.co |
| https://paletton.com |
| https://color-hex.com |
| https://mycolor.space |
| https://flatuicolors.com |
| https://color.adobe.com |
| https://htmlcolorcodes.com |
| https://colorsinspo.com |
| https://uigradients.com |
| https://www.colorion.co |
| https://www.gradientos.app |
| https://www.eggradients.com |
| https://cssgradient.io |
| https://www.0to255.com |
| https://branition.com/colors|
[⬆ back to top](#table-of-contents)
## UI Inspiration
| Website |
| ------------------------ |
| https://landingexam.com |
| https://uimovement.com |
| https://uigarage.net |
| https://collectui.com |
| https://httpster.net |
| https://www.awwwards.com |
| https://dribbble.com |
| https://onepagelove.com |
| https://www.behance.net |
| https://tympanus.net |
| https://landings.dev |
[⬆ back to top](#table-of-contents)
## Docs
| Website |
| ----------------------------- |
| https://developer.mozilla.org |
| https://devdocs.io |
[⬆ back to top](#table-of-contents)
## Animation Libraries
| Website |
| -------------------------------------------------------------- |
| [CSShake](https://elrumordelaluz.github.io/csshake/) |
| [Animate.css](https://animate.style/) |
| [AnimeJS](https://animejs.com/) |
| [GreenSock (GSAP)](https://greensock.com/gsap/) |
| [Magic Animations](https://www.minimamente.com/project/magic/) |
| [Hover css](https://ianlunn.github.io/Hover/) |
| [AniJS](https://anijs.github.io/) |
| [Wicked CSS](https://kristofferandreasen.github.io/wickedCSS/) |
| [Tuesday](http://shakrmedia.github.io/tuesday/) |
| [Mo.js](https://mojs.github.io/) |
| [AOS](https://michalsnik.github.io/aos/) |
| [Velocity.js](http://velocityjs.org/) |
| [Popmotion](https://popmotion.io/) |
| [Snap.svg](http://snapsvg.io/) |
| [Animista](https://animista.net/) |
| [Lottie-Player](https://lottiefiles.com/web-player) |
| [Framer motion](https://www.framer.com/motion) |
[⬆ back to top](#table-of-contents)
## Charts
| Website |
| -------------------------------------- |
| [Chart.js](https://www.chartjs.org/) |
| [D3.js](https://d3js.org/) |
| [three.js](https://threejs.org/) |
| [amCharts](https://www.amcharts.com/) |
| [Charts.css](https://chartscss.org/) |
| [ECharts](https://echarts.apache.org/) |
[⬆ back to top](#table-of-contents)
## Chrome Extensions
| Website |
| -------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) |
| [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce) |
| [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) |
| [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc) |
| [Lorem Ipsum Generator](https://chrome.google.com/webstore/detail/lorem-ipsum-generator-def/mcdcbjjoakogbcopinefncmkcamnfkdb) |
| [daily.dev - News for Busy Developers](https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied?hl=en) |
| [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) |
| [Checkbot - SEO, speed & security checker](https://chrome.google.com/webstore/detail/checkbot-seo-web-speed-se/dagohlmlhagincbfilmkadjgmdnkjinl) |
| [Performance-Analyser](https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf) |
| [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en) |
| [Visbug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc/related) |
| [Colorzilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en-US) |
| [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en) |
| [GitHunt](https://chrome.google.com/webstore/detail/githunt/khpcnaokfebphakjgdgpinmglconplhp?hl=en) |
| [React Developer](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) |
[⬆ back to top](#table-of-contents)
## Website Optimization Tools
| Website |
| ------------------------------------------------------------------------------------ |
| [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) |
| [GTmetrix](https://gtmetrix.com/) |
| [WebPageTest](https://www.webpagetest.org) |
| [Yslow](http://yslow.org/) |
| [web.dev](https://web.dev/measure/) |
| [asayer](https://asayer.io/) |
| [Optimizilla](https://imagecompressor.com/) |
[⬆ back to top](#table-of-contents)
## HTML/CSS/JavaScript templates
| Website |
| ---------------------------- |
| https://htmlrev.com |
| https://www.tooplate.com |
| https://html5up.net |
| https://templatemo.com |
| https://uideck.com |
| https://freehtml5.co |
| https://www.zerotheme.com |
| https://bootstrapmade.com |
| https://graygrids.com |
| https://tailwindtemplates.co |
| https://themeselection.com |
[⬆ back to top](#table-of-contents)
## Newsletters
| Website | Topics |
| -------------------------------------------------------------------------------- | ------------------------------------------------- |
| [Smashing Newsletter](https://www.smashingmagazine.com/the-smashing-newsletter/) | Front-end and UX. |
| [Frontend Focus](https://frontendfoc.us/) | HTML, CSS, WebGL, Canvas, browser tech, and more. |
| [CSS Weekly](https://css-weekly.com/) | CSS. |
| [JavaScript Weekly](https://javascriptweekly.com/) | JavaScript. |
| [Accessibility Weekly](https://a11yweekly.com/) | Accessibility. |
| [RWD Weekly Newsletter](https://responsivedesign.is/newsletter/) | Responsive web design. |
| [JAMstacked](https://jamstack.email/) | JAMstack ecosystem. |
| [UI Dev Newsletter](https://mentor.silvestar.codes/reads/) | User Interface development. |
| [Smart Programming 101](https://www.michaelasiedu.com/newsletter) | Software development. |
| [Go Make Things](https://gomakethings.com/) | Daily Vanilla JavaScript. |
[⬆ back to top](#table-of-contents)
## CSS Generators
| Website | Description |
| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Glassmorphism Generators](https://markodenic.com/tools/glassmorphism-css-generator/) | Use Glassmorphism Generator to create a stunning effect for your projects. |
| [Buttons Generator](https://markodenic.com/tools/buttons-generator/) | An online gallery of 100+ button designs you can easily copy and use in your projects. |
| [Layoutit Grid](https://grid.layoutit.com/) | Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator. |
| [CSS Gradient Editor](https://cssgradienteditor.com/) | You may only need this tool for creating CSS gradients and patterns. |
| [Hola SVG Loaders Generator](https://holasvg.com/loaders/) | SVG Loaders Generator with Sass and SMIL options |
| [Shape Divider](https://www.shapedivider.app/) | A free tool to make it easier for designers and developers to export a beautiful SVG shape divider for their latest project. |
| [BEAUBUS Patterns](https://patterns.beaubus.com/) | 150+ free SVG patterns and CSS background images generator |
| [9elements - Fancy Border Radius](https://9elements.github.io/fancy-border-radius/) | 9elements is a little tool, that helps you create your very own organic shape. When you use four/eight values specifying border-radius in CSS, you can create organic looking shapes. |
| [Blobmaker](https://www.blobmaker.app/) | Blobmaker is a free generative design tool made with 💕 by z creative labs, to help you quickly create random, unique, and organic-looking SVG shapes. |
| [Toptal CSS3 Generator](https://www.toptal.com/developers/css3maker) | A free online tool for quickly generating CSS3 snippets, such as for effects, gradients and animations. |
| [Neumorphism](https://neumorphism.io/) | A free online tool for designing attractive UI with colors, gradients and shadows.. |
## Online Tools
| Website | Description |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| [PRM](https://prm.pushkaryadav.in/) | Project & Profile Readme Maker : easiest way to create amazing readme's for your github projects and profile |
| [QR Code Generator](https://markodenic.com/tools/qr-code-generator/) | Use QR code generator to easily create a QR code for your project. |
| [Google Analytics Checker](https://www.statsglitch.com/google-analytics-checker) | Scan your project to ensure that Google Analytcs tag is properly set. |
| [Gradient Art](https://gra.dient.art/) | An advanced CSS gradient editor with layering, design tools and free cloud storage |
| [JSONT](https://www.jsont.run/) | A simple and powerful JSON formatting tool |
| [Codepng](https://codepng.app/) | Convert your source code into awesome shareable images |
| [yuyu.ai](https://yuyu.ai/) | Is a frontend ai tool to generate html and css instantly from a jpg or png file. |
[⬆ back to top](#table-of-contents)
## UI Components
| Website | Description |
| ---------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [CssLayout](https://csslayout.io/) | A site with multiple css code snippets for very frequently used components in day to day web pages |
| [TailGrids](https://tailgrids.com/) | 300+ Free and Premium Tailwind CSS UI Components and Sections |
| [Ayro UI Bootstrap](https://ayroui.com/) | Bootstrap UI components, snippets and sections for modern web apps |
| [UI Hut](https://www.uihut.com/home) | Free (and premium) UI compontents or templates for Bootstrap, figma, XD, PSD etc.. |
| [uiverse](https://uiverse.io) | Open-Source UI elements made with CSS & HTML where anyone can contribute. |
[⬆ back to top](#table-of-contents)
## Vue UI libraries
| Website | Description |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Vuetify](https://vuetifyjs.com/) | Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze. Build amazing applications with the power of Vue, Material Design and a massive library of beautifully crafted components and features. |
| [Vue Material](https://vuematerial.io/) | Simple, lightweight and built exactly according to the Google Material Design specs. |
| [BootstrapVue](https://bootstrap-vue.org/) | BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup. |
[⬆ back to top](#table-of-contents)
## React UI libraries
| Website | Description |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| [Material-UI](https://material-ui.com/) | Simple and customizable component library to build faster, beautiful, and more accessible React applications. |
| [Ant Design](https://ant.design/) | An enterprise-class UI design language and React UI library. |
| [React Bootstrap](https://react-bootstrap.github.io/) | Bootstrap components built with React. |
| [Semantic UI React](https://react.semantic-ui.com/) | Semantic UI React is the official React integration for Semantic UI . |
| [Chakra UI](https://chakra-ui.com/) | A simple, modular and accessible component library that gives you the building blocks you need to build your React applications |
| [NativeBase](https://nativebase.io/) | NativeBase is an accessible, utility-first component library that helps you build consistent UI across Android, iOS and Web. |
[⬆ back to top](#table-of-contents)
## Angular UI libraries
| Website | Description |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| [Taiga UI](https://taiga-ui.dev/) | A powerful set of open source components for Angular |
| [PrimeNG](https://www.primefaces.org/primeng/) | Angular UI Component Library featuring elegant, high-performance, accessible and fully customizable UI Components. |
| [Material UI](https://material.angular.io/) | Material Design components for Angular. |
[⬆ back to top](#table-of-contents)
## Front-end checklists
| Website | Description |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| [Front-End Checklist](https://frontendchecklist.io/) | The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production. |
| [Front-End Performance Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist) | The only Front-End Performance Checklist that runs faster than the others. |
| [Front-End Design Checklist](https://github.com/thedaviddias/Front-End-Design-Checklist) | The Design Checklist for Front-End Developers is an exhaustive list of elements which can help developers to analyse and understand web designs and ensure the quality of their Front-End development. |
[⬆ back to top](#table-of-contents)
## Useful Snippets
Here you can find some useful snippets of code categorized by tech
### JavaScript
Conditionally load a script - [See gist](https://gist.github.com/jpsantos7/06a64d5cb99bb84bc47109efe7fa5eff)
```js
const loadScript = (src) => {
let s = document.createElement('script');
s.src = src + "?" + new Date().getTime(); // add timestamp or not
s.type = "text/javascript";
s.async = false; // or true
// s.addAttribute('myAttribute', 'myAttributeValue'); // if needed
document.getElementsByTagName('head')[0].appendChild(s); // or before closing the
}
// Usage - either put this inside a script on the or and conditionally load it as follows
// if (document.domain == 'myDomain.com') {
// loadScript('https://myawesomesite/myscriptfile.js');
//}
export default loadScript;
```
Inline svg from img src - [See gist](https://gist.github.com/jpsantos7/33be4bea05334aacb72b65d2c6004acd)
```js
/**
* Inline svg
*/
const allImg = document.querySelectorAll('img');
for (let i = 0; i < allImg.length; i++) {
const imgSrc = allImg[i].getAttribute('src');
if (imgSrc.split('.')[1] === 'svg') {
let myRequest = new Request(imgSrc);
fetch(myRequest)
.then((response) => {
return response.text();
})
.then((svg) => {
allImg[i].parentNode.innerHTML = svg;
});
}
}
```
HTML Metatags - [See gist](https://gist.github.com/jpsantos7/63c5045b3e956d33259ae6ab059c7fa3)
```html
My awesome page title
-->
```
[⬆ back to top](#table-of-contents)
## Accessibility
| Website | Description |
| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [a11yresources](https://a11yresources.webflow.io/) | a11yresources - A growing list of accessibility tools and resources |
| [Who can use](https://www.whocanuse.com/) | A tool that brings attention and understanding to how color contrast can affect different people with visual impairments. |
| [The A11Y Project](https://www.a11yproject.com/) | The Accessibility (A11Y) Project is an Open-source, community-driven effort to make digital accessibility easier. |
| [Accessibility Myths](https://a11ymyths.com/) | Debunking Accessibility Myths |
| [ANDI - Accessibility Testing Tool](https://www.ssa.gov/accessibility/andi/help/install.html) | ANDI (Accessible Name & Description Inspector) is a free accessibility testing tool. |
| [WAVE Web Accessibility Evaluation Tools](https://wave.webaim.org/) | WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. |
| [A Complete Guide To Accessible Front-End Components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/) | Reliable accessible components: from tabs and tables to toggles and tooltips. |
| [Web Accessibility Guidelines](http://web-accessibility.carnegiemuseums.org/) | Web Accessibility Guidelines from the Carnegie Museums |
[⬆ back to top](#table-of-contents)
## Others
| Website | Description |
| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [MDB: Markdown Badges](https://mdb.pushkaryadav.in/) | Generate amazing svg markdown badges within few clicks |
| [Markdown Preview](https://freecodetools.org/markdown-preview/) | Markdown Editor with instant preview using GitHub CSS. |
| [JavaScript Quiz](https://javascriptquiz.com) | JavaScript Quiz - Check your knowledge by having fun. |
| [CookieBubble](https://cookiebubble.netlify.app) | The easy way to inform users that your website is using cookies. |
| [Developer Updates](https://www.developerupdates.com) | Keeps you updated one everything going on in the software developement world |
| [Boxy SVG Editor](https://boxy-svg.com/) | SVG Editing Tool - Here you can easily edit and save any SVG file |
| [Cssrepo](https://cssrepo.com/) | A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS |
| [Web Searcher](https://websearcher.vercel.app/) | Create Open Graph, Twitter and basic meta tags easily |
| [MakeMeta](https://makemeta.app/) | Effortlessly generate Meta Tags for your website! |
[⬆ back to top](#table-of-contents)
Similar amazing projects: [Public APIs](https://publicapis.dev) - [Dev Resources](https://devresourc.es)
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg