Figma to Html Css Javascript (and mobile optimized!)

hello and welcome to another tutorial in this one we are gonna learn how to translate pikmin designs into html css and javascript and also how to optimize that for mobile devices this is completely beginner-friendly tutorial so if you have a little bit of html css and javascript knowledge and you want to have some projects under your belt this is perfect for you i don't want to waste any of your time let me show you what is the design that we are going to be using in this project and let's start coding go with slova [Music] in case you want to find another design maybe for your other project you should check figma.com community here you can find plenty of designs and most of them are free you just need to open the design and click on get a copy some of them are not free obviously in this community i found the design that we are going to be using for today's project it's a book for landing page if you never use figma it's very simple on the left side you have the layers on the right side you have the properties in order to get the property for the component you just need to click on it in case you don't see the properties that you need for example if you are inspecting the text you need to make sure that you're clicking on the right element on the left side so if you click on a text here you have here text icon on the right side you have the properties that you that you have for a text like alignments so you have three tabs on the right side one is for the design the second one is for the prototype and the third one is the one that we are going to be using the most which is the inspect here you can see all the properties like like on the css and also you you get to copy the text so you don't have to type everything over and also you have the properties like the colors so it's very useful if you want to measure the distance between the elements all you have to do is you need to click on the element and hover over over the second element and you get the property and the distance between the elements inside of the pixels so if you want to export one of the things from this design like for example you want to export this image make sure you click on the image itself and you can go in the design and export and it's very simple like this so let's proceed and let's build our project first create the folder i will name book landing page once that is done open the code editor of your choice for me that is visual studio code this is the free code editor and it's really powerful create the first landing page the naming convention for landing pages air and main files for the html is to call it index.html we will have css and javascript file as well but let's create another folder for for them so name it assets and inside of the assets create new file name it style.css and let's add a file for javascript main.js this is a naming convention that i like to follow you don't have to use that except the fact that you should always be naming your main html file as index.html to generate the code inside of the index.html using vs code it's really easy you just have to start typing and you get these prefixes which is from emmett plugin you can install that inside of the extensions here just click on on that and voila you get generated html code i will set the word wrap property so that you can see when i shrink down the window here so what we have generated is the definition of the document type which is html we have the html tags and the set language to english we have the head tag and the body tag inside of the head tag we have these meta tags which we are not going to touch and then we have title so let's update that let's name it book landing page now let's open up the our index file and you can see we got the title of our page updated i will open them one next to each other okay now i can include couple of things that i need so if you want to include external assets or local assets you you do that here inside of your head tags so if you want to make your page consistent on different browsers you want to standardize the properties of different elements so what i usually like to do is i like to use to normalize the css there are a couple of ways to download this you can use npm to install it or you can directly download it and as it says it makes browser render all elements more consistently so just click on the download and link to this normalized css file is going to be in the description and you can copy paste this file now inside of the head let me make it bigger just add new link url is going to be stylesheet and for the href we're gonna paste the link that we just copied and close it this is self-closing tag now inside of our design as you can see here we're going to have some icons actually there's only one icon here but we will add two of them for hamburger menu because we are going to optimize this for mobile device the easiest way to use and to implement the icons is to use some kind of a font font icons in this case i will use fantasm to install the fantasm there are multiple ways you can install this manually or using cdn and for me the easiest way to install this is to use the cdn so scroll down and find where it says load all styles and what you can do is just copy over this link and just place this inside of your head tag like so apart from that let's include our main style.css around main.js file so add another link tag rel is going to be a stylesheet as well and source is going to be our assets folder install css for including the main.js file we could use two options if you have heavy content loading inside of the js file people usually include that before body closing tag so that the content which is being loaded inside of the body tag is not being blocked but in our case we don't have anything heavy he will be loading inside of our main.js file and it's not going to block content so we will so we will include it inside of the headset so add a script and source for the script is going to be assets dot main.js file and now we have included everything that we need inside of our project so we can close that and proceed to develop our page so let me show you what we are going to be building first let me close this font awesome and we can start with the header as you can see on this on this website we have on the left side like logo which is just text and this icon paper icon and on the right side we have the navigation so we can start with that on the content we will have this main content and we'll have this aside element and on the very bottom we will have just these two buttons it's very simple okay so we can open our index html file and we can create create our header tag so header and inside of the header let's add a h2 tag which is for title so this is for this element let's copy the text so make sure to to click on the text itself and you get the option here to copy it you have the icon copy copy and it says here copy to clipboard inside of the htu which will actually give a class so name it header underscore title i like to follow this naming convention where the header is the container and the title is the child so what we should do is we should give a class to header as well and inside of the title let's add a span and inside of this pan we will paste the text next to it let's add an icon and here we are using font ass icons so the naming convention for the phantasm version 5 is that you need to give fa prefix to all of the classes and for the font that we are going to be using here as you can see the desire left the comment so this one is paper plain fa solid paper plane but for this version we only need to include fa dash paper dash plane if we save it you can see that we got the icon there for our case we want to make the icon a little bit larger so add fa-lg which stands for large and let's add a custom class that we can use to style it and add a different color for example the yellow one add a class plain dot dash icon on the right side we have the navigation with the links these links can be external or internal depending on if you're building more pages to this website for now these are just going to be static and on this page they are going to be external link so add a nav element for navigation and let's add a class header underscore navigation inside of the header navigation let's add anchor tags and the links are going to be just pounds so that the links for now for the first one it's home then about books blog contact so let's add it home and let's copy paste five times home about books blog and i think it's contact yes contact okay and there you go there are two couple of elements that i want to add which we don't see on the design the first one is hamburger menu that we will be using on small devices and the close icon that we will use to close the nav menu once it's opened so add two additional i elements excuse me and add a class again we will use fa and for the hamburger menu we will use fa bars and let's add a custom class that we can use to additionally style it and let's call it menu icon icon stands for the icon this is like a shortcut and let's copy paste this one and for the second one instead of the fa bars let's call it fa times circle and let's add it custom icon it should be close icon okay if you refresh we can see that we added two additional icons which are going to be saved on the desktop okay now we can go and apply some styles here before we proceed i want to apply some some main styles actually to define the colors that we are going to be using across our web page so actually we only have two colors that we that we are going to be using the first one is the yellow color and the second one is this uh is this dark blue color which is going to be actually our primary color so i copied this over and what i want to use i want to use the the variables inside of the css the best convention is to define them inside of the root selector so it's applied to every single tag inside of your inside of your web page and how you define it is you will just name the first one as primary color and give it the property the second one let's call it accent accent color and let's give the value of this yellow let's scope it over to clipboard and just paste it here before we proceed to the header tag i want to include all the fonts that we have on our website so there are two fonts actually that we are going to be using if you inspect the category and make sure to click on the text so you can see that we we're using istock web font these fonts are free and you can download them on web i will include them inside of the repository but you can also google just google them and you can find and download them the second font that we're going to be using isd poppins font so as you as you can see here i already downloaded all these fonts and i will just copy them inside of the new folder but what you can do obviously you can download them from the repository that i will provide inside of the description of this video or you can just go and google the names of these fonts they're free inside of the assets folder let's add new folder for for the fonts let's name it font and i will just reveal that in file explorer here i will just paste the fonts that we just created now let's include them [Music] let's use font face property to include them and the fun family for the first one that would be i stock web for the url we placed it inside of the font and this one is going to be i stock web regular this is the regular one i will just copy this property and i will include the bold bold one and set the font weight to 700. actually i won't be using all the fonts that i downloaded on only two fonts for isaac web and two fonts for for poppings so let me paste it again the third font is going to be poppins with 2p and for the url let's add font slash poppins light and this one is going to use the font weight to 200 font weight of 200 and the last one is the font poppins or the bold one font is pop inspold and the font weight here is 700. with this we defined all the styles that we want before we start developing so we have the root with the colors that we are going to be using if you're developing more complex website you will have much much more colors or even color palettes and these are the fonts that you're going to be using to develop it so the first thing which i want to develop is actually to apply the styles is for the header so let me copy over this the class name the first thing is obviously we want this to be aligned so right now it's next to each other it's under each other and we want to be next to each other so the easiest way to achieve this result is to use the display flex and let me just see for some reason this is not working let me just make sure that it's included correctly and as you can see we can use the source attribute instead of the href so we should update that to href let me close the head tag and if we check the navigation we can place that inside of the h2 which is the title this should be on a separate on its own along with the icons so let me just remove that and move that from outside of the h2 text so make sure that the title is on its own and the navigation is on its own so if we save this and refresh we should see them next to each other okay we can proceed now now let's apply some styles to the header itself continue with applying so i want to spread them across so use the justify content space between let's add some padding on the top so let's see what are the properties so just click on the element and we can see that the distance is 81 pixels so padding top 81 pixels like so and let's add some maximum width so let's see we can click on the first element hold shift and click on the second one and this selects both of these elements and if we get the width of the entire of the entire container so what we can do is we can just set the max width to a thousand two hundred and thirty one so let's add a max with two thousand one thousand two thirty pixels okay and what i want to do i want to center it actually on this screen because it's small you cannot see it if i zoom out you can see that it's on the left side but we want to make it centered set the margin to 0 and auto and for the font let's use let's see what is the font select the text go to the inspect and you can see font is i stock web 700 but this is just a wrapper so let's just add font family to i stock i stock web and make sure that you have the single quotes okay please this is what i like to follow now let's add some styles to our title copy the copy here the class name first i want to reset this uh this title because if we inspect let me just open the debugger tools you can see that h2 has some default margin you can see here as well here it has some default margin so let's remove that so margin zero let me close this margin zero and i want to align the items inside of the h1 as well so let's use display flex display flex and align item center this is the easiest way to align the items okay you can see they are more aligned now okay now i want to apply some styles to the text itself so we placed the title inside of this pan so let's just target that or we can use header span like so and now let's add the font properties if i go and click font weight is 700 so this is bold font weight 700 okay font size let's see what is the font size font size is 40 pixels 40 pixels let's add some margin and distance between the icon and the text so let's inspect act okay as you can see it's 10 pixels so set the margin right to 10 pixels let me refresh okay and let's update the color here we're gonna use uh the dark one so it's the primary color to use it just use the var function and pass in the primary color okay [Music] and that gets updated now let's add some stylus to our icon here the class that we used is the plain ico which is a paper plane okay header plane i just want to give it different color okay so the color is going to be the accent one as you may inspect it here make sure to click on the paper plane and on the vector and you get this yellow color okay so make the color [Music] bar accent color save it and refresh it and that's it now what i want to do is i want to proceed on the right side and style this but before we proceed let's hide the icon so that they are not bothering us let's select the menu icon here header dot header menu icon and the other one is let me just copy text close icon and set them to display none okay that's much better now let's apply some style to head the navigation the class that we use is header underscore navigation so i like to copy things over so that i don't have the typos let's remove the decoration as you can see we don't have any just scroll on the right side you don't have any text decoration here which is used usually for links but you can add that for on hover maybe so you need to to target header a links and add a text decoration to to none okay we want to add some separation so let's measure the distance between them click click on the link and as you can see it's 29 so add margin left training nine pixels okay like so let's add a font size which is 36. we already set the font family on the entire header tag 36 pixels and let's set the color to the primary one color primary as you can see it's using this dark blue color which is the primary one okay let's save it let's refresh and that's it now let's apply some styles to header navigation as well i want to center it a little bit more so let's use display flex as well again and let's align items to center like so and let's set the height of this navigation how we can do that is just click on the nail bar and as you can see the height you can see here as well height is 52 pixels so this way this is going to be more aligned these two elements so height to 52 pixels like that and i think that sums it up and now we can proceed to the main area so the first section in the main area which we can build is the left side which is going to be an aside because it's easier and the faster to develop you we will only have the wrapper and the the circle icon the circle element actually and this image so let's do that open the index.html file and let's shrink down the header and add let's add a div let's name this div and give it a class of wrapper like so and like i said we will have a side on the left side and we'll have main on the right side inside of the aside we'll have a div with a class of book and inside of the book you'll have that circle so let's add a class book underscore circle inside of that let's place an image with a book itself let's add a source and let's add an alt attribute for screen readers don't forget that i will just name the book and the image is self-closing tag for the source we need first to download the book itself so like we showed previously in order to download the asset you just need to click on it make sure that it's clicked on the correct asset go to design and go and export as you can see it's already downloaded i will open that up inside of the downloads folder cut that up close the downloads and inside of the sorry inside of the code editor create new folder and let's name it images and i will just reveal that in the file explorer and paste that in i will also rename it so it's more human readable let's name it a book dot png okay let me close the header again and we can use the source as assets images book.png [Music] okay if i refresh we can see that the image is loading correctly now let's apply some styles to it okay open up first what i want to do is i want to apply some styles to the wrapper this is the main wrapper and we want to separate the width on the side and the main content to 50 so let's set the display to flex this is the easiest way at least for me to do so now for the other side let's we want to add a width of 50 percent wrapper aside at a width of 50 percent and now it will only take the 50 of the page itself so you cannot see it right now but if you go to the wrapper in the book you can see here okay now let's add some separation between the title and this book so let me go and measure this if you click on the circle and we need to be in the inspect mode you see it's 46 pixels so let's add margin top 46. and let's add a position relative why because the circle is going to be positioned absolutely so we need to set the aside container to be relative so it's not overflowing or going outside of it okay now let's add some properties to the site itself oh no actually we add the property to the side but to to book.circle okay okay so let's create a circle now let's see the dimensions of it you can see that the width and height are 785 pixel pixels we can copy it this is a good thing about the figma we get some stars already predefined we want to set the background to our accent color so background color bar accents color okay let's see what we got and we want to make this as a circle so set the border radius to 50 okay like so now let's position it differently so we will be using position absolute absolute and set the right let's just see what is the distance between them between the two items so click on the left side and just hover over the right side it's 84 pixels so set the right to 84 pixels okay and in order to center the book here let's add a display flex property reflex okay and justify content to and align items to center okay this way we can align the hook like so okay let me just zoom out a little bit so that you can see and later on we will style style it more on the smaller devices the next thing that i want to do is when you're applying position absolute to some of the elements if you want their wrapper or the root element container to have the same size you need to apply it the height to it as you can see the book the book circle has this height of 785 pixels but the book itself it doesn't because it's being positioned absolute so what we can do in order to avoid the mess in our layout we can just apply these styles to our book wrapper as well so targeted book at a height of 785 pixels and let's add some margin on the bottom margin bottom let's add 55 pixels so this is in order to get some separation on the bottom once we start scrolling yes now we can proceed on the main side let me open up the index let me close or shrink the aside and now inside of the main file we can start coding okay let me switch over the right side here we have the title and we have the description on the bottom okay so for the title itself let's add an h1 tag okay let me click on it and let me copy the text like so so inside of the main tag add h1 and just paste in make sure to format the text correctly here we didn't have the space after the comma so sometimes it's not going to be pixel perfect with the text uh depending on how designer created but you can see that designer here manually has uh has been creating the break lines because free should be should be available to be placed here but yeah i will just leave it as it is on default below the h1 let's add a paragraph and let's just copy the text from the paragraph [Music] here and below that we want to add the buttons so let's create new div add a class of buttons now let me add a class of buttons and let me add two buttons here the first one is going to have text buy now okay let me copy that and the second one has text read more here let me click on the correct layer and just copy the text like so and let's add some classes so do if we can style them directly first one button dash by underscore actually by dash now and the second one class button buttons if we want to follow the same naming convention then the container is buttons here and by now on the second one it's buttons read dash more okay like so and now we can style it style this okay so the first thing which we want to do is let's apply the same the similar settings to domain as we did on the wrapper okay so let's target d main [Music] and let's add a width to 50 so it's only taking the half of the page 50 like so let me zoom in a little bit okay now let's add some margin in between these two so as you can see there is much much more separation and here is 91 pixels so let's add margin top 91 pixels okay and let's add a max with let's see what is the maximum width it's five five six so the content is not going more than five five six actually it's five seven one here for the buttons so let's use that one max width with 571 pixels okay in case let me just repeat in case you want to select two elements you just hold shift and you get the entire size of these two elements in the container okay let's save that up and now we get the exact measurement okay in case you want to align these two so as you can see in the design we have these two aligned so we can add some margin to the header so let's find the header navigation here and let's add a little bit of margin on the right side so margin right five pixels like so actually i think we will need much more so let's add like 20 pixels i think this is too much what we can do is we can use the ruler and you can actually see what is the required here so you can set the values so i'm using the ruler extension and you can check whether it's aligned or not so you can be really uh really precise with your measurements so let's see to 10 pixels and you can just measure again and you can see the 10 pixels is the correct amount so in case you're wondering what is the designer what is the tool that i'm using it's designer tools here yeah that's the name of the extension so you can click on it and you can see this is the site of this extension so this is the person who created this ruler very helpful tool okay let's proceed with the main so now i want to apply some styles to our header let's see what is the color of it main h1 and the color should be the primary one so if you click on the layer of the text the actual color should be yes the primary one okay so set the color to the primary from from our color scheme so far dash dash primary color okay set the font size here so let me just check in the figma the font size is 48 pixels and we can copy the font weight as well just remove this and let me paste the font weight to 700 and font size to 48 pixels like so we want to change the font family so set the font family to pop-ins pop-ins okay like that and let's let's remove the margin on the top so as you can see again here h1 tag has some pre-default margins and let's remove it so on the ma on the very top margin top set margin top zero and on the bottom let's measure what is the distance as you can see it's 14 pixels margin bottom 14 pixels if you refresh it should look much more as on the design so the next one is the paragraph below it main p okay let's first set the font size let me click on the text and the font size here is 20 pixels one size 20 pixels okay fun family is the same poppings i can copy this setting okay font fade you can see the font fade is 275 which is unstandard we'll just use 200 200 okay that looks good and we want to set the margin bottom let's say margin bottom let's see what is separation from the description actually you can see that designer hasn't created the exactly exact container for these two elements and you cannot measure the distance between the text and the buttons so we will just use the random value here what you can do is you can use maybe the ruler to measure this out but i will just use the random value here so margin bottom let's call it let's add 50 pixels here okay and let me see the we forgot the color of the text for the bottom one and actually the color of this text is black one so let's add a color black like so this is great now what we can do is we want to add some stars to our buttons right so the class is called the buttons dot buttons i want to align them uh i want to align them obviously as here so i want to add some space so there are a couple ways you can do this what i like to use is i like to use the display flags and then just to separate them to the edges of the wrapper so that's why i use display flex and justify content space between them space between okay and let's add some margin on the bottom so that we give space once we start scrolling and we are on the mobile devices so let's add 20 pixels okay as you can see they are now separated it doesn't look like on the design but then they might they must be much bigger but you can see that they're on the edges of their containers so let's tile the buttons now so but buttons underscore the first one is buy now if you want to buy the book the buy now okay and let's add the background color this one uses the accent color as you can see the yellow one so let's add a background color to accent color okay and let's set the word you can go to the view actually let me just show you you can go to sorry once again you can go to view and word wrap so that you need to so you don't have to scroll around buttons by now okay we set that now let's set the font size font size make sure to click on the text itself font size is 32 pixels 32 pixels and fun family fun family is poppins here okay we can copy it if you define it as this name so on the definition of the fonts you can use whatever you like here as long as you include the url but i named it exactly the same as this on figma design so it's much easier you can just copy the rule over the font is for families pop-ins the font weight is i believe is bold yeah it's 700 700 and let's add the color which is dark and that's primary color okay let's see let's look much much better but we want to remove this outline and also we want to make them a circle and much bigger so these styles are going to be the same for both of these buttons so let's add that let's have buttons and let's target button so let's remove the border or the none and let's add some border radius let's see what is the border radius here if we click on the button itself we can find the board radius on the bottom which says 50 pixels i can copy that and paste and now we can see that we have this border radius like so but what we want to do is we want to add some padding so it's much bigger if you click on the text we can hover over and see what is the distance on top it's 16 and the bottom and on the right side is 47 and on the left side is 47 as well so 16 47 let's add padding padding 16 on the bottom and top and 47 on the left on the right side if we save this we get the buttons like on the design okay let's now proceed with the second button the name should be buttons underscore read dash more okay here the background color is going to be the primary one you can tell that by the eye primary color okay let's set the font size select the text and the font size is 32 pixels font size is 32 pixels and the font weight is bold as well it's 700 okay like so we can see that the color of the text is not readable because here it's white and the font family is different so fun family should be poppins as well and the color should be white and now we get the final look of the button and with this this sums up our website so basically this webpage is completely done it's very simple but yeah very effective the next thing which we want to do is as you can see this is the final look it looks exactly the same except the fact that there are some differences in the text break but i like to leave them as default you can achieve the same result as on the design using the break tags but that's not something that i want to do so this looks great for me what we want to do next is we want to optimize this for mobile devices and for the tablets so if i turn on if i open up the developer tools and if i turn on this device toolbar you can select the devices that you want to target for and let's say we want to use this tablet let me refresh this and we can start developing here so i will apply the same style for the mobiles and the tablets we can go more into details and optimize for every specific device but i'm not going to do that i'm just going to apply some general rules which will fix our website and make it make it look good on most of the devices so actually what i can do here is i can use some bigger resolution okay like so let me refresh and let's start the first thing which we want to want to do is obviously the the header part let me just restart it again okay so let's use the media queries me media and let's start the screen and set the max width to to 1400 pixels okay so these rules that we're gonna apply here are going to be applied to all the screens that have less than 1400 pixels this is the break point where it starts to break down and where it starts to lose the content as we can see here first let's target the header and let's reduce the width of it so that we have some padding on the left and the right side this this is one of the ways of doing so so with 90 and let's reduce the padding on the top here we had like 91 or something so let's add padding top 20 pixels on smaller devices the space is much more valuable so that's why you want to reduce the paddings reduce the margins reduce the fonts and yes you want to save more space because these devices are smaller now let's add some style to head navigation so let me wrap this and copy the the class name so what we want to do with navigation here it starts to break down so what i want to do is i want to give it absolute positioning and make it to take the entire screen and we can toggle it on the button hamburger manual and close it excuse me so let's position it absolutely like so let's add a background color to the primary one okay uh let's position it on the top zero and left zero and let's add it to be the full width and the full height so width 100 percent and the height 100 so let's see how this looks height 100 and as you can see it takes the full bit and height but you cannot see it because uh actually let me just see one second uh we actually need to okay this is good let me just see we just need to apply the z index to one so it's on top of every element out there like so but the background color for some reason is not working so let me see the reason for that is that we're using just primary we don't have that color defined we need primary color and now it's going to apply yes the background color what the reason why we can see the text is because the text is the same color as the background so let's fix that uh let's use the heads navigation as well again and target the anchor tags and the color let's add the color to the accent one accent color and we can seam that now okay now let's uh what i want to do here is i want to display them as as a block element so one below the other to do that we will first need to add a display block property here because on on the top you're using display flags so use the display display block here and now we can see that the display flex rows are not not being applied and here we also want to apply display block okay the next thing is we want to align it to center text align center and let's add some margin so let's add margin 20 pixels on top and the bottom and on the left on the right side remove the margin so it's nice and centered that looks nice now we want to hide this because this is going to be opened only when we click on the hamburger menu so apply the rule display none to have the navigation like so and we'll lose this one okay so what we want to display instead is the header dot menu icon okay and set it to display block like so here now let's apply some styles there let's increase it so in order to increase the icons with font awesome you just increase the font size so use the font size to 30 pixels it's much bigger now and in order to change the color of it you change the color as regular as any other font so use the color and we will use far the primary color okay and set the line height to 45 pixels so it's more centered like so and set the cursor to pointer in case you're using a laptop okay so that you know that you need to click on it in order to something happen later we will use javascript in order to toggle these uh styles okay and now the thing that i forgot is once we open up the header navigation so let's say display block we need to have an icon here to close the menu so let's display the close icon header close icon okay set to display 2 block this will actually have this paint on as well at the beginning and it will only show when we open the uh the menu let me just see if display block uh the reason why we don't see this is because it's hidden so let's use z index 1 and now we can see it it's very small so let's increase it set the font size again to 30 pixels okay let's position it absolute position absolute and set the top to 20 pixels and the right position to 20 pixels as well okay now it's nice and aligned and set the color to our accent color okay and this is the look that i wanted you can also add a cursor pointer if you want i like that little touch and this is going to be hidden as well for now so added property display none and for the head navigation as well this way now okay cool now we can proceed uh with our main wrapper area so now we want to display them one on top of each other so let's remove or actually add a flex direction so target the wrapper and add a flex direction to b column okay and now you can see they're on top of each other but we just want to align them to the center so use the online items center okay and they're more centered obviously there are some rules that we need to reset in order to make everything completely centered but this looks much much much more closer to the look that we want to achieve so let's start with applying some default rules so target the main and the aside the wrapper side you could also use the wrapper minion as well for the main and let's let's set the width to 90 in this case i'm using the same with the navigation setting the 90 means that we have the 10 separation on both sides let's set the max width of the element to 100 so it doesn't go over over those boundaries of the element and let's add some margin on top actually we do have margin of both of these elements but it's it's less than 20 pixel the value that i'm going to be setting right now 20 pixels as you can see now the distance is much smaller here and there because like i said on the smaller devices the space matters much much more so always try to reduce the font sizes and the spaces that you have it's going to be much more valuable and the user has to scroll much less so let's reduce uh the width of the image so book of the circle actually book circle uh or actually let's set first the image itself so set the max with 250 pixels okay let's see like so and let's target the book circle as well first set the position you'd be the initial one so we're removing the absolute positioning set the max width to be much much less so let's say 300 pixels and we get this weird shape because the height is not the 300 which needs to be exactly in proportion with the height and the width so let's say the max height to 300 pixels and set the width to be 100 of this container and this is much better now we want to center this so set the margin to zero and auto okay and the reason why we get this separation is because we set the height to the book element as well which is the wrapper of our book circle so target the book and set the height to be also 300 pixels okay let's refresh and there you go also let's reduce the bottom margin to zero so there is less separation that looks good now let's reduce the font size of the uh of the h1 title so set the font size to 24 pixels and reduce the size of the paragraphs or actually one paragraph that we have so main p font size 16. okay let's see much much better and now we want to reduce the size of these buttons so let's target the the name is buttons read by now and first one is by now and the second one is read more yes and let's add a font size to 16 pixels which is much less and we can even reduce it further down so if you go to let's say to mobile device you can see that they need to be smaller so we don't have this overlaps so what we can do is we can use the buttons button the same class that we used before and just set the padding to 16 let's say 16 pixels and 35 pixels this is on top and the bottom this is on the left and the right side if we refresh there you go so this looks much better the last thing which we want to do if you want to apply some a javascript in order to open the navigation and to close the navigation so inside of our main js file let's create a function which will do just that so now we can enlarge our our visual studio code because we're working on the small screen here and let's add a function function and call it toggle menu okay this toggle menu function will display will receive a display state property and we will use this property to to alter the navigation and the icon so first let's go and add some some divs actually some ids to our elements that we are going to be altering so add a div to actually add an id to get a navigation let's name it header underscore navigation and let's add an id to the icon as well so id equals to close echo like so now we can easily get these elements in the javascript so first one is the navigation const now for navigation equals document dot get element by id and we named it head now underscore navigation let me set the view to the word wrap as well okay and the second element is the close icon so cost close icon equals document dot get element by id and we name it i think it's close icon yeah close icon like so copy it over here and now we can alter the states of these two elements so set to map style display to this display state that we are using so we will pass these values from the html itself so to the display state and we will use the same for the close icon like so okay now we will call this method from from the menu icon so once we click on it the on click event and call the toggle menu and once we click on the menu icon we want to display state to be blocked use the single quotes okay let's try that out if i refresh the page and i click on the hamburger menu we set the display block style to the header navigation and for the close icon if i click on the close icon nothing happens because we haven't applied click event here so let's add that so on click toggle menu call this toggle menu function and let's add a style display none let's refresh open the open the navigation menu and close the navigation menu and with this we have completed our website as you can see it's a very simple but yet very effective website we created all these things according to the design from figma and also we optimized this for mobile devices we added a little bit of javascript in order to make this website a little bit more dynamic and so it's more optimized for touch screens and smaller screens and that's it i hope you guys learned a couple of things here and there and these principles you can apply to much more complex user interfaces and learn what you want to proceed more well that's all for this video and thanks for stopping by and don't forget to subscribe code with sloba [Music] thank you for watching the entire video to see more videos like this click here [Music]

Channel: Code with Sloba

Views: 31,555

Keywords: figma to html css javascript, how to translate figma, how to translate figma to code, figma design to website, how to convert figma design to html and css, figma to html and css export, translate design into html and css, how to optimize figma design for mobile screens, figma design for mobile devices, ui ux design to html and css, make figma design dynamic with javascript, figma, html, html and css tutorial for beginners, javascript, javascript tutorial for beginners, css tutorial

Id: AAXYX4LH6Bc

Length: 66min 15sec (3975 seconds)

Published: Wed Aug 10 2022