http://bit.ly/3YeXzeU 👈 Learn UI/UX & CSS Today. Use "UI2023" for 23% Off!
https://designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, we're embarking on a 2 part series where I show you how to create a modern preloader for websites and apps. Today, we'll focus on using Figma to create a unique and relevant loading illustration (for my wife's lactation consulting business!). We'll utilize an SVG filter that creates a cool GOO effect. We'll also get it up and running with HTML and CSS. In the next tutorial, which releases in 2 days, I'll show you how to get it functioning with greensock (GSAP) along with Vite.js and ImagesLoaded.js.
Codepen demo for this project:
https://codepen.io/designcourse/pen/d...
0:00 - Intro
0:52 - SVG Illustration in Figma
4:30 - Installing Vite.js
6:40 - Installing Sass
8:29 - Writing HTML
13:19 - Writing the CSS
18:40 - Final result
Let's get started!
#frontend #uiux #figma
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
In questa pagina del sito puoi guardare il video online Create a Modern Preloader - JavaScript, Vite & GSAP (Part 1 of 2) della durata di ore minuti seconda in buona qualità , che l'utente ha caricato DesignCourse 14 febbraio 2023, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 30,537 volte e gli è piaciuto 915 spettatori. Buona visione!