How to Make Responsive Profile Card in HTML & CSS

[@mkh3312]

i just completed html css course and i was looking for projects and find this master piece thanks a lot may god help you in your path

[@mr__.irf4n]

hey! how are doing now?

[@mkh3312]

@@mr__.irf4n im in a internship now im doing well

[@mkh3312]

@@mr__.irf4n im in internship now im doing well

[@kovra1305]

As a beginner coder I think it's very useful to tag along with as many project as possible, but don't just copy the code. First learn fundamentals of HTML & CSS then follow along and try to understand what is happening on the screen. After a few projects do try something on your on. It's fun and challenging all the same. Have fun and keep coding and of course big thanks for the creators of these fin projects.

[@CodingLabYT]

Very good message.

[@chilupe839]

Thank you for this, I've only recently started my coding journey.

[@ziachudary1469]

can we talk in ib?

[@Wudstick]

how is it going because i am starting today

[@taseeradares]

It literally took me more than 2 hrs to complete it. The approach suggested in this video made it simpler!, thanks for the amazing work, sir!

[@mohitkaushik21]

I have created the whole thing exactly but it took me a lot of time btw thanks,now I am going to practice all of your videos...😊

[@shivarajgg2120]

Like how many hour's?

[@mehdibelakbir5308]

@@shivarajgg2120 It's not just about the time spent, but rather how you approach copying the video. Are you simply replicating without understanding, or are you actively seeking out properties you don't know? Do you pause the video to work through it from scratch until completion, and then resume to follow along? The method you choose determines the true measure of time spent, not just your perception.

[@shivarajgg2120]

​@@mehdibelakbir5308 thnx Bhai.

[@mad-man9616]

​@@mehdibelakbir5308 i mean in my case i do try to understand all, but i want to know if I'm being too slow or not🥲

[@vinodbarti9237]

Before 2 months i made this mini project by watching tutorial now It's easy For me thanks 🙏❤

[@spartondon1010]

Bro am a beginner any tips for me? it will be helpful...iam totally frustrated

[@mrits_vlogs]

@@spartondon1010 first learn the basics like display and position properties etc. then come to the tutorial and try to make it by yourself without watching, then watch the tutorial. Because just by watching the tutorial you will feel like it is easy but in reality it is not.

[@bhuwankashyap4756]

This exercise is absolutely amazing. I learnt so many things.❤

[@CodingLabYT]

So glad!

[@Davgarcia96]

Amazing content bro, new subscriber! 🤙

[@jorgienalim7944]

this is amazing.. thank you for this content

[@melikebstrk]

açık ve okunabilir olmuş teşekkürler :)

[@Mr_mofit]

Thank you for your beautiful tutorial, it was very helpful👌👌👏👏

[@rinokgaming9497]

you are very great i am new to css its getting harder for me but i wil try thanks a lot

[@nomankhan-j1n]

wow amazing brother such creative mind

[@SunDevilThor]

Why is it that only editing inline at around 10:00 produces the results to change the background color of the icon? I tried to do it via the css file by: ".bxl-youtube {background: #ff0000}", and it only colored the surrounding square, but not the entire circle icon. I figured this might be a selector specificity problem, so I changed the class to an id, but the same issue occurred. It only worked as expected when doing the edit inline like you did in the video.

[@taseeradares]

Instead of that blue band, i've used linear gradient, that is not 100% same, thanks for these amazing exercises sir!

[@MustafaGözütok-g6g]

how can I make it like in 9.54 by pressing the lines one by one which keyboard shortcut can you write?

[@limonahmed3619]

Wow bro superb

[@CodingLabYT]

Thanks 🤗

[@allhailalona]

very nice thank you very much! the music is also quite good!

[@CodingLabYT]

Thank you too!

[@AMITTHAKUR-rs5yp]

06:09 Creating a responsive profile card 16:20 Creating a responsive profile card using HTML & CSS. Crafted by Merlin AI.

[@loveychauhan-m9p]

thanks i learned something new ...

[@valashruten7804]

Whos i scoming here by ezsnippet suggestion

[@rcp873]

Mein!!

[@ManiniMangaraj-o6u]

Present sir.

[@Kiran23456]

Thanks Very good design it helped me a lot 👍☺️ mr CodingLab

[@sisilove-qz3bw]

i like your style dont change your style 🤗🤗😝🤑🥲

[@AbdurahmonXamdamov-yc1ms]

So amazing bro

[@ghulfamhusaain4456]

Really amazing content

[@Mahfooz_20]

