Home
Videos uploaded by user “FrontEndFunn”
How to Download and Use Font Awesome 5 Icons Offline in HTML - web development
 
03:41
#fontAwesome5 #frontendfunn #fontAwesome5Offline #fontAwesomeIcons Learn HTML CSS and Javascript. html css javascript How to Use Font Awesome 5 Icons Offline. font awesome 5 new version has been released. font awesome Icons is a popular font library which consists of web fonts which can be included in the webpage easily. or font awesome 5 icons can also be included in using CDN. font awesome 5 icons library consists of web icons which are available in different formats like font awesome 5 css files, font awesome 5 svg, font awesome 5 scss, font awesome 5 less. font awesome 5 icons are also available in production version i.e, you can use font awesome 5 icons using CDN and font awesome 5 icons are also available in development version i.e, you can use font awesome 5 icons offline. font awesome 5 icons download https://fontawesome.com/ Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 74907 FrontEndFunn
Bootstrap Modal Center Align Vertically and Horizontally Working
 
04:03
#frontendfunn Bootstrap Modal Window align vertically and Horizontally Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 1200 FrontEndFunn
Image Gallery Filters Tutorial | Image Portfolio Filters - web development
 
30:00
#filters #frontendfunn #galleryfilters #imagegallery #portfolio #gallery In this html css javscript tutorial we will learn "How to create Image Gallery Filters or Image Portfolio Filters " using html css javascript. To create image gallery with bootstrap and apply filter we are going to make use of javascript library called Filterizr. we are going to use bootstrap version 4, popular css framework to style the elements and also use jquery, popular javascript library. to create image filters. Filterizr Github Link:- https://github.com/giotiskl/Filterizr bootstrap 4 link https://getbootstrap.com/ jquery https://jquery.com/ code link:- https://drive.google.com/file/d/1pOxt0lYv5tn-80B8grBoDtNYxzvH4ZsW/view?usp=drivesdk Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 4520 FrontEndFunn
Pure CSS Sphere Tutorial - #frontendfunn
 
10:27
Pure CSS Sphere Tutorial using HTML5 and CSS3 Animations Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 1704 FrontEndFunn
Visual Studio Code | vscode -  Live Server and Live SCSS Setup - web development
 
05:48
#liveserver #frontendfunn #css #scss #vscode In this VSCode Setup With Live Server and Live SCSS, I will walk you through the setting of Visual Studio Code with the live server and Live scss extensions. Download VS Code from https://code.visualstudio.com/ Live Server Extension https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live SASS / SCSS Extension https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 321 FrontEndFunn
#frontendfunn - sidebar navigation menu bootstrap | How to Create Bootstrap Sidebar Navigation Menu
 
10:09
How to convert Bootstrap version 3 Mobile Responsive Navigation Menu into Sidebar Navigation Menu Bootstrap. Download The Bootstrap Sidebar Navigation Menu CSS and JS from the Link Below https://goo.gl/qXvokK If You Like the Video Please Like and Share. Any Queries Comment Below. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 10863 FrontEndFunn
#flipkartAffiliate Flipkart Affiliate API 2018 Version 1.0 Integration Tutorial using nodejs - Part1
 
17:41
#frontendfunn #flipkart #flipkartapi #nodejs In this Flipkart Affiliate Marketing API 2018 Version 1.0 Integration Tutorial we will make use of nodejs and expressjs, and integrate node app with flipkart affiliate marketing api. Flipkart has updated it's API from old version to new version v1.0. By using a npm package we will integrate the node application with Flipkart Affiliate Marketing API 2018 Version 1.0 . npm package https://www.npmjs.com/package/flipkart-api-affiliate-client express generator https://expressjs.com/en/starter/generator.html This is Part 1 of the video which show the product feed listing of the flipkart new affiliate Marketing API. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 1678 FrontEndFunn
#frontendfunn - Amazon Affiliate Marketing Program | Amazon Affiliate API Integration Using Node.js
 
