Create a Linktree Clone Profile Card with HTML & CSS! | Frontend Essentials Clinic 2

Welcome to frontend Essentials Clinic 2 in this series we're diving deep into the core skills of frontend development today we'll be building a profile competent card similar to link tree using only HTML and CSS while also refining of understanding of dimensions in units mastering these fundamentals shapes you into a strong adaptable developer giving you the skills to WR Clean maintainable code and trouble sh with confidence as Tech evolves think of HTML CSS and JavaScript as the crayons and pencils of your coding to grit the building blocks you need before leveling up to Frameworks like react

angular or view so let's roll up our sleeves and start building from the ground up okay first things first we're going to need some housekeeping okay we're going to need to Download the foll figma and vs code so the links are going to be in the description of this video so let's copy the figma uh link and let's paste it in you're going to be greeted by this page and what we need is the the desktop app so if you're maic OS download for Mac OS if you're Windows download for Windows the second thing we're

going to need is vs code so let's copy that link from the description again if you don't have vs code let's paste that in going to be Creet by this page over here these windows Linux and Mac OS I know majority of You Are on Windows and Mac so download the appropriate one for your machine then lastly we're going to need to download the Resources for this project we'll be working on okay the link is in the description of this video as well it's going to take you to Google Drive and they're going to be

greeted by three folders one code notes and sheets and one called Social Links profile figma and the last one called Social Links profile main I want you to download the these Three files okay so let's do that uh just waiting for it to zip okay let's download it okay and then we need the figma one download that okay the figon is done we need the main one now just waiting for it to zip okay it's zipped okay now we need to Go to our fire Explorer this minimize these sticky notes file explorer I'm going to

go to downloads when you get to downloads I want you to unzip all the files you've got here so let's unzip notes and sheets first extract and then uh the figma one extract then the main one extract okay what I want you to do now is to delete all these uh zip files we Downloaded and remain with the ones which are unzipped then we're going to uh rename these files a bit so Google Drive put some metadata at the end of each file we don't need that many metadata let's remove that so that um it's

legible and it's easy to track which file we'll be working on let's remove that let's moove That and finally let's remove that okay that's great what I need to do now is to go to documents and if you have been religiously following along with our front end essentious clinics um you know they from the previous tutorial we created this folder called uh front Essentials clinics what I want you to do is open it now and you're going to create a new Folder for this project we're going to call it recipe underscore no not recipe social

underscore links underscore profile I don't know where ree came about oh maybe I was looking at Ree and REE came into my head anyways yeah once you're done creating that folder open it and I want you to create another folder Called images so this where images will be in so images what I want you to do now is go back downloads and find Social Links profile main I want you to open that folder once you've opened that folder uh dig deeper um dig deeper again okay once you're here I want you to look for a

folder called asset once you on assets I want you to Look for fold code images once you're on images I want you to um copy everything in this folder so contrl plus a to cop to select everything then contrl plus C to copy I want you to go to Social Links profile I want you to go to the images foldo we had created and that Social Links profile folder and paste that in okay now what I want you to do is to minimize the file explorer for a Bit and I want you to open figma

in my case my figma is already opened but I want you to open figma and it's going to bring you to this um Landing page here this recent tab where you've got all the work you've probably worked on before then now we're going to go back to F Explorer again I want you to go to downloads and go to Social Links profile figma click on that and Then dig deeper dig deeper until you're greeted with uh read me and a Social Links profile. fig file over here I want you to double tap on this file

it's going to take you back to figma and it's going to create this model for the import okay what we want to select is drafts dra gives us the premium version of Figma then we're going to click import and this wait for it to import okay now it's done importing click done okay then on the recently viewed you're going to see the Social Links profile do fig file now in figma what I want you to do is to double tap it to open double tap okay this is it this design was made um by front

and Mentor um if you want to go look them up you can go look them up okay So this file has four pages it's got overview it's got the design system going to touch on the design system when now dealing with CSS variables I'm going to explain in detail how those Works um then we've got the Prototype which we're going to look at later on then we've got the design itself with the mobile view the tablet View and the data View and of course the Harvest dates over here which are part of the Prototype we're

going to be looking at later on what I want you to do now is um minimize your figma and minimize the Explorer I want you to go to vs code open your vs code okay you're going to be greeted with this um page over here what I want you to do is go to the extensions so the last tab on this nav over here extensions or click control shift plus X if you're on Windows so click on that um um yeah we're just finalizing the housekeeping so the have vs code extensions I want you to

download the first one is um the live server by rrick day um the link to this extension is in the description of this video copy that that link and on the extensions tab you're going to see an input at the top uh paste that link that input that search input and then you're going to see it's live server by Rric day click on that in my case I've already installed it and it's already enabled on my vs code so I want you to install it and enable it on your machine if you don't have it

