DEV Community

Cover image for Useful Websites Every Web developer Should Know About.
Cess
Cess

Posted on • Updated on • Originally published at cesscode.hashnode.dev

Useful Websites Every Web developer Should Know About.

Hello everyone! ๐Ÿ’™

In this article, I will write about websites that will help you improve your productivity and manage some of the challenges we face in web development.

let's get started ๐Ÿ’ƒ

1.
Animista

frame_generic_light (1).png

Animista is a CSS animation library and a place where you can play with a collection of pre-made CSS animations, tweak them and you will be able to copy and paste the code into your website.

link to Animista website [https://animista.net/]

2.
Ray

frame_generic_light (2).png

Ray's website helps you turn your codes into beautiful images.

Example:

raycast-untitled.png

link to Ray website [https://ray.so/]

A similar website to the ray website is Carbon, it also helps in sharing beautiful images of your source code

link to carbon website [https://carbon.now.sh/]

3.
BGjar

frame_generic_light (3).png

BGjar is a free SVG background generator for websites, blogs, and apps.

link to BGjar website [https://bgjar.com]

4.
Neumorphism

frame_generic_light (4).png

Neumorphism is a CSS code generator that will help you with colors, gradients, and shadows to your design.

link to Neumorphism website [neumorphism.io]

5.
CSS Button Generator

frame_generic_light (5).png

CSS Button Generator is a free online tool that helps you to create beautiful CSS button styles.

link to CSS Button Generator website [https://css3buttongenerator.com/]

6.
DevSamples

frame_generic_light (6).png

DevSamples helps developers of all types find easy-to-use code samples for common use cases. It's a list of code samples for you to copy and paste into your work projects.

link to DevSamples website [www.devsamples.com]

7.
ReadMe

frame_generic_light (7).png

Readme.so is the easiest way to create a README file. This simple editor allows you to add and customize all the sections you need for your project's readme.

link to Readme website [https://readme.so/]

A similar website to the above website is Readme Gen.

link to readme gen website [https://readme-gen.vercel.app/app]

8.
Coolors

frame_generic_light (9).png

This website will help you with color selections when designing your website.

link to colors website [https://coolors.co/]

9.
Remove Background From Image

frame_generic_light (8).png

This website helps you remove backgrounds from images in 5 seconds with zero clicks.

link to Remove background from Image website [https://www.remove.bg/]

10.
Poet.so

frame_generic_light (10).png

This website will help you create beautiful images of your Twitter posts.

link [https://poet.so/]

11.
Meta Tags

frame_generic_light (11).png

Meta Tag is a tool used for debugging and generating meta tags for any website. It allows you to edit and experiment with your content, then previews how your webpage will look on Google, Facebook, Twitter, and more.

link to metatag website [https://metatags.io/]

12.
Browser frame

frame_chrome_mac_dark.png

Browser Frame allows you to wrap screenshots in browser frames. Supports multiple browsers, operating systems, and themes.

Before Browser frame:

screenbud-c4e26130-9db0-491b-a2af-93c5a9c50d69.png

After browser Frame:

frame_generic_light (1).png

link to browser frame website [https://browserframe.com/]

A similar website to the browser frame website is Screely.

link to Screely website [https://www.screely.com/]

13.
DevDocs

frame_chrome_mac_dark.png

DevDocs is free and Open-source. It contains documentation for almost every technology used in web development. You can download documentation of any of your favorite technology for offline reading.

link to Devdocs website [https://devdocs.io/]

14.
Undesign

frame_chrome_mac_dark (1).png

undesign is a collection of free resources for developers and designers. it contains code snippets, colors, gradients, templates, icons, animations, etc.

link to undesign website [https://undesign.learn.uno/]

15.
The Frontend Checklist

frame_chrome_mac_dark (1).png

The frontend checklist website tells you the best frontend practices you should use for building a website.

link to Frontend checklist website [https://frontendchecklist.io/]

16.
Unscreen

frame_chrome_mac_dark (1).png

Unscreen helps you remove the background of any video online for free.

link to Unscreen website [www.unscreen.com]

17.
CSS Generator Tool

frame_chrome_mac_dark (1).png

A CSS generator that helps you demonstrate and quickly generate CSS declarations for your website. It comes with many useful generator tools with many options like Box-shadow, text-shadow, border, etc.

link to CSS Generator Tool website [https://cssgenerator.org/]

18.
Logo Ipsum

frame_chrome_mac_dark (2).png

Logo Ipsum helps you create random logo designs to use in mock-ups.

link to Logo Ipsum website [https://logoipsum.com/]

Resources

Best websites for free stock photos and videos for web developers

Discover the Best Illustration Websites for Web Developers

Top VS Code Extensions For Web Developers

Best Chrome Extensions for Frontend-Developers and Designers

CONCLUSION

The above-mentioned websites will make your life easier as a web developer. If you have any questions or there are any other websites that help you a lot more than this, Post about it in the comment section below and I'll be happy to answer every single one.

If you found this article helpful, please like and share it ๐Ÿ’™.

That's all for today! ๐Ÿ˜ You reached the end of the article ๐Ÿ˜.

Discussion (34)

Collapse
motuncoded profile image
motuncoded

Very useful post... Thank you so much

Collapse
cesscode profile image
Cess Author

I am glad you like it. Thanks for reading โค๏ธ

Collapse
thumbone profile image
Bernd Wechner • Edited on

Great list. The only one I'll take issue with is Ray. It's 2021 and almost every context I know supports great code formatting and the abuse of images in this space remains rampant alas... code is text, any time we make an image of text and are not styling text we should have a good, conscious reason for doing that. Uses remain, word clouds are a good example.

Collapse
alaindet profile image
Alain D'Ettorre

I have to say, some of those are useful

Collapse
cesscode profile image
Cess Author

Thanks for Reading โค๏ธ

Collapse
blueybloke profile image
Max Phillips

Time to start bookmarking

Collapse
cesscode profile image
Cess Author

Bookmark the blog post so you can always make use of it. Thanks for reading โค๏ธ

Collapse
abdelrahman_dwedar profile image
โ€˜Abdelraแธฅman Dwedar ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป๐Ÿ‡ต๐Ÿ‡ธ

Such a great article! Thanks for sharing them, I just knew some new useful sites out of this article. ๐Ÿ‘

Collapse
cesscode profile image
Cess Author

Thanks for reading โค๏ธ

Collapse
keyboardinterrupt profile image
KeyboardInterrupt • Edited on

I will add some of those to this List! thanks.

Awesome little online helpers

Collapse
cesscode profile image
Cess Author

โค๏ธ

Collapse
mstr_btn profile image
OSCAR P. OGANIZA ๐Ÿ‡ฎ๐Ÿ‡น

Great list! Can I reshare this on my Website? oganiza.com

Collapse
cesscode profile image
Cess Author

With the same canonical link right?

Collapse
mstr_btn profile image
OSCAR P. OGANIZA ๐Ÿ‡ฎ๐Ÿ‡น

Yeah Sure!

Thread Thread
cesscode profile image
Cess Author • Edited on

Okay, let me know when is done.

The link:
cesscode.hashnode.dev/useful-websi...

Collapse
heytemisan profile image
Temisan

This is so useful. You're a blessing.

Collapse
cesscode profile image
Cess Author

Thanks for Reading โค๏ธ

Collapse
mjcoder profile image
Mohammad Javed

Awesome list of resources, thank you.

Collapse
davinaleong profile image
Davina Leong

Useful list! I like it!

Collapse
boooooo profile image
Hamad

Thank you so much

Collapse
cesscode profile image
Cess Author

Thanks for reading Hamad

Collapse
boooooo profile image
Hamad

Thank you

Collapse
dev4_hamid profile image
hamid Abdullah Mohammed

Thank you for this great and helpful post post

Collapse
kotinmotin profile image
Honky Tonky

good

Collapse
cesscode profile image
Cess Author

Thanks for Reading Honk, like and share with your friends

Collapse
prakh_r profile image
Prakhar Yadav

This is the best โค๏ธ

Collapse
cesscode profile image
Cess Author

Thanks for Reading Prakhar, please like and share with your friends

Collapse
steinbring profile image
Joe Steinbring

Very good list (bookmarking a number of these) but I was kind of expecting to see caniuse.com somewhere on it

Collapse
cesscode profile image
Cess Author

Think everyone knows about caniuse.com , when is time to update the article, I will definitely add it.. thanks for Reading โค๏ธ

Collapse
turry profile image
Turry

Thanks!!

Collapse
cesscode profile image
Cess Author

thanks for reading โค๏ธ

Collapse
segestic profile image
segestic

kudos

Collapse
raguram1991 profile image
RaguRam1991 • Edited on

thanks, it is useful post