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
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/
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