then the third the second one is the uh pretty extension by the prettier team copy that extension link uh come to the search tab or search input of the extensions tab then paste it in there you're going to see pretti Here by the Prett team install it and enable it okay then finally with the housekeeping uh we're going to need the icons for vs code so copy that extension go to that se put again on the extension Tab and paste that in okay vs code icons by the vs code icons team I want you to

install it and I want you to enable it Okay done with that now I want you to go to the explore tab or you can click control shift plus e that's the explore Tab and then I want you to click open folder then we're going to locate that [Music] um a Social Links profile folder in documents okay so documents uh front end Essentials clinics then what we want is the Social Links profile then once you selected it uh click Select folder okay uh let me float my vs code to the side okay so now we've

got our vs code and our figma file uh floated side side to side and you can see both uh figment vs code now going to explore our design so Design This is social profile links Cod or Social Links profile Cod uh it's got this card in the middle and it's Got a header which compromises of this Avatar um this name this location and this bio that's the header and then it's got these links to take us to get fronted mental LinkedIn Twitter Instagram okay we're going to learn how to customize links in this tutorial um

so these are not going to be made with divs these are going to be made with um anchor attacks themselves Okay we're going to dig deeper into that when we get there and then we've got uh the tablet view then we have the desktop view here okay so we're going to be working mobile first design so from Mobile to desktop reason being it's easier to work from Mobile to desktop picture it you're going camping and it's time to sleep what's easier to take your sleeping bag from the Sleeping bag and lay it on the T

floor or take the sleeping bag and try fold it back into its bag and it's easier to of course open the sleeping bag and putting it on the T floor so that's the same concept with uh front end oh mobile first design where we take the smallest design and scale it up okay we're going to be looking at That in detail as well anyways let's start with working on our HTML okay so let's go there index. HTML and then we need main. CSS okay let's close out that CSS for some time then I want you

to say shift and press the letter one on your quy keyboard then you're going to see um it's it says emit abbreviation Yeah want you to click enter okay so once we do that it's going to give us a spoiler plate for HTML okay what I want you to do now is to just wrap this a bit okay me zoom in okay we're going to need a meta tag here So Meta click the one with description then right now we don't need the Description what we need is to say author okay in the content here

I want you to type your name so my name is inti man then the title for this let's uh say social links profile okay then we're going to need another meta tag for the description of the page itself So Meta description then the content let's Say a simple a simple social links profile okay now we're going to need to uh link our HTML to our CSS so we going to say link then look for CSS there our CSS then it's main. CSS so main. CSS then we're going to need to link our Five icon to

our HTML so our five icon is the little image which shows on the tabs when we're now on our browser okay so start SL images five icon okay we're done with the header oh with the head not the header okay now we need to go into the body now okay so first things first we need to make sure everything is inside this Card container so article Dot profile code enter then we're going to need um to make sure that we have put the stuff into the header of our profile card okay let's come back to

our HTML so going to say Section Dot profile card underscore uncore header okay then we're going to need to place this Avatar in a div so we're going to say dot profile card uncore Avatar then for images videos and audio we always need to wrap uh the tags in figure in figure tags and those figure Tags need fig captions so say figure then we're going to say image then we need to find this image so in the source when you say dot slash um images a Jessica then on the out we need to say uh

Jessica Avatar then this image needs a Width image needs a height then we're going to say loading lazy this is to ensure that um on a larger project it's more visible this is to ensure that the website or the page you would have created doesn't load all the images and loads them when we get to them so in this case I'm just putting this so that you start getting familiar with using it okay we're going to need the width and The height for this image so what we're going to do is to go to the

images folder um go to a. jessica. jpag we're going to go to the bottom right corner of this image file over here then we're going to see the dimensions where my cursor is that's 176 by 176 we need to input that in there so 176 by 176 okay since we're now done with the profile card _ Avatar uh now we need to put a f caption F caption with the utility class of offscreen I'm going to explain what this off screen means when you get to the CSS then we're going to call it Jessica's avator

again then now we need to Style our name and our location okay so this is an H1 Jessica Randall that's an H1 so going to say H1 dot profile card um underscore underscore name then we're going to say Jessica Rand okay then the second thing we need to St is the this location over here just going to put in a paragraph So P dot um profile card and the underscore location okay let's just quickly copy that okay yeah quick reminder to get your cursor on and figma is it's just a matter of pressing the letter

T then You've got that cursor pointer there then on any text you can just put it and it becomes active then to copy all the text in there uhr a select everything contrl C to copy yeah I just needed to say that okay so if you can write it down you can write it down okay um now in dealing with the bio now so P dot um I'm going to say profile card underscore Underscore location then we're going to get this h no this is bio not location sorry bio going to give us a utility

class of nor r app okay then um let's look at this bio over here so as you can see there quotes around the bio so from our basics of HTML CSS we learned about the quote Tag which is q and to place that in there so let's come back to figma press T get your cursor pointer there what I don't want you to copy is these quotes already on the design what I want you to copy is the text between the quotes Okay copy that contrl c then come back to HTML control V okay um

