Responsive Profile Card | Figma to HTML & CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 50

  • @emilianoagu2059
    @emilianoagu2059 3 ปีที่แล้ว

    You're simply....a genius! Love the way u explain how to....everything!

  • @iquahs
    @iquahs 4 ปีที่แล้ว +1

    I don't understand the point of the overflow: hidden at 11:18. Is it because the button and the background image are exceeding the borders of the container? So they are actually overflowing the container. Using overflow:hidden hides away the sharp corners that exceed the curved borders? Is my understanding correct?

    • @angeladesign737
      @angeladesign737  4 ปีที่แล้ว

      Yup, that is correct!

    • @iquahs
      @iquahs 4 ปีที่แล้ว +1

      @@angeladesign737 Excellent. Thank you for your reply.

  • @digigoliath
    @digigoliath 4 ปีที่แล้ว +5

    Love it!, Angela! Well explained and keeping it short & sweet. Great video!

    • @angeladesign737
      @angeladesign737  4 ปีที่แล้ว +1

      Thank you! Let me know if you would like to see a tutorial on a specific topic!

    • @digigoliath
      @digigoliath 4 ปีที่แล้ว +1

      @@angeladesign737 A picture gallery or Image Slider perhaps. Not sure if Parallax effect is still the 'IN' thing but would be great to see it done in CSS. Great job so far Angela! I am sure your channel will grow super big.

    • @angeladesign737
      @angeladesign737  4 ปีที่แล้ว +1

      Thanks for the kind comment and the video suggestions!

  • @babysudhirs9205
    @babysudhirs9205 4 ปีที่แล้ว +7

    Great job . I love how much effort you put into making a video.

  • @badr-eddineelbatouri4544
    @badr-eddineelbatouri4544 4 ปีที่แล้ว +3

    Nice tutorial, and such a beautiful voice

  • @vineetbawa86
    @vineetbawa86 4 ปีที่แล้ว +2

    Very Nice expalination.
    Nice Voice
    Nice control over logic
    Thumbs Up

  • @preetikrushna9289
    @preetikrushna9289 4 ปีที่แล้ว +2

    Great Job. The way you teach it's very easy to learn. Please keep it up.

  • @isaacajibadeii4643
    @isaacajibadeii4643 ปีที่แล้ว

    Thank you very much for this tutorial!

  • @Salye
    @Salye 3 ปีที่แล้ว

    Ok thanks, you have no idear how much you helped me after 5 hours looking for how to customize number of cards in row related of precise screen size !

  • @ntigirishari
    @ntigirishari 3 ปีที่แล้ว

    Wow! Great job!! Thank you.

  • @anuragmishra0115
    @anuragmishra0115 3 ปีที่แล้ว +1

    Hello Angela , your css videos are very much helpful for me .Thanks for explaning the depth concepts of css.
    And in this video u use a property called clip path , so i have a question related to it , While cliping an image is the position of an image change or not.

  • @-bilale-6884
    @-bilale-6884 2 ปีที่แล้ว

    great work . thanks for the video

  • @omarkhcharem-z6q
    @omarkhcharem-z6q 2 หลายเดือนก่อน

    thank you so much from Tunisia

  • @rohankumarshah5679
    @rohankumarshah5679 3 ปีที่แล้ว

    The quality if you videos content is fantastic 👏 👌

  • @mitchtembo487
    @mitchtembo487 3 ปีที่แล้ว

    For the background image why did you choose position: absolute ;

  • @maskman4821
    @maskman4821 4 ปีที่แล้ว +2

    this is a perfect mobile first strategy, great job, can you also add animation/transitions ???

  • @eftiprwtopapadakis9310
    @eftiprwtopapadakis9310 4 ปีที่แล้ว +1

    Amazing content and turotial! Really you are one of the bests that their tutorials really improve us! However i have a question. Although i love your overall design and layout for desktop and mobile view, what if on mobile view (iphone x) i wanted two columns instead of one?Having a review site it wouldnt make sense to use two columns so users can see more reviews faster even in their mobile? How can this happen without ruin the overall great design of the cards?

    • @angeladesign737
      @angeladesign737  4 ปีที่แล้ว +1

      Thank you so much! If the goal was to have 2 columns visible in the mobile view I would design the cards with that intention in mind. I would have modified the layout slightly and then used the same column structure as the desktop view for the mobile view.

    • @eftiprwtopapadakis9310
      @eftiprwtopapadakis9310 4 ปีที่แล้ว

      @@angeladesign737 I am just saying the truth! Continue the amazing work of teaching us modern CSS techniques! So i tried this on wrapper-grid selector and it seems to work fine. grid-template-columns: minmax(200px, 0.8fr);

  • @jellycoding
    @jellycoding 4 ปีที่แล้ว +1

    If one card has a longer description the cards with shorter description have their buttons all wrong. How to fix that? Thanks for a great tutorial.

    • @angeladesign737
      @angeladesign737  4 ปีที่แล้ว

      Thanks! You would have to modify the positioning of the button. Maybe make it relative and add a top margin.

  • @michaelwiginton8587
    @michaelwiginton8587 4 ปีที่แล้ว

    Is there a missing in codepen for the "wrapper-grid" class?

  • @ganagana9552
    @ganagana9552 2 ปีที่แล้ว

    Hi thanks for ur videos. i want ask you , all responsive options working fine on mozila
    But on chrome on mobile size it doesn't switch to one column its keep 2 .what do u think is the problem . sorry for my English

  • @abdelwahabmrad3545
    @abdelwahabmrad3545 4 ปีที่แล้ว +1

    From smart ideas comes great leaders.

  • @MathinusG
    @MathinusG 2 ปีที่แล้ว

    Thanks for that!

  • @hitman2754
    @hitman2754 3 ปีที่แล้ว

    Hey can you make video to get started with ui ux design ❤️❤️

  • @MaksymMinenko
    @MaksymMinenko 3 ปีที่แล้ว

    Why not use the body tag as a grid wrapper?

    • @angeladesign737
      @angeladesign737  3 ปีที่แล้ว +1

      You can use the body as the grid-wrapper. I wanted to keep it separate so I can easily add new components to the project.

  • @UICreativeStudio
    @UICreativeStudio 4 ปีที่แล้ว

    how to solve the grid-gap that can't work?

  • @devdofuturo
    @devdofuturo ปีที่แล้ว

    Amazing!

  • @hiranthaman9713
    @hiranthaman9713 3 ปีที่แล้ว

    love you angel ❤️❤️❤️❤️❤️❤️

  • @marsdwarf
    @marsdwarf 7 หลายเดือนก่อน

    Fantastic :)

  • @mgskpgamage
    @mgskpgamage 10 หลายเดือนก่อน

    Thanks

  • @geryardmon7523
    @geryardmon7523 4 ปีที่แล้ว

    Yummi like butter on honey!

  • @syediqbalahmed3176
    @syediqbalahmed3176 4 ปีที่แล้ว +1

    see later ...