DEV Community

Cover image for Helpful Websites for frontend web development
Mysterio
Mysterio

Posted on • Updated on

Helpful Websites for frontend web development

Hello guys today i am going to show you some cool websites which can help you in front end web development and it is just for beginners.
Lets get started...

  • csslayout.io

This one is helpful because it provides built-in designs and mini templates for your designs and also provide the snippet code which you can just copy and paste it in your code and adjust the content according to your need.

Source - https://csslayout.io/

  • Animate.css

This one is also helpful as it provides many basic animation effects which can be used just by providing the class name of the animation which you want to use.

Source - https://animate.style/

  • Wow.js - This is also an animation library which you can combine with animate.css because the problem with animate.css animations is that all the animation in animate.css run when the page is loaded so, when you scroll down to the page you wont see the animation which is down to the page because the animation is already done when the page is loaded.So, to solve this problem we use wow.js.

Source - https://wowjs.uk/docs.html

Below is the link of a video of how to use wow.js with animate.css

Youtube link - https://www.youtube.com/watch?v=bd_jHBk8Kzw

  • Hover.css - This one is also great as you can create hover effects easily with hover.css by just providing the name of hover effect it the class attribute of the element.

I have covered the Hover.css tutorial in other blog below -
Source - https://dev.to/shubhamtiwari909/hover-effects-with-hovercss-52fd

  • getwaves.io - This one is also helpful as you can generate many types of waves effect of any color and shapes and get the source code of it .

Source - https://getwaves.io/

  • uiGradients - This one is helpful as you can select the gradient out of many options available here and can generate the code and copy paste it into you css file.

Source - https://uigradients.com/#Turquoiseflow

You can help me by some donation at the link below Thank you 👇👇

☕ - https://www.buymeacoffee.com/waaduheck

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION PLEASE MENTION IT IN THE COMMENT SECTION.

Discussion (8)

Collapse
sush_5191 profile image
Sushant Garudkar

Appreciate your work! ❤

Collapse
shubhamtiwari909 profile image
Mysterio Author

Thank you ❤️😊

Collapse
noorblch profile image
Noor Baloch

Thanks for the resources..

Collapse
shubhamtiwari909 profile image
Mysterio Author

Welcome ❤️

Collapse
cheribc profile image
Heather B Cooper

Thanks for the resources!

Collapse
shubhamtiwari909 profile image
Mysterio Author

Welcome sir

Collapse
abhjiitmhasagar profile image
Abhijit Mhasagar

lovely

Collapse
shubhamtiwari909 profile image
Mysterio Author

Thank you sir