Angela Design
Angela Design
  • Видео 103
  • Просмотров 3 706 731
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 ...
Просмотров: 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

Комментарии

  • @VAMOSMEDIAAGENCY
    @VAMOSMEDIAAGENCY 4 дня назад

    why i can`t fixed to scroll all the screen step .. don`t work !!!

  • @YosCode
    @YosCode 5 дней назад

    thaank youu

  • @shahriaranan605
    @shahriaranan605 6 дней назад

    really nice on point video tysm

  • @keren211200
    @keren211200 12 дней назад

    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

  • @MartinVlog444
    @MartinVlog444 16 дней назад

    great video. thanks

  • @servus47
    @servus47 16 дней назад

    I like that you get right to the point without a lot of fluff. Thank you!!

  • @finevinny
    @finevinny 18 дней назад

    The best tutor of all time , ANGELA ,she has the best courses on udemy 🥰

  • @yaroslavlebediev
    @yaroslavlebediev 20 дней назад

    Thank you for tutorial you help me a lot ❤

  • @rxlvnd3397
    @rxlvnd3397 21 день назад

    I finally understand this concept after being confused for so long! Thank you!!

  • @swagatikarout8227
    @swagatikarout8227 22 дня назад

    Thank you so much.

  • @greykor140
    @greykor140 24 дня назад

    Absolutely an amazing video! Super helpful! Thank you so much for making this!

  • @mandelaeffect2022
    @mandelaeffect2022 27 дней назад

    amazing

  • @AiExplainedd
    @AiExplainedd 29 дней назад

    Mam I'm waiting for you, and will wait forever 😭

  • @AbhimitaDebnath
    @AbhimitaDebnath Месяц назад

    I finally understood CSS Grid. Thank you so much for explaining it so clearly. Thank you for all the work to do!!

  • @davidglogowski4955
    @davidglogowski4955 Месяц назад

    This absolutely saved my life and so much time, exactly what i was looking for. Thank you so much!

  • @deepikachauhan2494
    @deepikachauhan2494 Месяц назад

    how did u add image link

  • @rezamounsef1969
    @rezamounsef1969 Месяц назад

    hi , i need a modal from left to right or right to left how can i do it in bootstrap?

  • @who0o0o0o
    @who0o0o0o Месяц назад

    Тhanks, this video helped me so much!

  • @chandrasekhardodla3377
    @chandrasekhardodla3377 Месяц назад

    Is this using webpage sections

  • @badiajojo
    @badiajojo Месяц назад

    Requesting if you could do the same fetching card details from a db.json

    • @badiajojo
      @badiajojo Месяц назад

      Nice explanation though

  • @catulusmak8408
    @catulusmak8408 Месяц назад

    Life saving! Thanks!

  • @ViennaHundt
    @ViennaHundt Месяц назад

    What is the name of the sketch tool?❤

  • @ShashankNaithani
    @ShashankNaithani Месяц назад

    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?

  • @KeithGardner-k9u
    @KeithGardner-k9u Месяц назад

    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.

  • @mothersmucker1
    @mothersmucker1 Месяц назад

    So helpful thank you!

  • @mindfuljourney291
    @mindfuljourney291 Месяц назад

    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 ❤

  • @ASukhpreetSingh
    @ASukhpreetSingh Месяц назад

    Really nice content to understand the concept of CSS grid. Well done!!

  • @user-sb4hi9zj7b
    @user-sb4hi9zj7b Месяц назад

    gr8 tutorial but can i apply this using bootsrap?

  • @user-iw7pw4eq7z
    @user-iw7pw4eq7z Месяц назад

    thanks!

  • @danushadhaamarasekera7215
    @danushadhaamarasekera7215 Месяц назад

    Thanks 👍

  • @OCEMTechZone
    @OCEMTechZone Месяц назад

    Great 🎉

  • @thiagorocharibeiro6465
    @thiagorocharibeiro6465 2 месяца назад

    this is THE video i needed!

  • @vin_27
    @vin_27 2 месяца назад

    Finally!!! Exactly what I was searching, thanks.

  • @sovereignlivingsoul
    @sovereignlivingsoul 2 месяца назад

    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

  • @thmooove
    @thmooove 2 месяца назад

    Wonderful tutorial

  • @thmooove
    @thmooove 2 месяца назад

    grid-template-columns: repeat(4, 1fr);

  • @user-ov3tx8iu5c
    @user-ov3tx8iu5c 2 месяца назад

    Great job I am loving it

  • @damarisvicencio7420
    @damarisvicencio7420 2 месяца назад

    THANK YOU

  • @bigshuff
    @bigshuff 2 месяца назад

    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.

  • @belsnickel5538
    @belsnickel5538 2 месяца назад

    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.

  • @juliohacker
    @juliohacker 2 месяца назад

    I never comment on yt but this video was mindblowing how wffective it was to teach me. Thank you

  • @DavidGutierrez-dj2kk
    @DavidGutierrez-dj2kk 2 месяца назад

    what if i wanted to add another row of content. like content 4-6

  • @DavidGutierrez-dj2kk
    @DavidGutierrez-dj2kk 2 месяца назад

    Best video! Thanks a million! Really got me over slump with CSS.

  • @apoorvajain8294
    @apoorvajain8294 2 месяца назад

    Thank you

  • @yazanmtanoos8682
    @yazanmtanoos8682 2 месяца назад

    Thanks from the heart ❤️

  • @teamripgaming9382
    @teamripgaming9382 3 месяца назад

    If made this i can any of this in section

  • @kingsblog9ja
    @kingsblog9ja 3 месяца назад

    Thanks so much

  • @sleepeasyguitar9505
    @sleepeasyguitar9505 3 месяца назад

    This tutorial is possibly the most helpful tutorial I've ever seen! Thank you so much!

  • @CyberspaceCitadel
    @CyberspaceCitadel 3 месяца назад

    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)

  • @2684dennis
    @2684dennis 3 месяца назад

    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