08:26
This Tutorial is an example to show how to integrate API of Amazon product advertising (application programming interface) using Node.js and display the JSON data received from the Amazon affiliate marketing API.we can list of products received from Amazon Affiliate Marketing Program API. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 6806 FrontEndFunn
Material Design Form CSS Input Label Animation Tutorial - #frontendfunn
 
20:07
Material Design Form Input Label Animation Tutorial using HTML5 and CSS3. we are making use of HTML5 CSS3 Validation Technique to create Material Design Form CSS input Label Animation. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 2227 FrontEndFunn
CSS Search Bar Animation Tutorial - web development
 
13:51
#frontendfunn html css javascript Search Bar Animation Tutorial With HTML, CSS, and Javascript. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 1518 FrontEndFunn
Animated Hamburger Menu Icon Toggle Tutorial - #frontendfunn
 
10:00
#hamburgerMenu #menuIcon #toggleMenu html css javascript - Hamburger Menu Icon Toggle Animation Tutorial Hamberger Menu Tutorial using HTML CSS Javascript - HTML5 CSS3 Tutorials. Hamberger Menu Icon tutorial, hamberger menu css, hamberger menu animation, hamberger menu tutorial, Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 1389 FrontEndFunn
Bootstrap 4.2 Sidebar Mobile Menu with Sub menu Tutorial
 
23:55
In this Bootstrap 4.2.1 Sidebar Menu Tutorial, we will transform the regular bootstrap 4 mobile menu into the bootstrap 4 sidebar navigation mobile menu using the bootstrap 4 build in utility classes. we will add the utility classes to the navigation element. Instead of collapsing the navigation menu we will make the bootstrap 4.2.1 sidebar navigation mobile menu slide from left or slide from right based on the user requirement. This bootstrap 4 sidebar navigation mobile menu is responsive and also supports the sub menu. we will enable the toggle button and add the overlay to the background. when user clicks on the sidebar toggle button the sidebar menu pop out along with the overlay added on the background, and when the user can close the sidebar menu either by clicking on the toggle button again or by clicking on the overlay. The updated code for this bootstrap 4.2 sidebar menu is provided on my blog. Please feel free to customize the menu as per the requirements. #sidemenu #sidebarmenu #bootstrapsidebar #bootstrap #frontendfunn ======================================================== A LIKE IS ALWAYS APPRECIATED ======================================================== Thanks For Watching. Hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 1037 FrontEndFunn
Material.io Web Components Tutorial - 2. Using Material Design Button Components - #frontendfunn
 
10:34
#material.io #webcomponents #materialcomponents #googlematerialdesign #materialdesign Material.io is component based which is developed by google to build applications. Material.io is developed for a variety of platforms which include ios, android, flutter as well as web. In this Material.io Web Components Tutorial Series I will walk you through the basic usage of the material.io components, which helps you to get started using these components in your projects. This is Part Two of the tutorial where I will Show you the basic usage of @material/button component. Because Material.io is component based we need to install the specific component into our project using npm. In this tutorial i will walk you through the installation of material button component and its basic usage in our project. I will also discuss the different types of buttons that are available in the Material.io Components. Follow the steps in the tutorial and get started Github Repo Link - https://github.com/frontendfunn/Material.io-Web Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Do visit our website for more fun stuff @ http://www.frontendfunn.com Happy Coding :D
Views: 2111 FrontEndFunn
How To use Font Awesome 5 Icons in HTML using CDN - html css javascript
 
02:44
#frontendfunn #fontAwesome5 #fontAwesome5CDN #fontAwesomeIcons html css javascript Learn HTML CSS and Javascript. How to Use Font Awesome 5 Icons Offline. font awesome 5 new version has been released. font awesome Icons is a popular font library which consists of web fonts which can be included in the webpage easily. or font awesome 5 icons can also be included in using CDN. font awesome 5 icons library consists of web icons which are available in different formats like font awesome 5 css files, font awesome 5 svg, font awesome 5 scss, font awesome 5 less. font awesome 5 icons are also available in production version i.e, you can use font awesome 5 icons using CDN and font awesome 5 icons are also available in development version i.e, you can use font awesome 5 icons offline. font awesome 5 icons download https://fontawesome.com/ Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 4561 FrontEndFunn
Bootstrap 4 Sidebar Navigation Menu Tutorial - web development
 
