DEV Community

Cover image for Helpful Websites for frontend web development
Shubham Tiwari
Shubham Tiwari

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

  • Glassmorphism - This one will help you to create glass type effect for you elements.

source - https://hype4.academy/tools/glassmorphism-generator

  • Css Hero Gradient - This one is advance gradient color generator.

source - https://www.csshero.org/mesher/

  • Box shadows - This one lets you generate box shadows by adjusting layers,horizontal or vertical shadow distance , blur , spreadness ,etc

source - https://shadows.brumm.af/

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.

Top comments (8)

Collapse
 
sush_5191 profile image
Sushant Garudkar

Appreciate your work! ❤

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you ❤️😊

Collapse
 
noorblch profile image
Noor Baloch

Thanks for the resources..

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Welcome ❤️

Collapse
 
cheribc profile image
Heather B Cooper

Thanks for the resources!

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Welcome sir

Collapse
 
abhjiitmhasagar profile image
Abhijit Mhasagar

lovely

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you sir