![Angela Design](/img/default-banner.jpg)
- Видео 103
- Просмотров 3 706 731
Angela Design
Добавлен 7 июл 2013
Figma Interactive Components | Figma Variants Tutorial
Figma Components:
ruclips.net/video/S3uQTNUtczY/видео.html
Figma Smart Animate Tutorials:
ruclips.net/video/C8m0_QnKQ6Y/видео.html
ruclips.net/video/8-EDTrJJZNA/видео.html
In this video I go over how to create Interactive Components in Figma. Interactive Components is a new feature that is currently in beta (see beta link below). With this feature enabled you can add interactivity to components at the variant level, instead of relying on page level animations and transitions. In this tutorial I show you how I streamline my process of prototyping a Settings page, by replacing 8 frames to show all the possible states with only 1 frame. I create a switch component, create variant states and then ...
ruclips.net/video/S3uQTNUtczY/видео.html
Figma Smart Animate Tutorials:
ruclips.net/video/C8m0_QnKQ6Y/видео.html
ruclips.net/video/8-EDTrJJZNA/видео.html
In this video I go over how to create Interactive Components in Figma. Interactive Components is a new feature that is currently in beta (see beta link below). With this feature enabled you can add interactivity to components at the variant level, instead of relying on page level animations and transitions. In this tutorial I show you how I streamline my process of prototyping a Settings page, by replacing 8 frames to show all the possible states with only 1 frame. I create a switch component, create variant states and then ...
Просмотров: 27 566
Видео
Figma Hover | Figma Button Hover Effect with Smart Animate
Просмотров 158 тыс.3 года назад
Figma Playlist: ruclips.net/video/wIPo7vxxchY/видео.html In this video I go over how to add hover effects to your Figma prototype. I show you the full prototyping tutorial, where I create a button in Figma and then add hover effects with smart animate. Enjoying this tutorial? Subscribe to stay up to date with my latest content: ruclips.net/channel/UC_TjoSnaI3CTgIgmSn3rruA In this video I show y...
Responsive React Cards | Mobile First Shopping Cards
Просмотров 24 тыс.3 года назад
New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html Pseudo Elements Playlist: ruclips.net/video/G4Z0E9uEb0o/видео.html Responsive Grid with Auto-Fit: ruclips.net/video/k3YHfp8Bp_E/видео.html In this video I go over how to create responsive shopping cards using React. I show you the full front end coding tutorial, where I create the structure of the compon...
Loading Animation HTML CSS
Просмотров 4,9 тыс.3 года назад
New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this loading animation using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use css grid for the layout, a keyframe animation and a for l...
Figma After Delay Animation | Overlay Prototype
Просмотров 47 тыс.3 года назад
Figma Smart Animate Tutorial: ruclips.net/video/8-EDTrJJZNA/видео.html In this video I go over how to add an animation delay to your Figma prototype. I go over my entire process - how to add interactions to your Figma design, how to add an 'after delay' animation and how to customize the position and animation properties for an overlay. Enjoying this tutorial? Subscribe to stay up to date with ...
Image Gallery Blur Hover Effect | Figma Prototype to HTML CSS
Просмотров 4,7 тыс.3 года назад
New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this Navigation Bar using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects with a pse...
Dropdown Navigation Menu with Flexbox
Просмотров 41 тыс.3 года назад
Pseudo Elements Playlist: ruclips.net/video/G4Z0E9uEb0o/видео.html New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this Dropdown Navigation Bar using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects ...
Notification Pop Up | Custom Alert HTML CSS JS
Просмотров 12 тыс.3 года назад
New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this notification pop up using HTML, CSS and Vanilla JavaScript. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use CSS Grid and Flexbox for the layout and ...
Animating Tab Bar | HTML CSS JS Tutorial
Просмотров 4,1 тыс.3 года назад
New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this animating tab bar using HTML, CSS and Vanilla JavaScript. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout, I add hover effect...
Figma Dropdown Menu with Variants | Figma Prototype Tutorial
Просмотров 356 тыс.3 года назад
Figma Components: ruclips.net/video/S3uQTNUtczY/видео.html New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create a dropdown menu using Figma variants. I show you how to create variants and then link them up to add interactivity to your prototype. I also go over how to customize the properties of a variant to keep your c...
React Cards with Props | UI Card Design with React JS
Просмотров 66 тыс.3 года назад
Recipe Cards with HTML & CSS: ruclips.net/video/c7gMtiJxvgY/видео.html New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html CSS Grid Auto-Fit Tutorial: ruclips.net/video/k3YHfp8Bp_E/видео.html In this video I go over how to create these recipe cards using React. I show you the full front end coding tutorial, where I create the structure of the elements wit...
Stylized Table Design from Figma to HTML CSS | Table from Scratch
Просмотров 52 тыс.3 года назад
New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this table design using only HTML and CSS. I show you the full front end coding tutorial, where I take the Figma design and recreate it with HTML and CSS. I create the structure of the table elements in HTML and then I layout the content with CSS grid and then add st...
Create a modal from scratch | HTML CSS & JavaScript
Просмотров 6 тыс.3 года назад
New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this Welcome Modal using HTML, CSS and JavaScript. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and I add functionality with va...
Sign Up Form HTML CSS | Create a Sign Up Form with Animated Input Fields
Просмотров 7 тыс.3 года назад
Input Animation Tutorial: ruclips.net/video/v8mRUU3orjI/видео.html New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this Sign Up Form using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I...
React Counter | Simple Counter with React Hooks
Просмотров 14 тыс.3 года назад
Simple Counter with Vanilla JavaScript: ruclips.net/video/yU0Eg7T3ulw/видео.html New to CSS Grid? Watch the full Crash Course here: ruclips.net/video/yOPCQ5nD1Vs/видео.html In this video I go over how to create this simple counter using React. I show you the full front end coding tutorial, where I create a React component and then write all of the styling and animation effects with CSS. I use F...
Search Box Animation from Scratch | Search Icon to Input Field Animation
Просмотров 8 тыс.3 года назад
Search Box Animation from Scratch | Search Icon to Input Field Animation
Input Animations with HTML and CSS | Input Label Animation
Просмотров 101 тыс.3 года назад
Input Animations with HTML and CSS | Input Label Animation
Responsive Navigation Bar Only CSS | Mobile First Design
Просмотров 32 тыс.3 года назад
Responsive Navigation Bar Only CSS | Mobile First Design
Add Button Animation from Scratch | HTML CSS Vanilla JS | Code Explained
Просмотров 2,4 тыс.3 года назад
Add Button Animation from Scratch | HTML CSS Vanilla JS | Code Explained
Styled Table Design with HTML & CSS | Dribbble UI Design to Code
Просмотров 8 тыс.3 года назад
Styled Table Design with HTML & CSS | Dribbble UI Design to Code
Profile Image Hover Effect | HTML CSS Tutorial
Просмотров 3,2 тыс.3 года назад
Profile Image Hover Effect | HTML CSS Tutorial
Account Creation with Basic Validation Part 2 | Figma Design to HTML CSS JS | Vanilla Javascript
Просмотров 2,7 тыс.3 года назад
Account Creation with Basic Validation Part 2 | Figma Design to HTML CSS JS | Vanilla Javascript
Account Creation with Basic Validation Part 1 | Figma UI Design to HTML CSS JS Tutorial
Просмотров 5 тыс.3 года назад
Account Creation with Basic Validation Part 1 | Figma UI Design to HTML CSS JS Tutorial
Image Gallery from Scratch | CSS Grid & Flexbox | HTML & CSS with Hover Effects
Просмотров 5 тыс.3 года назад
Image Gallery from Scratch | CSS Grid & Flexbox | HTML & CSS with Hover Effects
Sidebar Menu using HTML CSS JS | Figma Design to Code | Expandable Side Navigation Bar Explained
Просмотров 18 тыс.3 года назад
Sidebar Menu using HTML CSS JS | Figma Design to Code | Expandable Side Navigation Bar Explained
Indeterminate Loading Animation | HTML CSS Tutorial
Просмотров 1,5 тыс.3 года назад
Indeterminate Loading Animation | HTML CSS Tutorial
Animating News Article Cards | CSS Grid & Flexbox
Просмотров 3,2 тыс.3 года назад
Animating News Article Cards | CSS Grid & Flexbox
Simple Increment and Decrement Counter | Vanilla JavaScript Project Explained
Просмотров 7 тыс.3 года назад
Simple Increment and Decrement Counter | Vanilla JavaScript Project Explained
Figma Smart Animate | Animation Tutorial with Tab Bar
Просмотров 30 тыс.3 года назад
Figma Smart Animate | Animation Tutorial with Tab Bar
Responsive Side Navigation Bar with HTML & CSS | Flexbox Navbar
Просмотров 9 тыс.3 года назад
Responsive Side Navigation Bar with HTML & CSS | Flexbox Navbar
why i can`t fixed to scroll all the screen step .. don`t work !!!
thaank youu
really nice on point video tysm
this is such a good video!!!!! saved me so much headache, so glad I found this tutorial, I was worried that it would be difficult and I'd want to give up but youmade this so simple and straight-forward
great video. thanks
I like that you get right to the point without a lot of fluff. Thank you!!
The best tutor of all time , ANGELA ,she has the best courses on udemy 🥰
Thank you for tutorial you help me a lot ❤
I finally understand this concept after being confused for so long! Thank you!!
Thank you so much.
Absolutely an amazing video! Super helpful! Thank you so much for making this!
amazing
Mam I'm waiting for you, and will wait forever 😭
I finally understood CSS Grid. Thank you so much for explaining it so clearly. Thank you for all the work to do!!
This absolutely saved my life and so much time, exactly what i was looking for. Thank you so much!
how did u add image link
hi , i need a modal from left to right or right to left how can i do it in bootstrap?
Тhanks, this video helped me so much!
Is this using webpage sections
Requesting if you could do the same fetching card details from a db.json
Nice explanation though
Life saving! Thanks!
What is the name of the sketch tool?❤
Hello Angela, thank you for such a great tutorial. I want to know if I want to make sidebar an off-canvas menu. is it be a good practice to make it position absolute and translate-X in css properties?
Some people are exquisite communicators and if they truly know the material they're communicating, they make outstanding teachers. Angela, you are undoubtedly an outstanding teacher.
So helpful thank you!
My mom told me "Son, one day A women will change your life to good" and I found out it is you <3 thank you for changing my life with this tutorial. really a masterpiece ❤
Really nice content to understand the concept of CSS grid. Well done!!
gr8 tutorial but can i apply this using bootsrap?
thanks!
Thanks 👍
Great 🎉
this is THE video i needed!
Finally!!! Exactly what I was searching, thanks.
i'm dealing with that issue at the moment actually, used flex wrap for one of my elements, and have a few grid elements i was going to try using the container on, but i think i will use your method for the next element, using line and row names with custom properties and some carefully constructed mathematical statements can also provide a solution for responsive content, i just thought of something, i often put elements inside divs for css design purposes and one of my grid designs has a div using flex, i am going to convert to straight grid responsive, or try atleast, i have been designing a series on web design and i finally created something i think i could use as a good subject piece, i am planning on doing different variations, an early version of the series start is on github, but my new approach is much different, your video helped provide not only a solution to a current issue i have, but some good material for a video in my series, thank you, take care and God Bless
Wonderful tutorial
grid-template-columns: repeat(4, 1fr);
Great job I am loving it
THANK YOU
I have read several texts on this and struggled to understand the concept. But your YT vid has changed everything. Thank you, thank you, thank you.
Thanks for a great tutorial. I have a question - How do I use the select item in the dropdown menu to now navigate to another screen, or show an overlay? I've tried variables but cannot get it to work.
I never comment on yt but this video was mindblowing how wffective it was to teach me. Thank you
what if i wanted to add another row of content. like content 4-6
Best video! Thanks a million! Really got me over slump with CSS.
Thank you
Thanks from the heart ❤️
If made this i can any of this in section
Thanks so much
This tutorial is possibly the most helpful tutorial I've ever seen! Thank you so much!
The way you put your font link in the head don't use like these instead download fonts and convert it into woff file then call them with fonts.css and define there font-family it will give you maximum score in Google PageSpeed Insights (helpful in speed optimisation)
thank you for this vid, helps me understand better, with medie queries what min-width do you use for wide screen, desktop, laptop and phone screen sizes? thank you