05:03
==================================================== Found Issues While testing on some devices. PLEASE FIND THE LATEST VIDEO AT THE BELOW LINK. https://www.youtube.com/watch?v=wkwoKpBQA4Y&feature=youtu.be ===================================================== #sidemenu #sidebarmenu #bootstrapsidebar #bootstrap #frontendfunn In this Tutorial we will create mobile responsive sidebar menu navigation for the most popular css framework, Bootstrap 4 new release. To create mobile responsive bootstrap 4 sidebar navigation or mobile responsive bootstrap 4 side menu navigation, you need to include css and js files in your html page. Next You need to add couple of classes to get the effect. Note :- Don't Forget to remove ---- data-toggle="collapse" ----attribute on the toggler button Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. ===================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 23163 FrontEndFunn
#frontendfunn - Before and After Image Slider using Zurb Foundation TwentyTwenty.js
 
09:02
#beforeAfterImageSlider #beforeAfterSlider #imageSlider #sliderimages #twentytwenty In this Before After Image Slider using Zurb Foundation Library, we are going to make use of javascript plugin called "TwentyTwenty" which is from ZURB Foundation. We will be creating the before after slider using this twentytwenty before after slider plugin. we can create vertical before after slider or horizontal before after slider based on the options we have passed. Sorry Guys I have Misspelt the word "twentytwenty", basically you can you any class name that don't conflict with other class name Download the twenty twenty before after slider from the github. I have explained how to download and install in to your project. Here is the link for the github repo. https://github.com/zurb/twentytwenty Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 633 FrontEndFunn
Google Material Design Ripple Effect Animation Tutorial - #frontendfunn
 
10:12
html css javascript Material Design Ripple Effect using HTML 5, CSS 3, and Javascript Tutorial. In this material design ripple effect css animation tutorial, we are going to create a ripple effect like material design android in the web page using the javascript library, jquery and css3 animations. Hope you find this video useful. please do watch other videos on my channel. please subscribe and share. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 530 FrontEndFunn
Hamburger Menu Icon Animation Tutorial - #frontendfunn
 
15:30
#hamburgermenu #menuicon #menutoggle #hamburgeranimation #animatedmenu In this Hamburger Menu Icon Animation Tutorial, we are going to make use of a checkbox to create the toggle effect on the menu. Animation can also be done using the javascript but to keep it simple we will make use of the checkbox to create the toggle effect. we will have a div with a class of hamburger and inside the hamburger we will be having three span elements. we will make use of the pseudo elements ::before and ::after and place them at either end of the individual span element. when the checkbox is in checked state we will make use of the transform-orign property and using the css3 transitions and rotate animations we will rotate the pseudo elements to look like hamburger close icon. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. You can find the source code at frontendfunn.com http://www.frontendfunn.com Happy Coding :D
Views: 139 FrontEndFunn
How to use Github Octicons offline & through CDN Tutorial - web development
 
06:20
#githubIcons #octicons #octiconscdn #git #github #frontendfunn In this video we will take a look at how to use the github octicons in the html using offline and also through cdn. github's octicons are text icon font library which contains set of font icons used on github. just like font-awesome icons these icons can also be used online and as well as included offline in any project. github's octicons are all svg elements. by copying the code they can be included in the project. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 1179 FrontEndFunn
Material.io Web Components Tutorial - 3. Using Floating Action Button Component - #frontendfunn
 
12:27
#material.io #webcomponents #materialcomponents #googlematerialdesign #materialdesign Material.io is component based which is developed by google to build applications. Material.io is developed for a variety of platforms which include ios, android, flutter as well as web. In this Material.io Web Components Tutorial Series I will walk you through the basic usage of the material.io components, which helps you to get started using these components in your projects. This is Part Three of the tutorial where I will Show you the basic usage of @material/fab component. Because Material.io is component based we need to install the specific component into our project using npm. In this tutorial i will walk you through the installation of material floating action button component and its basic usage in our project. I will also discuss the different types of floating action buttons that are available in the Material.io Components. Follow the steps in the tutorial and get started Github Repo Link - https://github.com/frontendfunn/Material.io-Web Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Do visit our website for more fun stuff @ http://www.frontendfunn.com Happy Coding :D
Views: 532 FrontEndFunn
FontAwesome Buttons Animation Toggle Effect Tutorial - web development
 
