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.