when we put no WP we don't want this to wrap When we suddenly change screen sizes or the width of this card becomes a bit smaller we don't want it to rap okay that's why we said no rap here we're going to talk more about this utility class when you get to CSS okay we're done with the header section of this card now I wanted to focus on these Links okay so we're going to create a new section we're going to call it profile card underscore uncore links okay then it's going to have these links

in there okay so for links is the anchor tag so a um then you put a hashtag in there then we're going to need a Class yeah then the first class will be call profile Cod underscore link and then the second uh class is going to be called profile card underscore uncore link Double Dash SC GitHub GitHub and then we're going to need a new R Class here no W then we going to Need a center here Center uh these are these two are utility classes so Center and no W these are utility classes then

in between this anchor tag we're going to say GitHub so we're going to highlight the S here then let's duplicate that this is going to be front and mental then let's change that to FM for short Let duplicate this again then this is going to be LinkedIn L and then let's replace that FM to LinkedIn okay let's duplicate this then this is going to be Twitter let's replace that with twit okay then finally Instagram let's replace that with Instagram and finally there Instagram okay okay we're done with our HTML here's how it looks okay let's

close out of this now let's go to our CSS main. CSS what we need to do now is go back to the downloads so downloads uh we need to go to Social Links Prof profile Main okay let's dig deep di deep and let's find um a txt file called CSS boilerplate open it okay and then what I want you to do is copy everything here so contr a to select everything control C to copy let's minimize that minimize the F Explorer let's paste that in let me zoom in a bit okay so you've got this

boiler Plate okay I'm going to explain each part of the spiler plate so that you clearly understand why we need it okay so this first section over there so this line allows you to import custom fonts from services like Google fonts so on this case we are going to be using Google fonts okay now let's deal with this section the Reset okay reset okay so this first block over here I've just highlighted removes default margins and padding from all elements uh set box sizing to border box which makes elements include padding and border to the

total width or height calculation and this creates a consistent base across different browsers and that's why this is there then this image Reset okay this makes images responsive by default uh prevents images from being wider than the container so we don't want this avat here to be wider than this container in this case um it maintains aspect ratio with height Auto so as you can see there height is auto okay now let's look at this section here for variables so this provides a structure place to Define CSS custom properties uh which is the Variables and

you can organize them into categories so in this case colors gradients and typography I don't think from the looks of this design there's there no gradients let's just remove that then the utility class classes actually so I've SE I've I think you've seen me just adding them out of the blue and the HTML there's off screen there's no rep there Center then there responsive image Okay so let's let me explain off screen first so off screen HIDs content visually but keeps it accessible to screen readers so we need that for our the captions that's off

screen so yeah for screen readers that's part of SEO and accessibility then this no wrap utility Clause here prevents text from wrapping so we don't want the sticks to wrap so what we Consider wrapping let's go back to a figma I've just put put my cursor on the bio over here this is what we consider wrapping where um the text breaks away onto another line we don't want that for the bio So when you say no w we just want it to remain like this whether the screen sizes change or not okay Center uh the

center utility class okay centers text content so in this case we used it for our links We want our links to be centered okay then responsive image okay set to display none so it hides certain images we don't want them to be seen on the page for a certain screen okay we're going to dig deeper into this we're not dealing with bigger projects and uh the media queries we be dealing with so in this case in this Project we don't need this so let's delete that okay let's go to the general Styles now um okay

so this HTML over here with scroll Behavior seta smooth so it enables smooth scrolling for anchor links so I'm sure you've been to the website where there's a button at the bottom of uh that website usually in the footer Return uh back to the Top If You click on that it takes you back to the top of the page okay then body then body then this body block okay makes body at least full view Port heght prevents horizontal scrolling ensures content allows overflow horizontally okay that's the purpose of that body um we're going to be

dealing More today with what Min height is what Max withth is and so forth we're going to be doing that soon and then this is a heading reset so removes default styling from headings allows for more consistent styling control so that's his purpose there in this case we only have an H1 in this project so that's what we need and then uh we've got this link styling here so removes underline from all links Uh set links to black color okay then any link targets both visited and unvisited links okay so in this case um what

we want to do is give our link colors a color of white that's what I want to do there okay cool um now we need to go back to our downloads go back to downloads and find notes and sheets go to notes and sheets And open notes and sheets then you're going to be greeted with uh three files one is a PDF and two are images so we're going to deal with the two images first so one is for flexbox uh it's a flexbox cheat sheet where you can get to understand how certain Flex boox

properties work then the second one here is a grid yeah that's for CSS grid that's a Cheat sheet for CSS grid you can download it and you can use it along when you're coding your own stuff then what we're going to be dealing with mostly right now is this PDF here CSS Dimensions foundations we're going to open it and read it together okay so going to go ram versus pixel uh width versus max width uh height versus Min height so this time about we're just not randomly Putting pixels with and Heights we need to understand