21:58
#fontawesome #togglebutton #iconanimation #animation #frontendfunn In this tutorial, we will create a Font Awesome Button Toggle Animation using the scss and javascript popular library , jQuery and font awesome icons. we will learn how to add font awesome icons inside the button and we make use of css animations and create cool love toogle effect on a button. Hope you find this video useful. please do watch other videos on my channel. please subscribe and share.
Views: 842 FrontEndFunn
Sign up and Sign in Form Animation Tutorial - web development
 
53:24
#signInForm #signUpForm #htmlForms #cssAnimations #frontendfunn In This Sign up and Sign in Form Animation Tutorial, we will be creating a sign in and sign up form card animation effect. At First we will create sign up form and sign in from. add styles to these forms using css. later we will make use of jquery to make the form active state and toggle the other form active state. To create a cool card animation effect, we make use of css3 animations and apply css3 transform property and use the css3 translate property , css3 transform rotate property and animate the elements to get this cool effect. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 732 FrontEndFunn
Font Awesome Heart Icons Animation using Javascript Tutorial - web development
 
15:43
#fontawesome #heartanimation #loveanimation #fontawesomeicons #fontawesomeiconsanimation #frontendfunn In this html, css, javascript tutorial, we will try to create Font Awesome Icons Animation. We will make use of jquery, javascript's most popular library and create clones of the font awesome icon using jquery clone method and position the font awesome icon randomly over the web page. Using jquery animate method we will animate the font awesome icon to create cool animation effect. Hope you find this video useful. please do watch other videos on my channel. please subscribe and share.
Views: 301 FrontEndFunn
Pure CSS Spinner Loader Animation Tutorial - #frontendfunn
 
13:13
#purecss #pureCSSLoader #pureCssLoaderAnimation In this tutorial we will create pure css spinner loader using html css. we will make use of css3 animations to animate the spinner loader. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 179 FrontEndFunn
Particles Button Animation Tutorial - #frontendfunn
 
25:17
#particles #particlesbutton #particlesanimation #particleseffect in this video we are going to create particles button using html css and javascript. we will try to create a css animation button. on click of the button we generate particles bubbles of different sizes spread around the button and spread on the page with animation. Libraries Used jQuery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 778 FrontEndFunn
Material.io Web Components Tutorial - 1. Basic Installation and  Setup - #frontendfunn
 
06:30
#material.io #webcomponents #materialcomponents #googlematerialdesign #materialdesign Material.io is component based which is developed by google to build applications. Material.io is developed for a variety of platforms which include ios, android, flutter as well as web. In this Material.io Web Components Tutorial Series I will walk you through the basic usage of the material.io components, which helps you to get started using these components in your projects. This is Part one of the tutorial where I will Show you the basic setup and installation required. I will aslo show you how to run the dev server with webpack4. There is also production version you can build which generates the minified versions of html, css and javascript. Follow the steps in the tutorial and get started Github Repo Link - https://github.com/frontendfunn/Material.io-Web Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 4280 FrontEndFunn
How to Install bitnami wordpress stack using virtualbox
 
06:57
#frontendfunn This video is about bitnami wordpress tutorial to teach you how to setup and install bitnami wordpress localhost using virtualbox on windows PC bitnami is a popular applications stack. what makes bitnami wordpress special is its one click installation solutions for wordpress. you can download the installers and virtual machines, which contains minimal linux opertaing system and fully configured bitnami wordpress stack. Bitnami wordpress stack virtual machines are compatible to run with Oracle Virtualbox and vmware workstation,vmware vsphere.. etc LINKS:- download bitnami wordpress from the below link https://bitnami.com/redirect/to/105800/bitnami-wordpress-4.5.2-0-linux-ubuntu-14.04-x86_64.zip download virtualbox setup from the below link https://www.virtualbox.org/wiki/Downloads #html #html5 #jquery #javascript #css3 #css #cssanimation #frontenddeveloper #webdevelopmemt #wedev #webanimation #js #programming #programmer #dev #developer #coded #codered #code #coder #coderslife #coderstrust #coderstyle Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 2719 FrontEndFunn
Pure CSS Animation Tutorial   Advanced CSS3 Transformations and Animations - web development
 
