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.
@@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.
@@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.
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.
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
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!
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
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?
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
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.
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?
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?
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?
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?
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.
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
Using only classes is dumb because it makes confusion and its become little bit difficult to understand i mostly use ids if need to modify one element and if need to modify or give css to multiple elements then i use classes
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.
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
hey! how are doing now?
@@mr__.irf4n im in a internship now im doing well
@@mr__.irf4n im in internship now im doing well
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.
Very good message.
Thank you for this, I've only recently started my coding journey.
can we talk in ib?
how is it going because i am starting today
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...😊
Like how many hour's?
@@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.
@@mehdibelakbir5308 thnx Bhai.
@@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🥲
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!
Before 2 months i made this mini project by watching tutorial now It's easy For me thanks 🙏❤
Bro am a beginner any tips for me? it will be helpful...iam totally frustrated
@@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.
Amazing content bro, new subscriber! 🤙
06:09 Creating a responsive profile card
16:20 Creating a responsive profile card using HTML & CSS.
Crafted by Merlin AI.
This exercise is absolutely amazing. I learnt so many things.❤
So glad!
Whos i scoming here by ezsnippet suggestion
Mein!!
Present sir.
açık ve okunabilir olmuş teşekkürler :)
Instead of that blue band, i've used linear gradient, that is not 100% same, thanks for these amazing exercises sir!
this is amazing.. thank you for this content
thanks i learned something new ...
you are very great i am new to css its getting harder for me but i wil try
thanks a lot
wow amazing brother such creative mind
Can you make a comment box, please, it is very necessary..
Thank you for your beautiful tutorial, it was very helpful👌👌👏👏
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.
very nice thank you very much!
the music is also quite good!
Thank you too!
how can I make it like in 9.54 by pressing the lines one by one which keyboard shortcut can you write?
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
thn it takes the width of a parent element i guess, correct anyone if i am wrong
You can bypass this issue by simply setting the property z-index: 1; on the .image{} container
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!
@SaGaR-is1jgjust give width and height same to the element. Then
border radius 50%.
Wow bro superb
Thanks 🤗
Thank you. I learned something :D
i like your style dont change your style
🤗🤗😝🤑🥲
Thanks Very good design it helped me a lot 👍☺️ mr CodingLab
sir .. i have done it.
thank you sir
Welcome 👍
Really amazing content
thank you so much sir 💝
So amazing bro
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
Really nice.
It's special content, Thank you!!
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?
i don't really know
Great dear ♥️
Thank you! Cheers!
The Best Ever
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
Cuz the center property is in the body of the page not in the image.
This is very cool playlist. But can u order them in difficulty level(easy-difficult)?
Thanks for this!
I wanted to ask why did you use position relative in profile card & position absolute in porfilecard::before
Hello, why did you selected more than one weights of font from google fonts?
Amazing 😍
Thanks 🤗
In love 😍
Why this video is underrated ?
probably, the first video is difficult itself, and most of us would not take the difficult first step!
Great brother
Thanks a lot ❤
Always welcome
It took me more than 2 hours to prepare . I am quite demotivated😢
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.
I will think about it.
@@CodingLabYT I'm waiting, I'm following.
perfect thank you
You're welcome!
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?
Love it.
Yo, how do u pick two classes in css without the comma between them, shouldnt you do that?
Thank you 💌
thanks bro!!!!!
Bro on using absolute position in profile-card:: before background is going out from the profile-card div please help
thanku buddy
finally found thanks to the author
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?
this is a logic based so it can be done by js
anyone know why he styles .image {} with position relative?? maybe something positioned absolute after it?
Awesome
Thank you.
You're welcome!
Thanks❤
Amazing
Thank you
Thank You
how to see our projects life update like you are seeing it on the right side?
Use live server extension
thanks😍🤩
Video isn't clear
Lol bro how?
how bro???
cant load image please help
creative.
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?
use this:
.image {
height: 150px;
width: 150px;
}
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;
}
Sir where can I get this code in written like do you have a website or something
Amazing
can we find the code somewhere?
nowhere
nowhere
Thank you
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?
make the position of ".profile-card" relative👇👇
.profile-card {
.
.
.
position: relative;
}
@@abzzz-y7o it already is 😓
im having the same issue.. tried the position: relative part but was still not working.. were you able to troubleshoot the bug?
@@jorgienalim7944 You can bypass this issue by simply setting the property z-index: 1; on the .image{} container
where i will get this same posite
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.
Hi, 👋🏻
We make div inside the div due to the content position and space form horizontalely and vertically.
Is that TH-cam clickable and does it transport us to the TH-cam tab?
No, it is not clickable. It is only a design.
Mast
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.
kindly take your time and go through the video.
i have a small problem . the image that i have doesn't change her size i don't know why
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
Which editor did you use
Vs Code
hi i just start learn coding pls how can i learn more
thank you
You're welcome
can anyone tell me how to use multiple cursor in vs code in linux
can i post this project to my github account
Bro source code
would you please give your source codes ?
3 px padding only apply left & top
Using only classes is dumb because it makes confusion and its become little bit difficult to understand i mostly use ids if need to modify one element and if need to modify or give css to multiple elements then i use classes
please add voice not music please
Yess you are right
who is here after watching ezsnippet😁😁
i also like display: flex
That's great.
how to practiv
First project : done
Source Code???
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.
It take me 2hrs to do 😂
I would have loved these videos and this playlist but they don't have any voice over so skipping. Sorry 😑😑