Responsive Profile Card | Figma to HTML & CSS

Подписаться 47 тыс.

Просмотров 16 тыс.

50% 1

New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
In this video I go over how to create a responsive profile card using only HTML and CSS. I show you the full front end coding tutorial, where I take a design I created in FIgma and then map out the structure of the elements in HTML. I use CSS grid for the layout and then show you how to make the card match the Figma design with CSS styling and effects.
Codepen: codepen.io/ang...
In this video I show you:
0:29 - Figma Design Project
1:36 - Starting HTML Code
1:56 - Grid Layout HTML Code
2:10 - Profile Card HTML Code
4:17 - CSS Code - Variables
4:59 - CSS Grid
6:15 - CSS Container
11:39 - Responsive Design
12:00 - Minmax() Explained
13:11 - Responsive Tablet view
14:31 - Responsive Desktop view
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.co....
Let's Connect
Dribbble: dribbble.com/a...
Blog: / angeladelise

Наука

Опубликовано:

14 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 49

@babysudhirs9205 4 года назад

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

@angeladesign737 4 года назад

Thank you!

@digigoliath 4 года назад

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

@angeladesign737 4 года назад

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

@digigoliath 4 года назад

@@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 4 года назад

Thanks for the kind comment and the video suggestions!

@emilianoagu2059 2 года назад

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

@badr-eddineelbatouri4544 3 года назад

Nice tutorial, and such a beautiful voice

@angeladesign737 3 года назад

Thank you!

@preetikrushna9289 3 года назад

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

@angeladesign737 3 года назад

Thank you so much!

@isaacajibadeii4643 Год назад

Thank you very much for this tutorial!

@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 !

@angeladesign737 3 года назад

Glad it helped!

@vineetbawa86 4 года назад

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

@angeladesign737 4 года назад

Thank you so much

@anuragmishra0115 3 года назад

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.

@maskman4821 4 года назад

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

@-bilale-6884 2 года назад

great work . thanks for the video

@iquahs 3 года назад

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 3 года назад

Yup, that is correct!

@iquahs 3 года назад

@@angeladesign737 Excellent. Thank you for your reply.

@abdelwahabmrad3545 3 года назад

From smart ideas comes great leaders.

@rohankumarshah5679 3 года назад

The quality if you videos content is fantastic 👏 👌

@angeladesign737 3 года назад

Thank you! I appreciate it!

@ntigirishari 3 года назад

Wow! Great job!! Thank you.

@mininusequeci Год назад

Amazing!

@MathinusG 2 года назад

Thanks for that!

@mitchtembo487 2 года назад

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

@marsdwarf 3 месяца назад

Fantastic :)

@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

@mgskpgamage 6 месяцев назад

Thanks

@hiranthaman9713 3 года назад

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

@jellycoding 4 года назад

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 4 года назад

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

@eftiprwtopapadakis9310 3 года назад

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 3 года назад

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 3 года назад

@@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);