20:19
#purecss #css3animations #cssanimation #html #frontendfunn #htmlcssjavascript #scss in this Pure CSS Animation Tutorial - Advanced CSS3 Transformations and Animations, we wil make use of div with a class of circle. inside each circle div we will have a div with a class of wrapper and inside each wrapper we will have 10 span elements. we will make the circle div spread across the loader div 360. To achive this we will make use of scss for loop and css transformations and rotate the circle elements around the loader div. we will apply the transformations on the span elements and spread these elements around the wrapper div. for each of the span elements we wiil make use of the pseudo element before and rotate it via x axis and position it on the span element. Now we will make use of css3 animations and keyframes , apply the animation on the wrapper elements to roatate the elements. Finally we will achive this cool looking animation using pure css. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 514 FrontEndFunn
Bootstrap 4 Admin Dashboard Template - web development
 
34:35
#frontendfunn #bootstrap4 #admin #admintemplate /*********************************************************************/ THIS IS A SAMPLE ADMIN TEMPLATE, TAKING THIS AS A STARTER TEMPLATE YOU CAN EXTEND THIS BY ADDING NEW FEATURES TO THIS TEMPLATE /*********************************************************************/ In this Admin Dashboard Template Development Tutorial using bootstrap4, I am going to show you how to create a responsive sample admin template. we will create a responsive admin sidebar menu which is visible on the desktop devices by default. In the Mobile mode we will hide the sidebar menu. we will enable a button to toggle the sidebar menu on the mobile. On the desktop devices we will collapse the side menu to show only icons, and on toggle we will show the expanded menu. ======================================================== A LIKE IS ALWAYS APPRECIATED ======================================================== Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 1597 FrontEndFunn
Form Input Animation Tutorial - web development
 
34:15
#htmlForms #input #inputFormAnimation #html #frontendfunn #css In this html form animation tutorial, we will create a form input box animation effect using html css and javascript. we will create a switching effect between the form input elements on foucs on the element using the keyboard as well as on mouse click. To create a switching effect we will be using css3 animation properties like transform scale property and animate the corresponding input element based on the foucs of the html input element made by the user. we will make use of javascript library jquery to add and remove classes to the elements based on timing. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 423 FrontEndFunn
Material.io Web Components Tutorial - 6. Card Component - #frontendfunn
 
14:16
#material.io #webcomponents #materialcomponents #googlematerialdesign #materialdesign Material.io is component based which is developed by google to build applications. Material.io is developed for a variety of platforms which include ios, android, flutter as well as web. In this Material.io web components Tutorial Series I will walk you through the basic usage of the material.io components, which helps you to get started using these components in your projects. This is Part six of the tutorial where I will Show you the basic usage of @material/card component. we will start with building a basic card component to advanced card component, and add the action buttons and adction icons to these cards. Follow the steps in the tutorial and get started Github Repo Link - https://github.com/frontendfunn/Material.io-Web Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Do visit our website for more fun stuff @ http://www.frontendfunn.com Happy Coding :D
Views: 350 FrontEndFunn
Javascript clock digital 24 hours Animation Tutorial - #frontendfunn
 
25:28
#clock #digitalclock #javascriptclocktutorial #html #css In this JavaScript clock digital 24 hrs Tutorial tutorial we are going to build javascript clock digital 24 hours. We are going to achieve the javascript clock animation using the popular javascript library framework jquery, which make the javascript clock to update every second and show the javascript clock timer. we will make use of css3 animations to create javascript animated clock digital 24 hours. Libraries used:- jQuery, Most Popular JavaScript Library Powering Most of the Websites Today. Download the Latest Version of jQuery from https://jquery.com/ Download the jQuery from CDN https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 839 FrontEndFunn
Pure CSS Animation Tutorial - Rotating Circles - #frontendfunn
 
