Description
Hello everyone! In this video, you are going to learn how to create awesome animated widget cards using HTML, CSS, JQuery that can be used to display data and information in an attractive way. You can use these widget cards for dashboard websites and admin panels to display important data. Lets see how to create these animated widget cards.
First create the index.html file and style.css file. Then link the style.css file to the index.html file in between the <head></head> tags and start to code widget HTML part in index.html file like in the video. Also link the pixeden-stroke icons to the index.html file in between the <head></head> tags and select the icons and place them in the HTML file. Now your HTML code is complete. Then start to code style.css file. Write the styles for the body to center the html element. Then write styles for the card design as you can see in the video. After you finished styling then you need to start the JQuery part. First link jquery libraries to the index.html file in between the <head></head> tags and start the jquery part. To start jquery part in the bottom of the index.html file before body close tag open the script tag then between the <script></script> tags write the jquery code to animate the number count. That's it, So now you can crate this awesome animated widget cards using HTML, CSS and JQuery. Hope this video will be helpful.
All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.
We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.
Post a Comment