Great dear ♥️

[@CodingLabYT]

Thank you! Cheers!

[@MdTouhid-zs2ej]

sir .. i have done it. thank you sir

[@CodingLabYT]

Welcome 👍

[@ajwadzidan1509]

Amazing 😍

[@CodingLabYT]

Thanks 🤗

[@tGoldenPhoenix]

Thank you. I learned something :D

[@aboolwahith2312]

thank you so much sir 💝

[@hakan.seyhan1]

Can you make a comment box, please, it is very necessary..

[@al-aminmollah7650]

Really nice.

[@bdiaz8991]

Hello I’m new to html and css you posting this project ideas is really nice. Just a question, what do the first three lines in meta mean? If they are important, how do I use them? Tnks

[@princekori6231]

Thanks a lot ❤

[@CodingLabYT]

Always welcome

[@Codinglife-gv1qd]

The Best Ever

[@christiannaira6076]

Thanks for this!

[@mj_techno]

In love 😍

[@harshkumar-kx4hz]

Great brother

[@ANDROiDBOYab]

5:00 if we define width:100% first instead of max-width why the image move to left side and after defining max-width came to its place plz answer if anyone knows

[@Abdulrahman-cj9mx]

Cuz the center property is in the body of the page not in the image.

[@lalit-singh-bisht]

i didn't understood the blue background behind the profile pic was earlier taking the full width but as soon as we added relative to the .profile-card the got fixed

[@afifarazzaq3818]

thn it takes the width of a parent element i guess, correct anyone if i am wrong

[@Pili_Devx]

You can bypass this issue by simply setting the property z-index: 1; on the .image{} container

[@unclepoly]

position absolute is respective of the closest parent/ancestor with position other than static set to them otherwise if this condition is not available, it will automatically be with respect to view port no wonder it was filling the whole screen. Adding position relative to .profile-card activates this condition. Now Position Absolute is respective to the .profile card. I hope you find this useful. Cheers!

[@rabinarayanbehera7897]

​@SaGaR-is1jgjust give width and height same to the element. Then border radius 50%.

[@j__o__k__e__r]

Bro on using absolute position in profile-card:: before background is going out from the profile-card div please help

[@compete2194]

I wanted to ask why did you use position relative in profile card & position absolute in porfilecard::before

[@AmitK007]

Hello, why did you selected more than one weights of font from google fonts?

[@angusmorgan8446]

anyone know why he styles .image {} with position relative?? maybe something positioned absolute after it?

[@oncoding4520]

Thank you 💌

[@arndTheInternet]

Hello may i ask why you targeting the class again and again for example .identity-parent .media-container after that you wrote .media-container .links is there any difference between targeting in single or it have difference?

[@firefoxexel2596]

i don't really know

[@mominstatus8499]

Thanks❤

[@farhasaleh8403]

perfect thank you

[@CodingLabYT]

You're welcome!

[@ahmed_zaakan1]

thanks😍🤩

[@solobain8818]

Yo, how do u pick two classes in css without the comma between them, shouldnt you do that?

[@AmineOu-q1m]

It's special content, Thank you!!

[@DjFinestWorldWide]

Awesome

[@ZerubbabelT.]

This is very cool playlist. But can u order them in difficulty level(easy-difficult)?

[@AwitTalaga-s9e]

thanks bro!!!!!

[@aravinds6406]

Amazing

[@CodingLabYT]

Thank you

[@bewise7773]

Love it.

[@SasiKumarS-y6v]

Thank You

[@fguerreroo]

Why did you set the background of the 'link' class elements directly in the HTML document, instead of applying that style from the CSS file used to stylize the rest of the page?

[@designerov9079]

Thank you.

[@CodingLabYT]

You're welcome!

[@seahmadnail]

creative.

[@raushankumar6993]

thanku buddy

[@barankurt4316]

Hello there. I want to have profile cards listed by adding "location" and category to this profile card, filtering with "city-district-neighborhood-categories" select options buttons and searching the website. Can you shoot a video for this? I don't know how to do it.

[@CodingLabYT]

I will think about it.

[@barankurt4316]

@@CodingLabYT I'm waiting, I'm following.

[@fuzailahmed7295]

where i will get this same posite

[@SunilGupta-gz8jj]

Amazing

[@quotespower9911]

It took me more than 2 hours to prepare . I am quite demotivated😢

[@whynotkimhari]

Thank you

[@mikeywilliams6860]

Thanks for your vids .. my image is gigantic .. any ideas how to correct this ? Do I resize it before putting it into my files or do I resize it in CSS?