12:19
#tutorial #css3animation #purecss #purecssanimation #cssanimation #css3advancedtutorial In this Pure CSS Animation Tutorial, we are going to create animation using the circles, we will create a div with a class of container and inside the container div we will be having a div with a class of loader , the loader div containes 20 div with a class of spike and inside every spike div there is a div with a class of circle. we will make use of css transitions and transformations and rotate the spike div to form a 360 deg, now we will apply animation on each of the cirlce inside the spike div. These circle div will have only borders on top and right. using @keyframes animation in CSS3 we will apply animations on these elements. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. You can find the source code at frontendfunn.com http://www.frontendfunn.com Happy Coding :D
Views: 304 FrontEndFunn
Responsive Two Way Image Slider Tutorial -  web development
 
30:18
#imageslider, #thumbnailslider, #galleryThumbnail #frontendfunn In this Responsive Two way Image Slider Tutorial, we will make use of image slider plugin called swiper.js, through which we can make the two way image slider. This two way image slider consists of two sliders one is main slider and another one is thumbnail slider. The main slider contains the left and right controls which can be used to control the main slider as well as the thumbnail slider. similarly when we click on the thumail slider the main slider automatically gets updated and main slider can be controlled using the thumbnail slider. --------------------- Useful Links --------------- swiper.js can be downloaded directly from the official site or can be included as a cdn http://idangero.us/swiper/ Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 275 FrontEndFunn
Pure CSS Loader Animation Tutorial - web development
 
13:28
#purecss #frontendfunn #scss #cssloader #loadinganimation In this Pure CSS Loader Animation Tutorial, we begin by creating a ul element with a class of loader and give it some height and width. we position the loader at the center of the page. Inside the ul we will be having the 10 list items. Each list item consists of a div with a class of circle. we position the list items absolute and rotate them via bottom to form a 360deg. we make use of the scss for loop to to generate the color for the borders of the circle element. we will use @keyframes animation to animate the list items to form 360deg and also we apply a animation on the loader to rotate it 360deg. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 63 FrontEndFunn
Facebook Emoji Reactions Animation css Tutorial - web development
 
29:49
#facebookEmoji #emojiAnimation #emojiReactionsAnimation #facebookEmojiReactions #frontendfunn In this Facebook Emoji Reactions Animation Tutorial, we will animate the facebook emoji | facebook reaction icons using html css and javascript. we will make use of a facebook emoji image as a background to the span elements. we will create a span element and append it to the particle container randomly using the random function. we will animate the individual particles using the jquery animate method and move the element to top randomly to get this cool effect. Hope you find this video useful. please do watch other videos on my channel. please subscribe and share.
Views: 708 FrontEndFunn
Pure CSS DNA Loader Animation Tutorial - web development
 
20:26
#pureCSS #spinner #loader #cssloaderanimation #frontendfunn In this DNA Loader animation tutorial, we are going to create a pure css DNA loader animation using html and css. We will make use of before and after pseudo elements and animate the elements to create a rotating effect. we will use css3 @keyframes animation and animate the z-index property on these elements to create DNA effect. We will also apply animation delay on these elements to create the loading effect. Hope you find this video useful. please do watch other videos on my channel. please subscribe and share.
Views: 335 FrontEndFunn
Material.io Web Components Tutorial - 5. Adding Ripple Effect - #frontendfunn
 
05:20
#material.io #webcomponents #materialcomponents #googlematerialdesign #materialdesign Material.io is component based which is developed by google to build applications. Material.io is developed for a variety of platforms which include ios, android, flutter as well as web. In this Material.io Web Components Tutorial Series I will walk you through the basic usage of the material.io components, which helps you to get started using these components in your projects. This is Part Five of the tutorial where I will Show you how to add the ripple effect to different types of components that fall under the buttons category. Follow the steps in the tutorial and get started Github Repo Link - https://github.com/frontendfunn/Material.io-Web Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Do visit our website for more fun stuff @ http://www.frontendfunn.com Happy Coding :D
Views: 326 FrontEndFunn
HTML5 Audio Player Tutorial with Click and Scroll Controls-Part1 - web development
 