what um dimensions and what values are we really putting in certain places so let's start with uh RAM versus pixels so work when working with CSS units RAM and pixel are both popular choices each with its own use cases and advantages here's how they compare um so one is definition okay okay so pixel and RAM pixel an absolute unit pixel represents A fixed number of pixels on the screen this measurement uh remains consistent across elements and is unaffected by the font size of the root or parent elements Ram uh root em uh relative unit Ram

is based on the font size of the root HTML element by default this root font size is usually 16 pixels in most browsers unless otherwise specified so in this case um we need to strongly Specify that our root element over here it's actually 16 pixels so F size okay let's finish off the rest so scalability and accessibility okay let's read on that since pixels is an absolute unit it doesn't scale when the user changes the browser's uh root font size or zoom level this can be limiting in terms of accessibility as users with vision Impairments

may find it hard to read if they increase the base font on your device so for fonts we're not going to use pixels um ram ram skills with the root font size so if a user changes their browser font setting all elements using Ram units will scale accordingly making Ram more accessible and adaptable option okay so for fonts and um fonts padding gaps and margins we use Ram okay use recommendations when to use PX ideal for small fixed elements where you need Pixel Perfect Precision such as Borders or icons okay when to use Ram grateful

layouts text components that need to respond to users preferences or skill uh will across different screens okay so for Ram as we've mentioned fonts padding margin and gaps we use Ram okay let's go width versus max width I think we saw Max width on the body Styling of our page okay let's read more on this and CSS width and Max width are both used to set the width of elements but they work differently and have distinct use cases here's a comparison behavior and definition withth sets of fixed or responsive width for an element the element

will always try to maintain this width regardless of the viewport or container size and let combined with other CSS rules okay so if you want something uh With fixed Dimensions use with okay then Max width says the maximum width of an element with uh ass the maximum width an element can expand to allowing it to shrink as needed if the screen size or container is smaller than the max width the limit to reduce its size accordingly however it will not exceed this maximum with even on larger screens okay hence um on the body we use

Max width then flexibility and responsiveness width fixed and size um when given in pixels EG with 400 pixels um about can be responsive if defined the percentages with 50% however it does not adapt to screen size changes Beyond is specified value okay so wouldn't want width on something like the card container we're going to be working with we're going to need Max Width so max withth highly flexible and ideal for responsive design it allows the limit to grow or Shrink within specified limits which can help avoid overflow on small screens okay and let's now read

on the use cases uh we to use width when you need a fix size such such as for images buttons or icons that should not resize or change or when you want a consistent with in both large and small screens okay when to use max width when You want an elit to adapt to various screen sizes while keeping a maximum width constraint this is ideal for containers images and layouts that huge remain readable or visually appealing across devices okay so if you you can seeing uh containers and images and layouts Max with okay um height

versus mean height that's the last one in CSS height and mean height both set the height of elements but they Work differently and serve unique purposes here's how they compare uh let's read the behavior and definition height sets are fixed or responsif IED for an element the element will always try to maintain this exact height regardless of its content then M height sets a minimum height that the element must meet but allows it to grow taller if the content inside it requires more space the content's height is less than the Min height the element's height

will Stay at the Min height value if the content's height exceeds men height the element to expand to fit the content so in this case that's why the body has a Min height of 100 VH so that any content we add there it will just continue expanding and filling it in okay then flexibility and content adaptability height useful when you need a strict defined height however if content overflows it can either extend beyond the element causing overflow or be Clipped um depending on the Overflow property okay then men height now allows for flexibility as it

ensures a minimum size but adapts when the content requires more space this is useful and responsive designs where content length may vary making sure the element isn't too short uh to display its content now let's read on the use cases when to use height filaments with a fix size requirement EG headers Footers or Images with specific height constraints that's when we can use height when to use men height for flexible containers EG uh for in our case the profile card you can see cards sections or containers with u variable content uh ensuring they don't collapse

if the content is shorter than expected that's the use cases for height versus midnight what i' would want you to do is probably in your spare time uh read this by yourself and Comprehend it but uh as of now let's go back to the project okay let's minimize this and make sure it's really floating okay so here we added font size one um 16 pixels okay what we need to do now is to just um Define it to you that one ram is equivalent to 16 pixels so when we want to change our font from

pixels to Ram we say Um font size npx ided by 16 that's what we do so your font size on PX div by 16 that's how we get the Ram okay cool 16px yeah so in this case to get one ram is 16 pixels divided by 16 pixels one ram okay but in order for us to make sure that across all the browsers it's always going to be 16 pixels on the base Font size we just need to put it in the HTML yeah 16 pixels okay cool that's out of the way let's now start