[@againagainagainagain.]

use this: .image { height: 150px; width: 150px; }

[@aniket_14_03]

Can someone tell me why everyone make a div and another div in it for pictures can it be not possible without it . Please tel me.

[@Iu4uyyyyy]

Hi, 👋🏻 We make div inside the div due to the content position and space form horizontalely and vertically.

[@ashwinr8317]

Why this video is underrated ?

[@taseeradares]

probably, the first video is difficult itself, and most of us would not take the difficult first step!

[@MohamedMostafa-km1ej]

thank you

[@CodingLabYT]

You're welcome

[@ElderBow]

Is that KZbin clickable and does it transport us to the KZbin tab?

[@rabinarayanbehera7897]

No, it is not clickable. It is only a design.

[@BhagatBhutale..]

Mast

[@sariahsaade2776]

The media symbols is not center, someone know what can i do? Because it show me the column to the left but not center and the justify-content and the align-items are center.

[@ghansahdaniel2259]

kindly take your time and go through the video.

[@AmitKumar-cp1oz]

can anyone tell me how to use multiple cursor in vs code in linux

[@LakhwinderPal-q6f]

Sir where can I get this code in written like do you have a website or something

[@ParinitaPatil-b3q]

cant load image please help

[@basicupdates786]

finally found thanks to the author

[@yashvanthkumar2576]

I cant see user image appear over blue background created using profile-card::before psuedo elements .profile-card { display: flex; flex-direction: column; align-items: center; max-width: 370px; width: 100%; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); padding: 25px; border-radius: 24px; position: relative; } .profile-card::before { content: ""; position: absolute; top: 0; left: 0; height: 36%; width: 100%; border-radius: 24px 24px 0 0; background-color: #4070f4; }

[@just_a_sweetpotato]

Hi CodingLab, My profile::before content is overlapping on top of all the content. I have the same code as yours in the before part. Could you guess what could be the problem?

[@abzzz-y7o]

make the position of ".profile-card" relative👇👇 .profile-card { . . . position: relative; }

[@just_a_sweetpotato]

@@abzzz-y7o it already is 😓

[@jorgienalim7944]

im having the same issue.. tried the position: relative part but was still not working.. were you able to troubleshoot the bug?

[@Pili_Devx]

@@jorgienalim7944 You can bypass this issue by simply setting the property z-index: 1; on the .image{} container

[@Hindhedibi]

i have a small problem . the image that i have doesn't change her size i don't know why

[@muhammadzakriya1761]

use overflow: hidden; in .image and when you are writting css and doing work on profile-image you should ensure that you are using space between .image .profile-image

[@slimfit9605]

hello, how to make filtering buttons that will list the people on these cards according to their city, district and profession? Can you make a sample video?

[@gauravsaini1412]

this is a logic based so it can be done by js

[@floraayvazyan6676]

can we find the code somewhere?

[@AyubhonOnarboyev]

nowhere

[@AyubhonOnarboyev]

nowhere

[@chimaemmanuel-nr4yp]

Which editor did you use

[@ahsansher58]

Vs Code

[@princepandey7836]

how to see our projects life update like you are seeing it on the right side?

[@epicmatata]

Use live server extension

[@gokulPC]

can i post this project to my github account

[@RGamerzOfficial]

Bro source code

[@marvelcruiz3997]

hi i just start learn coding pls how can i learn more

[@nainashallet1878]

Video isn't clear

[@HealingSoul24]

Lol bro how?

[@slyterkit]

how bro???

[@MysticRaja]

how to practiv

[@mdnaimulislam.3858]

would you please give your source codes ?

[@ABCricinof]

3 px padding only apply left & top

[@mahdimaourofi804]

First project : done

[@somesaykosm732]

i also like display: flex

[@CodingLabYT]

That's great.

[@Chotucoder]

who is here after watching ezsnippet😁😁

[@CricketCommentsIndia]

please add voice not music please

[@priyagautam9370]

Yess you are right

[@gautamgarg6334]

I would have loved these videos and this playlist but they don't have any voice over so skipping. Sorry 😑😑

[@yasinsherif8875]

It take me 2hrs to do 😂

[@stevo6132]

Needs words to explain things, like it took for half the video to figure out why you were using boxicons. Like even text on the screen to be like "We'll use this for ___ later" type of thing. I have the attention span of a goldfish so this is just a personal grief, but it might help others too.

[@lil_nina4u]

7:36

[@ahsansher58]

Source Code???