54:17
#htmlAudioPlayer #webAudioPlayer #audioPlayer #frontendfunn In this Audio Player Tutorial, we will be making a html custom audio player using html css and javascript. This video is the part 1 of the series where we are going to write the markup needed for the html custom audio player and style the player using custom styles. In the part 2 of the video we will add the html custom audio player full controls using the javascript jquery plugins. By the end of part 2 of this custom audio player series we are done, creating a custom html5 Audio Player Tutorial with Click and Scroll Controls. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D ************************************************************* Credits for the Audio Music Used in this video goes to Spring by Ikson https://soundcloud.com/ikson Music promoted by Audio Library https://youtu.be/5WPnrvEMIdo
Views: 1099 FrontEndFunn
Material.io Web Components Tutorial - 4. Icon Button Component - #frontendfunn
 
18:02
#material.io #webcomponents #materialcomponents #googlematerialdesign #materialdesign Material.io is component based which is developed by google to build applications. Material.io is developed for a variety of platforms which include ios, android, flutter as well as web. In this Material.io Web Components Tutorial Series I will walk you through the basic usage of the material.io components, which helps you to get started using these components in your projects. This is Part Four of the tutorial where I will Show you the basic usage of material icon button component. Because Material.io is component based we need to install the specific component into our project using npm. In this tutorial i will walk you through the installation of material icon button component and its basic usage in our project. I will also discuss the different types of buttons that are available in the Material.io Components. Follow the steps in the tutorial and get started Github Repo Link - https://github.com/frontendfunn/Material.io-Web Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Do visit our website for more fun stuff @ http://www.frontendfunn.com Happy Coding :D
Views: 266 FrontEndFunn
Pure CSS Loader Animation Tutorial - #frontendfunn
 
08:47
#purecss #cssloader #loadinganimation #css3animation In this tutorial you will learn to create pure css loader spinner. This is a Pure CSS Loader spinner Animation created using HTML5 and CSS3. we will make use of the css3 animations to rotate the element and animate it based on the timing function. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 339 FrontEndFunn
Pure CSS Orbit Planet  Spinner Tutorial - #frontendfunn
 
13:58
#purecss #cssloader #cssSpinner In this video tutorial we will try to create a pure css page loader spinner animation. This type of loader are also called as orbit spinners, orbit loaders. The Idea of this loader this to make the inner orbit spinner rotate at a slow speed compared to the outer most spinner orbit. so that it look more natural as if the planet rotating. This css loader | css preloader | css spinner | Orbit Spinner | planet spinner is made used of scss. and css3 animations to rotate the element to create this cool css3 page loader animation. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 442 FrontEndFunn
html5 video player tutorial with controls part-1 - #frontendfunn
 
49:41
#html5Video #htmlVideoPlayer #videoPlayer #customVideoPlayer In this html5 video player tutorial , we will create a customized video player using html css and javsacript. add the play back functionality for the player. This is the part1 of the video player where we build the video player completely from scratch. here we are going to play a movie using the video player, calculate the start time of the video , end time of the video and we will update the start time as the video playback progress and to give the user a feedback we will also create a progress bar indicating the progress. and also the progress bar is clickable making the user to navigate between the timings. we will also create a volume controls option where user can control the volume using this volume control. Hope you find this video useful. please do watch other videos on my channel. please subscribe and share.
Views: 523 FrontEndFunn
Font Awesome Icon Animation Tutorial - #frontendfunn
 
10:05
html css javascript Font Awesome icon HTML CSS tutorial, Font Awesome Icon HTML CSS Animation Tutorial Font Awesome animation tutorial, The Iconic Font Awesome Animation Tutorial using HTML5, CSS3, and jQuery. /******************* Libraries Used ********************/ Download the Font Awesome Icons from the below link http://fontawesome.io/ Download the Jquery javascript Library form the below link https://jquery.com/ Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 398 FrontEndFunn
How To Add Google Recaptcha V2 to HTML Form and Submit - web development
 