working on this design but first things first uh let's go to the design system okay so here's the design system uh we need a font first so the font working with is called enter so let's go to our browser fonts. Google.com f. google.com Okay I just remove this so that I can show you how to do it so when you go to F google.com I want you to type enter then it's done the dirty work for us let's just click the enter going to take us to enter page over here then want you say get

font when after that you selected your font see one font family selected which is Enter I want you to click get embedded code okay then you've got link then you've got import what you need to do is to go to this import and say copy code then come back to your CSS want you to paste that in then I want you to delete these St tags here delete those style tags we don't need them Okay then in your sty sheet what we want to do is to create a variable for our font so Double T

there FF go to Google fonts again um let me zoom in a bit so enter this tab enter CSS class for variable style over here I want you to go on this part over here where it says enter uni unify Unifier and then go on font family copy that once you're done copying that go back to your vs code then paste it in here there in now we need to go back to our figma file and let's deal with these colors so I've got Grays we've got a green got white so let's deal with the

GRS first Okay what I want you to do let say uh put your cap plck on Gray X I want you to duplicate this Thrice one two oh twice actually not Thrice okay so they three Grays over here there's 700 there's 800 then there's 900 so let's quickly rename that X to 700 800 900 okay then we need that H code there so It's going to be hashtag and three there uh 3 threes then for gray 800 it's going to be asht one if one if one if then for gray 900 it's going to be

be # 14144 okay what we need to do now is to work on the green and the white so green then going call this white so for white is Easy uh 3 FS then for this green uh say hashtag C4 f8 2 a okay got the colors out of the way now let's do the typography so our designers have already done the work for us uh by grouping the text presets if you go To the far right of um this page of design system you see where it says local Styles under local Styles there's Tex

Styles uh where my cursor is right now then there's text preset one preset two and preset two bolt um let's quickly Define those text preset one okay I want you to duplicate this twice one Two then this is going to be two then this going to be two bold okay that's great um now we need to know us on text preset one so to know us on text preset one uh we're going to click this edit St button there then we're going to discover what's happening on that tab there okay so we've got a font

of enter and a font rate of semi bold then got 24 Pixels of um font size then 150% of line height okay let's put that into place so semi bold font is uh 600 then to convert our 24 pixels to Ram okay let me just bring out the calculator so you see see how this calculation is working once again um we say 24 divided by 16 which is 1.5 Ram so I'm going to put that there 1.5 Fram then this has a line night of 150% then this has got a 4 of enter so we

say V uh if if that's what going to need there then let's go to text preset to okay this time around the font weight is normal and the font size we need to calculate it that's 14 / by 16 that's 0.875 Ram then our line height is 150% once again then our font is enter okay then let's go to this bold one okay all we need to do is copy um the text preset to values here copy that place the M bold instead of normal it's not bold Okay yeah pretty much we are done with

setting our variables up what we need to do now is go to to the body and we're going to style it soon let's go back to the design in figma uh go to the mobile design as I was saying we need to start the body first as you can see this body uh has got a background color of uh gray 900 how I got it go to this tab here This gray 900 there okay then so let's give that a background color of that then we're going to say display uh grid going to turn on

body into a grid display grid then Place content Senter pleas content sent okay um so display play grid and place content center it's going to bring this card over here exactly to The center of this page no matter what happens it's going to be at the center of this page okay then now we need to start styling the card you start styling the card itself so let's get onto it it's going to say profile card over here profile card let's go back to HTML for some time um what we're going to start doing is to

Design from the top going all the way to the bottom so we're going to start now so let's copy this and go to main. CSS dot profile card there then now we need start designing this profile card it's going to need a Max width as we read about that Max withth of how much 327 pixels yeah 32 Pixels then it's going to need a Min height of 579 pixels how I got that under Auto layout look at resizing you see the dimensions okay then this um profile card is going to need some padding okay we

need to find out how much padding this has so you can just go to the sides you can see those blue lines yeah that's the padding that's 24 pixels uh 24 Pixels 24 pixels and 24 pixels there okay then we need to calculate 24 pixels to Ram it's 24 / 16 that's 1.5 Ram okay now we're going to need some margin let's see how much margin this has so I want you to select the card click shift alt and place your cursor on the body If you don't see red lines on your figma or on

the mobile design you did something wrong um so what I want you to do I'm going to repeat those once again CU I know this confuses a lot of people you're going to select what you want to select so in this case we want to select this card over here once that's selected once you see blue lines around there card want you to click shift out and put the cursor on the body can you see how my curs is this is the body place it in There then you're going to see red lines with values

on them so got top and bottom um margin of 116.5 pixels so we need to calculate that inter Ram 116.5 pixels ided by 16 okay going to round it off to two decimal points there so we're going to say 7. 28 so top and bottom is 7 28 Ram then left and right is 24 we've calculated 24 already from padding and 24 pixels to Ram is 1.5 Ram so 1.5 Ram is what we need there then this card is going to need a border radius so border radius of 12 pixels how I knew that go

