This media is not supported in your browser
VIEW IN TELEGRAM
Reverse Engineer CSS Animations
Use the Chrome browser's animation dev tools to record, analyze, and reverse engineer CSS animations.
Official docs:
https://developer.chrome.com/docs/devtools/css/animations/
Use the Chrome browser's animation dev tools to record, analyze, and reverse engineer CSS animations.
Official docs:
https://developer.chrome.com/docs/devtools/css/animations/
I find two amazing sites that will improve your CSS skills.
- https://moderncss.dev/
- https://html-shark.com/
And it's free.
- https://moderncss.dev/
- https://html-shark.com/
And it's free.
Useful Tailwind CSS tools that you're not using yet.
- COLOR PALETTE GENERATOR
-
-
-
-
-
-
-
-
-
- COMPONENTS & TEMPLATES
-
-
-
-
-
-
-
-
- CHEATSHEETS
-
-
-
- OTHERS
-https://tailwind-typography-playground.vercel.app/
- https://tailwind.run/new
-https://appseed.us/developer-tools/bootstrap-to-tailwind-css
- COLOR PALETTE GENERATOR
-
https://tailwind.ink/-
https://hypercolor.dev/-
https://palettolithic.com/-
https://grayscale.design/-
https://www.tailwindshades.com/-
http://tailwind.simeongriggs.de/-
https://gradient-designer.csspost.com/-
https://javisperez.github.io/tailwindcolorshades/-
https://adevade.github.io/color-scheme-generator/- COMPONENTS & TEMPLATES
-
https://tailwindcomponents.com/-
https://tailblocks.cc/-
https://merakiui.com/-
https://tailwindtoolbox.com/-
https://kitwind.io/products/kometa/components/-
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
-
https://component.tailwindow.com/-
https://tailwindtemplates.io/- CHEATSHEETS
-
https://flaviocopes.com/tailwind-cheat-sheet/-
https://nerdcave.com/tailwind-cheat-sheet
-
https://tailwindcomponents.com/cheatsheet/- OTHERS
-https://tailwind-typography-playground.vercel.app/
- https://tailwind.run/new
-https://appseed.us/developer-tools/bootstrap-to-tailwind-css
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
Free Backgrounds for your next projects👇
➳
➳
➳
➳
➳
➳
➳
➳
➳
➳
➳
➳
➳
➳
➳
bgjar .com➳
bg.siteorigin .com➳
Repeat-X Repeat-Y➳
Texture King➳
Pattern8➳
cssgradient .io➳
svgbackgrounds➳
Subtle Patterns➳
Patternico➳
BG Patterns➳
Lost and Taken➳
Freepik➳
coolbackgrounds➳
bggeneratorForwarded 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
CSS Pro Tip 🎨
- Zoom image on hover using one line of CSS
Example
HTML:
CSS:
- Zoom image on hover using one line of CSS
Example
HTML:
<img src = "https://pbs.twimg.com/profile_images/1347536368751177731/Jtb7ZdZj_400x400.jpg" />CSS:
body {
height: 100vh;
display: grid;
justify-content: center;
place-items: center;
margin: 0;
}
img {
border-radius: 50%;
height: 300px;
transition: 1s;
cursor: url("https://img.icons8.com/emoji/48/000000/magnifying-glass-tilted-left-emoji.png"), auto;
}
img:hover {
transform: scale(1.1);
}Bootstrap Cheat Sheet 📃
- An interactive list of Bootstrap 5 classes, variables, and mixins. The only Bootstrap 5 CheatSheet you will ever need.
https://bootstrap-cheatsheet.themeselection.com/
- An interactive list of Bootstrap 5 classes, variables, and mixins. The only Bootstrap 5 CheatSheet you will ever need.
https://bootstrap-cheatsheet.themeselection.com/
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
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