Some amazing CSS animation libraries
👇
🔹
🔸
🔹
🔸
🔹
👇
🔹
minimamente .com/project/magic🔸
animxyz .com🔹
svgartista .net🔸
animate .style🔹
cssanimation .ioJust found a great tool🔥
- Beautiful pure CSS background patterns that you can actually use in your projects. They are highly customizable as well.
🖇️
https://www.magicpattern.design/tools/css-backgrounds
- Beautiful pure CSS background patterns that you can actually use in your projects. They are highly customizable as well.
🖇️
https://www.magicpattern.design/tools/css-backgrounds
MagicPattern
CSS Background Patterns by MagicPattern
Beautiful pure CSS background patterns that you can actually use in your projects!
Tailwind CSS resources 🎨
📌 Templates and components
-
-
-
📌 Code Snippets
-
📌 Playground
-
📌 Color tool
Check this amazing repo for more such great resources🔥
📌 Templates and components
-
tailwindtoolbox .com-
tailwindcomponents .com-
tailwind .build📌 Code Snippets
-
github .com/mauro-codes/tailwind-css-snippets📌 Playground
-
play.tailwindcss .com/📌 Color tool
gradient-designer.csspost .comCheck this amazing repo for more such great resources🔥
https://github. com/aniftyco/awesome-tailwindcssJohn Hopkins University is offering this free course on HTML, CSS, and JavaScript for Web Developers.
Link:
https://www.coursera.org/learn/html-css-javascript-for-web-developers
Link:
https://www.coursera.org/learn/html-css-javascript-for-web-developers
Coursera
HTML, CSS, and Javascript for Web Developers
Offered by Johns Hopkins University. Do you realize that ... Enroll for free.
☯Do not write CSS code, use these free generators instead that can help you immensely☯
1️⃣ Stripes generator
- Pure CSS Stripes Generator that you can use for backgrounds.
🔗 https://stripesgenerator.com/
2️⃣ Gradient generator
- As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile
🔗 https://cssgradient.io/
3️⃣ Pattern generator
- It lets you create background pattern for free
🔗 http://www.patternify.com/
4️⃣ CSS Accordion Slider Generator
- Create fully responsive, css only accordion sliders
🔗 https://accordionslider.com/
5️⃣ Palette Ninja
- Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds.
🔗 https://palette.ninja
6️⃣ Layout generator
- Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.
🔗 https://grid.layoutit.com/
1️⃣ Stripes generator
- Pure CSS Stripes Generator that you can use for backgrounds.
🔗 https://stripesgenerator.com/
2️⃣ Gradient generator
- As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile
🔗 https://cssgradient.io/
3️⃣ Pattern generator
- It lets you create background pattern for free
🔗 http://www.patternify.com/
4️⃣ CSS Accordion Slider Generator
- Create fully responsive, css only accordion sliders
🔗 https://accordionslider.com/
5️⃣ Palette Ninja
- Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds.
🔗 https://palette.ninja
6️⃣ Layout generator
- Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.
🔗 https://grid.layoutit.com/
Learn CSS™ pinned «☯Do not write CSS code, use these free generators instead that can help you immensely☯ 1️⃣ Stripes generator - Pure CSS Stripes Generator that you can use for backgrounds. 🔗 https://stripesgenerator.com/ 2️⃣ Gradient generator - As a free css gradient…»
Charts.css is a CSS-only charting framework. Looks great and very customizable!
https://chartscss.org/
https://chartscss.org/
chartscss.org
Charts.css
CSS data visualization framework
Forwarded from Learn Web Development
40+ High-Quality Free Resources for Web Development
Illustrations
1. Drawkit
http://drawkit.io
2. Blush
( http://blush.design )
3. Smash illustration
( http://usesmash.com )
4. Control
( http://control.rocks )
5. Error 404
( http://error404.fun )
6. Open Doodles
( http://opendoodles.com )
Development
1. Carbon
( http://carbon.now.sh )
2. Squoosh
( http://squoosh.app )
3. Wappalyzer
( http://wappalyzer.com )
4. Kite
( http://kite.com )
5. DevHints
( http://devhints.io )
6. iHateRegex
( http://ihateregex.io )
7. DevDocs
( http://devdocs.io/css/css_animations …)
CSS
1. Animista
( http://animista.net )
2. Pattern.css
( http://bansal.io/pattern-css )
3. CSSeffectsSnippets
( http://emilkowalski.github.io/css-effects-snippets …)
4. 98.css
( http://jdan.github.io/98.css )
Tailwind
1. TailwindComponents
( http://tailwindcomponents.com )
2. Tailblocks
( http://mertjf.github.io/tailblocks/ )
Design
1. Colors .lol
( http://colors.lol )
2. Colormind
( http://colormind.io )
3. FontSpark
( http://fontspark.app )
4. AppMockUp
( http://app-mockup.com )
5. Webframe
( http://webframe.xyz )
6. Ucraft Logo Maker
( http://ucraft.com/free-logo-maker )
7. HackDesign
( http://hackdesign.org/lessons )
8. Checklist Design
( http://checklist.design )
9. Remove BG
( http://remove.bg )
10. Unscreen
( http://unscreen.com )
Productivity
1. GetTerms
( http://getterms.io )
2. Sejda
( http://sejda.com )
3. Notion
( http://notion.so )
4. Grammarly
( http://grammarly.com )
5. Wave
( http://waveapps.com )
6. Clockify
( http://clockify.me )
7. Untools
( http://untools.co )
8. Evernote
( http://evernote.com )
9. Top Hunts Time Machine
( http://timemachine.betamode.dev )
10. OpensSource Builders
( http://opensource.builders )
Follow @learn_webdevelopment for Web development content
Illustrations
1. Drawkit
http://drawkit.io
2. Blush
( http://blush.design )
3. Smash illustration
( http://usesmash.com )
4. Control
( http://control.rocks )
5. Error 404
( http://error404.fun )
6. Open Doodles
( http://opendoodles.com )
Development
1. Carbon
( http://carbon.now.sh )
2. Squoosh
( http://squoosh.app )
3. Wappalyzer
( http://wappalyzer.com )
4. Kite
( http://kite.com )
5. DevHints
( http://devhints.io )
6. iHateRegex
( http://ihateregex.io )
7. DevDocs
( http://devdocs.io/css/css_animations …)
CSS
1. Animista
( http://animista.net )
2. Pattern.css
( http://bansal.io/pattern-css )
3. CSSeffectsSnippets
( http://emilkowalski.github.io/css-effects-snippets …)
4. 98.css
( http://jdan.github.io/98.css )
Tailwind
1. TailwindComponents
( http://tailwindcomponents.com )
2. Tailblocks
( http://mertjf.github.io/tailblocks/ )
Design
1. Colors .lol
( http://colors.lol )
2. Colormind
( http://colormind.io )
3. FontSpark
( http://fontspark.app )
4. AppMockUp
( http://app-mockup.com )
5. Webframe
( http://webframe.xyz )
6. Ucraft Logo Maker
( http://ucraft.com/free-logo-maker )
7. HackDesign
( http://hackdesign.org/lessons )
8. Checklist Design
( http://checklist.design )
9. Remove BG
( http://remove.bg )
10. Unscreen
( http://unscreen.com )
Productivity
1. GetTerms
( http://getterms.io )
2. Sejda
( http://sejda.com )
3. Notion
( http://notion.so )
4. Grammarly
( http://grammarly.com )
5. Wave
( http://waveapps.com )
6. Clockify
( http://clockify.me )
7. Untools
( http://untools.co )
8. Evernote
( http://evernote.com )
9. Top Hunts Time Machine
( http://timemachine.betamode.dev )
10. OpensSource Builders
( http://opensource.builders )
Follow @learn_webdevelopment for Web development content
Learn CSS™
OUTPUT
⚠ This property has not been standardize. It will not work on every device so avoid using it.
But still it is good to know that these kinds of things exist in CSS
But still it is good to know that these kinds of things exist in CSS
Forwarded from Learn JavaScript™
20 Cheat Sheets Website For Developers
1. OverAPI
OverAPI is a website that aggregates cheat sheets for many popular web programming languages such as Javascript, NodeJS, PHP, Python, CSS.
https://overapi.com/
2. Awesome-Cheatsheets
It is a collection of popular web programming language Cheatsheets.
https://lecoupa.github.io/awesome-cheatsheets/
3. Bootstrap-4 Cheat Sheet
Bootstrap 4 Cheat Sheet is a site that aggregates all the functions and displays the components in Bootstrap version 4.3.1
https://hackerthemes.com/bootstrap-cheatsheet/
4. GitSheet
GitSheet is an aggregator of commands that you often use with Git. For each statement, it describes detail usage.
https://gitsheet.wtf/
5. HTML5 Element Index
The HTML5 element index is a web page aggregating new or redefined objects in the HTML5 version.
http://html5doctor.com/element-index/
6. HTML CheatSheet
HTML CheatSheet is a website that synthesizes useful examples and tools for web developers to help us reduce the time and effort in web development such as choosing colors, creating links, creating images, create tables ... for HTML
https://htmlcheatsheet.com/m/?__twitter_impression=true
7. Can I Use
Can I Use is a website that provides information about each different browser version, it will help programmers know which web technology can be used for those browsers.
https://caniuse.com/
8. Rico's cheatsheets
Rico's cheatsheets is an almost complete aggregation cheatsheet for web developers such as React, Vue, ES6, Vim, Kotlin. each category, will be divided into many smaller sections to help you easily find the cheatsheet you want.
https://devhints.io/
9. Cheatography
Cheatography is also a collection of cheat sheets for web development and is divided into several sub-categories such as Miscellaneous, Network, DevOps, Database, Programming Language
https://cheatography.com/programming/
10. CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet is a collection of CSS3 animations for your web project. You just need to load the animations.css file and call the effect class you want for the object in the HTML.
http://www.justinaguilar.com/animations/
11. CSS Grid Cheat Sheet
CSS Grid Cheat Sheet is a website that helps you create a grid system using CSS3 for web pages easily. With tools that support full features such as defining grid-template-columns, grid-template-rows, grid-column-gap
https://alialaa.github.io/css-grid-cheat-sheet/
12. Grid
Grid is a web page that aggregates complete detailed examples for each property used in defining the CSS3 grid system for a website.
https://grid.malven.co
13. Media Queries Cheat Sheet
https://mac-blog.org.ua/css-3-media-queries-cheat-sheet/
14. Responsive Web Design Cheat Sheet
https://uxpin.s3.amazonaws.com/responsive_web_design_cheatsheet.pdf
15. HTML5 Canvas Cheat Sheet
https://simon.html5.org/dump/html5-canvas-cheat-sheet.html
16. Web Developer's SEO Cheat Sheet
https://moz.com/learn/seo/seo-cheat-sheet
17. Modern JavaScript Cheatsheet
https://mbeaudru.github.io/modern-js-cheatsheet/
18. HTML5 Security Cheatsheet
https://html5sec.org/
19. Html Vocabulary
http://apps.workflower.fi/vocabs/html/en#children
20. Regex Cheat Sheet
https://dev.to/emmabostian/regex-cheat-sheet-2j2a
Follow @learn_JavaScript_js for more JavaScript content.
1. OverAPI
OverAPI is a website that aggregates cheat sheets for many popular web programming languages such as Javascript, NodeJS, PHP, Python, CSS.
https://overapi.com/
2. Awesome-Cheatsheets
It is a collection of popular web programming language Cheatsheets.
https://lecoupa.github.io/awesome-cheatsheets/
3. Bootstrap-4 Cheat Sheet
Bootstrap 4 Cheat Sheet is a site that aggregates all the functions and displays the components in Bootstrap version 4.3.1
https://hackerthemes.com/bootstrap-cheatsheet/
4. GitSheet
GitSheet is an aggregator of commands that you often use with Git. For each statement, it describes detail usage.
https://gitsheet.wtf/
5. HTML5 Element Index
The HTML5 element index is a web page aggregating new or redefined objects in the HTML5 version.
http://html5doctor.com/element-index/
6. HTML CheatSheet
HTML CheatSheet is a website that synthesizes useful examples and tools for web developers to help us reduce the time and effort in web development such as choosing colors, creating links, creating images, create tables ... for HTML
https://htmlcheatsheet.com/m/?__twitter_impression=true
7. Can I Use
Can I Use is a website that provides information about each different browser version, it will help programmers know which web technology can be used for those browsers.
https://caniuse.com/
8. Rico's cheatsheets
Rico's cheatsheets is an almost complete aggregation cheatsheet for web developers such as React, Vue, ES6, Vim, Kotlin. each category, will be divided into many smaller sections to help you easily find the cheatsheet you want.
https://devhints.io/
9. Cheatography
Cheatography is also a collection of cheat sheets for web development and is divided into several sub-categories such as Miscellaneous, Network, DevOps, Database, Programming Language
https://cheatography.com/programming/
10. CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet is a collection of CSS3 animations for your web project. You just need to load the animations.css file and call the effect class you want for the object in the HTML.
http://www.justinaguilar.com/animations/
11. CSS Grid Cheat Sheet
CSS Grid Cheat Sheet is a website that helps you create a grid system using CSS3 for web pages easily. With tools that support full features such as defining grid-template-columns, grid-template-rows, grid-column-gap
https://alialaa.github.io/css-grid-cheat-sheet/
12. Grid
Grid is a web page that aggregates complete detailed examples for each property used in defining the CSS3 grid system for a website.
https://grid.malven.co
13. Media Queries Cheat Sheet
https://mac-blog.org.ua/css-3-media-queries-cheat-sheet/
14. Responsive Web Design Cheat Sheet
https://uxpin.s3.amazonaws.com/responsive_web_design_cheatsheet.pdf
15. HTML5 Canvas Cheat Sheet
https://simon.html5.org/dump/html5-canvas-cheat-sheet.html
16. Web Developer's SEO Cheat Sheet
https://moz.com/learn/seo/seo-cheat-sheet
17. Modern JavaScript Cheatsheet
https://mbeaudru.github.io/modern-js-cheatsheet/
18. HTML5 Security Cheatsheet
https://html5sec.org/
19. Html Vocabulary
http://apps.workflower.fi/vocabs/html/en#children
20. Regex Cheat Sheet
https://dev.to/emmabostian/regex-cheat-sheet-2j2a
Follow @learn_JavaScript_js for more JavaScript content.