under appearance uh in this case in figas Corner radius not border radius your corner radius inigma 12 so your border radius and CSS will be 12 pixels then the this needs a background color okay the background color for this card is gray 800 okay then we're going to give this a display of flex display a Flex and a flex flow of column and we're going to align items to the center and we're going to give this a gap so the Gap is between the head and the links and this Gap is 24 pixels if you

can zoom in those purple lines which are coming about that's 24 pixels there Okay we need to okay 24 pixels we already know 24 pixels is 1.5 frame we've calculated it before okay cool now we need to work on the next section which is the header okay let's just say that ha let's go back to our HTML see which class we're dealing with we're dealing with that let's copy that let's paste that in okay let's look At this here okay in this here we're going to give it the display of flakes Flex before we go

on um I had forgotten something we hadn't launched the live server okay so let's just launch it so let's go to index.html and click go live Okay click inspect okay so let's go back to to our main. CSS uh after launching our site there what I'm going to do now is to continue styling this header so say display Flex then we're going to give this Flex flow of column okay then I'm going to align it the center align item Center okay then yeah that's it for that head okay then I'm going to go back to

index. HTML what's the next thing to style it's The avator copy that and let's paste that in there then we're going to give this habit a width and a height then we need a b radius there okay let's see what we're dealing with in the figma file so width is 88 pixels all right our height is also 88 pixels then our border radius is 50 % Since that's a circle okay then we're going to say overflow hidden and then we're going to give this a margin bottom that's 24 24 pixels 24 pixels is 1.5 frame

so going to gives us a margin but of 1.5 frame okay then we need to start this name over here So let's go there profile card uncore name copy that but before start the name um let's out this image a bit so we're going to copy this paste that in say image going to give this a width of 100% we need to make sure that it covers the entire container always and a height of 100% then we're going to say object fit uh Cover object fit cover Sor one day okay now we can install the

name okay we need to know it's font uh we need to know it's color and how much margin bottom we're placing there okay cool let's go back to figma uh we need our text cursor press t go to Jer Randall place your cursor there then as the design I set it is text preset one um how do I know is text preset one where my cursor is yeah under typography you can see it's Tex preset one so we're going to give that there text preset one that's all font and the color is white and then

margin bottom of see what we're dealing here okay a margin bottom of four pixels so I Selected the the name then I clicked shift out and put my cursor on the location then you see four four pixels there so four pixels to Ram we say four ided by 16 that's 0.25 Ram okay cool then now I need to start the location so let's copy this then dot paste that and then we need to know what font Uh font color and margin bottom we're placing on this so go back to figma press T put your cursor

on this um location and then the font is text preset to bold I think by now you now know where to find the font in figma okay then the color is green then we need to know the margin Bottom here that's 24 pixels which is 1.5 Fram okay then finally we need to style the bio okay okay um according to figma the font here is text preset to and it's got a color of white and yeah pretty much that's it that's what we need there okay let's go back To um Google Chrome and see what

we've got now okay so this is what we have right now now we need to start the links these links okay um me quickly be this baste it there me call this links okay first things first uh let's go back to HTML uh we can see that we're dealing With anchor tags yeah anchor Tags by default are in line elements they're not block elements so the first thing we need to do is to change these links to become block elements that's the first thing we need to to do so let's sty these links so dot

profile Cod underscore uncore link Okay display block okay let's go and see what happened as you can see these are now blocks if we remove this display block they're going to be in line again you saw that yeah so we want them to be display block okay then on top of this profile card link here um let's just Style the section this links are in first before we start the continue styling these links okay we're going to give these for the section um display of flex and a flex flow of column and going to align

items the center and we're going to give this a gap we need to find out what the Gap is okay according to figma and the purple lines are just coming up is 16 pixels 16 Pixels which is one ram okay let's see how that's looking okay now we need to St these individual links now well custom buttons made with links yeah however you want to call them okay let's customize those okay the color here is white as we can see there yeah that's white then we're going to need a background color background color of grade

700 as you can see there hand fill it says gr 700 going to put that there and then we're going to give this a width of 100% and we're going to give this a height of under Auto layout and resizing it says 45 pixels okay that's 45 pixels then this is going to need a border radius and the Border radius here if you Comeand appearance it's 8 pixels so put 8 pixels then this is going to need a font custom font uh we need to double tap on that GitHub there and then to select the

text GitHub then it's text preset to bold that's what we dealing with okay let's see how this is looking like right now okay we're almost there what's only left now is to add The padding top and bottom and left and right that's all we need there okay let's go back to figma okay now we need to style these individual links separately now but it's not going to take a lot of time um what we need here is these individual classes which are different so there's GitHub there's FM then there's one for LinkedIn there's one for

