Created by Ionut Cora | Front-End Web Developer
I have attached below the most popular web development resources that any web developer uses for website development.
Feel free to use them in your projects and I hope you find them useful.
If you like this repo, make sure to ⭐ it.
- 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
| 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. |
| Website |
|---|
| CSS Gradient Editor |
| Buttons Generator |
| Fancy Border Radius |
| Neumorphism.io |
| Blobmaker |
| Hola SVG loaders |
| Glassmorphism CSS Generator |
| Grid Layoutit |
| Code Magic |
| 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 |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| Website | Description |
|---|---|
| Visual Studio Code | VS Code is code editor developed by Microsoft. |
| Sublime Text | |
| PyCharm | |
| Atom | |
| Brackets |
| 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. |
| Website |
|---|
| Bluehost |
| Hostinger |
| HostGator |
| DreamHost |
| GoDaddy |
| 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. |
| 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. |
| 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. |
| 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. |
| Website | Description |
|---|---|
| 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. |
| 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. |
| 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 |
| 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. |
Made by Ionut Cora