Forwarded from Learn CSS™
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
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.
Forwarded from Learn CSS™
CSS Generators
https://telegra.ph/CSS-Generators-03-22
https://telegra.ph/CSS-Generators-03-22
Telegraph
CSS Generators
1 . Neumorphism/Soft UI generator CSS code generator that will help with colors, gradients, and shadows to adopt this new design trend or discover its possibilities. Link: neumorphism.io 2 . Smooth Shadow generator Link: shadows.brumm.af 3 . Fancy Border…
Let's compare web development to ourselves
- We have a structure of bones and skin, which is HTML 🚹
- We can do makeup by wearing trendy clothes, which is CSS 🧥🕴️
- We can walk, talk, jump, code, swim, Which is JavaScript🤸🏃⛹️🏋️🚴🤹🏌️⛷️🚣🏊🏇
That's why mastering JavaScript is tough
Like it's tough to learn gymnastics, baseball, weight lifting, cycling, ringleader, golf, skiing, boating, swinging, horse riding, etc in one single life.
But we can try to further our expertise😉💪
- We have a structure of bones and skin, which is HTML 🚹
- We can do makeup by wearing trendy clothes, which is CSS 🧥🕴️
- We can walk, talk, jump, code, swim, Which is JavaScript🤸🏃⛹️🏋️🚴🤹🏌️⛷️🚣🏊🏇
That's why mastering JavaScript is tough
Like it's tough to learn gymnastics, baseball, weight lifting, cycling, ringleader, golf, skiing, boating, swinging, horse riding, etc in one single life.
But we can try to further our expertise😉💪
Project ideas at each level👇
📌 HTML
- Simple portfolio
📌 CSS
- Portfolio with styling
- Tribute page
- Parallax Website
📌 CSS framework
- Landing page
- Survey forms
📌 JavaScript
- Clock
- Navigation bar
- TO-DO app
- Quiz app
- Blog
- Animated menu
- Tic Tac Toe
📌 HTML
- Simple portfolio
📌 CSS
- Portfolio with styling
- Tribute page
- Parallax Website
📌 CSS framework
- Landing page
- Survey forms
📌 JavaScript
- Clock
- Navigation bar
- TO-DO app
- Quiz app
- Blog
- Animated menu
- Tic Tac Toe
Forwarded from Learn CSS™
If you know CSS then you can use these amazing generators and save your time
1️⃣ CSS Box Shadow Generator
- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects
🔗 https://cssboxshadow.com/
2️⃣ Glassmorphism
- Generate glassmorphic design easily
🔗 https://glassgenerator.netlify.app/
3️⃣ Cool Backgrounds
- Explore a beautifully curated selection of cool backgrounds that you can add to your next project
🔗 https://coolbackgrounds.io/
4️⃣ Pixel art
- Create CSS pixel art, export the results to CSS and download them.
🔗 https://www.pixelartcss.com/
5️⃣ SVG waves
- It's not a CSS generator but very handy tool. You can create the layers of waves and simply export either in SVG or PNG
🔗 https://svgwave.in/
1️⃣ CSS Box Shadow Generator
- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects
🔗 https://cssboxshadow.com/
2️⃣ Glassmorphism
- Generate glassmorphic design easily
🔗 https://glassgenerator.netlify.app/
3️⃣ Cool Backgrounds
- Explore a beautifully curated selection of cool backgrounds that you can add to your next project
🔗 https://coolbackgrounds.io/
4️⃣ Pixel art
- Create CSS pixel art, export the results to CSS and download them.
🔗 https://www.pixelartcss.com/
5️⃣ SVG waves
- It's not a CSS generator but very handy tool. You can create the layers of waves and simply export either in SVG or PNG
🔗 https://svgwave.in/
Forwarded from Programming World👨💻 (☠️Anonymus Venom☠️)
These websites can help you as a developer👇
➣
• Code review as a service by expert engineers
➣
• Search anything here and it will show you the correct roadmap
➣
• Over 4000 Free Cheat Sheet
➣
pullrequest .com• Code review as a service by expert engineers
➣
learn-anything.xyz• Search anything here and it will show you the correct roadmap
➣
cheatography.com• Over 4000 Free Cheat Sheet
Forwarded from Learn Web Development
Are you developer? These 3 websites can help 🚀
➜
Create your own patterns using Font Awesome icons
➜
Enable people to interact with your products using voice and text
➜
Useful tool for visualizing Graphs
➜
patternico .comCreate your own patterns using Font Awesome icons
➜
http://wit.ai/Enable people to interact with your products using voice and text
➜
graphonline .ruUseful tool for visualizing Graphs
Forwarded from Learn CSS™
Beginner's_guide_to_getting_started_with_CSS_art_and_illustration.pdf
2.7 MB
Beginner's guide to getting started with CSS art and illustration
Forwarded from Learn CSS™
Use these CSS button generators and save your time and effort
1️⃣ https://www.bestcssbuttongenerator.com/
- CSS Button Generator is a free online tool that allows you to create cross browser HTML and CSS button styles.
2️⃣ https://css3buttongenerator.com/
- Generate cool button in almost no time
3️⃣ https://www.clickminded.com/button-generator/
- A free online button generator. Design your very own button and download the image or get the CSS code.
4️⃣ https://cssbuttoncreator.com/
- The easiest way to create imageless css buttons.
5️⃣ https://gradientbuttons.colorion.co/
- A huge collection of free pre built gradient color
6️⃣ https://www.cssportal.com/css3-button-generator/
- This generator will help you design and learn how to make CSS3 Buttons.
7️⃣ https://www.cssgenerators.net/
- You don't have to learn any complex CSS rules . Just click and slide to make CSS3 Buttons. Lots of pretty button samples.
1️⃣ https://www.bestcssbuttongenerator.com/
- CSS Button Generator is a free online tool that allows you to create cross browser HTML and CSS button styles.
2️⃣ https://css3buttongenerator.com/
- Generate cool button in almost no time
3️⃣ https://www.clickminded.com/button-generator/
- A free online button generator. Design your very own button and download the image or get the CSS code.
4️⃣ https://cssbuttoncreator.com/
- The easiest way to create imageless css buttons.
5️⃣ https://gradientbuttons.colorion.co/
- A huge collection of free pre built gradient color
6️⃣ https://www.cssportal.com/css3-button-generator/
- This generator will help you design and learn how to make CSS3 Buttons.
7️⃣ https://www.cssgenerators.net/
- You don't have to learn any complex CSS rules . Just click and slide to make CSS3 Buttons. Lots of pretty button samples.
[Free] Harvard University CS50's Web Programming with Python and JavaScript
The course covers:
HTML, CSS
Git
Python
Django
SQL, Models, and Migrations
JavaScript
User Interfaces
Testing, CI/CD
Scalability and Security
Link to enroll:
https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript
The course covers:
HTML, CSS
Git
Python
Django
SQL, Models, and Migrations
JavaScript
User Interfaces
Testing, CI/CD
Scalability and Security
Link to enroll:
https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript
25 best Icons site for your next project👇
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
icons .getbootstrap.com⪼
simpleicons .org⪼
boxicons .com⪼
css .gg⪼
flaticon⪼
Fontello⪼
The Noun Project⪼
Endless Icons⪼
evil-icons .io⪼
feathericons .com⪼
heroicons .dev⪼
teenyicons .com⪼
iconpark .bytedance.com⪼
Icons8⪼
Captain Icon⪼
Iconmonstr⪼
Linear Icons⪼
Pixeden⪼
Perfect Icons⪼
Font Awesome⪼
Round Icons⪼
Iconfinder⪼
Freeicons⪼
Icon-icons⪼
FindiconsPeriodic table of HTML5
🖇️https://www.calcresult.com/reference/development/HTML5-periodic-table.html
🖇️https://www.calcresult.com/reference/development/HTML5-periodic-table.html
This media is not supported in your browser
VIEW IN TELEGRAM
Responsively - open source Front end tool to go a little beyond browser's devtools responsiveness 🔥