Share this page!

Pratham 👨‍💻🚀 Profile picture
Twitter logo
24 Jan, 14 tweets, 14 min read
63 RESOURCES OF CSS🌈👇

Thread🧵
📌 COLORS

1. Color Hunt
colorhunt.co

2. Coolors
coolors.co

3. HTML color codes
htmlcolorcodes.com

4. UI Gradients
uigradients.com/#Bupe

5. Gradient generator
cssgradient.io
6. Encycolorpedia
encycolorpedia.com

7. WebFx
webfx.com/web-design/col…

8. Radial Gradient
css-gradient.com

9. COLORS
clrs.cc

10. Flat UI colors 2
flatuicolors.com
📌 CODE SNIPPETS

11. Web tools
webcode.tools/css-generator

12. Little snippets
littlesnippets.net

13. Enjoy CSS
enjoycss.com

14. CSS Tricks
css-tricks.com/snippets/css/

15. CSS Deck
cssdeck.com
16. W3 How to
w3schools.com/howto/

17. Snipplr
snipplr.com

18. Stack overflow
stackoverflow.com/questions/tagg…

19. Codepen
codepen.io/collection/DYp…

20. Code my UI
codemyui.com/tag/pure-css/
📌 DOCUMENTATION AND NOTES

21. W3 Schools
w3schools.com/css/

22. MDN
developer.mozilla.org/en-US/docs/Web…

23. DevDocs
devdocs.io/css/

24. Geeks for geeks
geeksforgeeks.org/css-tutorials/

25. Tutorials point
tutorialspoint.com/css/index.htm
📌 CSS GENERATORS

26. CSS button creator
cssbuttoncreator.com

27. Blob Maker
blobmaker.app

28. Waves maker
getwaves.io

29. Enjoy CSS
enjoycss.com

30. Neumorphic UI
neumorphism.io
31. Glassmorphism Generator
glassmorphism.com

32. Keyframes
keyframes.app

33. Animista
animista.net

34. Fancy border
9elements.github.io/fancy-border-r…

35. CSS Generators tool
cssgenerator.org
36. CSS 3 maker
css3maker.com

37. CSS clip path maker
bennettfeely.com/clippy/

38. CSS shapes generator
coveloping.com/tools/css-shap…

39. Pattern generator
patternify.com

40. Background image generator
bg.siteorigin.com
📌 DESIGN INSPIRATION

41. CSS design awards
cssdesignawards.com

42. Awwwards
awwwards.com/websites/css3/

43. CSS nectar
cssnectar.com

44. Design modo
designmodo.com/css-website-de…

45. CSS winner
csswinner.com
📌 YOUTUBE TUTORIALS

46. Free code camp


47. Traversy media


48. Coding artist
youtube.com/channel/UC15ex…

49. Edureka


50. Red Stapler
youtube.com/channel/UCRthR…
📌 GITHUB REPO

51. Awesome CSS
github.com/awesome-css-gr…

52. 30 seconds of CSS
github.com/30-seconds/30-…

53. CSS Protips
github.com/AllThingsSmitt…

54. Awesome flexbox
github.com/afonsopacifer/…

55. Understanding flexbox
github.com/ohansemmanuel/…
📌 VALIDATORS

56. CSS Validators
beautifytools.com/css-validator.…

57. CSS Lint
csslint.net

58. Purify CSS
purifycss.online
📌 CHROME EXTENSIONS

59. CSS Peeper
chrome.google.com/webstore/detai…

60. Pesticide
chrome.google.com/webstore/detai…

61. Stylebot
chrome.google.com/webstore/detai…

62. Perfect Pixel
chrome.google.com/webstore/detai…

63. Colorpick eyedropper
chrome.google.com/webstore/detai…

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Pratham 👨‍💻🚀

Pratham 👨‍💻🚀 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

Pratham 👨‍💻🚀 Profile picture
23 Jan
Let's create this LOADING animation in less than 15 minutes🌈

THREAD🧵
The HTML structure is pretty straight forward

- Create a container div

- Create 7 different span elements for each letter in the word "LOADING"
- Centralize everything, I have used positioning in order to center my elements but you can use any method you want
Read 8 tweets
Pratham 👨‍💻🚀 Profile picture
23 Jan
50 resources for learning JavaScript in 2021👇

Thread🧵
In this tweet you will find resources in various form

- Documentation
- Courses
- Websites
- YouTube Videos
- Books
- GitHub Repos
- Interactive learning
- Projects
📌 DOCUMENTATION

1. MDN
developer.mozilla.org/en-US/docs/Web…

2. W3 Schools
w3schools.com/js/

3. DevDocs
devdocs.io/javascript/

4. JavaScript Info
javascript.info

5. JavaScript Garden
bonsaiden.github.io/JavaScript-Gar…
Read 13 tweets
Pratham 👨‍💻🚀 Profile picture
21 Jan
Yesterday I invented a new design concept I named "Dropmorphism" 😂

Let's see how I made it👇

THREAD🧵 Complete final output of drop
🚨 The heart of this art is box-shadow and border-radius

I created the shape of drop using Fancy border generator👇

9elements.github.io/fancy-border-r…
Now you a drop ready, We are good to go.

- Create a blue background and centralize your drop Step 1: Creating a drop and...CSS code for step 1
Read 13 tweets
Pratham 👨‍💻🚀 Profile picture
20 Jan
Have you heard the term "PROGRESSIVE WEB APPLICATIONS"🌐?

A detailed thread on it🧵
In this thread you'll find

- All about PWAs
- Learning resources
- Project idea
- And lots of knowledge
You might listen or read somewhere that PWAs is the future of web applications.

WHY? We will try to find the answer👇
Read 16 tweets
Pratham 👨‍💻🚀 Profile picture
18 Jan
How to make different shapes and figures using CSS?🔴🔺⬛🔶

THREAD🧵
1. Circle

- Pretty simple, we just need to make a square and apply the border-radius 50% in order to give it a circular shape ImageImageImage
2. Semi-circle

- Create a rectangle
- Apply border radius top left and top right same as height of the rectangle ImageImageImage
Read 12 tweets
Pratham 👨‍💻🚀 Profile picture
16 Jan
CSS arts are simple🌈
Let's make this laptop in a few simple steps👇

THREAD🧵
STEPS

- Create screen
- Create base
- Create touch pad
- Create key's base
- Create keys
STEP 1: Create Screen

- Create a rectangle for our laptop screen
- Set background color as white
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

Like this author's thread?

Get emails when @Prathkum has new unrolls!

Check out other threads from @Prathkum!

Read all threads by @Prathkum