Helpful Websites for frontend web development

#beginners #webdev #tutorial #uiweekly

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