Created by Ionut Cora | Front-End Web Developer
Welcome to the Web Development Resources repository — a comprehensive, curated collection of tools, libraries, and platforms for modern web development. Whether you're a beginner or a seasoned developer, this repo provides valuable links to speed up your workflow, enhance your UI, and improve performance.
Use the table of contents below to explore each section!
- CSS Libraries
- CSS Generators
- CSS Games
- JavaScript Frameworks
- React JS Libraries
- JavaScript Games
- Free Images & Photos
- Icons
- Color Palettes
- Animation Libraries
- Code Editors
- CMS Platforms
- Hosting Providers
- Charts
- Design Tools
- Chrome Extensions
- Website Optimization Tools
- Website Templates
- UI Components
- Cheat Sheets
- Other Resources
A curated collection of powerful and responsive CSS libraries that help streamline web design and layout development. These tools offer ready-made classes and components for rapid prototyping and clean design implementation.
| Website | Description |
|---|---|
| Bootstrap | Bootstrap is a free CSS framework. It contains HTML, CSS and JavaScript based design templates for navigation, forms, buttons, cards and many other components. |
| Tailwind CSS | Tailwind CSS is an CSS framework. |
| Materialize | Materialize is a modern responsive CSS framework based on Material Design from Google. |
| Bulma | Bulma is a free Css framework based on Flexbox and built with Sass. |
| Sass | Syntactically Awesome Style Sheets or CSS with superpowers is the most powerful CSS extension language. |
Explore a wide range of CSS generators that simplify the process of creating gradients, box-shadows, border-radius, animations, and other styles. These tools are perfect for speeding up development and generating efficient, cross-browser-compatible CSS code with minimal effort.
| Website |
|---|
| CSS Gradient Editor |
| Buttons Generator |
| Fancy Border Radius |
| Neumorphism.io |
| Blobmaker |
| Hola SVG loaders |
| Glassmorphism CSS Generator |
| Grid Layoutit |
| Code Magic |
These games are great for improving layout skills, mastering flexbox and grid, and reinforcing core styling concepts in an enjoyable and memorable way.
| Website | Description |
|---|---|
| Flexbox Froggy | Flexbox Froggy is a game where you can help Froggy by writing CSS code. |
| Grid Garden | Grid Garden is a game where you write CSS code to grow your carrot garden. |
| Knights of the Flexbox Table | Knights of the Flexbox table is a game where you can help Sir Frederic Flexbox to uncover the treasures hidden in the Tailwind CSS dungeons. |
| Coding Fantasy | Coding Fantasy is a game where you can help Rey fight her way through an army of monsters and save her brother from Valcorian. |
| CSS Dinner | |
| Guess CSS | |
| CSS Speedrun |
A comprehensive list of modern JavaScript frameworks that empower developers to build scalable, dynamic web applications. Includes lightweight and full-featured options for both frontend and backend development, enabling faster and more structured coding.
| Website | Description |
|---|---|
| React JS | React is a free front-end JavaScript library used for building user interfaces based on components, developed by Facebook. |
| Angular | Angular is TypeScript based free single-page web application framework, developed by Google. |
| Vue js | Vue.js is an front end JavaScript framework for building UI and single page applications. |
Handpicked React.js libraries designed to accelerate UI development, manage state, and enhance application functionality. From UI component kits to hooks and utility tools, these resources are essential for building professional-grade React applications.
| Website | Description |
|---|---|
| React Bootstrap | React-Bootstrap is a front-end framework rebuilt for React. |
| Material UI | Material UI or Material Design is an React component library developed by Google. |
| Prime React | UI Suite for React.js. |
| Chakra UI | Chakra UI is a simple, modular and accesible component library for React. |
| Ant Design | Ant Design help designers and developers building beautiful products more flexible. |
| NativeBase | Components and patterns for flexibility and customizability. |
| Semantic UI React | Semantic UI React provides React components. |
A collection of browser-based JavaScript games that demonstrate core programming concepts, game mechanics, and interactive design. Perfect for learning through play and exploring how JS is used in real-world creative applications.
| Website | Description |
|---|---|
| CheckiO | Coding games for beginners or advanced programmers using Python and TypeScript. |
| CodinGame | Challenge based training platform for programmers. |
| Crunchzilla | Code and learn. |
| CodeCombat | Learn JavaScript, Python and HTML. |
| Untrasted | Multiplayer game. |
| jsdares | Learn Javascript. |
Access high-quality, royalty-free image libraries ideal for enhancing website visuals, blog posts, and landing pages. These platforms offer diverse collections suitable for commercial and personal projects, supporting fast content creation without licensing concerns.
| Website | Description |
|---|---|
| Unsplash | Unsplash provide free images and photos for your website. |
| pixabay | Stunning FREE images, photos, illustrations, videos and music. |
| Pexels | Free images and videos. |
The icons are perfect for adding professional-grade visuals to websites and apps with minimal load time and maximum clarity.
| Website | Description |
|---|---|
| Font Awesome | FREE icons for your projects. Can be used with React, Vue.js, Angular, WordPress, SCSS and more. |
| Flat Icon | Free Icons and Stickers. |
| Bootstrap Icons | Over 2,000 free, high quality icon library. |
A rich selection of color palette generators and tools that help web designers choose cohesive and accessible color schemes. Ideal for UI/UX designers and developers seeking to improve the visual harmony of their websites or apps.
| Website | Description |
|---|---|
| Coolors | Color palettes generator. |
| Color Hunt | Color Palettes for Designers and Artists. |
| ColorSpace | Generate palettes and 2 or 3 color gradients. |
| HTML Color Codes | HTML color codes, hex color codes, color picker and more. |
| uiGradients | Gradient examples. |
| CSS Gradient | Create free gradient backgrounds for your website. |
Popular JavaScript and CSS animation libraries that bring websites to life with smooth transitions and effects. These tools offer customizable, lightweight, and performance-optimized solutions for adding motion to UI elements.
| Website | Description |
|---|---|
| Animate.css | Animate.css is a library of ready-to-use animations for use in your web projects. |
| anime.js | Anime.js is a lightweight JavaScript animation library. |
| GSAP | GSAP is an industry standard JavaScript animation library from GreenSock. |
| Framer Motion | Framer Motion is a simple and powerful motion library for React. |
| Swiper | Swiper is the most modern mobile touch slider. |
An overview of the most popular code editors used in web development, featuring customization capabilities, extensions, and productivity-enhancing features. Includes both desktop and browser-based editors suitable for beginners and professionals.
| Website | Description |
|---|---|
| Visual Studio Code | VS Code is code editor developed by Microsoft. |
| Sublime Text | |
| PyCharm | |
| Atom | |
| Brackets |
Top content management systems (CMS) that simplify website building and content publishing. From open-source platforms to headless CMS options, these tools support diverse development needs, including blogs, eCommerce, and enterprise solutions.
| Website | Description |
|---|---|
| WordPress | Wordpress is the best known and most used CMS or web content management system in the world. |
| Squarespace | Squarespace is a website builder and also provide website hosting. |
| Wix | Wix.com is a website builder. |
| Shopify | Shopify is the best and free ecommerce platform. |
Reliable and developer-friendly web hosting services that offer scalability, performance, and ease of deployment. Includes free and premium hosting platforms suitable for static sites, dynamic applications, and professional portfolios.
| Website |
|---|
| Bluehost |
| Hostinger |
| HostGator |
| DreamHost |
| GoDaddy |
Comprehensive libraries and tools for creating dynamic, interactive charts and data visualizations in web applications. Useful for dashboards, analytics, and presenting complex data in a user-friendly format.
| Website | Description |
|---|---|
| Charts.js | Simple and flexible JavaScript charting library for the modern web. |
| three.js | Three.js is a cross-browser JavaScript library used to create animated 3D computer graphics in a web browser using WebGL. |
| AMCharts | JavaScript Charts & Maps. Programming library. |
| Charts.css | Charts.css is a modern CSS framework. |
| ECharts | ECharts is an oper source JavaScript visualization library. |
| D3js | The JavaScript library for bespoke data visualization. |
A selection of professional design tools and resources for wireframing, prototyping, and UI/UX design. These platforms help developers and designers collaborate and bring visual concepts to life effectively.
| Website | Description |
|---|---|
| Adobe | Adobe offers a wide range of programs for web design, photo manipulation, video and audio editing and more. |
| Figma | Figma is an design tool for building products. |
| Sketch | Sketch is the all-in-one platform for digital design. |
Must-have Chrome browser extensions that boost web development productivity, debugging, performance analysis, and accessibility. Ideal for improving workflows and gaining insights during frontend and backend development.
| Website | Description |
|---|---|
| WhatFont | With WhatFont you can discover the fonts used on websites as hovering over text. |
| React Developer Tools | React Developer Tools allows you to inspect the React component hierarchies. |
| JSONView | JSONView extension displays JSON text. |
| Lighthouse | Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. |
| ColorZilla | ColorZilla is a color picker. |
| Window Resizer | Window Resizer help the web designers and developers to test their layouts on different browser resolutions. |
| CSSViewer | CSSViewer is a simple CSS properties viewer. |
Optimize your website for speed, SEO, and user experience with these performance and analysis tools. Includes platforms for page speed testing, accessibility audits, and mobile responsiveness evaluation.
| Website | Description |
|---|---|
| SEO Test | Free SEO tool to analyze your website. |
| PageSpeed Insights | PageSpeed Insights or PSI check the website SEO on both mobile and desktop devices and provides suggestions on how to improve it. |
| GTmetrix | Test your website speed. |
A library of responsive, customizable website templates that provide a solid foundation for any type of web project. Ideal for personal portfolios, business sites, blogs, and landing pages, saving time on design and layout.
| Website | Description |
|---|---|
| Templates Shop | Responsive HTML Website Templates that are easy customizable, modern, SEO-optimized and fast-laoding. |
| Bootstrap Made | A collection of finely crafted free and premium Bootstrap templates and themes. |
| HTML5 up | HTML5 & CSS3 fully responsive site templates. |
| HTMLrev | Free HTML templates for websites, landing pages, blogs and more. |
| tooplate | Free HTML website templates which are mobile-friendly & responsive layouts. |
| FreeHTML5.co | Free & Premium HTML5 Bootstrap Templates. |
| UIdeck | HTML, Bootstrap and Tailwind templates. |
| W3T | Website Templates and Landing Pages. |
| graygrids | HTML, Tailwind CSS, and Bootstrap templates and themes. |
| templatemo | Free HTML and CSS templates. |
| Theme Selection | Dashboard Templates & UI Kits. |
| Tailwind Templates | Free Tailwind CSS Templates. |
Reusable UI components and libraries that help build cohesive and interactive user interfaces. These tools follow modern design systems and accessibility best practices, enabling efficient front-end development.
| Website | Description |
|---|---|
| MDB | MDB or Material Design for Bootstrap v5 is a open-source UI Kits. |
| Ayro UI | Bootstrap HTML5 UI Library, Components and Toolkit for creating fast and responsive websites, landing pages or templates. |
| TailGrids | Tailwind CSS UI Components, Blocks and Templates. |
| uiverse | Custom elements made with CSS and Tailwind. |
| shadcn/ui | Components, Blocks, Charts and more. |
| Flowbite | Build websites with components on top of Tailwind CSS. |
Developer-focused cheat sheets offering quick references for HTML, CSS, JavaScript, Git, React, and more. Great for speeding up coding, reducing syntax errors, and enhancing learning and productivity.
| Website | Description |
|---|---|
| Bootstrap 5 CheatSheet | Bootstrap 5 Cheat Sheet is an interactive list of Bootstrap 5 classes, variables, and mixins. |
| Devhints.io | |
| CSS 3, Media Queries Cheat Sheet | |
| Flex | |
| Grid | |
| DevDocs |
A miscellaneous section containing valuable web development tools and references that don’t fall into other categories. Includes productivity tools, learning platforms, and unique utilities that support developers in various aspects of the development process.
| Website | Description |
|---|---|
| Google Fonts | Google fonts help web developers with free text fonts for their websites. |
| Git | Git is a distributed version control system used to control source code by programmers. |
| GitHub | Github is a developer platform that allows developers to create, manage, store and share their code. |
| Node js | Node.js is a cross-platform, runtime environment on the V8 JavaScript engine that can executes JavaScript code outside a web browser. It can run on Windows, macOS, Linux and more. |
| Elementor | Elementor is and WordPress plugin and is allows users to create and edit websites with drag and drop technique. |
| Canva | Canva is a free online graphic design tool used to create presentations, videos, social media posts, logos and more. |
| codepng | Turn your code into awesome pictures. |
| GA Checker | Check your website for free. |
| JSONT | JSON formating tool. |
| JSON Crack | With JSON Crack you can visualize JSON into interactive graphs. |
| PRM | With PRM you can create modern Readme for GitHub. |
| QR code generator | Generate QR code for your website. |
| Gradient.Art | Create beautiful designs using a visual canvas for HTML and CSS. |
| Markdown Badges | |
| Web Searcher | Generate meta tags for your website. |
| Make Meta | |
| Developer Roadmaps | Roadmaps and guides to help developers in choosing a path. |
| Lorem Ipsum | Lorem Ipsum is dumy text or placeholder text which you can use in your website. |
| Rapid API | Free and premium api's to use in your website. |
| Slack | Slack help you to easy communicate with your colleagues. |
| ProfileMe.dev | With ProfileMe.dev you can create an amazing GitHub profile. |
If you find this repository helpful, consider giving it a ⭐ to support future updates!
Made by Ionut Cora