18:38
#googlerecaptcha #recaptcha #recaptchav2 #frontendfunn #capthca In This Video we are going to add google recaptcha v2 to website registration form , login from or contact us form. we will make use of free hosting and domain and add google recapthca to the side. we also perform client side google captcha integration as well as server slide google captcha validation status check. Visit here for live testing http://testcodehere.epizy.com/ Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 14138 FrontEndFunn
Advanced Text Animation Tutorial using Magic Animations Library - #frontendfunn
 
20:53
#textanimation #advancedtextanimation #animatedtext #textanimationtutorial In this Advanced Text Animation Tutorial using Magic Animations Library, we will make use of CSS3 animation library called Magic Animation css3 and apply those animations to the text to create html text animation effects. we will make use of jQuery, javascript popular library to create css text animation letter by letter and add library animation classes to get text animation special effects like bounce letters in the text, fade in animation letter by letter, etc Download the Library from Magic Animation css3 library https://github.com/miniMAC/magic Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 320 FrontEndFunn
Advanced Text Animation Tutorial using Animate.css Library - #frontendfunn
 
20:57
In this tutorial we will make use of most popular css animation library, Animate.css using animate.css and jquery, we can animate the text letter by letter and can apply the animate.css library css classes like bounce, fadeIn, wobble, slideIn , etc.. to create advanced text animations. Hope you find this video useful. please do watch other videos on my channel. please subscribe and share. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 753 FrontEndFunn
HTML5 Audio Player Tutorial with Click and Scroll Controls-Part2 - web development
 
01:01:10
#htmlAudioPlayer #audioPlayer #webAudioPlayer #customAudioPlayer #frontendfunn In this Audio Player Tutorial, we will be making a html custom audio player using html css and javascript. This video is the part 1 of the series where we are going to write the markup needed for the html custom audio player and style the player using custom styles. In the part 2 of the video we will add the html custom audio player full controls using the javascript jquery plugins. By the end of part 2 of this custom audio player series we are done, creating a custom html5 Audio Player Tutorial with Click and Scroll Controls. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D ************************************************************* Credits for the Audio Music Used in this video goes to Spring by Ikson https://soundcloud.com/ikson Music promoted by Audio Library https://youtu.be/5WPnrvEMIdo
Views: 659 FrontEndFunn
Javascript Clock Tutorial Displaying Day, Date and Month - #frontendfunn
 
58:20
#javascriptClock #javascriptAnalogClock #javascriptClockWithDate #clockanimation #htmlclock html css javascript - Javascript Clock Tutorial Displaying Day, Date and Month. In this Javascript clock tutorial, we are going to create javascript analog digital clock using html css javascript jquery. we will make use of javascript Date object and get date, time, month day and display them on the web page. we will make use of jquery, popular javascript library and use the CSS3 animations to create the css animation effect. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 382 FrontEndFunn
Bootstrap 4.2 Collapsible Responsive Footer
 
16:38
#frontendfunn #webdevelopment #bootstrap4 #bootstrap4.2 #responsivedesign In this Bootstrap 4.2 Collapsible Responsive Footer Tutorial, we will make use of the bootstrap 4.2 accordion example and create a responsive footer animation. We will add the bootstrap built in responsive utility, display classes and make the collapse content to br displayed as flex on the large screen devices. and make them hidden on the medium , small and extra small devices. we will enable the anchor elements on the medium and smaller devices which helps in triggering the accordion. on large screen devices we will hive the anchors and replace them with a div elements. A like is always appreciated Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. Web development | HTML | CSS | SCSS | javascript Tutorials ------------------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36&disable_polymer=true Social Media Icons Animations --------------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1 Pure CSS Loaders Animations --------------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN Bootstrap 4.2 Tutorials ----------------------- https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw ==================================================== You can find the source code at frontendfunn website http://www.frontendfunn.com ==================================================== ************************************************************* Facebook https://www.facebook.com/Frontendfunn-222709251757726/ Instagram https://www.instagram.com/frontendfunn/ Happy Coding :D *************************************************************
Views: 363 FrontEndFunn