HTML AND CSS STEP BY STEP TUTORIAL | BUILDING A CARD ELEMENT

hello everyone and in this video i will show you the step-by-step to build this project with just html and css which i applied a bit of keyframes css animations including this one here and this is a challenge from a front-end mentor which is a very cool platform and if you want to subscribe to their services you have the option to on free challenges and premium ones today i'm going to build this one here this one here and once you download their their files you're going to find an html a basic html which i just applied the google phones already and then as well you're going to find the the design you have to build right so let's start the process to make this card and to make this card i'm gonna have this div for the card which is going to have basically three parts and the first part will be the header of the card then we're going to have the the body and the footer of this card this is probably how i'm going to call it and in the body part you're going to find the picture of the the user then the name and city and the footer part you're going to find the three elements with the information to move the image up i'll just use the margin top negative so let's start so the way i'm going to build this project here let's start only with the html part which will find the section i'm going to call it main section and later i'm going to include the circles for the moment let's just work in the card element which i'm going to call a card and in this card gonna have the card header to receive this background image right there i'm gonna wanna have also the card body let's call this way and the card footer which is a div called card footer and of course you could also consider this as an entire block and then dividing this later but i think this is a good way to organize your file your your code then in the card body we're going to have three elements which which is the picture of the user his name and the age aside and the city well for this card body then i'm gonna have the image here i'm gonna call it image which is here images you have image victor i sometimes like to use the image inside the div because i don't like to resize image so let's do it i'm going to make it inside the div called image holder and apply the image inside it so this div is going to control the size of the image well some we could think this as a dynamic in the future if this is going to receive dynamically any picture so let's try to simulate that and here we're going to have this h2 which is going to be called name and h well this is going to be for victor crest and he has 26 years old so this is going to be the age 26 and by the way i am using the h2 text i'm not worrying about uh referencement for google or something like this and this is not even my specialty but if you have any other suggestion on how you would call this element i add this tag here please let the comments below after this we're gonna have the h3 for the city which is longer okay so this is the body of my card here and this is what i'm going to call the card footer so for the card footer we're going to have three items in each item we have let's call it h4 and this is the value you're gonna have which for the first one is hk and for the second element for the second information i'm going to use an h5 and this will be um let's call it meta followers okay i'm just gonna call it meta for i don't know i like this name well then we have a second item and the third one second one 803 likes of course you can do the capitalize using the css it's actually ideal and i'm going to have the 1.4 k and this is for photos so this is pretty much the html we're going to need pretty simple and let's see if that works eventually it could be a good idea to include body and footer in a in a separate div and just have it in a in a one div and then the header in another div instead of having three one three of those but let's keep this one for a moment in my css i just applied a couple of properties there and selectors so i'm giving font size 18 pixels for the root then a little reset here it's very very simple very typical and then for the body i am applying the font family as default and also the color darker by default this level of dark color here so let's see what we have so far you only have the html and nothing else okay so let's start well for this moment i really like to code the css trying to do it without looking the browser so we can start doing this way and then eventually you're gonna change for the browser okay so for this section i'm gonna need a background color of course and the background color will be just call it background for the background color i'm gonna get this dark cnn that was provided by in the in the style guide there so i'm gonna give this level for the ground and then i'm gonna have a height of 100 vh i wanted to complete the entire height of the available space of the screen and then the display flex and justify content center align items will be centered as well i'm not going to make it responsive just make it for desktop for this tutorial otherwise it's going to be too long well this is the code i need for the section and of course position relative to include the animations later all right so for the card let's take a look before how it looks okay this looks already nice cool and then we have this footer here which i'm going to work this later in it later so for the car we're going to establish a width and i i'm trying to not check their their files for the design in in sketch or other app because it's a very good exercise in my opinion is a great exercise to develop and training your eyes on design skills so you can try to make it with the same visual without looking the exact spacing and sizes and other information provided in the in the files if you sign the pro member in the front-end mentor but the thing is that of course if you're working for an agency that you have to rush well in this case you have to check the information but as an exercise i think is really cool try to make it exactly the exact same but without looking into the into the values so for the card here they provide information that this in the mobile version this would be 375 so here i can imagine that it's 375 less a little bit for this spacing there so that that's why i'm going to apply it 350 pixels and we also have other stuff for example you could make the the border radius in the card but in i if i'm i'm not really sure but if i remember well we should not apply this to the card itself but to the to the elements inside the card so the header and the footer will have these body rates i'm going to try anyways for the radius of 20 pixels and i believe it's not going to oh of course in the background white otherwise you can see it so yeah as you can see here the border radius is working actually but once we apply a background image i'm not sure if this is going to continue to work so and of course we're going to replace this element here so let's check together i cannot memorize everything i'm sorry so for the card we have a card header which is the element that is going to receive a background image and the background size will be cover and we need to apply a height which i'm going to give 150 pixels at the moment and the for the for the background image is going to be images slash pattern card let me just make it to have toggle work okay cool then for this card header i have the height background size cover background image am i missing something let's check okay sure so as we can see here uh the card is not applying what if i give the over overflow hidden to the card yeah in this case it works okay so that is probably the best idea so the other thing i want to do it looks looks looking cool already so for the card as well i'm going to apply the text align center so i want to generalize using the card because all the text in this in this code is in the center and the image as well so as you can see here the image is already in the center looking cool so let's make it the code for and the card header is done so now we need to make it for the image we have an image holder so just one thing that i cannot remember exactly okay i have the image holder it's just strange the image is coming to the center with the text aligned center but the image is actually inside a div i was not expecting this to work very interesting because usually the image go to the center and okay when you say card text align center the image goes to the center but not a div so for some reason this is working now surprises but that's a good surprise so let's continue then in the card header well the next element will be the image holder the image holder you're going to apply about the radius 50 to make it round also a border 5 pixel solid white and the last thing i want to do is the overflow as well because i don't want you to duplicate the code for for our image folder is that the right name image holder img holder yes and then i have the image inside okay well let me make the image to fill image image holder and then it's going to be a width of 100 a height will be auto and a display block to avoid the little phantom white space in the bottom oh too big okay now it makes sense so well the div is 100 that's why it was looking to be centered so the div was in 100 and the image inside this div that had the limited size was uh was looking centered because of this reason but in my case i want to limit the size of the image holder so this is the element that will control the size of the image using a width let's say 90 pixels and a height of 90 pixels now it's going to be aligned to the left as we can see here actually maybe a bit bigger let's say 95 maybe and then as you can as you can see here the image is on the left we need to make this div that contains the image to go here i could just use the image directly without using the image holder it can be a good idea let me think [Music] well i will need to apply margins anyway so let's just make the margins and sorry margin on the top i need to make this element go up a certain amount right so the way i'm going to do that is that i have to bring 95 divided by two and make it go up in margin negative but i still have five pixels from the from the from the border as well so this will be probably negative 50 is the right amount to go because i'm not going to apply paddings in this area here so let's test this minus 50 pixels and then in the sides i want auto and in the bottom i need to make this space between the the image holder and the name of the user so i need to apply let's say this looks like 30 pixels or something around that and this will be 30 pixels for the bottom and then out of as well for the right for the left sorry and this is what we have so far okay looking cool i'm going to i think this image is still not in a good proportion related to the card but i'm also not sure if this is their ideal width for the entire card i'll just increase this to 100 for a moment for the moment okay looking good so let's work in the h2 which we need to reduce the size um and also the 26 and everything else so let's work in our text elements right now this is what we call the card body so if you see here we have a space there and what i wanna what i would like to plan and as always okay but what happens if this card is in a dynamic environment that the name of the user is super long for example and there is no limit in terms of characters limit well that could eventually bring the name to be touching the edges so in this case i want to apply to the card body i forgot here the card body i want to apply some patties on the sides and in this case also here in the bottom to create this empty space so i'm going to apply a padding will be i don't want party on top i want parting on the sides and to the bottom will be let's say 30 pixels let's see how it looks we don't see much of difference because we still don't have the the line in here we're going to see the difference once i try testing with the long name and then we're gonna see the name is not gonna touch the edges all right so now we almost close to finish this one we have the image holder the image itself and then let's make it the name and age name and age will have a font size of 1 rem so 18 pixels and that's probably what i know we need also some margin bottom to create this distance here i like to use margin bottoms to create distance between one block of element and the next one for me this is the natural way to work because it keeps the natural flow of the of the things in html and css which is from the left to the right and from the top to the bottom so i just keep following the natural flow and imagine it makes sense to me and then the margin bottom will be 20 pixels for now we're going to adjust all in the end and margin bottom 20 pixels well what i need as well is to consider the age having a font weight a different font weight and for this font weight let me try the 400 and it has also a different color but here you actually can see a pattern where this number the name of the city and these elements in there they have the same color and they also not bold so the only things we see bolding here is the h2 and then the values in there for this purpose i'll just generalize you giving to the age to the city and to the meta the same font weight so i don't need to establish it in there and the same color which i will use probably let me try this one but i'm going to apply some opacity i'm not sure if i want to well let's try opacity dot 8 maybe and see how it looks okay not enough that's too much okay nice a little bit no i think this is this is cool well i think this is a good moment to maybe start putting side by side the the style and the and the side itself right so i'm just going to reduce this window here okay that's cool right so let's continue in the style.css i'm gonna have then to make i'm going to make the line that separate the body and the footer so this will give me a better idea in terms of you know positioning the elements so the next thing i want to do is to get the card footer and apply a border top one pixel solid and it will be let's say gray for a moment yeah it's too dark so maybe the light gray and by actually they have a light gray coating here suggested by so this will be the the light the dark gray color they they provide i'm going to use it okay space and that's nice saving i might need maybe lighter let's say this much yeah i think it looks a little bit better if we check the design here super light so let me try even more even lighter okay cool looks nice now okay um i'm gonna fix the margins in another in another moment in this in a card footer we have items so each item and by the way in the cart footer as well we're gonna have a display flex to make the elements stay side by side and if my elements are in display flex i want to also apply here to the card item a width actually i'm going to give a flex 1 to make them have the same space and this is also the elements that are going to hold the height because i want to center that information using display flex technique as well so this will be 100 pixels probably looks nice and display flex flex direction will be column and i have the justify content center align items center okay cool but there's one thing i wanna like i wanna check because if we see in here there's a big distance in the sides right so it seems like the card footer itself has some kind of padding here and this is something i would like to try so if we apply these paddings on the sides right here let's see what happens so no part is on the top and bottom but maybe 10 or 15 pixels on the sides might be enough maybe more what about 25 yeah so it looks more realistic oh actually a bit more but let's skip this way yes so definitely the name of the user should be very similar to the values in there okay this letter v looks a lot like the same size of this letter k so let me go ahead and just change this let me try first to in the card footer item value will be a font size of uh one rem and uh margin bottom a small margin bottom maybe five or six pixels i'll let the margins in pixels i want it to be um i want it to be static i mean i don't want it to be uh relative i want to be an absolute distance and then for the card footer item oops i them and the meta i want to make it i want to make them truly and font size dot 8 rem probably let me check a bit smaller oh that's 7 0 rem and also they have a letter spacing uh probably one pixel i wanna also let the letter spacing should be um you know what and try to put this card uh this element here i'm not sure if it's possible actually in a new window yeah cool so i can take a look here and see that you can see that um this these informations there they definitely have some some letter spacing right and this is my i don't need this and this is the one i have now so let's fix now the size of the value and the size for also the name of the user because they seem to be the same and then i'm not sure if i am using the correct let me try 1.2 and one dot one okay the 1.1 looks more balanced and in the age i want more distance it's definitely the case here we have a little bit distance between these spawning the other elements item if you have a suggestion about how to make this name and age side by side please let any comments below i'm going to use here in the margin left 6 pixels as well and definitely the margin bottom and name age is not that big so i'll try just 12 pixels oh one thing i forgot definitely forgot is the cd since this is general i should let this in the beginning makes more sense to be here so here i have the city which i forgot to apply a font size it would be let's say one rem what you think does it look similar well well balanced in a good size i'm not sure probably make this a little bit lighter for these elements there a little bit.5 and then the font size yes definitely i'll try it a bit smaller so dots 8 0.9 okay nice okay so victor crest 26 london the distance here and the distance here look the same so um for me it looks fine i just want to make sure to re just a little bit the putty in there so this is the padding that i find in my card body which is actually in the moment um 30 pixels so i will not reduce this for trend so let's just make uh zero on top 20 on the sides and then 20 as well here not ideal 25. okay cool oh this looks now it looks cool it looks nice of course we could work a little bit more to make it perfect we could have checked in the in the in the files in the in the in the design files using photoshop or other of your preference but i just want to try to make it as as similar as possible without using without checking this stuff this picture looks bigger than mine and yeah the picture looks bigger for sure and what else what else what else well the followers they look have to have more space but they actually bit smaller and since they're a bit smaller and i'm using a leather spacing with pixels i guess this is going to make the job so let's just increase the size of the picture even more for 110 and of course i need to change this here 55 and in and the size of the meta will be 6.6 and i think i am happy with this final result so let's start now with the animations oh you need to position the circles in there and here also we need to work on this this is going to be the last element for the footer if you like in this coding section i hope you you are enjoying please let a comment below click on the thumbs up and consider subscribing to the channel this video is being a big pleasure to make it for you so let's continue now i need to make the circles elements right so for this i am gonna use my my section as the relative element which is right here and i'm going to position the circles in there i want the circles behind the div spot by default so what i'm going to do is pretty simple i have these circles d right there and i can apply the images directly why not so i have this image from images slash and we have the pattern top for the big circle on top and the uh and this is going to be the images button and i'm going to i'm going to also make them to have um to have the what you call a class right so this class will be c c01 oh this is going to be c02 circle one circle number two because they have specificities right of course this is a mess right now but we're going to fix this in a second so this is how i am going to apply this circle and then in my style.css first thing we're going to make so i'm going to make this has a graphics circles uh i really oops i really enjoy to include comments to organize my code then in these circles and and and img i'm going to give them a position absolute both have position absolute and also i will give them i think that's all for the moment then the circles c1 uh i also have the circles c0 true oh actually yeah it's easier too i can make this way but you know what i'm just going to make them in this way circles dot c1 and comma dot circles dot c2 and they have position absolute cool this guy here is on top and zero for the moment and left zero as well i'm going to make this change and this is on the bottom zero and right will be zero i probably need what did they do wrong okay so as you can see the circles are too big at this point or maybe i just need to position them outside of the section and the size is just the right one already but the first thing i want to do if i want to place the circles behind the card i could change the the index but i'm gonna try something i'm not sure if i can just give a z index let's try here zero is probably not gonna work it's not going to work if i put negative it's not going to work as well because it goes behind everything so the thing here i'm not going to establish as the index to this element instead i'm just going to give to my card the position relative and this is going to solve the problem the position relative here so i can now establish the index for my card my card as well if this is the case well i which i will i want the card to be no i'm not going to do that you don't want to need to establish this index in this case okay cool so now we need to find the exact positioning for these two circles right there and for my first circle c1 i'm going to try using the inspector so using this inspector here i'm going to increase the size so if you're watching this in the telephone it's going to be more pleasant experience so this is going to be [Music] negative minus something ending to the left negative as well so but still these cards these this circles are looking too big so i'm gonna check what sizes they have right now they have 90 78 pixels what if we reduce them to have let's say a width width 800 pixels and hide auto even if it's not necessary so now i can go here and then i can establish and another thing i will do is to give to the section the overflow hidden as well okay so i still need to move my circles a lot by a lot right so this will be top negative so let's find the right amount around 1400 okay so this will be minus 110 maybe and then let's put put it back to the to the left trying to make it in the right corner still more negative to the top okay this is starting to look similar to the result that the intended result so minus 230 minus 175 well i guess this is the right way to go if you have other suggestions please do not hesitate to share in the comments so this is -2 33-175 let's apply it here minus 233 pixels i'm going to make minor adjustments if necessary and minus 175. well i'll just basically apply the same in here but in this case yeah why not minus two three two thirty three pixels and minus one seventy pixels to the right what you think i'm not sure if i like it i'm not sure if this is enough and why this is going outside oh of course i forgot to apply to this section element the overflow hidden okay so this is looking nice i probably need to change a little bit still so let's just check here the mobile design and um yeah well it looks cool i think this is good enough for the moment actually we're going to move this circle here a little bit more down and this middle more up so probably let's try let's try it in 280 300 right 300 here as well and let's see how it looks like okay so i'm going to let it this way and finally if you want to apply animations for these elements well both elements are not are going to have the same um the same animation they are going to go to the transform translate zero so if they have the same animation i'm gonna give them uh in a two seconds for example circle circles then i'm going to make them forwards because i don't want them to stop at the final position and this is going to be uh in a transform translate and let's say -100 pixels horizontal and minus 100 pixels vertical maybe i want them coming from not so distant here okay actually the opposite so i want to make this probably in this way let's try it and then here i'm going to make the same but no negative values so this that and then the animation is basically going to bring them back to translate zero and also the opacity opacity zero here to opacity one the animation keyframes circles which has a zero percent moment and opacity zero i cannot apply the translated transform translate here but i get i guess this is not going to be necessary even the opacity i'm not sure if this is completely necessary but let's try this way and then the opacity will be one and the transform translate will be zero let's check so yeah you can make them to have different delays maybe so if you want to if you don't want them to clog to appear at the same moment you can apply a transform delay or a animation delay actually but i keep this very simple well the idea is just to make something uh more a little bit cool and practice the transform the animations into using keyframes okay and now about this uh footer right here i also want to make it an animation in a way that when we when we pass the mouse in here this is going to move up so the idea is to use pseudo elements and consider this as the over so when i over the element the object it's going to move up not i'm not totally sure how i'm going to make it but let's let's do it together um for this purpose i'm going to include this attribution inside my section element so this is the attribution and then let's give it paste so your name there coding sections okay cool so for the next uh part let's go to yeah as you can see it still isn't there because of the uh display flex but we're gonna go and make uh first let me cut it bring back it here okay much easier to work with so the first thing i want to make for this element will be graphic circles well let me bring this here so i'm going to keep this the class name is attribution attribution this guy will have a position absolute as well and i'll bring it to outside of the section so this is going to be a bottom and i was planning to use the top 100 to bring to bring it uh outside in the bottom part but when i need to use the over i want to make this how can i use the top as a reference um i'm not sure if this is the best idea so i'm just going to keep it in the bottom zero uh left zero and the width will be a hundred percent and the height i probably i don't like to establish a height so i'm gonna just make some parting well if if i if i need to know how much okay let's try this way as you can see it is in the body right now but what if i give a transform and translate y of a hundred percent this is gonna go outside of the window right in a hundred percent of the size of the element itself then if this element if these elements already in position absolute so what if we give to this element attribute a pseudo element a before and this is going to be just that area that will be hoverable so this content will be like that i'm going to make a background so just to have a visual reference going to be grey and this element has a width of 100 a height so let's say 50 pixels and it's going to be in the bottom 100 and left 0 and of course before that i put position absolute as well the problem here is that the element is not appearing for some reason i could translate 100 so let me just remove temporarily the position relative from this element i want to check why this is not working as i was supposed to work so here as you can see this element is still there okay right here but for some reason very strange that i cannot understand right now this solution is not going to be the best to use absolute element of the attribute attribution oh so that's probably why a brown class okay that was the reason okay now it makes sense so i have this pseudo element here which is this gray area so what i need to do is once you over the attribution and this gray area is considered as the attribution when over it it's just going to move up and i want it with a little tron um how do we call i forgot the name right now the name is the name is jesus i don't completely forgot the name of the property uh transition thank you yes the transition of dot five seconds i don't want it to take long about four seconds okay then uh when you once you over this element is gonna go to translate transform of course translate y equals oops y equals zero okay cool so when you over it oh not working for y reason attribution over attribution over translate y0 it should work it should be working okay now it works strange cool so let me give this item okay i'm going to give this some padding will be 20 pixels yeah 20 pixels and a background white and the text align center so this is what we have now when you over when you go here close to the body to the bottom of the page you're gonna see everything looks cool huh of course i'm not gonna keep this gray area if you want you can give it um [Music] a very light gray color and apply an rgba and give it a super discrete opacity level if you really want right then maybe this will be in a more positive the circles could be covering that item so this circles switches right here circle circles will be in the index uh higher say 20 are not still not covering this element because it comes after but what if i give to this element here a the index of 10 still not working probably because this element also has the opacity level so what we're gonna do probably just probably just taking this out okay right and removing this the index from the circles of course all right so i hope you enjoyed this tutorial it was very fun to create it one more time thank you front-end mentor for to provide it to us and in the next video or in the next days i'll be posting a lot of tutorials thank you very much and i see you next time

Channel: Coding Sections

Views: 11,642

Keywords: html, css, html and css projects for beginners, html and css project, html and css, css3, html5, css keyframes, html tutorial, html tutorial for beginners, website, frontend mentor, front end, front end developer, web design, web development tutorial, web development tutorial for beginners, web development projects, keyframes animation css, css tutorial for beginners, css tutorial for beginners full, frontend mentor newbie challenges, frontend mentor profile card

Id: vjObtWO5RvU

Length: 46min 43sec (2803 seconds)

Published: Wed Dec 16 2020