Twitter then there the one for Instagram okay we're going to start with the GitHub one so let's copy that okay I'm going to give this a a padding okay so back to Al figma I want you to select the text GitHub so double tap the text GitHub you see it's going to be selected with this purple boundary there you know that is selected I want you to click shift out and place the cursor on uh the buttons Background or the links background however you want to call it as you can see there there will be

some red lines it's got a top and bottom um padding of 12 pixels and then uh left and right padding of of 115 pixels okay we are going to need those values okay but we need to change them to Ram so 12 pixels in Ram is 12 / 16 that's 0.75 so 0.75 Ram so top and bottom and then 115 pixels uh left and right so 115 / by 16 that's 7.19 7.19 uh RAM let's see how the first link is looking like okay this how it's looking like right now now we need to start

the remaining four links so there's front and mental there's LinkedIn there's Twitter the Instagram what we're going to do now is to duplicate this block of CSS uh four times so one two three 4 uh okay let's give this some space we need our code to breathe what we're going to do now is to just rename the last part so this is FM this is LinkedIn And and this is Twitter and then this is Instagram what we need to do now is to go back to our figma and change the values for each of these

paddings for the individual buttons so for front and mental as you can see top and bottom is still 12 but in this case it's 82 pixels Yeah so 82 pixels left and right so we need to change that 82 / by 16 that's 5.13 Ram so so for front main tool can I say 513 press okay so for LinkedIn let's go go check it out again here select that that's 110 left and right so 110 / by 16 that's 6.88 for LinkedIn then for Twitter that's one 114.5 114.5 that's 7.15 625 so two decimal places

7.16 7.16 then for Instagram that's 104.5 pixels left and right so 104.5 divided by 16 that's 6.53 place that in there 6.53 r okay let's go back to Google Chrome and see what's up okay so as you can see the card looks exactly as it does on the design Itself for the mobile which looks pretty nice eh so we've got our sleeping bag now so by sleeping bag I'm referring to the mobile design now we need to open the sleeping bag uh by opening that sleeping back I'm meaning getting it on bigger screens we need

to design for bigger screens now um so going to use media queries for that so Here I'm just going to say tablet then for tablet it's add media okay media [Music] screen and minwidth connect six 768 pixels for that mwidth okay so for mobile first design when you scaling up um you use minwidth So for the tablets the smoth smallest tablet we can use a 768 pixels so when the width of our devices get here they implement the tablets media queries okay so first things first um we're going to be taking block by block and

seeing what has changed and what has remained the same so from the top let's Copy this go down to a media query let's paste it in okay we need to see what changed yeah did the max withth change on this card okay yeser dat is now 456 did the M height change yes it did it's not 611 okay did the padding change yes it did it's now 40 pixels but We need to change that 40 pixels to Ram so 40 divided by 16 which is 2.5 okay did the margin change yeah that definitely should have

changed um what is it now that's 26.5 top and bottom okay let's just quickly calculate that 2065 / by 16 which is 12.91 top and bottom 12.91 and then to the sides how much is it 156 so 156 ided by 16 just 9.75 9.75 okay so the Border radius change on this card no it's still 12 pixels okay remove that to the background color change no still gr 800 okay so remove that do the flex properties change um is this Gap still the same yes still 24 pixels yeah between the head and the links which

is 1.5 Ram so pretty much these didn't change okay let's bring in another block let's see how it's looking like on a on a specific width here so the iPad Mini is usually the one which is 768 yeah uhuh okay We need to bring in the next block which is the header okay profile card header uh copy everything there contrl C to copy and let's go to the bottom here paste it in there okay let go back to our figma see what has changed what hasn't changed uh did this change still Flex Still column is

still centered okay this hasn't changed so we remove that and did have to change no still 88 pixels uh the board R is still the same and the margin bottom is 34 Pixel are just 1.5 Ram still the same so the a doesn't change there uh likewise with this image since it's part of the aor don't change then the Cod Um name does that change okay still preset one St white uh the Gap here still four pixels is 0. 25 Fram okay this didn't change okay then the location to the location change um still green

uh still Tes preset to bold uh the likelihood of this being 24 pixels yeah still 24 pixels which is 1.5 Ram margin bottom so yeah This didn't change and then the profile called bio okay did this change okay um it still T preset two the color is white this didn't change okay then now let's go to the card links the final part card links there we go let's copy everything there on the card links and let's paste it in this Tablet okay did the flex properties change um let's see how much Gap is there still

yeah still 16 pixels yeah as you can see still 16 pixels which is one ram and the flex properties didn't changeed okay so we're going to remove that and the length did the lengths change uh the height is still 45 pixels uh the Border radius is still 8 pixels and the font the font is probably still the Same yeah still the same um let's remove this this never changed okay what probably changed this the padding okay let's see how much of the padding did change so the 12 pixels is still the same for the top

