├── Academic Resources └── README.md ├── Personal Growth └── README.md ├── Inspiration and Motivation └── README.md ├── Resources for Developers ├── Icons │ └── README.md ├── Images │ └── README.md ├── Illustrations │ └── README.md ├── CSS Generators │ └── README.md └── README.md ├── Skills Development ├── Git and GitHub │ ├── CheatSheets │ │ ├── Git cheat sheet dark.jpg │ │ └── Git cheat sheet light.jpg │ └── README.md ├── React │ └── README.md ├── README.md ├── Vue │ └── README.md ├── Angular │ └── README.md ├── UI Design │ └── README.md ├── App Development │ └── README.md ├── Data Science │ └── README.md ├── Data Engineering │ └── README.md ├── Artificial Intelligence │ └── README.md ├── Coding Interviews Resources │ └── README.md ├── JavaScript │ └── README.md ├── C and C++ │ └── README.md ├── Python │ └── README.md ├── DevOps │ └── README.md ├── Web Development │ └── README.md └── DSA │ └── README.md ├── README.md └── Career Paths └── README.md /Academic Resources/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Personal Growth/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Inspiration and Motivation/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resources for Developers/Icons/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resources for Developers/Images/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resources for Developers/Illustrations/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resources for Developers/CSS Generators/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Skills Development/Git and GitHub/CheatSheets/Git cheat sheet dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevEssaAhmed/Explore-and-Grow/HEAD/Skills Development/Git and GitHub/CheatSheets/Git cheat sheet dark.jpg -------------------------------------------------------------------------------- /Skills Development/Git and GitHub/CheatSheets/Git cheat sheet light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevEssaAhmed/Explore-and-Grow/HEAD/Skills Development/Git and GitHub/CheatSheets/Git cheat sheet light.jpg -------------------------------------------------------------------------------- /Skills Development/React/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | | |Frontend Developer Roadmap| 8 | | |Backend Developer Roadmap| 9 | 10 | |[Coding with Sloba](https://www.youtube.com/playlist?list=PLjsBk8SIQEi9Owh_q04TK0SybkROD_AFx) |React| 11 | -------------------------------------------------------------------------------- /Skills Development/README.md: -------------------------------------------------------------------------------- 1 | #
Skills Development 2 | 3 | All the Resources you will need to learn the modern days skills are available here 4 | 5 | ## Table of Contents 6 | 7 | ### Main Categories 8 | 9 | - [Web Development](#) 10 | - [App Development](#career-paths) 11 | - [Blockchain](#career-paths) 12 | - [Data Science](#career-paths) 13 | - [Artificial Intelligence](#career-paths) 14 | - [Data Strutures and Algorithms](#career-paths) 15 | 16 | ### Sub Categories 17 | 18 | - [HTML](#) 19 | - [CSS](#) 20 | - [JavaScript](#) 21 | - [TypeScript](#) 22 | - [React](#) 23 | - [Vue](#) 24 | - [Node JS](#) 25 | - [React Native](#) 26 | - [Flutter](#) 27 | - [Python](#) 28 | - [Solidity](#) 29 | - [C and C++](#) 30 | -------------------------------------------------------------------------------- /Skills Development/Vue/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /Skills Development/Angular/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /Skills Development/UI Design/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /Skills Development/App Development/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /Skills Development/Data Science/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /Skills Development/Data Engineering/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /Skills Development/Artificial Intelligence/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /Skills Development/Coding Interviews Resources/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /Skills Development/JavaScript/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 2 | 3 | ## A list of Resources to help you get started in Web Development 4 | 5 | | Link/Name | Description | 6 | |:----------------------------------------------|:-------------------------------------| 7 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 8 | |https://roadmap.sh/backend |Backend Developer Roadmap| 9 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 10 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 11 | |[JavaScript Simplified](https://drive.google.com/drive/folders/1x42NuEI8LE8I2TeV02-tp1FpDrl-kTIx?usp=share_link) |JavaScript| 12 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Explore and Grow 2 | 3 | Explore and Grow is a comprehensive collection of resources for individuals looking to further their personal and professional development. From career paths to personal growth, this repository offers a wide range of information, tips, and tools to help you achieve your goals. Whether you're just starting out or looking to take your skills to the next level, Explore and Grow has something for everyone. 4 | 5 | ## Table of Contents 6 | - [Career Paths](#career-paths) 7 | - [Personal Growth](#personal-growth) 8 | - [Academic Resources](#personal-growth) 9 | - [Skills Development](#skills-development) 10 | - [Tools and Resources](#tools-and-resources) 11 | - [Inspiration and Motivation](#inspiration-and-motivation) 12 | 13 | ## Career Paths 14 | List of resources and information related to different career paths. 15 | 16 | ## Personal Growth 17 | Tips, advice and resources to help individuals grow both personally and professionally. 18 | 19 | ## Skills Development 20 | Guides and tutorials to help individuals develop new skills and improve existing ones. 21 | 22 | ## Tools and Resources 23 | A collection of useful tools and resources for personal and professional development. 24 | 25 | ## Inspiration and Motivation 26 | Stories and resources to keep individuals motivated and inspired on their personal and professional growth journey. 27 | 28 | ## How to contribute? 29 | If it's your first time to contribute, here's some help! 30 | ### Please follow these steps: 31 | ### 1: Fork this repository 32 | ### 2: Clone the forked repo from your profile 33 | ### 3: Create Branch and add your contribution 34 | ### 4: Push changes and make a pull request 35 | 36 | ## Make sure the pattern for each resource is like: 37 | ``` 38 | ## 1: Flutter (Official) 39 | ### Flutter's official channel for lot of fun content, the best part is 'Flutter Widget of the Week' playlist. 40 | link: https://www.youtube.com/c/flutterdev 41 | ``` 42 | 43 | ## CONTRIBUTORS 44 | Amazing people who made their contributions. Feel free to contribute, and get yourself featured here! 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Skills Development/C and C++/README.md: -------------------------------------------------------------------------------- 1 | #
C and C++ 2 | 3 | ##
Overview of C and C++
4 | 5 | 6 | C and C++ are programming languages that are widely used in the development of system software, operating systems, embedded systems, and applications that require high performance and low-level control. 7 | 8 | - ## C Programming Language 9 | C is a procedural programming language that was developed in the 1970s by Dennis Ritchie at Bell Labs. C is a compiled language, which means that the code must be translated into machine code before it can be executed. C is a powerful language that provides low-level access to memory and hardware, making it suitable for system programming and other applications that require high performance and low-level control. 10 | 11 | - ## C++ Programming Language 12 | C++ is an object-oriented programming language that was developed in the 1980s by Bjarne Stroustrup at Bell Labs. C++ is based on C and adds support for object-oriented programming, generic programming, and other features that make it a versatile language for a wide range of applications. C++ is a compiled language, which means that the code must be translated into machine code before it can be executed. 13 | 14 | - ## Features of C and C++ 15 | Some of the key features of C and C++ include: 16 | 17 | - Low-level memory access and control 18 | - Fast performance 19 | - Support for procedural and object-oriented programming 20 | - Support for generic programming 21 | - Standard libraries for common tasks 22 | - Large community and support 23 | 24 | ## Learning Resources 25 | - There are many resources available for learning C and C++, including textbooks, online courses, and tutorials. Some popular resources include the book "The C - Programming Language" by Kernighan and Ritchie, the online course "C++ For C - Programmers" by Coursera, and the website "cplusplus.com". 26 | 27 |
28 | 29 | ##
A list of Resources to help you learn C and C++
30 | 31 |
32 | 33 | | Link/Name | Description | 34 | |:----------------------------------------------|:-------------------------------------| 35 | |[freecodecamp](https://www.youtube.com/watch?v=vLnPwxZdW4Y) |Basic of C++| 36 | |[CodeHelp](https://www.youtube.com/watch?v=i_5pvt7ag7E) |OOPS in C++| 37 | 38 | 39 | 40 |
41 | -------------------------------------------------------------------------------- /Skills Development/Python/README.md: -------------------------------------------------------------------------------- 1 | #
Python 2 | 3 | ##
Overview of Python
4 | 5 | Python is a popular, high-level programming language that is widely used in a variety of fields, including web development, data analysis, artificial intelligence, and scientific computing. 6 | 7 | - ### General Purpose Programming Language 8 | 9 | Python is a general-purpose programming language, which means it can be used to build a wide range of applications, from simple command-line scripts to complex web applications. 10 | 11 | - ### Easy to Learn and Use 12 | 13 | One of the key benefits of Python is that it is easy to learn and use, even for beginners. Python's simple syntax and dynamic typing make it a great choice for new programmers who want to get started with coding. 14 | 15 | - ### Object-Oriented Programming 16 | 17 | Python is an object-oriented programming language, which means it provides support for creating classes and objects. This allows developers to create reusable code and build complex, modular applications. 18 | 19 | - ### Rich Standard Library 20 | 21 | Python comes with a rich standard library that provides a wide range of modules and functions for common tasks, such as file I/O, networking, and database access. This makes it easy to write code quickly and efficiently, without having to reinvent the wheel. 22 | 23 | - ### Popular Libraries and Frameworks 24 | 25 | Python has a large and active community that has developed many popular libraries and frameworks for specific use cases. For example, Flask and Django are popular web frameworks for building web applications, and NumPy and Pandas are popular libraries for data analysis and scientific computing. 26 | 27 | - ### Cross-Platform Compatibility 28 | 29 | Python is a cross-platform programming language, which means it can run on a variety of operating systems, including Windows, Linux, and macOS. This makes it a great choice for building applications that need to run on multiple platforms. 30 | 31 | Overall, Python is a versatile and powerful programming language that is used in a variety of fields. Whether you're just getting started with programming or you're an experienced developer, Python is a great language to learn and use. 32 | 33 |
34 | 35 | ##
A list of Resources to help you learn Python
36 | 37 |
38 | 39 | | Link/Name | Description | 40 | |:----------------------------------------------|:-------------------------------------| 41 | | |Python Developer Roadmap| 42 | |[Python for Beginners](https://drive.google.com/drive/folders/1USbQzhzFQ1enmuDMXP4QDz7BxTzOABJi) |Python for Beginners| 43 | |[Advance Python Course](https://drive.google.com/drive/folders/1YVRZ20f1A2319J9cpN8vGEbRMEjESFfC) |Modern Python Bootcamp| 44 | 45 | 46 |
47 | -------------------------------------------------------------------------------- /Skills Development/DevOps/README.md: -------------------------------------------------------------------------------- 1 | #
Data Structures and Algorithms
2 | 3 | ##
Overview of DevOps
4 | 5 | DevOps is a set of practices that combines software development and IT operations to shorten the development life cycle and deliver high-quality software more quickly. DevOps emphasizes automation, collaboration, and communication between developers, operations teams, and other stakeholders. 6 | 7 | ### DevOps Practices 8 | Some of the key practices of DevOps include: 9 | 10 | - Continuous Integration (CI): Automating the process of building, testing, and deploying code changes to reduce errors and improve efficiency. 11 | - Continuous Delivery (CD): Automating the process of deploying code changes to production environments to ensure that software is always up-to-date and available to users. 12 | - Infrastructure as Code (IaC): Treating infrastructure like software by defining it in code, allowing for greater automation and consistency across environments. 13 | - Monitoring and Logging: Collecting data on system performance and user behavior to identify issues and opportunities for improvement. 14 | - Collaboration and Communication: Encouraging cross-functional teams to work together and communicate effectively to improve efficiency and quality. 15 | 16 | ### Benefits of DevOps 17 | - Some of the key benefits of DevOps include: 18 | 19 | - Faster time-to-market: By automating processes and improving collaboration, DevOps can reduce the time it takes to deliver new features and updates. 20 | - Improved quality: By integrating testing and monitoring into the development process, DevOps can catch issues earlier and improve overall software quality. 21 | - Greater efficiency: By automating tasks and reducing manual processes, DevOps can improve efficiency and reduce errors. 22 | - Better collaboration: By bringing developers, operations teams, and other stakeholders together, DevOps can improve communication and collaboration, leading to better outcomes. 23 | 24 | ###Learning Resources 25 | There are many resources available for learning about DevOps, including books, courses, and online communities. Some popular resources include "The Phoenix Project" by Gene Kim, "Continuous Delivery" by Jez Humble and David Farley, and the DevOps community on Reddit. 26 | 27 |
28 | 29 | ##
A list of Resources to help you learn DSA
30 | 31 |
32 | 33 | | Link/Name | Description | 34 | |:----------------------------------------------|:-------------------------------------| 35 | |[DSA in JavaScript](https://www.youtube.com/playlist?list=PL8p2I9GklV47TMMnPzqnkCtSOS3ebr4O7) |DSA JavaScript| 36 | |[DSA in Python](https://www.youtube.com/playlist?list=PLrk5tgtnMN6TYBW0-U4YhIRyYEVpqVEnJ) |DSA Python| 37 | |[DSA in Java](https://www.youtube.com/playlist?list=PLrk5tgtnMN6StFV60jlQ9W-RXyHppbp8G) |DSA Java| 38 | |[DSA in C++](https://mega.nz/folder/ONsWyahD#dfbmeo82H5mUqwqYpRE7-Q) |DSA C++| 39 | 40 |
41 | -------------------------------------------------------------------------------- /Skills Development/Web Development/README.md: -------------------------------------------------------------------------------- 1 | #
Web Development 2 | 3 | ##
Overview of Web Development
4 | 5 | Web development is the process of building and maintaining websites and web applications. It involves a variety of disciplines, including design, front-end development, back-end development, and database management. 6 | 7 | - ### Front-End Development 8 | 9 | Front-end development involves designing and developing the user interface of a website or web application. This includes the layout, design, and interactivity of the website or application. Front-end developers typically use HTML, CSS, and JavaScript to create the visual and interactive elements of a website. 10 | 11 | - ### Back-End Development 12 | 13 | Back-end development involves building the server-side of a website or web application. This includes the code that runs on the server, manages databases, and processes data. Back-end developers typically use programming languages like PHP, Python, Ruby, and Java to build the server-side of a website. 14 | 15 | - ### Full-Stack Development 16 | 17 | Full-stack development involves working on both the front-end and back-end of a website or web application. Full-stack developers are responsible for creating a seamless user experience by integrating the front-end and back-end components of a website. 18 | 19 | - ### Frameworks and Libraries 20 | 21 | Web development often involves using frameworks and libraries to simplify the development process. Popular front-end frameworks and libraries include React, Angular, and Vue, while popular back-end frameworks and libraries include Node.js, Django, and Ruby on Rails. 22 | 23 | - ### Version Control 24 | 25 | Version control is an important part of web development, as it allows developers to collaborate on code and track changes over time. GitHub is a popular version control platform that many web developers use to manage their code. 26 | 27 | Overall, web development is a complex and multifaceted field that requires a combination of technical skills, design skills, and problem-solving abilities. With the right tools and resources, however, anyone can learn to build websites and web applications that are both functional and visually appealing. 28 | 29 |
30 | 31 | ##
A list of Resources to help you get started in Web Development
32 | 33 |
34 | 35 | | Link/Name | Description | 36 | |:----------------------------------------------|:-------------------------------------| 37 | |https://roadmap.sh/frontend |Frontend Developer Roadmap| 38 | |https://roadmap.sh/backend |Backend Developer Roadmap| 39 | |[Dave Gray HTML Course](https://www.youtube.com/watch?v=mJgBOIoGihA) |HTML| 40 | |[Dave Gray CSS Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo&t=15s) |CSS| 41 | |[ZTM Course](https://www.youtube.com/watch?v=0kS3M8a6kP8) |HTML and CSS| 42 | |[React](https://github.com/EssaAhmd/Explore-and-Grow/tree/main/Skills%20Development/React) |React| 43 | 44 |
-------------------------------------------------------------------------------- /Skills Development/Git and GitHub/README.md: -------------------------------------------------------------------------------- 1 | #
Git and GitHub 2 | 3 | ##
Overview of Git and GitHub
4 | 5 | Git is a version control system that is widely used in software development to manage source code and track changes over time. GitHub is a web-based platform that provides hosting for Git repositories and additional features such as issue tracking, project management, and collaboration tools. 6 | 7 | - ### Git 8 | 9 | Git is a distributed version control system that was developed by Linus Torvalds in 2005. Git allows developers to track changes to their code over time, collaborate with others, and manage multiple versions of their code. Git uses a branching model that allows developers to work on multiple versions of their code simultaneously and to merge changes between branches. Git is widely used in software development and is supported by many integrated development environments (IDEs) and text editors. 10 | 11 | - ### GitHub 12 | 13 | GitHub is a web-based platform that provides hosting for Git repositories and additional features such as issue tracking, project management, and collaboration tools. GitHub allows developers to share their code with others, collaborate on projects, and contribute to open source software. GitHub provides a social platform for developers to connect with others, showcase their work, and build a portfolio of their projects. 14 | 15 | - ### Features of Git and GitHub 16 | 17 | Some of the key features of Git and GitHub include: 18 | 19 | - Version control: Track changes to your code over time and manage multiple versions of your code. 20 | - Branching: Work on multiple versions of your code simultaneously and merge changes between branches. 21 | - Collaboration: Share your code with others, collaborate on projects, and contribute to open source software. 22 | - Issue tracking: Track bugs, feature requests, and other issues in your code. 23 | - Project management: Organize your code and collaborate with others on project planning and execution. 24 | - Social features: Showcase your work, connect with other developers, and build a portfolio of your projects. 25 | - Learning Resources 26 | - There are many resources available for learning Git and GitHub, including online courses, tutorials, and documentation. Some popular resources include the online course "Git Essential Training" by LinkedIn Learning, the tutorial "GitHub Hello World" by GitHub, and the documentation for Git and GitHub. 27 | 28 |
29 | 30 | ##
A list of Resources to help you learn Python
31 | 32 |
33 | 34 | | Link/Name | Description | 35 | |:----------------------------------------------|:-------------------------------------| 36 | |[Git Course](https://drive.google.com/drive/folders/1GubS--iuGXd23-7nOCU53BiAYqn49Dcz?usp=share_link) |Git Course| 37 | |[CheatSheets](https://github.com/DevEssaAhmed/Explore-and-Grow/tree/main/Skills%20Development/Git%20and%20GitHub/CheatSheets) |Git CheatSheet| 38 | 39 |
40 | -------------------------------------------------------------------------------- /Skills Development/DSA/README.md: -------------------------------------------------------------------------------- 1 | #
Data Structures and Algorithms
2 | 3 | ##
Overview of Data Structures and Algorithms
4 | 5 | Data Structures and Algorithms are fundamental concepts in computer science, which are used to organize and manipulate data and solve computational problems. 6 | 7 | - ### Data Structures 8 | 9 | Data Structures are used to store and organize data in memory, in a way that makes it easy to access and manipulate. Common data structures include arrays, linked lists, stacks, queues, trees, and graphs. Each data structure has its own strengths and weaknesses, depending on the specific use case. 10 | 11 | - ### Algorithms 12 | 13 | Algorithms are step-by-step procedures for solving computational problems. They are used to perform operations on data structures and to perform computations on data. Common algorithms include sorting, searching, graph traversal, and dynamic programming. Each algorithm has its own time and space complexity, which determines how long it will take to run and how much memory it will require. 14 | 15 | - ### Analysis of Algorithms 16 | 17 | Analysis of Algorithms is the process of evaluating the time and space complexity of an algorithm. This involves determining how long the algorithm will take to run and how much memory it will require, as a function of the size of the input data. This information is used to compare different algorithms and to choose the most efficient algorithm for a given problem. 18 | 19 | - ### Importance of Data Structures and Algorithms 20 | 21 | Data Structures and Algorithms are essential concepts for computer science, as they form the basis for many other fields, such as artificial intelligence, machine learning, and data science. They are used to solve a wide range of problems, from simple text search to complex network optimization. Understanding Data Structures and Algorithms is crucial for any software developer or computer scientist who wants to write efficient, scalable, and maintainable code. 22 | 23 | - ### Learning Resources 24 | 25 | There are many resources available for learning Data Structures and Algorithms, including textbooks, online courses, and tutorials. Some popular resources include the book "Introduction to Algorithms" by Cormen, Leiserson, Rivest, and Stein, the online course "Algorithms, Part I" and "Part II" by Sedgewick and Wayne, and the website "GeeksforGeeks". 26 | 27 |
28 | 29 | ##
A list of Resources to help you learn DSA
30 | 31 |
32 | 33 | | Link/Name | Description | 34 | |:----------------------------------------------|:-------------------------------------| 35 | |[DSA in JavaScript](https://www.youtube.com/playlist?list=PL8p2I9GklV47TMMnPzqnkCtSOS3ebr4O7) |DSA JavaScript| 36 | |[DSA in Python](https://www.youtube.com/playlist?list=PLrk5tgtnMN6TYBW0-U4YhIRyYEVpqVEnJ) |DSA Python| 37 | |[DSA in Java](https://www.youtube.com/playlist?list=PLrk5tgtnMN6StFV60jlQ9W-RXyHppbp8G) |DSA Java| 38 | |[DSA in C++](https://mega.nz/folder/ONsWyahD#dfbmeo82H5mUqwqYpRE7-Q) |DSA C++| 39 | 40 |
41 | -------------------------------------------------------------------------------- /Career Paths/README.md: -------------------------------------------------------------------------------- 1 | # Career Paths in Computer Science 2 | 3 | List of resources and information related to different career paths in the field of computer science. 4 | 5 | ## Table of Contents 6 | 7 | - [Software Development](#software-development) 8 | - [Data Science](#data-science) 9 | - [UX Design](#ux-design) 10 | - [Cybersecurity](#cybersecurity) 11 | - [Product Management](#prodcut-management) 12 | - [Digital Marketing](#digital-marketing) 13 | - [Devops](#devops) 14 | - [Artificial Intelligence](#artificial-intelligence) 15 | - [Cloud Computing](#cloud-computing) 16 | - [Blockchain](#blockchain) 17 | 18 | 19 | ## 1. Software Development 20 | Software development is a popular career path for those who enjoy working with code and developing software applications. The roadmap for software development includes learning programming languages, software design patterns, and software development methodologies. Roadmap.sh offers a detailed roadmap for software development that covers everything from basic programming concepts to advanced software development techniques. 21 | 22 | [Software Development Roadmap](https://roadmap.sh/backend) 23 | 24 | ## 2. Data Science 25 | Data science is a popular career path for those who enjoy working with data and using it to drive insights and business decisions. The roadmap for data science includes learning statistical analysis, machine learning, data visualization, and data modeling. Roadmap.sh offers a comprehensive roadmap for data science that covers everything from basic statistical concepts to advanced machine learning techniques. 26 | 27 | Career Paths 28 | - [Data Science](https://roadmap.sh/data-science) 29 | - [Data Analyst]() 30 | - [Business Intelligence Analyst]() 31 | 32 | Resources 33 | - Data Science Handbook 34 | - Data Science Fundamentals 35 | - Data Science Bootcamp 36 | 37 | ## 3. UX Design 38 | User experience (UX) design is a popular career path for those who enjoy designing digital products that are easy to use and aesthetically pleasing. The roadmap for UX design includes learning design principles, user research, prototyping, and user testing. Roadmap.sh offers a detailed roadmap for UX design that covers everything from basic design concepts to advanced user research techniques. 39 | 40 | UX Design Roadmap 41 | 42 | ## 4. Cybersecurity 43 | Cybersecurity is a popular career path for those who enjoy protecting digital systems and data from cyber threats. The roadmap for cybersecurity includes learning network security, cryptography, ethical hacking, and risk management. Roadmap.sh offers a comprehensive roadmap for cybersecurity that covers everything from basic security concepts to advanced ethical hacking techniques. 44 | 45 | Cybersecurity Roadmap 46 | 47 | ## 5. Product Management 48 | Product management is a popular career path for those who enjoy overseeing the development of digital products and ensuring that they meet the needs of users and stakeholders. The roadmap for product management includes learning product strategy, market research, product design, and project management. Roadmap.sh offers a detailed roadmap for product management that covers everything from basic product management concepts to advanced product strategy techniques. 49 | 50 | Product Management Roadmap 51 | 52 | ## 6. Digital Marketing 53 | Digital marketing is a popular career path for those who enjoy promoting digital products and services and driving business growth through various online channels. The roadmap for digital marketing includes learning social media marketing, search engine optimization (SEO), content marketing, and digital analytics. Roadmap.sh offers a comprehensive roadmap for digital marketing that covers everything from basic marketing concepts to advanced digital analytics techniques. 54 | 55 | Digital Marketing Roadmap 56 | 57 | ## 7. DevOps 58 | DevOps is a popular career path for those who enjoy building and maintaining software infrastructure and processes that support continuous integration and delivery. The roadmap for DevOps includes learning cloud infrastructure, containerization, automation, and monitoring. Roadmap.sh offers a detailed roadmap for DevOps that covers everything from basic infrastructure concepts to advanced automation techniques. 59 | #### Career Paths 60 | - DevOps Engineer 61 | - Site Reliability Engineer 62 | - Infrastructure Engineer. 63 | 64 | #### Resources 65 | - DevOps Roadmap 66 | - The Ultimate DevOps Mastery Bundle 67 | - DevOps Fundamentals 68 | - Getting Started with DevOps 69 | 70 | 71 | ## 8. Artificial Intelligence 72 | Artificial Intelligence is the field of study that deals with developing intelligent systems and machines that can perform tasks that would normally require human intelligence. 73 | 74 | Career Paths 75 | 76 | - Artificial Intelligence Engineer 77 | - Machine Learning Engineer 78 | - Natural Language Processing Engineer. 79 | 80 | 81 | 82 | ## 9. Cloud Computing 83 | Cloud computing is a popular career path for those who enjoy building and maintaining digital infrastructure in the cloud, leveraging various cloud services to support business needs. The roadmap for cloud computing includes learning cloud architecture, security, deployment, and management. Roadmap.sh offers a comprehensive roadmap for cloud computing that covers everything from basic cloud concepts to advanced cloud deployment techniques. 84 | 85 | #### Career Paths 86 | - Cybersecurity Analyst 87 | - Penetration Tester 88 | - Information Security Engineer. 89 | 90 | #### Resources 91 | - Cybersecurity Fundamentals 92 | 93 | ## 10. Blockchain 94 | 95 | #### Overview 96 | Blockchain is a decentralized digital ledger that records transactions on multiple computers in a secure and transparent manner. It is the technology behind cryptocurrencies such as Bitcoin, but it has a wider range of applications beyond finance. 97 | 98 | #### Career Paths 99 | - Blockchain Developer 100 | - Blockchain Engineer 101 | - Blockchain Project Manager 102 | - Blockchain Solutions Architect. 103 | 104 | #### Resources 105 | - Blockchain Basics 106 | - Blockchain Fundamentals 107 | - Blockchain Developer Bootcamp 108 | - Blockchain Solutions with Hyperledger 109 | 110 | 111 | That's it! I -------------------------------------------------------------------------------- /Resources for Developers/README.md: -------------------------------------------------------------------------------- 1 | ## Table of Contents 2 | 3 | - [UI Graphics](#ui-graphics) 4 | - [Fonts](#fonts) 5 | - [Colors](#colors) 6 | - [Icons](#icons) 7 | - [Logos](#logos) 8 | - [Favicons](#favicons) 9 | - [Icon Fonts](#icon-fonts) 10 | - [Stock Photos](#stock-photos) 11 | - [Stock Videos](#stock-videos) 12 | - [Stock Music & Sound Effects](#stock-music--sound-effects) 13 | - [Vectors & Clip Art](#vectors--clip-art) 14 | - [Product & Image Mockups](#product--image-mockups) 15 | - [HTML & CSS Templates](#html--css-templates) 16 | - [CSS Frameworks](#css-frameworks) 17 | - [CSS Methodologies](#css-methodologies) 18 | - [CSS Animations](#css-animations) 19 | - [Javascript Animation Libraries](#javascript-animation-libraries) 20 | - [Javascript Chart Libraries](#javascript-chart-libraries) 21 | - [UI Components & Kits](#ui-components--kits) 22 | - [React UI Libraries](#react-ui-libraries) 23 | - [Vue UI Libraries](#vue-ui-libraries) 24 | - [Angular UI Libraries](#angular-ui-libraries) 25 | - [Svelte UI Libraries](#svelte-ui-libraries) 26 | - [React Native UI Libraries](#react-native-ui-libraries) 27 | - [Design Systems & Style Guides](#design-systems--style-guides) 28 | - [Online Design Tools](#online-design-tools) 29 | - [Downloadable Design Software](#downloadable-design-software) 30 | - [Design Inspiration](#design-inspiration) 31 | - [Image Compression](#image-compression) 32 | - [Chrome Extensions](#chrome-extensions) 33 | - [Others](#others) 34 | 35 | ## UI Graphics 36 | 37 | >Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI 38 | 39 | | Website                            | Description | 40 | | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | 41 | | [SVG sine waves](https://www.sinwaver.com/) | Export perfect sine waves as SVG for your front-end projects | 42 | | [UI Design Daily](https://uidesigndaily.com/) | Awesome UI Components of all types | 43 | | [100 Daily UI](https://100dailyui.webflow.io/) | Free Figma library of products, elements, and screens | 44 | | [Sketch App Sources](https://www.sketchappsources.com/) | Sketch UIs, wireframes, icons and much more | 45 | | [Humaaans](https://www.humaaans.com/) | Cool illustrations of people with the ability to mix and match | 46 | | [Paaatterns](https://products.ls.graphics/paaatterns/) | Free collection of beautiful patterns for all vector formats | 47 | | [thepatternlibrary](http://thepatternlibrary.com/) | Free beautiful background patterns | 48 | | [404 illustration](https://error404.fun/) | Free illustrations for 404 pages | 49 | | [Drawkit.io](https://www.drawkit.io/) | Illustrations for designers and startups | 50 | | [Absurd.design](https://absurd.design/) | Free surrealist illustrations for designers and developers | 51 | | [Undraw.co](https://undraw.co/) | Open-source illustrations for any idea you can imagine and create | 52 | | [Manypixels.co](https://www.manypixels.co/gallery/) | Monochromatic, Isometric high-quality illustrations | 53 | | [Open Peeps](https://www.openpeeps.com/) | Hand drawn illustration library | 54 | | [UI Space](https://uispace.net/) | Thousands of great UI freebies | 55 | | [Animations.co](http://animaticons.co/) | Beautiful, customizable animated GIF icons | 56 | | [Uplabs](https://www.uplabs.com/) | High-quality design resources (Free & Premium) | 57 | | [InvisionApp](https://www.invisionapp.com/inside-design/design-resources/) | Library of free, high-quality UI kits, icon packs, and mockups | 58 | | [Open Doodles](https://www.opendoodles.com/) | A Free Set of Sketchy Illustrations | 59 | | [Avataaars](https://avataaars.com/) | Free sketch library of avatars illustrations by Pablo Stanley | 60 | | [Blush](https://blush.design/) | Free customizable illustrations with Figma Plugin | 61 | | [Hero Patterns](http://www.heropatterns.com/) | A collection of repeatable SVG background patterns | 62 | | [BEAUBUS Patterns](https://patterns.beaubus.com/) | A set of 150+ free SVG patterns (backgrounds) | 63 | | [IsoFlat](https://isoflat.com/) | A Free collection of Isometric SVG graphic resources | 64 | | [IRA Design](https://iradesign.io/) | An open-source gradient illustrations collection by creative tim. | 65 | | [Transparent Textures](https://www.transparenttextures.com/) | A collection of transparent textures background patterns. | 66 | | [icons8.com/illustrations](https://icons8.com/illustrations) | Vector illustrations to class up your project | 67 | | [Patternico](https://patternico.com) | Seamless Pattern Maker | 68 | | [Freellustrations](https://www.freellustrations.com/) | Free Background Images for awesome landing Pages | 69 | | [Pixeltrue Illustrations](https://www.pixeltrue.com/illustrations) | Free Animated Illustrations | 70 | | [Abstract User Avatar API](https://www.abstractapi.com/user-avatar-api) | API to create simple yet flexible user avatars from user names or emails | 71 | | [sketchvalley](https://sketchvalley.com/) | Download free PNG, SVG or AI file . | 72 | | [PatternPad](https://patternpad.com/) | Free and unlimited unique pattern designs. | 73 | | [Dimensions](https://www.dimensions.com/) | Dimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces| 74 | | [Freebiesbug](https://freebiesbug.com/) | Hand-picked resources for web designers and developers, constantly updated.| 75 | | [Flexiple](https://2.flexiple.com/scale/all-illustrations) | One new high-quality, open-source illustration each day. | 76 | | [Cool Text](https://cooltext.com/)| Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work | 77 | | [illustration kit](https://illustrationkit.com/)| Premium open source illustrations added daily | 78 | | [Doodad Pattern Generator](https://doodad.dev/pattern-generator/) | Create unique, seamless, royalty-free patterns.| 79 | | [Pattern Monster](https://pattern.monster/) | A simple online pattern generator to create repeatable SVG patterns| 80 | | [Exemplar](https://themeselection.com/products/exemplar-free-avatar-library-for-figma-and-sketch/) | Free Avatar Library for Figma and Sketch| 81 | | [UIBundle](https://uibundle.com) | Thousands of Free Design Resources like UI Kits, Mockups, Illustrations, Icons, Fonts, 3D assets, Templates and more. | 82 | | [openby.design](http://openby.design/) | Custom crafted free UI design resources, for personal and commercial projects. No attribution is required. | 83 | | [Design Stripe](https://designstripe.com/catalog) | Create beautiful illustrations, no design skills needed. | 84 | | [HOLA SVG!](https://holasvg.com/) | An SVG playground to share SVG stuff. | 85 | | [symu.co](https://symu.co/freebies/templates-4/)| Free templates, UI kits, icon, PSD | 86 | | [Mesh Gradient](https://meshgradient.in/)| Generate & download beautiful mesh gradients. | 87 | | [CSS Shadow Gradients](https://alvarotrigo.com/shadow-gradients/) | Generate CSS Gradients For Shadows. | 88 | | [Boring Avatars](https://boringavatars.com/) | SVG random, cutely avatars collections | 89 | | [Html to Design](https://www.figma.com/community/plugin/1159123024924461424/html.to.design) | Convert any website into fully editable Figma designs | 90 | 91 |
92 | ↥ Back To Top 93 |
94 | 95 | ## Fonts 96 | 97 | >Websites that offer free fonts as well as font-based tools 98 | 99 | | Website                            | Description | 100 | | ----------------------- | ------------------ | 101 | | [Google Fonts](https://fonts.google.com/)| Library of around 1000 free licensed font families | 102 | | [DaFont](https://www.dafont.com/)| Archive of freely downloadable fonts | 103 | | [Use & Modify](https://usemodify.com/)| Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces | 104 | | [1001 Free Fonts](https://www.1001freefonts.com/)| I think the name speaks for itself :smirk: | 105 | | [Font Squirrel](https://www.fontsquirrel.com/)| Font Squirrel scours the internet for high quality, legitimately free fonts | 106 | | [Font Fabric](https://www.fontfabric.com/free-fonts/)| A digital type foundry crafting retail fonts and custom typography for various brands | 107 | | [Tiff](https://tiff.herokuapp.com/)| A type diff tool that visually contrasts the differences between two fonts | 108 | | [TypeKit Practice](https://practice.typekit.com/)| Learn about typography practices | 109 | | [Fontjoy](https://fontjoy.com/)| Generate font pairing in one click | 110 | | [Golden Ratio](https://grtcalculator.com/)| Golden Ratio Typography Calculator | 111 | | [FontGet](https://www.fontget.com/) | Has a variety of fonts available to download and sorted neatly with tags | 112 | | [FontPair](https://fontpair.co/) | Helps you pair Google Fonts together 113 | | [Font Space](https://www.fontspace.com/)| A designer-centered free font website that has quick customizable previews | 114 | | [Abstract Fonts](http://www.abstractfonts.com/)| Fonts free for personal and commercial use | 115 | | [Free Typography](https://freetypography.com/)| A list of high quality fonts | 116 | | [Leon Sans](https://github.com/cmiscm/leonsans/)| A geometric sans-serif typeface made with code | 117 | | [Lexend](https://www.lexend.com/)| A variable font empirically shown to significantly improve reading-proficiency | 118 | | [Fonts for Apple Platforms](https://developer.apple.com/fonts/)| Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps | 119 | | [SFWin](https://github.com/blaisck/sfwin/)| San Francisco Fonts for Windows 10 and non-Apple Platform | 120 | | [Font Flipper](https://fontflipper.com/)| Preview 800+ Google Fonts on top of your own designs, without having to download the fonts | 121 | | [Fonts Arena](https://fontsarena.com/) | Free curated fonts | 122 | | [Befonts](https://befonts.com/) | High quality fonts for free | 123 | | [Arabic fonts](https://arabicfonts.net/) | Arabic fonts for free | 124 | | [FontDrop](https://fontdrop.info) | Simple and easy way to view the contents of font files | 125 | | [Open Foundry](https://open-foundry.com) | FREE platform for curated open-source typefaces | 126 | | [Glyphter](https://glyphter.com) | Upload your own SVGS and turn them into font files. Useful if you want a smaller library loaded | 127 | | [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/fonts) | A Hassle-Free Way to Self-Host Google Fonts | 128 | | [Rough Font Awesome](https://djamshed.github.io/rough-awesome-font/dist/)| When RoughJS meets Font Awesome | 129 | | [FFonts](https://ffonts.net)| Stylish fonts for free | 130 | | [Malayalam Fonts](https://smc.org.in/fonts/)| Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC) | 131 | | [Dev Fonts](https://devfonts.gafi.dev/)| Find and use the coding fonts for free | 132 | | [Font M](https://fontm.com/)| Free font you can download for material coding and design | 133 | | [W Fonts](https://www.wfonts.com/)| Download Free fonts | 134 | | [Modern fluid typography editor](https://modern-fluid-typography.vercel.app/)| Fluid typography is a modern way of approaching responsive typography. | 135 | | [UrbanFonts](https://www.urbanfonts.com/) | A collection of over 8000 free fonts and dingbats | 136 | | [Typespiration](https://typespiration.com/)| Inspirational font combinations and color palettes | 137 | | [Fontsource](https://fontsource.org/) | Self-host Open Source fonts in neatly bundled NPM packages. | 138 | | [FontBolt](https://www.fontbolt.com/) | Discover and generate your favorite fonts from pop culture. | 139 | 140 |
141 | ↥ Back To Top 142 |
143 | 144 | ## Colors 145 | 146 | >Websites and resources that help with choices related to colors 147 | 148 | | Website                            | Description | 149 | | ----------------------- | ------------------ | 150 | | [Color Brewer 2](https://colorbrewer2.org/)| The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest. | 151 | | [Huetone](https://github.com/ardov/huetone)| A tool to create accessible color systems. | 152 | | [Colormind.io](http://colormind.io)| Color palette generator | 153 | | [ColorCurves.app](https://colorcurves.app)| Color palette generator that uses curves to generate color palettes | 154 | | [ColorGradient](https://colorgradient.dev/)| A free tool to create simple and complex CSS Gradients visually | 155 | | [Coolors](https://coolors.co)| Create the perfect palette or get inspired by thousands of beautiful color schemes | 156 | | [HTML Color Codes](https://htmlcolorcodes.com/)| Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names | 157 | | [Colors & Fonts](https://www.colorsandfonts.com/)| A curated library of colors, fonts and resources | 158 | | [Palette List](https://www.palettelist.com/)| Pick 2 colors you like and the tool generates thousands of palettes for you. | 159 | | [Google Material Color Tool](https://material.io/resources/color/)| Official Google Material Color Palette Tool| 160 | | [Material Palette](https://www.materialpalette.com/)| Free to pick palettes, icons and colors for Material Design| 161 | | [ColorSpace](https://mycolor.space/)| Generate nice color palettes from one color | 162 | | [FlatUIColors](https://flatuicolors.com)| Beautiful set of color palettes in various flavors | 163 | | [Adobe Color](https://color.adobe.com/create)| Create color palettes, extract gradients from images, etc. | 164 | | [Colorsinspo](https://colorsinspo.com/) | All-in-one resource for finding everything about colors | 165 | | [ColorsWall](https://colorswall.com/) | Place to store your color palettes and generate palette in one click | 166 | | [Happyhues](https://www.happyhues.co/) | Happy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects by Mackenzie Child | 167 | | [Adobe Trends](https://color.adobe.com/trends)| Discover current color trends in different industries from the creative communities on Behance and Adobe Stock| 168 | | [Color Hunt](https://colorhunt.co/)| A free and open platform for color inspiration with thousands of trendy hand-picked color palettes | 169 | | [Gradient Hunt](https://gradienthunt.com/)| A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients | 170 | | [Web Gradients](https://webgradients.com/)| A free website to find good CSS gradients | 171 | | [ColorBox](https://www.colorbox.io)| A free website to produce color set | 172 | | [CSS gradient](https://cssgradient.io/)| A free website to make custom gradient and some examples of gradient | 173 | | [gradienta](https://gradienta.io/)| A pure css and jpg gradients | 174 | | [UI Gradients](https://uigradients.com/)| UI gradients color generator | 175 | | [Palette Generator](https://palettegenerator.colorion.co/)| Generate new color palette with every spacebar press | 176 | | [Material Palettes](https://material.colorion.co/)| 1000+ Material Design palettes | 177 | | [Grabient](https://www.grabient.com/) | Gradient Selector | 178 | | [ShadeSwash](https://shadeswash.netlify.app/) | Quickly generate shades of any color | 179 | | [BrandColors](http://brandcolors.net/) | The biggest collection of official brand color codes | 180 | | [BRAND PALETTES](https://brandpalettes.com/) | Logo Color Codes and Palettes | 181 | | [Material Design Palette Generator](http://mcg.mbitson.com) | Generate theme and color palette Material Design-like | 182 | | [Colorate](https://colorate.azurewebsites.net/) | Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. | 183 | | [0to255](https://www.0to255.com/) | A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more. | 184 | | [Color Blender](https://meyerweb.com/eric/tools/color-blend) | A tool that shows the midpoint colors between two colors 185 | | [Gradient Buttons](https://gradientbuttons.colorion.co/) | Ready to use copy/paste gradient buttons | 186 | | [Khroma](http://khroma.co/) | Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save. | 187 | | [whocanuse](https://whocanuse.com) | A tool that brings attention and understanding to how color contrast can affect different people with visual impairments. 188 | | [Colorable](https://colorable.jxnblk.com/) | Color combination contrast tester | 189 | | [Color Hex Picker](https://colorhexpicker.com) | Tool to get hex code along with name of the color. | 190 | | [Saruwakakun](https://saruwakakun.com/en/color-ideas) | The stunning color scheme for website & App Designs with previews | 191 | | [Paletton](https://paletton.com/)| Paletton.com is a designer color tool designed for creating color combinations that work together well.| 192 | | [Colorzilla](https://www.colorzilla.com/) | A powerful online Photoshop-like CSS gradient editor | 193 | | [CSS Gradient Editor](https://www.cssgradienteditor.com) | You may only need this tool for creating CSS gradient backgrounds and patterns. | 194 | | [Image Color Picker](https://image-color.com/) | Image color picker and palette generator | 195 | | [CombineCOLORS](https://combinecolors.com/) | Color mixing tool | 196 | | [Color Lovers](https://www.colourlovers.com/palettes) | It will show the color schemes which are popular in the outside world. | 197 | | [HTML CSS Color](https://www.htmlcsscolor.com/) | Free online Color (USA) or Colour (British) tools: information, gradient generator, color wheels etc. | 198 | | [HEX Color Codes](https://hexcolorcodes.org/) | It gets HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names. | 199 | | [CoolHue 2.0](https://webkul.github.io/coolhue/) | A free tool that shows different gradient examples in CSS and PNG format | 200 | | [Colors.lol](https://colors.lol/) | Interesting color palettes generated by a Twitter bot, there are hex codes and descriptive names for each color. | 201 | | [colors.dopely](https://colors.dopely.top/) | Super-fast and simple color palette generator, palettes can be saved and shared in seconds. | 202 | | [UIColor Picker](https://uicolorpicker.com/) | A collection of UI Colors with hex codes available to be copied in just one click. | 203 | | [Color Hex](https://www.color-hex.com) | Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK) and generates a simple css code for the selected color. | 204 | | [FarbVelo](https://farbvelo.elastiq.ch/) | A random color palette generator | 205 | | [Veranda Color](https://verandacolor.com) | Browse color palettes made by other designers, generate and submit your own | 206 | | [Duo](https://duo.alexpate.uk/) | Duo is a collection of colour combinations that I’ve curated from personal projects or that I’ve come across on the web. | 207 | | [Lospec Palette List](https://lospec.com/palette-list) | The Lospec Palette List is a database of palettes for pixel art. | 208 | | [Palettte App](https://palettte.app) | Build smooth color schemes that flow from one color to another. | 209 | | [Eggradients](https://www.eggradients.com/) | Gradient Background Colors with eggs.| 210 | | [Gradientos](https://www.gradientos.app/) | Find and test gradients easily. | 211 | | [Encycolorpedia](https://encycolorpedia.com/) | Website for referencing web colors. Color knowledge, Web colors, Hex color codes. | 212 | | [Croma](https://croma.app/) | A website for pick colors quickly from image or manually. It's color picker is easier to use. | 213 | | [Color Designer](https://colordesigner.io/gradient-generator) | A gradient generetor from one color. | 214 | | [Duotone](https://duotone.shapefactory.co/) | Find beautiful free duotone images to use in any project, or make custom duotone images by uploading your own image and applying a duotone effect in seconds. | 215 | | [coolbackgrounds generator](https://coolbackgrounds.io/) | Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites. | 216 | | [Color Shades Generator](https://mdigi.tools/color-shades/) | We can quickly generate color shades of our favorite colors or any colors, to create templates or css components with multiple color shades and more useful tools available on same site | 217 | 218 | 219 |
220 | ↥ Back To Top 221 |
222 | 223 | ## Icons 224 | 225 | >Resources for Icons including png, svg and more 226 | 227 | | Website                            | Description | 228 | | ----------------------- | ------------------ | 229 | | [Circum Icons](https://circumicons.com/)| Consistant open source icons as SVG for React, Vue and Svelte | 230 | | [UXWing](https://uxwing.com/)| Well Optimized, Free icons for commercial use | 231 | | [Shapedfonts Iconclub](https://shapedfonts.com/iconclub/)| 8000+ free icons | 232 | | [Feather Icons](https://feathericons.com/)| Beautiful, customizable open source icons | 233 | | [Tabler Icons](https://tablericons.com/)| 470+ highly customizable open source SVG icons | 234 | | [Xicons](https://www.xicons.org/#/)| SVG Vue/React components integrated from fluentui-system-icons, ionicons, etc. (Vue3, Vue2, React, SVG). | 235 | | [Iconoir](https://iconoir.com/)| Free library of 900+ open source icons | 236 | | [Simple Icons](https://simpleicons.org/)| 1307 Free SVG icons for popular brands | 237 | | [Linear Icons](https://linearicons.com/free)| 1000+ Ultra crisp vector icons | 238 | | [Icons8](https://icons8.com/)| Free icons, photos, vectors and tools | 239 | | [Flat Icon](https://www.flaticon.com/)| The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats | 240 | | [The Noun Project](https://thenounproject.com/)| Over 2 Million curated icons, created by a global community | 241 | | [Iconscout](https://iconscout.com/)| Free Download Icons illustrations stock photos at one place | 242 | | [IconSear.ch](https://iconsear.ch/search.html) | Search engine with over 50,000 SVG icons indexed | 243 | | [Nucleo App](https://nucleoapp.com/)| Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid) | 244 | | [Icon-icons.com](https://icon-icons.com/)| Free Icons PNG, ICO, ICNS and Vector file SVG | 245 | | [Bootstrap Icons](https://icons.getbootstrap.com/)| Free Icons built for Bootstrap but they'll work in any project | 246 | | [Remix Icon](https://remixicon.com/)| Simply Delightful Icon System | 247 | | [Iconmonstr](https://iconmonstr.com/) | Discover 4496+ free icons in 313 collections | 248 | | [Vivid.js](https://webkul.github.io/vivid/)| Ready to use Free and Open Source SVG Icons Pack JavaScript Library. | 249 | | [Iconfinder](https://www.iconfinder.com/)| Free and premium vector icons in SVG, PNG, CSH and AI format | 250 | | [Lordicon](https://lordicon.com/icons#free) | 50 free animated interactive icons | 251 | | [UseAnimations](https://useanimations.com/) | Free Animated Icons in SVG and Json Format(for lottie) | 252 | | [css.gg](https://css.gg/) | 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API | 253 | | [IconBros](https://www.iconbros.com) | 7843+ free icons grouped in 182 collections | 254 | | [Material Design Icons](https://materialdesignicons.com/) | An icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project. | 255 | | [Heroicons](https://heroicons.dev/) | Free, open source icons from the creators of Tailwind CSS. | 256 | | [Zondicons](https://www.zondicons.com/icons.html) | A set of free premium SVG icons for you to use on your digital products. | 257 | | [Endless Icons](http://endlessicons.com/) | A website offering a number of free icons. Icons are tagged and also compressed into kits. | 258 | | [Icomoon](https://icomoon.io/app/) |Browse 5500+ Free Icons. Add any set you wish to easily browse and search its icons. | 259 | | [Eva Icons](https://akveo.github.io/eva-icons/#/) |Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. | 260 | | [Cryptoicons](http://cryptoicons.co/) | A set of 430 crypto and fiat currency icons. Completely free. | 261 | | [Ikonate](https://ikonate.com/) | Fully customizable & accessible vector icons | 262 | | [appicon](https://appicon.co/)| Quickly generate app icons in different sizes for your IOS, macOS and Android projects| 263 | | [LineIcons](https://lineicons.com) | 2000+ Essential Line Icons for Designers and Developers | 264 | | [Evericons](https://www.figma.com/resources/assets/evericons-for-figma/) | Evericons is a big pack of over 460 free icons designed by Aleksey Popov. | 265 | | [SVG Repo](https://www.svgrepo.com/) | Download free SVG Vectors for commercial use. | 266 | | [Convertio](https://convertio.co/png-svg/) | Convert PNG files to SVG online & free. (One of the services provided by it.) | 267 | | [CSS ICON](https://cssicon.space/) | Icon set made with pure css code, no dependencies, "grab and go" icons | 268 | | [Unified icons](https://iconify.design/) |Thousands of icons, one unified framework. One library, over 40,000 vector icons. | 269 | | [System UIcons](https://systemuicons.com/) |220+ icons in a growing collection. | 270 | | [IconPark](https://github.com/bytedance/IconPark) | Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons | 271 | | [Radix Icons](https://icons.modulz.app/) |A crisp set of 15×15 icons designed by the Modulz team. All icons available as individual react component,SVG and more. | 272 | | [EOS Icons](https://icons.eosdesignsystem.com/) | A pixel-perfect, open source iconic font available as ligature and SVG. | 273 | | [Ionicons](https://ionicons.com) | Beautifully crafted open source icons for use in web, iOS, Android, and desktop apps. | 274 | | [Phosphor Icons](https://phosphoricons.com) | Phosphor is a flexible icon family for interfaces, diagrams, presentations | 275 | | [Teeny Icons](https://teenyicons.com/) | TeenyIcons is a set icons in SVG format easy to use in html | 276 | | [Lucide](https://lucide.netlify.app/) | Lucide is an open-source icon library, a fork of Feather Icons. | 277 | | [Icones](https://icones.js.org/) | Icon Explorer with Instant searching, powered by Iconify. | 278 | | [Shitty Icons](https://shittyicons.com/) | Collection of Free icons. | 279 | | [Iconspedia](https://www.iconspedia.com/) | Iconspedia is a website that contains a large collection of high quality free icons. | 280 | | [iconhub](https://iconhub.io/) | Just practical stunning icons for everyone | 281 | | [3DICONS](https://3dicons.co) | Beautifully crafted open source 3D icons | 282 | | [IconsDb](https://www.iconsdb.com/) | Free Custom Icons | 283 | | [Emoji Guide](https://emojiguide.org/) | The collection of 3300 emojis with their HTML codes for easy use. | 284 | 285 |
286 | ↥ Back To Top 287 |
288 | 289 | ## Logos 290 | 291 | >Resources for Logos 292 | 293 | | Website                            | Description | 294 | | ----------------------- | ------------------ | 295 | | [Instant Logo Search](http://instantlogosearch.com/)| Thousands of free brands logos ( SVG - PNG ) | 296 | | [LogoSear.ch](https://logosear.ch/search.html) | Search engine with over 200,000 SVG logos indexed | 297 | | [SVGPorn](https://svgporn.com) | 1000+ high-quality SVG logos | 298 | | [Payment System Logos](https://github.com/mpay24/payment-logos/) | Logos for payment systems available in png and svg | 299 | | [Browser Logos](https://github.com/alrra/browser-logos/) | High resolution web browser logos | 300 | | [VectorLogoZone](https://www.vectorlogo.zone/) | Consistently formatted SVG logos | 301 | | [World Vector Logo](https://worldvectorlogo.com/)| Download vector logos of brands you love | 302 | | [Logo Maker](https://logomakr.com/)| Create custom logos | 303 | | [Free Logo Maker](https://www.namecheap.com/logo-maker/)| Fast, All-in-One Logo Generator | 304 | | [LOGOwine](https://www.logo.wine/)| Brand Logos Free Download in SVG Vector & PNG File Format | 305 | | [Namecheap Logo Maker](https://www.namecheap.com/logo-maker/)| Create and download custom Logos for free | 306 | 307 |
308 | ↥ Back To Top 309 |
310 | 311 | ## Favicons 312 | 313 | >Resources for Favicons 314 | 315 | | Website                            | Description | 316 | | ----------------------- | ------------------ | 317 | | [Favicon.io](https://favicon.io/)| Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats | 318 | | [Favicomatic](https://favicomatic.com/)| Generate favicons of all the sizes and formats as well as the HTML code needed to support every possible browser or device | 319 | | [Favicon Generator](http://tools.dynamicdrive.com/favicon/)| Generate favicon ico files for your website | 320 | | [RealFaviconGenerator](https://realfavicongenerator.net/)| Generate icons for all platforms (Windows, iOS, Android) | 321 | | [FontIcon](https://gauger.io/fonticon/)| Generate favicons and images from Font Awesome icons | 322 | | [Favicon.cc](https://www.favicon.cc) | Draw a favicon online and browse through a library of favicons made by other users | 323 | | [Maskable.app Editor](https://maskable.app/editor/) | Generate maskable PWA icons based on your existing icon | 324 | 325 |
326 | ↥ Back To Top 327 |
328 | 329 | ## Icon Fonts 330 | 331 | >Resources for Icon Fonts 332 | 333 | | Website                            | Description | 334 | | ----------------------- | ------------------ | 335 | | [Font Awesome](https://fontawesome.com/)| The web's most popular icon set and toolkit | 336 | | [Line Awesome](https://icons8.com/line-awesome)| Swap in replacement of Font Awesome with modern line icons | 337 | | [Material Icons](https://material.io/resources/icons/)| Material design icon library | 338 | | [IonIcons](http://ionicons.com/)| Beautifully crafted open source icons from Ionic team | 339 | | [Zurb Foundation Icons](https://zurb.com/playground/foundation-icon-fonts-3)| Customizable Foundation icons | 340 | | [Fontisto Icons](https://fontisto.com/)| Fontisto the iconic font and css toolkit · 616+ free icons | 341 | | [Boxicons](https://boxicons.com/)| Boxicons is a free collection of carefully crafted open source icons | 342 | | [Icofont](https://icofont.com/)| 2100+ free icons to spice up your creative designs | 343 | | [Material Palette](https://www.materialpalette.com/icons)| Free to pick palettes, icons and colors for Material Design | 344 | | [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/index.html) | Material design icon font | 345 | | [Vscode Codicons](https://microsoft.github.io/vscode-codicons/dist/codicon.html) | The icon font from Visual Studio Code | 346 | | [Devicon](https://devicon.dev) | Devicon is a set of icons representing programming languages, designing & development tools | 347 | | [PaymentFont](https://github.com/AlexanderPoellmann/PaymentFont) | A sleek web font for payment operators and methods. Featuring 116 icons | 348 | | [Weather Icons](https://erikflowers.github.io/weather-icons/) | Weather Icons is the only icon font with 222 weather themed icons | 349 | | [Stroke 7](https://themes-pixeden.com/font-demos/7-stroke/index.html) | 202 thin stroke icons inspired by iOS 7 | 350 | | [Jam Icons](https://jam-icons.com/) | 890+ handcrafted icons to make your web app awesome | 351 | | [Fontello](http://fontello.com/)| 200+ web icons where you can customize the names or codes of icons. | 352 | | [Linea](https://linea.io/)| Linea: Featuring 750+ Free Icons | 353 | | [Unicons](https://iconscout.com/unicons)| A set of 1100+ Free line style icons available as web font, SVG icons, and as components for JS frameworks like React, Vue and React Native. | 354 | | [Mobirise Icons](https://mobiriseicons.com/)| A free, open source set of 150 elegant, pixel-perfect linear icons, available as web icon font and SVG icons. | 355 | | [Hero Icons](https://heroicons.dev/)| Free Open Source Svg Icon Library | 356 | 357 |
358 | ↥ Back To Top 359 |
360 | 361 | ## Stock Photos 362 | 363 | >Websites that offer free stock photos of all kinds for your websites and apps 364 | 365 | | Website                            | Description | 366 | | ----------------------- | ------------------ | 367 | | [Pexels](https://www.pexels.com/)| Free stock photos shared by talented creators | 368 | | [Unsplash](https://unsplash.com/)| The internet’s source of freely usable images 369 | | [Pixabay](https://pixabay.com/)| Over 1.7 million+ high-quality stock images and videos | 370 | | [Magdeleine](https://magdeleine.co/)| Gallery & free high-resolution photo everyday | 371 | | [Picspree](https://picspree.com)| Royalty free images, stock photos, illustrations, and vectors | 372 | | [Burst](https://burst.shopify.com/)| Free stock photos collections | 373 | | [Gratisography](https://gratisography.com/)| Free collection of free high-resolution pictures | 374 | | [Life of Pix](https://www.lifeofpix.com/)| Free high-resolution photography | 375 | | [Stock Snap](https://stocksnap.io/)| Hundreds of high quality photos added weekly | 376 | | [Morguefile](https://morguefile.com/)| Over 350,000 free stock photos for commercial use | 377 | | [Kaboom Pics](https://kaboompics.com/)| Stock photography and color palettes. Good for product images | 378 | | [New Old Stock](https://nos.twnsnd.co/)| Stock vintage photos | 379 | | [Pic Jumbo](https://picjumbo.com/)| Good collections of different types of photos | 380 | | [Public Domain Pictures](https://www.publicdomainpictures.net/en/)| Public domain images of all types | 381 | | [Find A Photo](https://www.chamberofcommerce.org/findaphoto/)| Searches multiple stock photo websites | 382 | | [Stockvault](http://www.stockvault.net/)| Categorized stock photos | 383 | | [Placeholder](https://placeholder.com/)| A free image placeholder service for the web. You can specify image size and format | 384 | | [Realistic Shots](https://realisticshots.com/)| Free high-resolution stock photos | 385 | | [Negative Space](https://negativespace.co/)| High-Resolution Free Stock Photos | 386 | | [SkitterPhoto](https://skitterphoto.com/)| Free high-resolution photography | 387 | | [PicoGraphy](https://picography.co/)| Gorgeous, High-Resolution, Free Photos | 388 | | [Wunder Stock](https://wunderstock.com/)| Stunningly amazing free photos | 389 | | [PxHere](https://pxhere.com/)| Free Images & Free stock photos - PxHere | 390 | | [Piqsels](https://piqsels.com/)| Royalty Free Stock Photos | 391 | | [FoodiesFeed](https://www.foodiesfeed.com/)| Food photo stock | 392 | | [Nappy](https://www.nappy.co/)| A website offering Beautiful, high-res photos of black and brown people.| 393 | | [Generated Photos](https://generated.photos/)| Unique AI Generated model photos| 394 | | [Reshot](https://www.reshot.com/)| Uniquely free photos. Handpicked, non-stocky images. 395 | | [Free Images](https://www.freeimages.com/)| Find and download free stock photos - all free for personal and commercial use| 396 | | [Lorem Picsum](https://picsum.photos/)| An easy to use API to get beautiful placeholder images. Size and other parameters can be specified. | 397 | | [scienceimage](https://www.scienceimage.csiro.au) | An image library specializing in science and nature images | 398 | | [Integration & Application Network Image Library](https://ian.umces.edu/imagelibrary) | Free images to provide scientists, resource managers, government agencies, community groups and graphics professionals with a resource for enhancing science communication. | 399 | | [Saxifraga](http://www.freenatureimages.eu) | Free nature images | 400 | | [Creative Commons](https://search.creativecommons.org) | Search for free images to reuse. 401 | | [AllTheFreeStock](https://allthefreestock.com/) | a curated list of free stock images, audio and videos. 402 | | [Lorem.space - Placeholder image generator](https://lorem.space) | API for placeholder images but useful! | 403 | | [Openverse](https://wordpress.org/openverse/) | Openverse is a search engine for openly-licensed media | 404 | 405 |
406 | ↥ Back To Top 407 |
408 | 409 | ## Stock Videos 410 | 411 | >Websites that offer free stock videos of all kinds for your websites and apps 412 | 413 | | Website                            | Description | 414 | | ----------------------- | ------------------ | 415 | | [Pexels](https://www.pexels.com/videos)| Largest library of free to use videos, donated by the community | 416 | | [Pixabay](https://www.pixabay.com/videos)| Large library of free to use videos, donated by the community similar to Pexels | 417 | | [Coverr.co](https://coverr.co/)| Beautiful free stock video footage | 418 | | [Videezy](https://www.videezy.com/)| Free HD stock footage & 4K videos | 419 | | [Mix Kit](https://mixkit.co/)| Stock video clips & music | 420 | | [Life Of Vids](https://www.lifeofvids.com/)| Free video clips and loops | 421 | | [Videvo](https://www.videvo.net/stock-video-footage/)| Free and premium stock videos | 422 | | [Loopvidz](http://stock.loopvidz.com/)| Free To Use Cinema graphs Created With VIMAGE App | 423 | | [SplitShire](https://www.splitshire.com/)| Beautiful & exclusive free stock videos & photos | 424 | | [Free-Stock-Video](https://free-stock.video)| Free Footage Stock Videos | 425 | 426 |
427 | ↥ Back To Top 428 |
429 | 430 | ## Stock Music & Sound Effects 431 | 432 | >Websites that offer free stock music and/or sound effects 433 | 434 | | Website                            | Description | 435 | | ----------------------- | ------------------ | 436 | | [YouTube Studio Audio Library](https://www.youtube.com/audiolibrary)| Royalty-free audio library for downloadable music and sound effects. Cleared for YouTube monetization. | 437 | | [Free Stock Music](https://www.free-stock-music.com/)| Royalty free stock music for YouTube videos, podcasts, etc | 438 | | [Bensound](https://www.bensound.com/)| Download Royalty Free Music for free and use it in your project | 439 | | [Mixkit](https://mixkit.co/free-stock-music/)| Free music for your projects | 440 | | [Freesound](https://freesound.org/)| Free stock music and sounds | 441 | | [Free Music Archive](https://freemusicarchive.org/)| Collaborative database of creative-commons licensed sound for musicians and sound lovers | 442 | | [Musopen](https://musopen.org/music/)| An online copyright free classical music library | 443 | | [Pixabay](https://pixabay.com/music/)| Free music downloads for your project like Youtube videos, Music, Vlog, Film, Podcast etc. | 444 | | [Unminus](https://www.unminus.com/)| Free Premium Music for Your Projects 🎁 Royalty Free. Cleared for YouTube. | 445 | 446 |
447 | ↥ Back To Top 448 |
449 | 450 | ## Vectors & Clip Art 451 | 452 | >Free vectors, clipart, illustrations, patterns and more 453 | 454 | | Website                            | Description | 455 | | ----------------------- | ------------------ | 456 | | [Vecteezy](https://www.vecteezy.com/)| Find and download free vector art | 457 | | [Freepik](https://www.freepik.com)| Free vectors, stock photos, PSD and icons | 458 | | [Free Vectors](https://www.freevectors.net/)| Community of vector lovers who share free vector graphics | 459 | | [PNGTree](https://pngtree.com/free-vectors)| png, backgrounds, templates, text effects | 460 | | [Vector4Free](https://www.vector4free.com/)| Free vector graphics | 461 | | [Freeble](http://freebbble.com/)| Vectors, patterns, mockups and more | 462 | | [Lukaszadam](https://lukaszadam.com/)| Free Vector artworks | 463 | | [Illlustrations](https://illlustrations.co/)| Beautiful 100 Illustrations - png, svg | 464 | | [Clipart](https://www.clipart.email/)| Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! | 465 | | [Growwwkit illustrations](https://growwwkit.com/illustrations/phonies)| A set of 8 simple, black & white, stylish illustrations | 466 | | [trianglify.io](https://trianglify.io/) | Generate low-poly backgrounds, textures, and vectors | 467 | | [blob](https://blobs.app/) | Generate Blob shapes for Web and Flutter apps | 468 | | [HiClipart](https://www.hiclipart.com/)| A community for designers to share & download transparent background PNG cliparts | 469 | | [Stories by Freepik](https://stories.freepik.com/) | A collection of free and customizable illustrations for projects | 470 | | [Black Illustrations](https://www.blackillustrations.com/) | Beautiful illustrations of black people (free and premium) | 471 | | [Delesign](https://delesign.com/free-designs/graphics) | A collection of free illustrations and more | 472 | | [Custom Shape Dividers](https://www.shapedivider.app/) | Free tool to make it easier for designers and developers to export a beautiful SVG shape divider | 473 | | [Servier Medical Art](https://smart.servier.com) | 3000 free medical images to illustrate your publications and PowerPoint presentations | 474 | | [Clker](http://www.clker.com) | Free clip art you can use for anything you like | 475 | | [SVG wave](https://svgwave.in/) | A free, & customizable gradient 🌈 SVG wave generator for UI designs . | 476 | | [BGjar](https://bgjar.com) |Free svg background generator for your websites, blogs and app. | 477 | | [Heritage Library](https://www.heritagetype.com/collections/free-vintage-illustrations) | Vintage Illustrations (vector and png) | 478 | | [ROBOHASH](https://robohash.org/) | Generate unique images from any text | 479 | | [Tabbied](https://tabbied.com/) | Create and customize minimally generated patterns/artwork to use for background images, print and other projects. | 480 | | [Haikei](https://app.haikei.app/) | An awesome multishape web app. | 481 | | [Vector](https://vector.ma/) | Awesome website for all kinds of Moroccan vectors. | 482 | | [Heazy](https://app.heazy.studio/) | Unique vector assets within seconds. | 483 | 484 |
485 | ↥ Back To Top 486 |
487 | 488 | ## Product & Image Mockups 489 | 490 | >Create mockups of devices and other products 491 | 492 | | Website                            | Description | 493 | | ----------------------- | ------------------ | 494 | | [Smart Mockups](https://smartmockups.com/)| Create stunning product mockups (free & premium) | 495 | | [Media Modifier](https://mediamodifier.com/)| beautiful design mockups service for your products (free & premium) | 496 | | [Shot Snap](https://shotsnapp.com/)| Create beautiful device mockup images for your app or website design | 497 | | [Screely](https://www.screely.com/)| Instantly turn your screenshot into a mockup | 498 | | [Screenshot.rocks](https://screenshot.rocks/)| Create beautiful browser & mobile mockups in seconds | 499 | | [Screen Peak](https://screenpeek.io/)| Create a mockup from a URL | 500 | | [Mockup World](https://www.mockupworld.co/)| The biggest source of free photo-realistic Mockups online | 501 | | [Collab Shot](https://www.collabshot.com/)| Real-time screen grabs and image sharing | 502 | | [Facebook Devices](https://facebook.design/devices)| Images and Sketch files of popular devices | 503 | | [Threed.io](https://threed.io)| Generate 3D mockups right in your browser. | 504 | | [Mockuphone](https://mockuphone.com/)| 100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV | 505 | | [Device Shots](https://deviceshots.com/)| Create high-resolution device mockups for social media, for free | 506 | | [Clean Mock](https://cleanmock.com/)| Create stunning mockups using latest device frames like iPhone X & custom backgrounds that make your mobile or website design standout, right from your browser quickly & for free. | 507 | | [Mock.Video](https://www.mock.video/)| Instantly create mockups by adding a device frame to your videos. | 508 | | [MockupBro](https://mockupbro.com/)| Create product mockups with online mockup generator! Just choose a mockup, upload your design and download your image without a watermark. | 509 | | [Animockup](https://animockup.com/)| Create animated mockups in the browser 🔥. | 510 | | [Pika](https://pika.style)| Instantly create browser mockups and beautiful images for marketing, blog post and more | 511 | 512 |
513 | ↥ Back To Top 514 |
515 | 516 | ## HTML & CSS Templates 517 | 518 | >Websites that offer free beautiful website templates and themes of all types 519 | 520 | | Website                            | Description | 521 | | ----------------------- | ------------------ | 522 | | [HTML5Up](https://html5up.net/)| Very modern, unique responsive HTML5/CSS3 themes | 523 | | [Templatemo](https://templatemo.com/)| Minimal, resume, gallery themes and more | 524 | | [FreeHTML5](https://freehtml5.co/)| Free & premium HTML5 and Bootstrap themes | 525 | | [StyleShout](https://www.styleshout.com/free-templates/)| Brilliantly crafted free website templates | 526 | | [Start Bootstrap](https://startbootstrap.com/)| Bootstrap starter themes | 527 | | [Zerotheme](https://www.zerotheme.com/)| HTML5, Bootstrap, Prestashop templates | 528 | | [HTML5xCSS3](https://www.html5xcss3.com/)| Collection of wonderful templates in different categories | 529 | | [Colorlib](https://colorlib.com/wp/templates/)| Almost any category of theme you can think of | 530 | | [Free CSS](https://www.free-css.com/free-css-templates)| Huge collection of free templates | 531 | | [Hubspot](https://www.hubspot.com/resources)| Templates, infographics, banners and much more| 532 | | [Mobirise](https://mobirise.com/html-templates/)| Great looking HTML5/CSS3 templates| 533 | | [Bootswatch](https://bootswatch.com/)| Free themes for Bootstrap| 534 | | [Onepagelove](https://onepagelove.com/)| One-page websites, templates and resources| 535 | | [Themes For App](https://themesfor.app/)| Free Bootstrap themes and landing pages| 536 | | [BootstrapTaste](https://bootstraptaste.com/)| Premium & Free Bootstrap Templates| 537 | | [BootstrapMade](https://bootstrapmade.com/)| Elegant, clean and beautiful free templates using Bootstrap. | 538 | | [W3Layouts](https://w3layouts.com/)| W3Layouts: 3784+ Free Website Templates for 2020 | 539 | | [Tooplate](https://www.tooplate.com/)| Tooplate: Free HTML Templates for everyone! | 540 | | [Cruip](https://cruip.com/free-templates/)| Fully coded HTML templates to help you easily build your startup landing page without hassles. | 541 | | [UIdeck](https://uideck.com/) | Free Landing Page Templates and Bootstrap Themes | 542 | | [Splawr](https://splawr.com/) | Free web templates to kickstart your idea! | 543 | | [W3css_templates](https://www.w3schools.com/w3css/w3css_templates.asp) | Some responsive W3.CSS website templates for you to use. | 544 | | [All-Free-Download](https://all-free-download.com/free-website-templates/free-html-css-templates.html) | Download free-website-templates | 545 | | [mashup-template](http://www.mashup-template.com/templates.html)| HTML5/CSS3 Free Templates | 546 | | [Sneat Bootstrap 5 HTML Admin Template](https://github.com/themeselection/sneat-html-admin-template-free)| Open-source & Easy to us Bootstrap 5 HTML Admin Template with Elegant Design & Unique Layout.| 547 | 548 |
549 | ↥ Back To Top 550 |
551 | 552 | ## CSS Frameworks 553 | 554 | >CSS/UI frameworks to help build great looking websites and applications 555 | 556 | | Website                            | Description | 557 | | ----------------------- | ------------------ | 558 | | [Tailwind CSS](https://tailwindcss.com/)| Low level, utility-first framework | 559 | | [Bootstrap](https://getbootstrap.com/)| Popular UI framework with tons of components that use both CSS and JS | 560 | | [Materialize](https://materializecss.com/)| A modern responsive front-end framework based on Material Design | 561 | | [Material Design Lite](https://getmdl.io/)| Light framework based on Material Design. No JS dependency | 562 | | [Bulma](https://bulma.io/)| Modern CSS framework with no JS | 563 | | [Skeleton](http://getskeleton.com/)| Extremely light framework for basic UI elements | 564 | | [Uniform CSS](https://uniformcss.com/)| Fully configurable utility generator and CSS framework built entirely in Sass | 565 | | [Semantic UI](https://semantic-ui.com/)| Empowers designers and developers by creating a shared vocabulary for UI | 566 | | [Fomantic UI](https://fomantic-ui.com/)| A community fork of Semantic-UI | 567 | | [Foundation](https://get.foundation/)| Mobile first framework with clean markup | 568 | | [Pure CSS](https://purecss.io/)| A set of small, responsive CSS modules | 569 | | [UIKit](https://getuikit.com/)| Lightweight and modular front-end framework | 570 | | [Susy](https://www.oddbird.net/susy/)| Lightweight, grid-layout engine for Sass | 571 | | [Milligram.io](https://milligram.io/)| Minimalist CSS framework | 572 | | [Vanilla Framework](https://vanillaframework.io/)| Simple, extensible CSS framework written in Sass | 573 | | [Spectre CSS](https://picturepan2.github.io/spectre/)| Lightweight, modern CSS framework | 574 | | [Picnic CSS](https://picnicss.com/)| Lightweight and beautiful library | 575 | | [Wing](https://kbrsh.github.io/wing/)| A beautiful CSS framework designed for minimalists | 576 | | [Chota](https://jenil.github.io/chota/)| A micro (~3kb) CSS framework | 577 | | [Blueprint CSS](https://blueprintcss.dev/)| A lightweight layout library for building great responsive mobile first UIs that work everywhere | 578 | | [W3.CSS](https://www.w3schools.com/w3css/) | A modern CSS framework with support for desktop, tablet, and mobile design by default. Designed to be independent of jQuery or any other JavaScript library | 579 | | [98.css](https://jdan.github.io/98.css/)| A design system for building faithful recreations of old UIs | 580 | | [NES CSS](https://nostalgic-css.github.io/NES.css/)| NES-style CSS Framework | 581 | | [Shoelace.css](https://www.shoelace.style/)| Lightweight, forward-thinking CSS library built with future CSS syntax | 582 | | [MVP.css](https://andybrewer.github.io/mvp/) | A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done | 583 | | [Blaze.css](http://blazecss.com/) | Open source modular CSS toolkit providing great structure for building websites quickly | 584 | | [Turret CSS](https://turretcss.com/) | Turret CSS is a styles framework for development of responsive websites. | 585 | | [Cutestrap](https://www.cutestrap.com/) | A strong, independent CSS Framework. | 586 | | [XP.css](https://botoxparty.github.io/XP.css/) | XP.css is an extension of 98.css. A CSS library for building interfaces that look like old UIs. | 587 | | [Framework7](https://framework7.io/) | Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. | 588 | | [Hint.css](https://kushagra.dev/lab/hint/) | A pure CSS tooltip library for your lovely websites. | 589 | | [imagehover.io](http://imagehover.io/) | Pure CSS Image Hover Effect Library | 590 | | [mini.css](https://minicss.org/) | A minimal, responsive, style-agnostic CSS framework | 591 | | [Tachyons](https://tachyons.io/) | Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. | 592 | | [Material Bootstrap](https://fezvrasta.github.io/bootstrap-material-design/) | Material Design with Bootstrap | 593 | | [Ivory](https://github.com/IVORY-UI/ivory) | A modern CSS framework for developing powerful web interfaces faster and easier | 594 | | [Halfmoon UI](https://www.gethalfmoon.com/)| A responsive and lightweight framework, designed for quickly building beautiful dashboards and product pages. | 595 | | [Metro 4](https://metroui.org.ua/index.html)| Create your site quickly and effectively with Metro 4. impressive components library built on html, css, javascript. | 596 | | [css-doodle](https://css-doodle.com/) | A web component for drawing patterns with CSS | 597 | | [latex.css](https://latex.now.sh/) | Make your website look like a LaTeX document | 598 | | [Paper CSS](https://github.com/cognitom/paper-css) | Front-end printing solution | 599 | | [Windi CSS](https://windicss.org/) | Next generation compiler for Tailwind CSS | 600 | | [Cirrus CSS](https://cirrus-ui.netlify.app/) | A component and utility centric SCSS framework designed for rapid prototyping. | 601 | | [Gutenberg](https://github.com/BafS/Gutenberg) | Modern framework to print the web correctly. | 602 | | [lit](https://github.com/ajusa/lit) | World's smallest responsive fire css framework (395 bytes). | 603 | | [Arwes](https://github.com/arwes/arwes) | Arwes is a web framework to build user interfaces based on futuristic science fiction designs, animations, and sound effects. | 604 | | [Bojler](https://bojler.slicejack.com/) | Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients. | 605 | | [Tacit](https://github.com/yegor256/tacit) | Primitive CSS Framework for dummies, without classes. | 606 | | [Terminal CSS](https://terminalcss.xyz/) | A modern and minimal CSS framework for terminal lovers. | 607 | | [Sakura](https://oxal.org/projects/sakura/) | A minimal classless css framework / theme. | 608 | | [PSone](https://github.com/micah5/PSone.css) | PS1 style CSS Framework, inspired by NES.css. | 609 | | [Marx](https://github.com/mblode/marx) | Marx is the classless CSS reset to be used in any projects (namely small ones). | 610 | | [Tufte](https://github.com/edwardtufte/tufte-css) | Style your webpage like Edward Tufte’s handouts. | 611 | | [Axentix](https://useaxentix.com/) | Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. | 612 | | [Raster Simple Grid System](https://rsms.me/raster/) | Minimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS. | 613 | | [flowrift](https://flowrift.com/c/banner) | Flowrift is a library made of beautifully designed Tailwind CSS UI blocks. | 614 | | [twind](https://twind.dev/) | The smallest, fastest, most feature complete tailwind-in-js solution in existence | 615 | | [Pico.css](https://picocss.com/) | Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. | 616 | | [clay.css](https://github.com/codeAdrian/clay.css) | Extensible and configurable micro CSS util class and SASS mixin for adding claymorphism styles to your components. | 617 | | [BeerCSS](https://www.beercss.com) | Build Material Design interfaces in record time, without stress for devs 🍻. The first CSS framework that implements Material Design 3. | 618 | 619 |
620 | ↥ Back To Top 621 |
622 | 623 | ## CSS Methodologies 624 | 625 | >CSS methodologies to help write modular, reusable and scalable code 626 | 627 | | Website                            | Description | 628 | | ----------------------- | ------------------ | 629 | | [OOCSS](http://oocss.org/) | OOCSS concepts help us write components that are flexible, modular and interchangeable. | 630 | | [Atomic CSS](https://acss.io/) | Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. | 631 | | [BEM](http://getbem.com/) | Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. | 632 | | [SMACSS](http://smacss.com/) | SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. | 633 | 634 |
635 | ↥ Back To Top 636 |
637 | 638 | ## CSS Animations 639 | 640 | >CSS animations to build awesome animations for websites and applications 641 | 642 | | Website                            | Description | 643 | | ----------------------- | ------------------ | 644 | | [Animate.css](https://animate.style/)| Just-add-water CSS animations | 645 | | [Bounce.js](http://bouncejs.com/)| Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations | 646 | | [Anime.js](https://animejs.com/)| Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects | 647 | | [Magic Animations](https://www.minimamente.com/project/magic/)| Animations has been one of the most impressive animation libraries available | 648 | | [Zdog](https://zzz.dog/)| Round, flat, designer-friendly pseudo-3D engine for canvas & SVG | 649 | | [CSShake](http://elrumordelaluz.github.io/csshake/)| CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page | 650 | | [Hover.css](http://ianlunn.github.io/Hover/)| Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website | 651 | | [AniJS](http://anijs.github.io/)| AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure | 652 | | [Animista](http://animista.net/)| CSS Animations On Demand | 653 | | [Tachyons-animate](https://github.com/anater/tachyons-animate)| Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need | 654 | | [Sequence.js](https://www.sequencejs.com/)| Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications | 655 | | [Infinite](https://tilomitra.github.io/infinite/)| These animations, like rotations and pulses, that are specifically designed to run and repeat forever | 656 | | [OBNOXIOUS.CSS](http://tholman.com/obnoxious/)| Animations for the strong of heart, and weak of mind | 657 | | [MOTION UI](https://zurb.com/playground/motion-ui)| A Sass library for creating flexible CSS transitions and animations | 658 | | [Keyframes.app](https://keyframes.app/)| A graphical user interface for generating custom CSS keyframe animations | 659 | | [thoughtbot](https://thoughtbot.com/blog/transitions-and-transforms)| CSS Transitions and Transformations for Beginners | 660 | | [SVG Artista](https://svgartista.net/)| A useful tool to animate stroke and fill properties in SVG images with plain CSS code | 661 | | [AnimXYZ](https://animxyz.com/)| AnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS | 662 | | [Whirl](https://github.com/jh3y/whirl)| CSS loading animations with minimal effort! | 663 | | [Hamburgers](https://jonsuh.com/hamburgers/)| Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger. | 664 | | [CSS Loaders & Spinners](https://cssloaders.github.io/)| This is a library having a collection of different types of CSS loaders, spinners | 665 | | [Motion One](https://motion.dev/)| A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance. | 666 | | [pocoloco](https://pocoloco.io/)| Generate dynamic backgrounds for your website | 667 | | [AniX](https://drawcall.github.io/AniX/)| Super easy and lightweight css animation library. | 668 | | [AOS](https://michalsnik.github.io/aos/) | Animate On Scroll Library. | 669 | | [Animatopy](https://sarthology.github.io/Animatopy/) | Just-add-water CSS animations snippets | 670 | 671 |
672 | ↥ Back To Top 673 |
674 | 675 | ## Javascript Animation Libraries 676 | 677 | >javascript animations libraries to build awesome animations for websites and applications 678 | 679 | | Website                            | Description | 680 | | ----------------------- | ------------------ | 681 | | [Greensock](https://greensock.com/)| A JavaScript library for building high-performance animations that work in every major browser | 682 | | [Velocity.js](http://velocityjs.org/)| Velocity is a lightweight animation engine with the same API as jQuery's $.animate() | 683 | | [lax.js](https://github.com/alexfoxy/laxxx)| Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll! | 684 | | [Rellax.js](https://github.com/dixonandmoe/rellax)| A buttery smooth, super lightweight, vanilla javascript parallax library | 685 | | [three.js](https://github.com/mrdoob/three.js/)| An easy to use, lightweight, 3D library with a default WebGL renderer. | 686 | | [Atropos](https://atroposjs.com/)| Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. | 687 | | [wow.js](https://wowjs.uk/)| Reveal Animations When You Scroll. | 688 | | [chocolat.js](http://chocolat.insipi.de/)| Free lightbox plugin. | 689 | | [Animate On Scroll](https://michalsnik.github.io/aos/)| Animate on scroll library to reveal animations when You scroll. | 690 | | [Tilt.js](http://gijsroge.github.io/tilt.js/)| A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery. | 691 | | [Roughnotation](https://roughnotation.com/)| Rough Notation is a small JavaScript library to create and animate annotations on a web page | 692 | | [tsParticles](https://particles.js.org/)| A lightweight library for creating particles, an improved version of the abandoned and obsolete particles.js | 693 | | [Particles.js](https://vincentgarreau.com/particles.js/)| A lightweight JavaScript library for creating particles | 694 | | [mo.js](https://mojs.github.io/)| The motion graphics toolbelt for the web | 695 | | [Lightbox2](https://lokeshdhakar.com/projects/lightbox2/)| A small JS library to overlay images on top of the current page. | 696 | | [Slick](https://kenwheeler.github.io/slick/)| Fully responsive carousel | 697 | | [barba.js](https://barba.js.org/)| Create fluid and smooth transitions between your website’s pages. | 698 | | [Locomotive Scroll](https://locomotivemtl.github.io/locomotive-scroll/)| A simple scroll library that provides detection of elements in viewport & smooth scrolling with parallax. | 699 | | [Owl carousel](https://owlcarousel2.github.io/OwlCarousel2/)| Free responsive jQuery carousel | 700 | | [Swiperjs](https://swiperjs.com/)| Free, Open Source, Modern Slider without jQuery. Available for Vanilla JS and all modern frameworks like React, Vue, Angular etc. | 701 | | [Splide](https://splidejs.com)| Free, pure JS library for carousels and sliders | 702 | | [Simple Parallax](https://simpleparallax.com/)| The easiest way to get a parallax effect with javascript | 703 | | [KUTE.js](https://thednp.github.io/kute.js/)| KUTE.js is a JavaScript animation engine for modern browsers. | 704 | | [Granim.js](https://sarcadass.github.io/granim.js/index.html)| Create fluid and interactive gradient animations with this small javascript library. | 705 | | [Popmotion](https://popmotion.io/)| Simple animation libraries for delightful user interfaces. | 706 | | [Vivus](https://maxwellito.github.io/vivus/)| Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. | 707 | | [Typed.js](https://mattboldt.com/demos/typed-js/)| A JavaScript Typing Animation Library. | 708 | | [Progress Bar.js](https://kimmobrunfeldt.github.io/progressbar.js/)| Responsive and slick progress bars with animated SVG paths. | 709 | | [Midnight.js](https://aerolab.github.io/midnight.js/)| Midnight.js lets you switch fixed headers on the fly | 710 | | [Tingle.js](https://tingle.robinparisi.com/)| Tingle is a simple modal plugin written in pure JavaScript | 711 | | [Theatre.js](https://www.theatrejs.com/)| Theatre.js is a JavaScript animation library with a GUI. It animates the DOM, WebGL, and any other JavaScript variable. | 712 | | [splidejs](https://splidejs.com/)| Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors. | 713 | | [nice-waves](https://gvguy.github.io/nice-waves/)| Beautiful animated waves | 714 | | [Vanta.js](https://www.vantajs.com/)| Animated website backgrounds in a few lines of code. | 715 | | [Splitting.js](https://splitting.js.org/)| Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more! | 716 | 717 |
718 | ↥ Back To Top 719 |
720 | 721 | ## Javascript Chart Libraries 722 | 723 | >Libraries that help developers visualize data into charts 724 | 725 | | Website                            | Description | 726 | | ----------------------- | ------------------ | 727 | | [ChartJS](https://www.chartjs.org/)| Simple yet flexible JavaScript charting for designers & developers | 728 | | [FrappeJS](https://frappe.io/charts)| Includes Green squares grid like in GitHub, and other charts to use. | 729 | | [G2Plot](https://g2plot.antv.vision/en)| G2Plot is an interactive and responsive charting library based on the grammar of graphics. | 730 | | [Google Charts](https://developers.google.com/chart/)| Get the experience from Google to create similar charts that Google uses. | 731 | | [Data Driven Documents (D3)](https://d3js.org/)| Bind complicated and massive data to interactive graphs. | 732 | | [ApexCharts.Js](https://apexcharts.com/)|Modern & Interactive Open-source Charts | 733 | | [Chartist](http://gionkunz.github.io/chartist-js/index.html)|Simple responsive charts | 734 | | [Vizzu](https://lib.vizzuhq.com/0.3.0/)| Vizzu - a free, open-source Javascript library for building animated charts, data stories, and interactive explorers. | 735 | | [AntV](https://charts.ant.design/en)|Ant Design Charts, free JS Charts library for dynamic data with excellent documentation | 736 | 737 |
738 | ↥ Back To Top 739 |
740 | 741 | ## UI Components & Kits 742 | 743 | >Not quite "frameworks", but tools for creating user interfaces with components or UI kits 744 | 745 | | Website                            | Description | 746 | | ----------------------- | ------------------ | 747 | | [Bit](https://bit.dev/components)| Provides a huge library of reuseable UI Components for React, Angular, Vue, React Native. Also can be used for sharing UI Components among other team members | 748 | | [UILang](http://uilang.com/)| A minimal, UI-focused programming language for web designers | 749 | | [Medialoot CSS Components](https://medialoot.com/free-themes/css-components/)| Calendars, price grids and other UI components | 750 | | [Froala Design Blocks](https://froala.com/design-blocks)| Over 170 responsive design blocks ready to be used in your web or mobile apps | 751 | | [Flowbite](https://flowbite.com)| Open-source library of Tailwind CSS components | 752 | | [daisyUI](https://daisyui.com/)| Tailwind CSS Components | 753 | | [Mui Treasury](https://mui-treasury.com)| An open-source project that provides a collection of ready-to-use components based on Material-UI. | 754 | | [Material Design For Bootstrap](https://mdbootstrap.com/)| Open source toolkit for building material design with Bootstrap | 755 | | [Photonkit](http://photonkit.com/)| Desktop UI library for Electron | 756 | | [Flat UI](https://designmodo.github.io/Flat-UI/)| Minimal free user interface kit| 757 | | [Shards](https://designrevision.com/downloads/shards/)| A free and modern UI toolkit for web makers based on Bootstrap | 758 | | [Themesberg](https://themesberg.com/templates/free)| Free and open-source website themes, templates, and UI kits based on Bootstrap and React | 759 | | [Creative Tim](https://www.creative-tim.com/)| All types of UI libraries and kits including JS frameworks like React | 760 | | [Brumm Shadow Maker](https://brumm.af/shadows)| An online tool to make css shadows| 761 | | [AdminLTE](https://adminlte.io/)| Best open source admin dashboard & control panel theme| 762 | | [SpinKit](https://tobiasahlin.com/spinkit/)| Simple CSS Spinners| 763 | | [Epic Spinners](https://epic-spinners.epicmax.co/)| CSS spinners collection with Vue.js integration. | 764 | | [Loading.io](https://loading.io/)| Online service provider for creating simple animations, spinners, progress bar and more | 765 | | [Moving Letters](https://tobiasahlin.com/moving-letters/)| Animated Text with JavaScript and anime.js| 766 | | [CSS Layout](https://csslayout.io/)| A collection of popular web layouts and patterns in pure CSS | 767 | | [CSS Grid Generator](https://cssgrid-generator.netlify.app/)| An open-source project that allow users to quickly create dynamic layout based on CSS Grid. | 768 | | [Codyhouse](https://codyhouse.co/)| Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components | 769 | | [Tailwind Starter Kit](https://github.com/creativetimofficial/tailwind-starter-kit)| Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source | 770 | | [Tailwindtoolbox](https://www.tailwindtoolbox.com/)| Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project. | 771 | | [tailwindcomponents](https://tailwindcomponents.com/)| A free repository for community components using TailwindCSS | 772 | | [sweetalert](https://sweetalert.js.org/)| SweetAlert makes popup messages easy and pretty. | 773 | | [sweetalert2](https://sweetalert2.github.io/)| A beautiful, responsive, customizable, accessible replacement for javascript's popup boxes | 774 | | [tailblocks](https://mertjf.github.io/tailblocks/)| Open source ready-to-use Tailwind CSS components. | 775 | | [Soft Components](https://soft-components-docs.web.app/)| A set of framework-agnostic web components based on neumorphic design. | 776 | | [Fast](https://www.fast.design/)| An interface system that can be used with modern Web Frameworks such as React, Vue and Angular. | 777 | | [LottieFiles ](https://lottiefiles.com/)| Interactive animations in many formats like json,gif and mp4, libraries and plugins for Web & Mobile . | 778 | | [Kutty](https://kutty.netlify.app/)| A set of accessible and reusable prebuilt Tailwind components that are commonly used in web applications. | 779 | | [Tailwind Templates](https://tailwindtemplates.io/)| A free collection of Tailwindcss Templates - tailwind components for rapid UI development. | 780 | | [Stitches](https://stitches.hyperyolo.com/)| An HTML template generator using functional css. | 781 | | [Meraki UI Components](https://merakiui.com/)| Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid. | 782 | | [Daemonites Material Design For Bootstrap](https://http://daemonite.github.io/material/)| Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4 | 783 | | [Stitches](https://stitches.dev/)| CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. | 784 | | [Headless UI](https://headlessui.dev/)| Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. | 785 | | [Styled components](https://styled-components.com/)| Build beautifully UI Components, for your applications & websites. | 786 | | [Figma Bootstrap 5 UI Kit](https://drive.google.com/file/d/1SZOTxXYfCMujqP2P684Vd5QIrlk5bwe6/view?usp=sharing)| UI Kit comprising 300+ organized Bootstrap 5 components built with atomic design system & auto layout. | 787 | | [Notiflix](https://notiflix.github.io)| JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better | 788 | | [CoreUI](https://coreui.io)| Bootstrap Admin Dashboard Template & UI Components Library | 789 | | [AgnosticUI](https://www.agnosticui.com/)| Accessible React component primitives that also work with Vue 3, Svelte, and Angular | 790 | | [SVGR](https://react-svgr.com/)| SVGR is an universal tool to transform a raw SVG into a ready-to-use React components. Available online, in CLI, Node.js, as a webpack/rollup/parcel plugin... | 791 | | [uiverse](https://uiverse.io)| Hundreds Open-Source UI elements, made with HTML & CSS. Anyone can contribute. Includes buttons, checkboxes, spinners, cards, inputs and more. | 792 | | [HyperUI](https://www.hyperui.dev/)| Free open source Tailwind CSS components for marketing and ecommerce websites, as well as application UI. | 793 | | [Flowbite Admin Dashboard](https://github.com/themesberg/flowbite-admin-dashboard)| Free and open-source admin dashboard template built with Tailwind CSS and Flowbite featuring 15 examples pages, charts, widgets, and dark mode. | 794 | 795 |
796 | ↥ Back To Top 797 |
798 | 799 | 800 | ## React UI Libraries 801 | 802 | >UI and component libraries for the React JavaScript framework 803 | 804 | | Website                            | Description | 805 | | ----------------------- | ------------------ | 806 | | [Material UI](https://material-ui.com/)| React components for faster and easier web development, based on Material Design | 807 | | [Chakra UI](https://chakra-ui.com/)| Build accessible React apps & websites with speed. [Openchakra](https://openchakra.app/) | 808 | | [React Bootstrap](https://react-bootstrap.github.io/)| Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript | 809 | | [Semi Design](https://semi.design/en-US)| A modern, comprehensive, flexible design system that gives you all modular blocks you need to build sensible web apps & SaaS products. | 810 | | [Mantine](https://mantine.dev/)| React components and hooks library with native dark theme support focused on usability, accessibility and developer experience. | 811 | | [NextUI](https://nextui.org/)| Beautiful, fast and modern React UI library that allows you to create beatiful websites regardless of your design experience. | 812 | | [Arco Design](https://arco.design/en-US)| A comprehensive React UI components library based on the Arco Design system. | 813 | | [ui-playbook](https://uiplaybook.dev/)| The documented collection of UI components | 814 | | [ReactStrap](https://reactstrap.github.io/)| Another Bootstrap UI library for React | 815 | | [React Admin](https://marmelab.com/react-admin/)| A frontend Framework for building admin applications. Supports API's out of the box| 816 | | [BlueprintJS](https://blueprintjs.com/)| React-based UI toolkit for the web | 817 | | [React Semantic UI](https://react.semantic-ui.com/)| UI components based off of the Semantic UI framework | 818 | | [Shards React](https://designrevision.com/downloads/shards-react/)| React UI kit featuring a modern design system with dozens of custom components | 819 | | [React Virtualized](https://bvaughn.github.io/react-virtualized)| UI set for data. Includes tables, lists, sorting, etc. | 820 | | [React Toolbox](http://react-toolbox.io/#/)| Material design UI library for React | 821 | | [Elastic UI](https://elastic.github.io/eui/#/)| Distributes UI React components and static assets for use in building web layouts | 822 | | [React Desktop](http://reactdesktop.js.org/)| Desktop styled components in React. Includes MacOS and Windows based components | 823 | | [Theme UI](https://theme-ui.com/home)| Build consistent, themeable React apps based on constraint-based design principles | 824 | | [Onsen React](https://onsen.io/react/)| Distributes Components for hybrid mobile apps with React and Onsen UI | 825 | | [Evergreen](https://evergreen.segment.com/)| Design system for React | 826 | | [Rebass](https://rebassjs.org/)| React primitive UI components built with styled system | 827 | | [Grommet](https://v2.grommet.io/)| mobile first UI component library | 828 | | [Landing Page Template](https://github.com/cruip/open-react-template/)| Open source landing page template for react | 829 | | [Elemental UI](http://elemental-ui.com/)| A UI Toolkit for React.js Websites and Apps | 830 | | [Ant Design](https://ant.design/)| Open source design React UI library. | 831 | | [Bumbag](https://bumbag.style/)| Bumbag is a friendly React UI Kit suitable for MVPs or large-scale applications. | 832 | | [PRIMEREACT](https://www.primefaces.org/primereact/)| The ultimate collection of design-agnostic, flexible and accessible React UI Components | 833 | | [Primer Components](https://primer.style/components/)| Primer Components are React components which implement GitHub's Primer Design System | 834 | | [Orbit](https://orbit.kiwi/)| Design system and React UI components for travel projects. | 835 | | [Base Web](https://baseweb.design/)| Base Web provides a robust suite of components out of the box | 836 | | [Backpack UI](http://lonelyplanet.github.io/backpack-ui/?path=/story/styles--design-tokens)| Backpack is the Lonely Planet toolset that we use to build front end apps. | 837 | | [Reaviz](https://reaviz.io)| Data visualization library for React based on D3 | 838 | | [React Suite](https://rsuitejs.com/en/)| A suite of React components, sensible UI design, and a friendly development experience. | 839 | | [React Spring](https://www.react-spring.io/)| Spring-physics based animation library for React applications. | 840 | | [Recharts](http://recharts.org/en-US/)| A composable charting library built on React components. | 841 | | [Vercel UI](https://github.com/geist-org/react) | Modern and minimalist React UI library | 842 | | [Framer Motion](https://www.framer.com/motion/) | A React library to power production-ready animations. | 843 | | [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html) | A React implementation of Spectrum, Adobe’s design system. | 844 | | [React tsParticles](https://github.com/matteobruni/tsparticles/tree/main/components/react)| A lightweight React component for creating particles | 845 | | [particles-bg](https://github.com/lindelof/particles-bg)| A React particles animation background component | 846 | | [Treact](https://treact.owaiskhan.me)| Gallery of free and modern React templates and UI components developed using TailwindCSS as the front-end framework | 847 | | [OAH-Admin](https://gatsby-admin.paljs.com/extra-components/progress/)| a free React admin dashboard template based on Gatsby with oah-ui components and elements package. | 848 | | [Carolina Admin Dashboard](https://demo.uifort.com/carolina-react-admin-dashboard-material-ui-free-demo/LandingPage)| Free React admin template is powered by Material-UI components framework and features a clean and fresh design following Google's Material Design specifications. | 849 | | [Tabler](https://github.com/tabler/tabler-react)| Tabler is a free React admin dashboard template ideal for any kind of back-end web application. | 850 | | [Sha-el-design](https://github.com/sha-el/sha-el-design)| React components for easier customization and smooth development flow. | 851 | | [React-WeUI](https://weui.github.io/react-weui/docs/#/react-weui/docs/page/0/articles/0)| React-WeUI made from our love of React and WeChat's WeUI Design. | 852 | | [Supabase UI](https://ui.supabase.io/)| An open-source UI component library inspired by Tailwind and AntDesign. | 853 | | [Ring UI](https://github.com/JetBrains/ring-ui)| A collection of JetBrains Web UI components. | 854 | | [React95](https://react95.io/)| Refreshed Windows 95 style UI components for your React app. | 855 | | [Reakit](https://reakit.io/)| Reakit is a lower level component library for building accessible high level UI libraries, design systems and applications with React. | 856 | | [Zent](https://github.com/youzan/zent)| A collection of essential UI components written with React. | 857 | | [Gestalt](https://github.com/pinterest/gestalt)| A set of React UI components that supports Pinterest’s design language. | 858 | | [xstyled](https://xstyled.dev/)| A CSS-in-JS framework built for React with props based utilities like display, fontSize or rotate. | 859 | | [@use-gesture](https://github.com/pmndrs/use-gesture)| Bread n butter utility for component-tied mouse/touch gestures in React. | 860 | | [React Rainbow](https://react-rainbow.io/)| React Rainbow is a collection of components that will reliably help you build your application in a snap. | 861 | | [React Use Smooth Scroll](https://github.com/saidMounaim/React-Use-Smooth-Scroll)| React Provider Component to add a smooth scroll effect | 862 | | [Choc UI](https://choc-ui.com/)| Choc UI is a set of accessible and reusable components that are commonly used in web applications. | 863 | | [Elementz](https://elementz.style/)| A React Component library for buliding modern applications easily & quickly. | 864 | | [Radix UI](https://www.radix-ui.com/)| Unstyled, accessible components for building high‑quality design systems and web apps in React | 865 | | [Materio MUI React NextJS Admin Template](https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free)| Most Powerful & Comprehensive Open-source MUI React NextJS Admin Dashboard Template built for developers. | 866 | | [Chakra Templates](https://chakra-templates.dev/)| A growing collection of hand-crafted & responsive Chakra UI templates ready to drop into your React project. | 867 | | [React Resizable Panels](https://github.com/bvaughn/react-resizable-panels)| React components for resizable panel groups/layouts. | 868 | | [Carbon React](https://carbondesignsystem.com/developing/frameworks/react/)| Extensive library of React components for Websites and UI's. Based on the Carbon Design System from IBM | 869 | 870 | 871 |
872 | ↥ Back To Top 873 |
874 | 875 | ## Vue UI Libraries 876 | 877 | >UI and component libraries for the Vue JavaScript framework 878 | 879 | | Website                            | Description | 880 | | ----------------------- | ------------------ | 881 | | [Vuetify](https://vuetifyjs.com/en/)| Material design component framework | 882 | | [Bootstrap Vue](https://bootstrap-vue.org/)| Use Bootstrap components with Vue | 883 | | [Buefy](https://buefy.org/)| Lightweight UI components based on Bulma | 884 | | [Semantic UI Vue](https://semantic-ui-vue.github.io)| Semantic UI Vue is the Vue integration for Semantic UI | 885 | | [Arco Design Vue](https://arco.design/vue/en-US/docs/start)| A comprehensive Vue UI components library based on the Arco Design system. | 886 | | [VEUI](https://veui.dev/en-US)| VEUI is an enterprise UI component library, based on Vue.js. | 887 | | [Grace](https://github.com/Trendyol/grace)| Design System For Vue Applications. | 888 | | [Quasar](https://quasar.dev/)| High-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron) and Browser extensions | 889 | | [Element](https://element.eleme.io/#/en-US)| Desktop UI library for Vue | 890 | | [Fish UI](https://myliang.github.io/fish-ui/#/components/index)| Vue UI toolkit for the web | 891 | | [Keen UI](https://josephuspaye.github.io/Keen-UI)| VueUI library with a simple API, inspired by Google's Material Design | 892 | | [Materio Vuetify Vuejs Admin Template](https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free)| Open-source & Easy to use Vuetify Vuejs Admin Template with Elegant Design & Unique Layout | 893 | | [Onsen Vue](https://onsen.io/vue/)| Distributes Components for hybrid mobile apps with Vue and Onsen UI | 894 | | [Vuejsexamples](https://vuejsexamples.com)| A nice collection of useful vuejs UI components | 895 | | [Inkline](https://inkline.io)|Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications | 896 | | [Vuesax](https://vuesax.com/)|Unique and reusable UI components | 897 | | [Antdv](https://antdv.com/)|UI library for Vue based on Ant Design | 898 | | [Shards Vue](https://designrevision.com/downloads/shards-vue/)|A high-quality & free Vue UI kit featuring a modern design system with dozens of custom components | 899 | | [Prime Vue](https://www.primefaces.org/primevue/)|Powerful yet simple to use, versatile, performant Vue UI Component Library to help you build stunning user interfaces.| 900 | | [Chakra UI Vue](https://vue.chakra-ui.com/)|Chakra UI is a simple modular and accessible component library that gives you the building blocks to build Vue applications with speed.| 901 | | [View UI](https://www.iviewui.com/)|Dozens of useful and beautiful Vue components made for people with all skill levels with extensive documentation.| 902 | | [Particles.vue](https://github.com/matteobruni/tsparticles/tree/main/components/vue)| A lightweight Vue 2.x component for creating particles | 903 | | [Particles.vue3](https://github.com/matteobruni/tsparticles/tree/main/components/vue3)| A lightweight Vue 3.x component for creating particles | 904 | | [TC Components](https://components.timos.design) | A library of high-quality ready to use components that will help you speed up your development workflow. | 905 | | [Vant](https://youzan.github.io/vant) | Lightweight Mobile UI Components built on Vue. | 906 | | [Equal UI](https://quatrochan.github.io/Equal/) | Open-source Vue 3 components system for your next project based on TypeScript | 907 | | [Mint UI](https://mint-ui.github.io/#!/en) | Mobile UI elements for Vue.js | 908 | | [Cube UI](https://didi.github.io/cube-ui/#/en-US) | A fantastic mobile ui lib implement by Vue.js | 909 | | [Muse UI](https://muse-ui.org/#/en-US) | Based on the Vue 2.0 elegant Material Design UI component library | 910 | | [AT-UI](https://at-ui.github.io/at-ui/#/en) | AT-UI is a modular front-end UI framework for developing fast and powerful web interfaces based on Vue.js. | 911 | | [Vuikit](https://vuikit.js.org/) | A consistent and responsive Vue UI library, based on the front-end framework UIkit. | 912 | | [Wave UI](https://antoniandre.github.io/wave-ui/) | A Vue.js UI framework with only the bright side. | 913 | | [VueTailwind](https://www.vue-tailwind.com/) | Set of Lightview and fully customizable Vue Components optimized for TailwindCSS. | 914 | | [Oruga](https://oruga.io/) | Oruga is a lightweight library of UI components for Vue.js without CSS framework dependency. | 915 | | [BalmUI](https://material.balmjs.com/#/) | BalmUI is a modular and customizable Material Design UI library for Vue.js. | 916 | | [Weex UI](https://github.com/apache/incubator-weex-ui) | A rich interaction, lightweight, high performance UI library based on Weex. | 917 | | [Varlet](https://github.com/haoziqaq/varlet) | Varlet is a Material design mobile component library developed based on Vue3, developed and maintained by partners in the community. | 918 | | [Naive UI](https://www.naiveui.com/en-US/os-theme) | A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow. | 919 | | [Vuestic](https://vuestic.dev/) | Free and Open Source UI Library for Vue 3 🤘. | 920 | | [Vue Final Modal](https://vue-final-modal.org/) | Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js. | 921 | | [Vuetensils](https://vuetensils.stegosource.com/) | Vuetensils is a lightweight component library for Vue 2.x that brings some of most common UI features, but only the bare minimum styles to avoid adding any extra bloat. You can work on the branding, and don't have to worry about the accessibility. | 922 | 923 |
924 | ↥ Back To Top 925 |
926 | 927 | ## Angular UI Libraries 928 | 929 | >UI and component libraries for the Angular JavaScript framework 930 | 931 | | Website                            | Description | 932 | | ----------------------- | ------------------ | 933 | | [Material Angular](https://material.angular.io/)| UI library for Angular based on Material design | 934 | | [NG Bootstrap](https://ng-bootstrap.github.io/#/home)| UI library for Angular based on the Bootstrap framework | 935 | | [PrimeNG](https://www.primefaces.org/primeng/#/)| Powerful UI component library for Angular | 936 | | [Onsen Angular](https://onsen.io/angular2/)| Hybrid mobile and PWA UI library for Angular and Onsen UI | 937 | | [NG Lightning](https://ng-lightning.github.io/ng-lightning/#/)| Native Angular components & directives for Lightning Design System | 938 | | [NG Semantic](https://ng-semantic.herokuapp.com/)| UI library for Angular based on Semantic UI | 939 | | [Nebular](https://akveo.github.io/nebular/)| Customizable UI Kit, Auth & Security for Angular | 940 | | [Alyle UI](https://alyle.io/)| Minimal components set for Angular | 941 | | [NGX Bootstrap](https://valor-software.com/ngx-bootstrap/#/)| Another UI library for Angular based on the Bootstrap framework | 942 | | [NG Zorro](https://ng.ant.design/)| UI library for Angular based on Ant Design | 943 | | [Pagination for datatables](https://www.npmjs.com/package/ngx-pagination) | npm library for pagination | 944 | | [Multi select dropdown](https://www.npmjs.com/package/ng-multiselect-dropdown) | For multi select drop-dowm in forms | 945 | | [NG Particles](https://particles.matteobruni.it/)| A lightweight Angular component for creating particles | 946 | | [Covalent UI](https://teradata.github.io/covalent/v3/#/)| Angular UI Platform focused on solving common enterprise needs | 947 | | [Clarity](https://clarity.design/)| CSS based Angular UI framework developed by VMware group | 948 | | [Taiga UI](https://taiga-ui.dev/)| Taiga UI is fully-treeshakable Angular UI Kit consisting of multiple base libraries and several add-ons. | 949 | | [ngx-admin](https://akveo.github.io/ngx-admin/)| Admin template based on Angular 10+ and Nebular | 950 |
951 | ↥ Back To Top 952 |
953 | 954 | ## Svelte UI Libraries 955 | 956 | >UI and component libraries for the Svelte JavaScript compiler 957 | 958 | | Website                            | Description | 959 | | ----------------------- | ------------------ | 960 | | [Svelte Material UI](https://sveltematerialui.com/)| UI library for Svelte based on Material Design | 961 | | [SvelteStrap](https://bestguy.github.io/sveltestrap/)| UI library for Svelte based on the Bootstrap framework | 962 | | [Svelte Flat UI](https://svelteui.js.org/)|UI library for Svelte based on Flat Design | 963 | | [Svelte Particles](https://github.com/matteobruni/tsparticles/tree/main/components/svelte)| A lightweight Svelte component for creating particles | 964 | | [Attractions](https://illright.github.io/attractions/)| A pretty cool UI kit for Svelte | 965 | | [Svelteit](https://docs.svelteit.dev)| A minimalistic UI/UX component library for Svelte and Sapper projects | 966 | | [Carbon Components Svelte](https://carbon-components-svelte.onrender.com/)| A component library that implements the Carbon Design System, an open source design system by IBM.| 967 | 968 | 969 |
970 | ↥ Back To Top 971 |
972 | 973 | ## React Native UI Libraries 974 | 975 | >UI and component libraries for the React Native Framework 976 | 977 | | Website                            | Description | 978 | | ----------------------- | ------------------ | 979 | | [Magnus UI](https://magnus-ui.com/)| Magnus UI is the ultimate UI framework that helps you in building consistent user interfaces effortlessly in react native | 980 | | [React Native UI Lib](https://wix.github.io/react-native-ui-lib/)| React Native UI (RNUI) is a UI Toolset & Components Library for React Native from Wix | 981 | | [React Native Paper](https://reactnativepaper.com/)| React Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases | 982 | | [UI Kitten](https://akveo.github.io/react-native-ui-kitten/)| UI Kitten is React Native framework for creating stunning cross-platform mobile applications. Design system based, brings your product from MVP to enterprise. | 983 | | [React Native Elements](https://reactnativeelements.com/)| Cross Platform React Native UI Toolkit that provides an all-in-one UI kit for creating apps in react native. | 984 | | [NativeBase](https://nativebase.io/)| Essential cross-platform UI components for React Native & Vue Native. | 985 | | [Shoutem UI](https://shoutem.github.io/docs/ui-toolkit/introduction)| Shoutem UI toolkit enables you to build professionally looking React Native apps with ease. | 986 | | [tailwind-rn](https://github.com/vadimdemedes/tailwind-rn)| Use Tailwind CSS in React Native projects. | 987 | | [Ant Design Mobile RN](https://rn.mobile.ant.design/)| An Ant design based configurable Mobile UI component library based on React Native. | 988 | | [SnackUI](https://github.com/snackui/snackui)| SnackUI is a UI Kit for React Native + react-native-web that's much faster rocket with an optimizing compiler. | 989 | | [Moti](https://moti.fyi/)| Moti is the universal animation package for React Native | 990 | | [Tamagui](https://tamagui.dev/)| Universal React design systems that optimize for native & web. | 991 | 992 |
993 | ↥ Back To Top 994 |
995 | 996 | ## Design Systems & Style Guides 997 | 998 | >Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites 999 | 1000 | | Website                            | Description | 1001 | | ----------------------- | ------------------ | 1002 | | [Material Design](https://material.io/)| Google's Material Design | 1003 | | [Ant Design](https://ant.design/)| Design system for enterprise-level products | 1004 | | [Apple Design Resources](https://developer.apple.com/design/resources/)| Guides and templates for using Apple design and UI | 1005 | | [Primer](https://primer.style/)| Design, build, and create with GitHub’s design system | 1006 | | [Arco.design](https://arco.design/en-US)| An enterprise-level design system jointly launched by the Bytedance GIP UED team and the architecture front-end team. | 1007 | | [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta/index.html)| Oracle's design system and toolkit | 1008 | | [Pulse](https://pulse.heartbeat.ua/)| Design system, guides and React component library | 1009 | | [Bolt](https://boltdesignsystem.com/)| Robust Twig and web component powered UI components | 1010 | | [Clarity Design System](https://clarity.design/)| UX guidelines, HTML/CSS framework, and Angular components | 1011 | | [AtlasKit](https://atlaskit.atlassian.com/)| Atlassian's official UI library, built according to the Atlassian Design Guidelines | 1012 | | [Audi Design Resources](https://www.audi.com/ci/en/guides/user-interface/introduction.html)| Audi UI design system and toolkit | 1013 | | [Carbon Design Systems](https://www.carbondesignsystem.com/)| Carbon is IBM’s open-source design system for products and experiences | 1014 | | [Yelp Style Guide](https://www.yelp.com/styleguide)| Yelp style guide, components and toolkit | 1015 | | [Comet](https://comet.discoveryeducation.com/)| Scalable design system of visual language, components, and design assets | 1016 | | [ETrade Design System](https://etrade.design/)| Guides and toolkits that blend finance with simplicity and ease of use | 1017 | | [Fundamental Library](https://sap.github.io/fundamental-styles/)| Open source and community driven project for consistent user interfaces| 1018 | | [Infor Design](https://design.infor.com/)| Guidelines and resources to create meaningful experiences for Infor’s products | 1019 | | [Lexicon](https://liferay.design/lexicon/)| An experience language for crafting beautiful UI | 1020 | | [Mailchimp UI/UX](https://ux.mailchimp.com/patterns/color)| Style guide and components from Mailchimp | 1021 | | [Marvel Style Guide](https://marvelapp.com/styleguide/overview/introduction)| Set of design principles and components | 1022 | | [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)| Collection of UX frameworks from Microsoft | 1023 | | [Pluralsight Design System](https://design-system.pluralsight.com/)| Design guide with components for designing with Pluralsight | 1024 | | [Polaris](https://polaris.shopify.com/)| Design system that creates great experiences for all of Shopify’s merchants | 1025 | | [Mozilla Protocol](https://protocol.mozilla.org/)| Protocol is a design system for Mozilla and Firefox websites | 1026 | | [SendGrid Style Guide](http://styleguide.sendgrid.com/)| UI library for developing consistent UI/UX at SendGrid | 1027 | | [VTEX Styleguide](https://styleguide.vtex.com/)| Reusable patterns, components and assets related to product design in VTEX | 1028 | | [Rizzo](https://rizzo.lonelyplanet.com/styleguide/design-elements)| Style guide with UI components, JS components, widgets, etc | 1029 | | [Atomize](https://atomizecode.com/)| UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly | 1030 | | [StyleGuides.io](http://styleguides.io/)| A directory of 500+ styleguides | 1031 | | [Done Design System](https://uilibrary.github.io/done-design-system/)| Open source design system, guides & components | 1032 | | [Skoda Brand System](https://skoda-brand.com/explore-our-brand) | Design guideline for developing applications under the Skoda brand | 1033 | | [Spectrum](https://spectrum.adobe.com/) | Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. | 1034 | | [Asphalt](https://asphalt.gojek.io/) | Gojek’s design language system. A collection of guidelines and components to create amazing user experiences. | 1035 | | [Laws of UX](https://lawsofux.com/) | A collection of the key maxims that designers must consider when building user interfaces. | 1036 | | [Checklist Design](https://www.checklist.design/) | Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets. | 1037 | | [Humane By Design](https://humanebydesign.com/) | A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being. | 1038 | | [Pr1mer Guidelines](https://guidelines.pr1mer.tech) | An open source set of very general guidelines, inspired by Human Interface. Created and maintained by Pr1mer Tech | 1039 | | [Patterfly](https://www.patternfly.org/) | PatternFly is an open source design system from Red Hat, Inc. | 1040 | | [Patterns](https://www.patterns.dev) | A resource to improve on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.| 1041 | 1042 |
1043 | ↥ Back To Top 1044 |
1045 | 1046 | ## Online Design Tools 1047 | 1048 | >All kinds of online tools for design, from photo editors to wireframing, and more 1049 | 1050 | | Website                            | Description | 1051 | | ----------------------- | ------------------ | 1052 | | [Figma](https://www.figma.com/graphic-design-tool/)| Online graphic design tool (Free & paid options) | 1053 | | [Penpot](https://penpot.app/)| [Open Source and selfhostable](https://github.com/penpot/penpot#what-is-penpot) online graphic design tool | 1054 | | [Vectr](https://vectr.com/)| Free vector graphics software| 1055 | | [Taler](https://www.taler.app/)| Create social media banner designs in minutes from hundreds of customizable templates | 1056 | | [Canva](https://www.canva.com/)| Create beautiful designs (Free & Paid) | 1057 | | [Get Waves](https://getwaves.io/)| A free SVG wave generator to make unique SVG waves for web design | 1058 | | [Clippy](https://bennettfeely.com/clippy/)| Easy CSS clip-path maker | 1059 | | [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/full-control.html)| Eight values specifying border-radius in CSS ( border-radius generator ) | 1060 | | [Wireframe.cc](https://wireframe.cc/)| Wireframing tool (free & paid) | 1061 | | [Fotor](https://www.fotor.com/)| Photo editor and design maker | 1062 | | [Pixlr](https://www.pixlr.com/)| Online photo editor | 1063 | | [Animoto Video Maker](https://animoto.com/apps/online-video-maker)| Make videos online | 1064 | | [RemoveBG](https://www.remove.bg/)| Remove image backgrounds | 1065 | | [Photo Creator](https://photos.icons8.com/creator)| Create your own photos instead of searching for stock | 1066 | | [Visme](https://www.visme.co/)| Create presentations, infographics and more | 1067 | | [Infogram](https://infogram.com/)| Create infograms | 1068 | | [ChartGo](https://www.chartgo.com/)| Create charts and graphs online | 1069 | | [Cartoon Photo](https://cartoon.pho.to/)| Turn photos into cartoons | 1070 | | [Whimsical](https://whimsical.com/)| Wireframes, diagrams and more (4 free) | 1071 | | [Whiteboard](https://witeboard.com/)| Online drawing tool | 1072 | | [Octopus](https://octopus.do/)| Sitemap builder | 1073 | | [Onlineboard](https://onlineboard.eu)| Real-time shareable whiteboard for brainstorming | 1074 | | [CTA Button Maker](https://www.clickminded.com/button-generator/)| Create call to action buttons | 1075 | | [Blobmaker](https://www.blobmaker.app/)| Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes. | 1076 | | [Personas](https://personas.draftbit.com/)| A playful avatar generator for the modern age | 1077 | | [Photopea](https://www.photopea.com)| An Online Photoshop editor | 1078 | | [Excalidraw](https://excalidraw.com/)| Virtual whiteboard for sketching hand-drawn like diagrams | 1079 | | [Diagrams](https://www.diagrams.net/)| Diagram software and Flowchart maker | 1080 | | [Mermaid](https://github.com/mermaid-js/mermaid)| renders Markdown-inspired text definitions to create and modify diagrams (like flowchart, sequence diagram, gantt, or user journey) dynamically. (FOSS) | 1081 | | [MapInSeconds](http://mapinseconds.com/)| Simple way to visualize your data with a map | 1082 | | [Grid Malven](http://grid.malven.co/)| A css grid cheatsheet to reference when creating a css grid | 1083 | | [Flex Malven](http://flexbox.malven.co/)| A flexbox grid cheatsheet to reference when working with flexbox | 1084 | | [Smart Upscaler](https://icons8.com/upscaler) | Upscale images by 2-4x resolution (4 free) | 1085 | | [GetAvataaars](https://getavataaars.com/) | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library | 1086 | | [Big Heads](https://github.com/RobertBroersma/bigheads) | Easily generate avatars for your projects with Big Heads by Robert Broersma. 1087 | | [Webflow](https://webflow.com/) | Break the code barrier, Build better business websites, faster. Without coding. | 1088 | | [Trace](https://stickermule.com/trace) | Instantly remove the background from your photos | 1089 | | [Neumorphism.io](https://neumorphism.io/#55b9f3) | Generate Soft-UI CSS shadow code | 1090 | | [DB Designer](https://app.dbdesigner.net/) | Design your database for free online | 1091 | | [Ui Bakery](https://uibakery.io/) | Create full-fledged web apps visually | 1092 | | [Faux](http://knutsynstad.com/fauxcode/) | Turn real code into faux code | 1093 | | [Rive](https://rive.app/) | Real-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform. 1094 | | [Unscreen](https://www.unscreen.com/) | Remove Video Background 100% Automatically and Free | 1095 | | [Kodeshot](https://www.kodeshot.net/) | Convert your source code into nice pictures for your articles, tweets, messages, posts... | 1096 | | [Wix](https://www.wix.com/) | Create a Website You’re Proud Of | 1097 | | [GTmetrix](https://gtmetrix.com/) | Website Speed and Performance Optimization | 1098 | | [Yellow Lab Tools](https://yellowlab.tools/) | Online test to help speeding up heavy web pages | 1099 | | [Framer](https://www.framer.com/) | Is prototyping tool for teams | 1100 | | [Draw.io](https://www.draw.io/) | Free online diagram editor tool | 1101 | | [UXWing SVG Editor](https://uxwing.com/svg-icon-editor)| Creating and Edit SVG Online | 1102 | | [CSS Arrow](http://www.cssarrowplease.com/)| Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. | 1103 | | [Lucidchart](https://www.lucidchart.com/pages/)| Diagramming and visualization tools that allows creating databases, flowcharts, boards, floor-maps, and much more. 3 multi-page documents on the free tier | 1104 | | [Carbon](https://carbon.now.sh)| Create and share beautiful images of your source code by typing or drop a file. | 1105 | | [PixCleaner](https://www.pixcleaner.com/)| Accurate and hassle free background removal tool | 1106 | | [Glass UI](https://ui.glass/generator)| A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications. | 1107 | | [Glassmorphism](https://glassmorphism.com/)| An incredible online tool for generating quick glassmorphic UI in CSS code snippets. | 1108 | | [TableConvert](https://tableconvert.com/)| Table Convert Online is a web-based tool to converts Excel, URL, HTML, Markdown table and CSV to Markdown table, CSV/TSV, JSON, XML, YAML, insert SQL, HTML, Excel and LaTeX table. | 1109 | | [Doodle Ipsum](https://doodleipsum.com/)| The lorem ipsum of illustrations. Just customize your doodles, grab the code, and use them on your web prototypes, landing pages, or no-code tools. | 1110 | | [Figen](https://figen.cc/)| Post Cover & Background Generator Tool | 1111 | | [Windframe](https://www.devwares.com/windframe/)| A tool to rapidly prototype and build stunning websites using Tailwind CSS (Free & Premium) | 1112 | | [Slickr](https://slickr.vercel.app/)| A tool for designing cover image for your blog. | 1113 | | [Shadow Palette Generator](https://www.joshwcomeau.com/shadow-palette/)| Create a set of lush, realistic CSS shadows. | 1114 | | [Ray.so](https://ray.so/)| Online tool to create beautiful images of your code. | 1115 | | [Codepng](https://www.codepng.app/)| Convert your source code into awesome shareable images. | 1116 | | [CSS Grid Generator](https://grid.layoutit.com/)| A tool for creating CSS Grid Layouts | 1117 | | [Penpot](https://penpot.app/) | Penpot is the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open web standards (SVG). For all and empowered by the community | 1118 | | [JSONT](https://www.jsont.run/)| A simple and powerful online JSON formatting tool | 1119 | | [Jitter](https://jitter.video/)| Online tool to create motion graphics/design| 1120 | | [Visily](https://www.visily.ai)| Tool that empowers *non-designers* to design web and mobile app mockups | 1121 | | [okso.app](https://okso.app) | The drawing app with a nested "drawing-inside-the-drawing" structure | 1122 | | [Calc Generator](https://fpece.com/calc-generator) | Tool for easily creating precise Calc() CSS functions | 1123 | 1124 |
1125 | ↥ Back To Top 1126 |
1127 | 1128 | ## Downloadable Design Software 1129 | 1130 | >Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop 1131 | 1132 | | Website                            | Description | 1133 | | ----------------------- | ------------------ | 1134 | | [Gimp](https://www.gimp.org/)| Free & open source image editor similar to Photoshop | 1135 | | [Gravit Designer](https://www.designer.io/en/)| Free full-featured vector graphic design app that works on ALL platforms | 1136 | | [Blender](https://www.blender.org/download/)| Open source, free animation, 3D modeling, etc. | 1137 | | [Raw Therapee](https://rawtherapee.com/)| Cross-platform raw image processing program | 1138 | | [Be Funky](https://www.befunky.com/features/graphic-designer/)| Online design program | 1139 | | [Krita](https://krita.org/en/download/krita-desktop/)| Sketching and painting program designed for digital artists | 1140 | | [Pencil Project](https://pencil.evolus.vn/)| GUI prototyping software | 1141 | | [Inkscape](https://inkscape.org/)| Powerful free design tool | 1142 | | [Adobe XD](https://www.adobe.com/products/xd.html)| Free design tool from Adobe | 1143 | | [Shapes.so](https://shape.so/pricing)| Icons that can be used as code in your projects | 1144 | | [Lunacy](https://icons8.com/lunacy) | Sketch for Windows | 1145 | | [InVision Studio](https://www.invisionapp.com/studio)| Free screen designing tool from InVision | 1146 | | [Darktable](https://www.darktable.org/)| Free & Open source photography workflow application and raw developer | 1147 | | [Inpixio photo Editor](https://www.inpixio.com/free-photo-editor)| Free Photo Editor: For windows only | 1148 | | [Colorpicker](https://colorpicker.fr)| Open Source colors software: Retrieve, manipulate and store your colors easily! | 1149 | | [Google Web Designer](https://webdesigner.withgoogle.com/)| Create engaging, interactive HTML5-based designs and motion graphics that can run on any device. | 1150 | | [Origami Studio](https://origami.design)| Interactive interface design tool created by Facebook: For mac only | 1151 | 1152 |
1153 | ↥ Back To Top 1154 |
1155 | 1156 | ## Design Inspiration 1157 | 1158 | >Here are some websites to get inspiration for design and UI 1159 | 1160 | | Website                            | Description | 1161 | | ----------------------- | ------------------ | 1162 | | [CSS Zen Garden](http://csszengarden.com/) | Demonstrating the power of CSS, over 200 CSS-only interpretations of the same HTML file. | 1163 | | [Behance](https://www.behance.net/)| Design projects featured by different creators | 1164 | | [Dribbble](https://dribbble.com/)| Design projects featured by different creators | 1165 | | [Landingfolio](https://landingfolio.com/)| Landingfolio features the best landing page inspiration, templates, resources and examples on the web. | 1166 | | [Codewell](https://www.codewell.cc/)| Practice your HTML, CSS, and Javascript skills on real world design templates | 1167 | | [Foxyapps](https://foxyapps.co/)| Design inspiration from the best mobile app designs | 1168 | | [Httpster](https://httpster.net/2020/apr/)| Showcases websites made by people from all over the world | 1169 | | [Inspofinds](https://inspofinds.com/)| Latest design work from designers and the design community | 1170 | | [Design Notes](https://www.designnotes.co/)| Free online resource library for product designers | 1171 | | [Land Book](https://land-book.com/)| Displays a large collection of websites to help find inspiration | 1172 | | [Frontend Mentor](https://www.frontendmentor.io/)| Real-world UI Challenges using HTML, CSS and Javascript | 1173 | | [Awwwards](https://www.awwwards.com/)| A website that rate and collects the best websites in the world in UI | 1174 | | [Codrops](https://tympanus.net/codrops/)| A website that collects the best UI ideas and patterns and make tutorials of it| 1175 | | [SaaS Landing Page](https://saaslandingpage.com/)| Discover the best landing page examples created by top-class SaaS companies | 1176 | | [Saaspages.xyz](https://saaspages.xyz)| A collection of the best landing pages with a focus on copywriting and design. | 1177 | | [Screenlane](https://screenlane.com)| Screenlane is a website and newsletter that features the latest web and mobile design inspiration. | 1178 | | [lapa ninja](https://www.lapa.ninja/)| Best landing page inspiration | 1179 | | [Freefrontend](https://freefrontend.com/)| Free frontend design from css html and javascript. latest work some design part | 1180 | | [Webframe](https://webframe.xyz)| Discover and be inspired by beautiful webapp designs | 1181 | | [Collect UI](http://collectui.com/)| Daily inspiration collected from daily ui archive and beyond. Handpicked, and updating daily. | 1182 | | [Graphic Burger](https://graphicburger.com/) | A site offering a free and pain icons, mock-ups, Ui-Kits, text effect and backgrounds. This site's resource are a mix of free and paid resources. Icons is on a mix of PNG, SVG, EPS and Sketch Format. Some resources are confusing as there are sponsored content in the middle of the free sets. | 1183 | | [Really Good Emails](https://reallygoodemails.com/) | A site offering users a ton of company e-mails from customer service to marketing. | 1184 | | [Free Design Resource](https://freedesignresources.net/) | A site offering fonts, mockups, templates graphics and ui kits. | 1185 | | [Site Inspire](https://www.siteinspire.com/) |siteInspire is a showcase of the finest web and interactive design. | 1186 | | [Web Design Inspiration](https://www.webdesign-inspiration.com/) | A site for web design inspiration, updated daily. | 1187 | | [NavNav](https://navnav.co/) | Responsive navigation examples | 1188 | | [Calltoidea](https://www.calltoidea.com/) | Collection of different web Components for inspiration. | 1189 | | [MediaQueri.es](https://mediaqueri.es/) | A collection of inspirational websites using media queries and responsive web design | 1190 | | [Mulzli Search](https://search.muz.li) | Search engine for design inspiration | 1191 | | [DeviantArt](https://www.deviantart.com/) | Access to 370 million pieces of art for inspiration. | 1192 | | [Design your way](https://www.designyourway.net/blog/web-and-mobile-design/) | Collection of different Web and Mobile Designs | 1193 | | [Humans.fyi](https://humans.fyi/) | A collection of brilliant personal websites filterable by colors and web technologies used in each website. | 1194 | | [SiteSee](https://sitesee.co/) | A curated gallery of beautiful and modern websites. | 1195 | | [UI Garage](https://uigarage.net/) | Daily handpicked UI inspiration & patterns. | 1196 | | [ecomm.design](https://ecomm.design/) | eCommerce Website Design Gallery & Tech Inspiration. | 1197 | | [Design Nominees](https://www.designnominees.com/) | A showcase of awarding and showcasing the best websites, apps and Games. | 1198 | | [Design Vault](https://designvault.io/) | A library of screenshots and patterns from real world digital products| 1199 | | [CSS buttons](https://getcssscan.com/css-buttons-examples)| 84 Beautiful CSS buttons examples. | 1200 | | [CSS box-shadow](https://getcssscan.com/css-box-shadow-examples)| 91 Beautiful CSS box-shadow examples. | 1201 | | [Super Designer](https://superdesigner.co)| Design tools that give you super powers. | 1202 | | [Landings](https://landings.dev)| Find the best landing pages for your design inspiration based on your preference. | 1203 | 1204 |
1205 | ↥ Back To Top 1206 |
1207 | 1208 | ## Image Compression 1209 | 1210 | >Websites that allow you to compress large images 1211 | 1212 | | Website                            | Description | 1213 | | ----------------------- | ------------------ | 1214 | | [TinyPNG](https://tinypng.com/)| Smart PNG and JPEG compression 1215 | | [Optimizilla](https://imagecompressor.com/)| Online JPEG and PNG optimizer / compressor with settings and archive download 1216 | | [Compressor.io](https://compressor.io/)| JPEG, PNG, GIF, SVG Compression | 1217 | | [Squoosh.app](https://squoosh.app/)| Image compression from Google Chrome Labs | 1218 | | [BulkResizePhotos](https://bulkresizephotos.com/)| Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline) | 1219 | | [iLoveIMG](https://www.iloveimg.com/)| The fastest free web app for easy image modification | 1220 | | [SvgOMG](https://jakearchibald.github.io/svgomg/)| Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.| 1221 | | [CompressJPEG](https://compressjpeg.com/)| Compress JPEG images with size even greater than 5MB | 1222 | | [CompressNow](https://compressnow.com/)| JPEG, GIF, PNG Compression | 1223 | | [Promo Image Resizer](https://promo.com/tools/image-resizer/)| Free Image and Photo Resizer | 1224 | | [Image Optimizer](http://www.imageoptimizer.net/)| Image Optimizer Free With Quality Options | 1225 | | [SVGminify](https://www.svgminify.com/)| This tool removes superfluous information, thereby reducing the size of your SVG files | 1226 | | [JPEG Optimizer](http://jpeg-optimizer.com/)| Free online tool for resizing and compressing digital photos and images for displaying on the web | 1227 | | [Resizing.app](https://resizing.app/)| Resize Your Images Online | 1228 | | [EZGif](https://ezgif.com/)| Animated GIF maker and Image editor including Image optimization and supports WebP conversion | 1229 | | [OnlinePngtools](https://onlinepngtools.com/resize-png)| Resize png for without losing transparent background. | 1230 | | [Verexif](https://www.verexif.com/en/) | Remove meta tags in image in order to reduce image size and increase privacy security | 1231 | | [Vecta Nano](https://vecta.io/nano) | Uses lossless compression to compress inefficient SVG codes by removing unnecessary data. (Free & Paid) | 1232 | | [Watermarkly](https://watermarkly.com/compress-jpeg/) | Private, client-side compression of JPEG images. The app does not send images to a server for processing. | 1233 | | [Jpeg.io](https://www.jpeg.io) | Convert any major image format into a highly optimized JPEG | 1234 | | [CompressImage.io](https://compressimage.io) | Compress JPG and PNG images. No Limits. Bulk Conversion. Convert to WebP. Works Offline | 1235 | 1236 |
1237 | ↥ Back To Top 1238 |
1239 | 1240 | ## Chrome Extensions 1241 | 1242 | >Useful Chrome extensions for Designers and Web-Developers. 1243 | 1244 | | Website                            | Description | 1245 | | ----------------------- | ------------------ | 1246 | | [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm) | The easiest way to identify fonts on web pages.| 1247 | | [WhatRuns](https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=en) | Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it.| 1248 | | [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) | Adds a toolbar button with various web developer tools.| 1249 | | [Awesome Screenshot & Screen Recorder](https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en) | Full page screen capture and screen recorder - 2 in 1. Share screencast video instantly| 1250 | | [daily.dev - News for Busy Developers](https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied) | Get programming news with zero effort. Simply open a new tab, and you’re all set. A must-have tool for busy developers!| 1251 | | [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en) | Validate and view JSON documents. | 1252 | | [JSON Lite](https://github.com/lauriro/json-lite) | Browser extension for viewing JSON files. | 1253 | | [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en) | Resize the browser window to emulate various screen resolutions. | 1254 | | [Responsive Viewer](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en) | Show multiple screens once, Responsive design tester | 1255 | | [BrowserStack](https://chrome.google.com/webstore/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb?hl=en) | Instantly test your webpage on any desktop or mobile browser. | 1256 | | [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en) | Open source web design debug tool built with JavaScript | 1257 | | [Kontrast - WCAG Contrast Checker](https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk?hl=en) | Quickly check and adjust contrast in real-time in your browser to meet WCAG 2.1 requirements | 1258 | | [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi) | Adds a semi-transparent image overlay over the top of the developed HTML to easily perform pixel perfect comparison between them, useful for replicating UI designs. | 1259 | | [Pesticide](https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi) | Inserts the Pesticide CSS into the current page, outlining each HTML element to better see placement on the page, helpful for building layouts. | 1260 | | [Site Palette](https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh) | A must-have tool for designers and frontend developers to grab colors for any website. | 1261 | | [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp) | Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies | 1262 | | [Lorem Ipsum Generator (Default Text)](https://chrome.google.com/webstore/detail/lorem-ipsum-generator-def/mcdcbjjoakogbcopinefncmkcamnfkdb?hl=en%20) | Provides an elegant and quick way to create default text or generate Lorem Ipsum. Optimized for quick usage, but it can be customized. | 1263 | | [JavaScript and CSS Code Beautifier](https://chrome.google.com/webstore/detail/javascript-and-css-code-b/iiglodndmmefofehaibmaignglbpdald?hl=en) | Beautify CSS, JavaScript and JSON code when you open a .css/.js/.json file | 1264 | | [Imageye - Image downloader](https://chrome.google.com/webstore/detail/imageye-image-downloader/agionbommeaifngbhincahgmoflcikhm) | Find and download all images on a web page. With Imageye you can find, browse and download all the images present in a web page. | 1265 | | [GoFullPage - Full Page Screen Capture](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl) | Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions! | 1266 | | [Stylebot](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha) | Change the appearance of the web instantly. | 1267 | | [ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg) | A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more. | 1268 | | [React Developer Tool](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) | React debugging tools to the Chrome Developer Tools. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. | 1269 | | [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) | Wappalyzer is a technology profiler that shows you what websites are built with. | 1270 | | [Fake Filler](https://chrome.google.com/webstore/detail/fake-filler/bnjjngeaknajbdcgpfkgnonkmififhfo) | Fake Filler a form filler that fills all inputs on a page with fake/dummy data. | 1271 | | [Page Ruler Redux](https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal) | A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page. | 1272 | | [Web Editor](https://chrome.google.com/webstore/detail/web-editor/pdmlhckofhkhebmcplblcijijgjiakcm) | The web editor is the tool that provides you with an enhanced way to inspect any website elements, alter their properties, insert contents, design, and visualize the way you want to see them. | 1273 | | [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce) | A simple CSS property viewer. | 1274 | | [Fonts Ninja](https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh) | Identify fonts from any website, bookmark, try, and buy them. | 1275 | | [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) | An open-source, automated tool for improving the performance, quality, and correctness of your web apps. | 1276 | | [Debug CSS](https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj) | Adds outline to all elements on the page to show the culprit element which is changing desired layout. Helps in debugging CSS of the page | 1277 | | [UX Check](https://chrome.google.com/webstore/detail/ux-check/giekhiebdpmljgchjojblnekkcgpdobp) | Identify usability issues through a heuristic evaluation. | 1278 | | [Angular Developer Tool](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) | Angular DevTools allows you to understand the structure of your application and preview the state of the directive and the component instances. | 1279 | | [Redux Developer Tool](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) | Redux DevTools provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state. | 1280 | | [Hackertab.dev](https://chrome.google.com/webstore/detail/hackertabdev-developer-ne/ocoipcahhaedjhnpoanfflhbdcpmalmp) | Hackertab helps developers stay up-to-date with the latest dev news and resources in one tab. | 1281 | 1282 |
1283 | ↥ Back To Top 1284 |
1285 | 1286 | ## Others 1287 | 1288 | >Uncategorized Stuff 1289 | 1290 | | Website                            | Description | 1291 | | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | 1292 | | [Image Extractor](https://extract.pics/) | Online tool for extracting all images and SVGs of a website, all you is just to drop the URL | 1293 | | [Vertopal](https://www.vertopal.com/) | Free online platform for converting computer files to a variety of file formats | 1294 | | [everysize.kibalabs.com](https://everysize.kibalabs.com/) | Check your awesome responsive webpage looks great in every size | 1295 | | [Devhints.io](https://devhints.io/) | This is a modest collection of cheatsheets on Internet | 1296 | | [The Web Toolbox](https://thewebtoolbox.cc/)| A collection of handy, free-to-use tools for web developers, programmers and designers. | 1297 | | [WebDevTrick](https://webdevtrick.com/)| A famous blog for many amazing HTML, CSS, JQuery designs. | 1298 | | [css-tricks](https://css-tricks.com/)| Free CSS tricks and some unique ideas for beginners and advanced | 1299 | | [Material Design Resources](https://material.io/resources)| Use Material tools, downloads, and interactive projects to simplify your workflow. | 1300 | | [Nodesign.dev](https://nodesign.dev) | A collection of tools for developers who have little to no artistic talent| 1301 | | [A11ygator](https://a11ygator.chialab.io/)| A web tool to scan websites against WCAG rules | 1302 | | [Commitizen](http://commitizen.github.io/cz-cli/)| Command line tool to formatted commit messages according to the standards | 1303 | | [CleanCss](https://www.cleancss.com/)| Tool For Code Formatter, Minifier, File Converter | 1304 | | [Tiny helpers](https://tiny-helpers.dev/)| A collection of free single-purpose online tools for web developers | 1305 | | [CSS Ribbon Generator](https://www.cssportal.com/css-ribbon-generator/)| This generator will assist in creating a pure CSS corner ribbon. | 1306 | | [Can I Use](https://caniuse.com/) | Check cross-browser compatibility of frontend technologies. | 1307 | | [kangax-js-compat-table](https://kangax.github.io/compat-table/es6/) | Check JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile).| 1308 | | [mydevice.io](https://www.mydevice.io/)| Most commonly used device resolutions including phones and tablets | 1309 | | [Codepen](https://codepen.io/) | Build, test and discover frontend code. | 1310 | | [Responsively](https://responsively.app) | A tool for designers and frontend developers to design and debug their in all platforms with ease | 1311 | | [html2pdf.js](https://ekoopmans.github.io/html2pdf.js/) | Client-side HTML-to-PDF rendering using pure JS. | 1312 | | [CSS Reference](https://cssreference.io/) | A collection of all css properties and definitions in detail | 1313 | | [Critical Path CSS Generator](https://www.sitelocity.com/critical-path-css-generator) | Generate critical css for your web pages | 1314 | | [SVG Gobbler](https://github.com/rossmoody/svg-gobbler) | Browser extension to find SVGs on a webpage and download, copy to clipboard, or export as PNG. | 1315 | | [shortcode.dev](https://shortcode.dev) | A collection of useful snippets and code examples for HTML, CSS, JavaScript, Node, Artisan, Blade and more. | 1316 | | [30secondsofcode.org](https://www.30secondsofcode.org/) | A wide variety of snippet and article collections for CSS, JavaScript, Python and more. | 1317 | | [PlayCode](https://playcode.io/) | Javascript playground. | 1318 | | [All The Tags](https://allthetags.com/) | All HTML tags briefly explained. | 1319 | | [Vue Telemetry](https://vuetelemetry.com/) | Reveal the Vue plugins and technology stack powering any website or explore a database of 5500+ websites. | 1320 | | [Grid.js](https://gridjs.io/) | Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs. | 1321 | | [Gerillass](https://gerillass.com/) | Gerillass is a website development tool built on top of Sass with a set of Sass mixins and functions for frontend developers to generate scalable CSS outputs. | 1322 | | [Sketchize](https://www.sketchize.com/) | Sketchize is built for UI/UX Designers to help them design lovely apps for mobile, tablet, and desktop devices. | 1323 | | [{CSS}Portal](https://www.cssportal.com/) | CSSPortal is home to a large range of CSS generators, tools and resources. | 1324 | | [DevDocs](https://devdocs.io/) | DevDocs combines multiple API documentations in a fast, organized, and searchable interface. | 1325 | | [papersizes](https://papersizes.io/) | The best resource for International Paper Sizes, Dimensions & Formats. | 1326 | | [flexboxfroggy](http://flexboxfroggy.com/) | Help Froggy and friends by writing CSS code! | 1327 | | [Designbetter Books](https://www.designbetter.co/books) | Essential reading on the practices that propel the best design teams forward. | 1328 | | [OverAPI](https://overapi.com/) | Collection Of All Cheat Sheets. | 1329 | | [Pageclip](https://pageclip.co/) | A server for your Static HTML forms | 1330 | | [Shields](https://shields.io) | Create badges with your own customization. | 1331 | | [williamsharkey](http://williamsharkey.com/Shapes.html) | Random SVG Graphic Generator | 1332 | | [Bootstrap CheatSheet](https://bootstrap-cheatsheet.themeselection.com/) | An interactive list of Bootstrap classes, variables, and mixins. The only Bootstrap CheatSheet you will ever need. | 1333 | | [QR Code Generator](https://markodenic.com/tools/qr-code-generator/) | Use QR Code Generator to easily create a QR code for your project. | 1334 | | [PapersDB](https://papersdb.com/) | The Biggest Paper Database with Sizes, Dimensions and Formats in Metric and Imperial units. | 1335 | | [SETools.xyz](https://www.setools.xyz/) | Free Online tools website for work | 1336 | | [SmallDev.tools](https://SmallDev.tools/) | Free tool for developers to help with Beautify & Minify HTML/CSS/Javascript, and many other handy tools. With a delightful interface. | 1337 | | [Angry Tools](https://angrytools.com/) | Free web tools for speed up your development. | 1338 | | [Rapid API](https://rapidapi.com/hub) | Discover and connect to thousands of APIs. | 1339 | | [Readme.so](https://readme.so) | The easisest way to create a README. | 1340 | | [Showcode](https://showcode.app) | Beautiful code screenshot generator. | 1341 | | [tldraw](https://www.tldraw.com) | A tiny little drawing app. | 1342 | | [devices.css](http://marvelapp.github.io/devices.css/) | Pure CSS phones and tablets by Marvel App. | 1343 | | [Troopl](https://troopl.com) | Build and publish a free portfolio in minutes. | 1344 | | [Apifox](https://apifox.cn) | Apifox = Postman + Swagger + Mock + JMeter | 1345 | | [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/) | Resets the css styling of all HTML elements to a consistent baseline across browsers. | 1346 | | [Clipperly](https://clipperly.com/) | All-in-one free online file service, convert, edit and optimize your files. | 1347 | 1348 |
1349 | ↥ Back To Top 1350 |
--------------------------------------------------------------------------------