and bottom yeah the sides are the ones which really changed Okay so for GitHub we have 163.5 um left and right we need to change that to Ram 163.5 / by 16 that's 10 22 okay then from front M yeah that's 130.5 that's 8.16 okay let's replace that there okay then for LinkedIn that's 58.5 that's 9.91 then for Twitter that's 163 divided by 16 that's 10.19 then finally for Instagram that's 153 pixels padding left and right okay we need to turn that to Ram 153 / by 16 that's 9.56 okay let's see how this is

looking on the iPad now okay this is looking exactly like how it is on the design okay okay now we need to start working on the desktop view of this design or of this card since this is a small project I'm going to copy everything within this tablet and just reassign it a bit to the desktop So let's just select everything on the tablet then control out and the down arrow to duplicate that so here instead of tablet we're going to say desktop and the menwith here is 992 for the desktop then we need to

check what what changed here for the desktop then yeah we'll be done with this Project okay let's go to the desktop okay did the man will change uh yes it's not 384 so let's see 384 there did the height change the height doesn't change to the padding change no still 40 pixels which is 2.5 frame that didn't change the margin change yeah definitely that should have changed okay so top and bottom for the top and Bottom it's 174.50 1 74.5 / by 16 that's 10.91 okay and then for the left and right it's 528 divide

that by 16 that's 33 R okay that's done then did anything else change here let's just make sure that nothing else changed so the avat still 88 pixels by 88 pixels uh nothing Much changed there and for the name is still t p set one nothing changed for the location it's still T preset to bold nothing changed and for the bio the so takes preset to nothing changed the gaps Chang yeah okay that's uh 24 pixels of margin bottom for the location and that's still 4 pixels and that's still 24 pixels okay did this change

but that's Still 24 pixels as well I'm guessing the last part we need to Treon is the padding left and right for these links so for GitHub uh this time bought for 127.5 so 127.5 divided by 16 that's 70 no 7.97 7.97 7. 97 okay then for front and Mental that's 94.5 94.5 divid by 16 that's 5.91 5. 91 okay for LinkedIn 122.5 122.5 by 16 and that's 7. 66 7.66 Ram then for Twitter what do we have here with 127 as well so we did calculate 127 recently that's 7.94 7 94 okay and finally

for Instagram 1177 / by 16 that's 7.31 7.31 okay yeah let's go back to Google Chrome to see what we have okay now it looks exactly like the design Itself yeah this looks great this looks dope uh what we need to do now is to go back to figma let's make this wider a bit remember this Proto not Proto prototype uh page we need to play this prototype to see how the hover effect is taking shape okay lat load okay so yeah this is how it is that's all it is let's go back to the

design Okay go to other states there we go and let's float this to the side okay so let's just copy this part okay let's come to the bottom here just say profile card links hover okay I'm going to paste that in There okay we're going to add a transition here transition of all give this maybe 0.3 seconds and then is an out okay then we need to start styling these Focus visible okay then we need to go here let's See what's the color for the background that's green so background color of green then what's the

color it is gray 700 okay let's go back to the design and see what we have on Google Chrome so this is what we have which is exactly like what the design gave us okay Okay so we are done with this project uh we did the HTML we structured our page we did the CSS we designed our page we set variables we learned about the difference between pixels and RAM when to use pixels when to use Ram R uh we learned about minwidth and Max width and when to apply Them and we came up with

this lovely page so the next step we're going to do is um test if it's working for various devices so for desktop um this is working already and let's go inspect uh what I want you to do to test all the phones so the iPhone SE okay it works here uh iPhone XR it works iPhone 12 Pro Works uh iPhone 14 pro Max it works uh pixel 7 it works uh Samsung Galaxy S 8 plus it works uh s20 outra it works and finally uh the folding forms if it works on the the folding phones

it can work anywhere else okay and then the tablets iPad Mini it works you can see it's responsive to due to the padding we used in Ram and these are the valys we used in Ram okay then iPad Air it worked then iPad Pro Works then um yeah pretty much let's see how uh this Z okay Z book fold yeah it works so it works on all the devices and this is it this is the Social Links profile card which we all designed if you were able to get give yourself a pet at the back

um if you got any questions or any queries please drop them in the comment ments of this video um and we can chat about them um yeah this was an amazing tutorial was Nice sharing this with you guys and I look forward to more tutorials like this and um growing with you guys and you growing as well yeah so this is it you can actually customize it yourself put your name put your own City put your own bio and put your own image there and yeah you can put it on your your Instagram or your

LinkedIn or wherever you want to Put this Social Links profile so it's like you made your own link tree and you can customize it however you want yeah so this is it yeah once again thank you for coming and viewing this tutorial please uh like share and subscribe share it with other Junior developers or Junior frontend developers who might benefit from this and they can Watch the previous um tutorial and this one and they can learn a lot from it but yeah it was fantastic with you guys uh see you on the flip side cheers

and take