hi guys this is avinash and you are welcome to another video today in this video we will create this personal portfolio website or resume a website using html css and javascript on this header section you can see this logo and this navigation menu with beautiful hover effect then we have this text and this image in the background if i scroll you can see there's one parallax effect here the background image is fixed and the another section is coming over it so it looks good now in the second section you can see the image of the users and then we have the text and then we have three tabs in the first we can see the skills over here then if i click on the second tab link which is experience if i click here it will display the work experience of the user and if i click on education it will display the education of the user so this tab is also looking good then let's call this website again in the next section you can see my services here also you can see this hover effect if i take cursor the background color is changing and it is moving up by some pixels and lets us call then we have the my work or portfolio section here you can see beautiful however effect when i take cursor the background image gets zoom in and then we have these text coming from the bottom and this external link then we have this button with over effect and then we can see the contact information like email id phone number social media icons then download button where you can download any file if i click here you can see it will start downloading the attached file here i have attached the pdf file so it will start downloading this one then we have this contact form here at the bottom you can see this copyright message made with love by easy tutorials and in this context form if user will enter any data you will receive the contact information on your google sheet let's try this one if i come to my google seat you can see right now it is blank we have the fields name email and message let's come back to the form here also you can see name email and message let's write anything here if i will write avinash then email id and write any message here just a test message so we have added the name email id and message and if i click on the submit button you can see we will get the success message here message sent successfully and it will disappear after five seconds and the form get reset let's check our google seat you can see we got the information here name email id and message so this is how you can receive this contact form information on your google sheet if i click here on this about it will just call the website to the about section if i click on this portfolio it will scroll the website to the portfolio section and if i click on the contact it will scroll the website to the contact section let me open this website in smaller screen here you can see this website is completely responsive for a smaller screen also this is how it will look on your mobile devices if i click on this menu icon it will open the menu from right side and let's click here on this cross icon it will close this side menu so it is very good now let's scroll this one you can see we have the other sections here which is also perfect in a smaller screen so we will make this website completely responsive for a smaller screen we will create this portfolio website using html css and javascript if you are beginner you can start with this video also but i will recommend you to at least watch my html and css beginners tutorial first where i have explained all the html and css properties in detail i will provide that html css beginners tutorial link in the description after learning the basic html tags and css properties you can start with this video so now let's start making this personal portfolio website step by step here i have created one folder and in this folder you can see i have another folder called images and in this one you can see some images that i will be using on the website you can find all these images download link in the video description so just download these images from the link given in the description and start building your own portfolio website along with this video now let me open this folder with my code editor which is visual studio code you can use any code editor here in this left side you can see this images folder and these images here we have these icons to create a new file just click here and create a new file or you can click here on files select new text file click here and now save this file file and save save this file in the folder that you have created in this one i will write the file name index.html so this is the html file here we will add the basic html structures so let's quickly add this here we have the html open and closing tag then head after that body open and closing tag in this head we have this meta and this title let's create another file again go to files new and save this file i will save it as style dot css and in this one let's add star margin 0 padding 0 then font family and box sizing next we have to connect the css file with the html file so in this html file before closing of this head tag here we will add link rel style sheet hdf and in this hr write the file name of the css file which is style.css so it will connect the html and css file here in this title we can write our website title so let me add personal portfolio website easy tutorials here you can see we have the body tag so for this body tag we will add some css so let's come back to the css here we will add body and let's add the background the background will be dark for this website so here we are adding one color code for the dark color and then right color it will be white that will be the text color after adding this let's come back to the folder and in this folder here you can see the html file and css file that we have just created using visual studio code so let me open this html file with any web browser you can right click on the file and select open with your browser i will select google chrome so you can see this dark color because we have added dark background for the body now let me close this browser and there is an another option to open this browser let's come back to the visual studio code and in this visual studio code i have added one extension called live server you can see in this extension list i have live server installed in this visual studio code so now i can open this web page with the live server right click and select open with live server so it will refresh the website automatically whenever we will add any changes in the code file and the save the code file so you can see the same web page but the url has been changed that's it so now let's come back to the html file so in this body let's add one div and we will add one id for this div which is header like this now in this header we have to add the background image so write this header over here with the hashtag because it is an id so in this header we will add the width and height after that we have to add the background so here let's add the background image url and in this url i have to add the file path of the image so you can see the image is in the images folder and the file name is dot png so here we will add images which is the folder name slash file name which is background dot png then we will add background size and background position after adding this let's refresh our website again so you can see this image in the background of this webpage next we have to create the navigation bar where we will add the logo and some menu so let's come back and in this header first we will add one another div with the class name container so for this container we will add some padding after that we will add nav tag and in the snap there will be one logo so write img tag to add one image file path of the logo images slash logo and we will add the class name also it is logo after that we have to add the list of menu so we will add ul and li for unordered list in this li we will add a tag so that it will be a clickable link and write the link text it is home just duplicate it and change the link text so let me add the another link text let's come back to the webpage again here you can see this logo and this link in the top left corner now we need some space from the left side so let's come back and first we will add the css for this container write it here in this css file so in this container we will add some padding it will be 10 pixel from top and bottom and 10 from the left side and right side so you can see we have some space in the left side and 10 pixel space from top next we will add the css for the nav tag where we have added the image for the logo and these menu link let's come back and here you can see we have the nav tag so let's copy this one write it here in this css file so in this snap we will add display flex so the image and links will be side by side align items will be center and justify content it will be space between and flex wrap will be flap now you can see this logo image in the left side and these menu links on the right side still we have to change the size for this logo and then we will change the alignment for these menu links and we will change the color so let's come back and here you can see we have added the class name logo so we will add the css for this logo write it here and here we will add the width for this logo it will be 140 pixel and after that we have the link text in ul li and a so first we will add nav ul and li so for this li we have to add the display so write display block so it will be horizontally aligned laser style will be none and after that we will add margin so we will get some space between all the links it will be 10 pixel from top and bottom and 20 pixels from left and right side now you can see these links are horizontally aligned next we have to remove this underline and we will add the white color so let's come back and here we will add the same thing then write a so for this a tag we will change the color it will be white then remove the text decoration it will be none so it will remove the underline now we will add the font size it will be 18 pixel so these menu links looks good home about services portfolio and contact next we have to add the hover effect on these links for that let's come back and here we will add this one then write double colon after in this one we will add content content will be empty then we have to add the width width will be 100 then we will add the height 3 pixel and background in this background we will add one color code after that position position will be absolute left it will be 0 and bottom minus 6 pixel and here we are adding position absolute so in this a we will add position relative after adding this let's refresh the website again now you can see this colored line in all the menu links so we have to hide this line and it will be visible whenever we will take cursor over any menu link for that let's come back and here you can see we have added the width 100 so we will make it zero so it will be hidden now we have to enable this line whenever we will take cursor for that let's copy this one write it here then write hover and double colon after like this and here we will add the width hundred percent so whenever width will be 100 it will be visible and in this after we have to add the transition so it will be 0.5 seconds after adding this again come back to the website and here you can see if i take cursor this colored line is coming at the bottom of each menu links so this animated hover effect looks good next we have to add some text and title on this screen so let's come back in this html file after closing of the snap tag we will add another div with the class name header text now we will add one small text in p tag then we will add another text in h1 that will be the main title after adding this text let's refresh the website again here you can see this a small text and this large text now we have to change its position and we will change the font size also so let's come back and copy this class name header text write it here in this header text we will add the css properties so first we will add some space from the top so margin top it will be 20 then we will change the font size it will be 30 pixels next copy this one then write h1 because we have another text in h1 so here we will add the font size it will be very large 60 pixel and some margin from the top 20 pixel so this text is very long so we have to add one line break over here so let's come back in this html file and after this text we will add br to change the line so it will add a line break here and for this cave in we will add the color so here we will add span open and closing tag span open tag here and close it after this text like this so you can see this text in two lines let's come back to the css and copy this one then write span and write the color this one so you can see this color in this text so we have completed the header section of this personal portfolio website now we will create the about section to create the about section let's come back to the html file and this header section is closing here so here we will add another div with the id about div id about in this one again we will add one div with the class name container and within this container we have to create two columns for that we will add one div with the class name row and in this row we will create two columns so first we will add one div with the class name about call 1 which is for the first column so this is the first column let's duplicate it and write about call 2 that will be the second column so in the left column we will add the image and in the right column we will add some text so we will add one image in the first one so here we will add one image with the img tag images slash file name which is user.png that's it and in the right side we have to add one title so let's add one title in h1 tag and this will be the text about me like this after adding this again refresh the website you can see this image and this text below this image so we have to align this side by side this image will be in the left side and this about me text in the right side so let's come back let me add one comment here so it will be easy to read this code here we will add about come back to the css file here also we will add one comment about so here we have to add the css for the about section so let me come back to the html file and here you can see we have added the id about so let's copy this one and paste it here with the hashtag let's add some padding it will be 80 pixel from top and bottom and 0 from left and right then we will add the color here we will add different color for the text so you can see some space above this image and below this text and the text color is also changed let's come back and here we have the class name called row write this class name here dot row and here we will add display display will be flex so we will get the contents side by side justify content space between and flex wrap trap so you can see this image left side and this text in the right side now we have to decide the width for the first column and the second column so let's come back and here you can see we have the class name for the column about call 1 and about call 2 write this class name in the css file so for the first column we will add flex basis 35 it means the width of the column will be 35 and in this one we have the image also so write the same class name then img so in this image we will add the width it will be 100 then border radius for the image it will be 15 pixel so the corner of the image will be round so you can see the perfect size for this user's image and the corners of this image is round now we have to fix the width of the right column so again write this class name and change the class name it is column two so for the second column flex basis will be sixty percent so you can see in the first column we have added the width of 35 percent and in the second one width of 60 percent so we will get the five percent a space between both the column you can see the second column is starting from here and we have some space between the first and second column now we have to change the font size and color for this text so let's come back and here in this h1 we will add a class name so we will add a class name subtitle and copy this class name subtitle write it here for this subtitle we will add the font size it will be 60 pixel then font weight 600 and color will be white so you can see increased font size for this text after that we have to add some description in the second column so let's come back to the html file and here after this h1 we will add a text in p tag we have added this text using p tag you can see this text on the web page next we have to add three tabs and in each tabs we will add different content here we will add three tabs in the first one we will display the skills and in the second one we will display the experience which is work experience and in the third one we will display the information about the education so to create the tabs let's come back to the html file and after closing of this p tag here we will add one div with the class name tab titles and in this tab titles there will be three title so let's add one p tag and in this p tag we will add the title skills like this and with this p we will add a class name so let's add the class name of tab links like this and let's duplicate it here we will add another title which is experience and in the third one education you can see it is like this skills experience and education now we have to align it so let's come back and copy this class name tab titles write it here in the css file for this tab titles we will add display display will be flex then margin it will be 20 pixel from top zero from left and right and 40 pixel from the bottom and in this one we have the class name called tab links for the individual type title so write this class name tab links here we need some space from the right side margin right it will be 50 pixel then we will add font size it will be 18 pixel then increase the font weight cursor will be pointed and we will add the position relative so you can see it is horizontally aligned we have the bold font weight and we have some space between each tab links or tab title next we have to add one underline in the first one and it will be visible in other also whenever we will click on any one so for that let's come back and here we will add this tab links double colon after here also we will add content empty width it will be 0 and height 3 pixel as we have added in the navigation menu then background this color code position will be absolute left will be 0 and bottom minus 8 pixel then transition 0.5 seconds so right now it is zero so it will be hidden and now we have to add the width hundred percent so this will be hundred percent on the first one so in this first link we will add one more class name so let's add one space after this tab links just add one space and here we will add a class name active link we have added this class name active link let's copy this one come back to the css file here we will add dot tab links dot active link there will be no space between these text and here we will add double colon after and just add width 50 so it will be visible in which one we have the class name called active link so you can see it is in the first one because in the first title we have added the active links class name and it is hidden in the second one and third one now we have designed this tab title next we will display the tab contents so let's come back to the html file after closing of this div which is for the tab titles here we will add another div with the class name tab contents in this one we have to add the list so here let's add ul li and in this li we will add one title in a span tag it will be ui ux and after this suspend we will add vr to add a line break like this here and after that we will add another text designing web app interfaces so this is the first skill let's duplicate it and here we will change the title so here we have added three different list let's come back to the website you can see this list here under this skill to design this one let's come back to the html file copy this class name tab contents write it here and here we will add ul and li list style it will be none then we will add the margin it will be 10 pixel from top and bottom and left right zero in this li we have added this pan tag so for that s pen we have to add the color so write a span and we will add the color then we will decrease the font size also font size will be 14 pixel so this looks good let me change this color here we will add another color code now it is looking good next we have to add the content for the experience and education so let's come back in this html file and duplicate this tab contents here it is just duplicate this one and replace these contents now i have replaced these text in the experience and education so let's refresh the website and here you can see this is for the skills this is for the experience and this is for the education but right now all these contents are displaying at a time so we have to hide the experience and education it will be feasible whenever we will click on this one so let's come back and come to this css file here we will add this class name tab contents then we will add display none so it will hide all the tab contents you can see all the contents are hidden so we have to display the first one which is for the skills so let's come back and in this html file in this first one which is type contents for the skills here we will add one more class name so after tab contents class name let's add one space and here we will add active tab like this now just copy this one come back to the css file here we will add dot tab contents dot active tab there will be no space here we have to add display let's add the display block so it will be visible now you can see the first one is visible here and the other experience and education is hidden next we have to add the click feature whenever we will click on experience it should display the experience and when we click on the education it should display the education so for that let's come back and come back to the html file here in this tab links we will add one on click events so in the first one here we will add on click equal to write a function called open tab and within this we will add one name so it will be in signal quote skills just copy it and add it in the another one add it here and here we will change it will be for the experience and this one for education so after adding this in this content also we will add one id so in the first one let's add one id called skills it should be same here we have added skills and also we are adding skills it should be in the same upper and lower case now copy this one experience add it here in the second one id experience and copy this education edit here in this third content id education like this after adding this let's come back to the bottom just above this closing body tag we will add a script tag script open and closing tag in this one we can add the javascript so here we will add one variable where right tab links equal to document dot get elements by class name and in this class name we will add tab links because we have added the class name here tab links now we have the class name called tab contents so here also we will add another line duplicate this one and write tab contents like this one and in this one we will add tab contents like this now let's come to the tab and here you can see we have added on click and this function open tabs so let's define this function open tab come back here write function open tab in this open tab it will receive one argument so here we will add any name let's add tab name like this so whenever we will click on any tab link suppose if i click on skills it should hide this one and it should also hide this underline for that let's come back and write this for loop for tablings right tab link only tab link of tab links then tab link dot class list dot remove what it will remove it will remove the active class name you can see we have added the active link in the first one so let's copy this one paste it here it will remove this class name for all the tab links now again duplicate this one here we will add this tab contents tab contents remove s tab content only and here also tab content and this one another class name active tab like this so after adding this let's come back to the website and you can see if i click on this skills it is removing the description which is the content and it is also removing this underline let me refresh the website and if i click on another one it is doing the same thing let's click on the third one it is hiding all the content and underline next we have to display the title of education if i click on education and if i click on experience it should display the experience content so let's come back here we will add event dot current target dot class list dot add and it will add this one active link so it will add the active link and it will display the color so let's check this one if i click here you can see the active color here if i click here it is displaying the active color here so this color is working next we have to display the content so let's come back here we will add document dot get element by id and in this id we will add this tab name so if we will click on this education it will send this education here in this tab name and it will search by document dot get element by education dot class list dot add and what it will add it will add that active tab that's it now again refresh the website you can see if i click on experience it is displaying the experience here and if i click on education it is displaying the education content here now we have completed the about section of our personal portfolio website next we will design the services section so let's come back to the html file this about div is closing here so after this div let's add one comment services then we will create a div with the id services in this one again we will add one dip with the class name container and here we need one title so let's come back here in this about section here i have added one title with the class name subtitle so let's copy this one and add it here in this services and we will change the text here so it will be my services after this title we will add list of services in three columns so here we will add a div with the class name services list and in this one we will add multiple services so first we will add some css for the class name and id that we have created right now so let's come back to the web page right now and here you can see this text at the bottom so now we will come back and here we have the services id so let's copy this one and come back to the css file first we will add one comment here and let's add this id with the hashtag services so for this one we will add some padding it will be 30 pixel and 0. 30 pixels from top and bottom and left right 0 after that we have added this services list so let's copy this one and write it here in the css file with a dot because it is a class name so here we will add display grid and grid template columns it will be repeat autofit comma min max 250 pixel comma one fraction fr then we will add the grid gap i have dedicated video about grid you can find that link in the description greased gap will be 40 pixel and some space from the top so let's add margin top 50 pixel so we have added great layout in this one now we will add any div inside this services list that will be displaying as a grid so here we will add one div there is no class name or id simply we are adding div open and closing tag and in this one we will add the services title and description so let's add one service title then we will add one description in p tag so this is the description for the first service and after that there will be one link for learn more so let's add one a tag and the link text will be learn more let's duplicate this one and here we will change the title now change the title in the third one after that let's refresh the web page and here you can see these services in three columns next we have to add one icon also to add any icon we will come to the website called fontawesome.com on this website you have to create an account it will be for free then go to kits and click here then you will get this type of script it will be for one line of script that you have to add in your html file let me come back to the html file and add it just before this closing head tag so i have added this font or some kit script here you just add your own script so let's come back and again come to this website and click on icons here in this search box you can search for any icon that you want to use on your website so let me search for code let's click here click on this code it will be copied so let's come back and add it here where you want to display the icon so we will display this icon in this first service just above this title so here let's add a space and add this one line of html code so we have added one icon let's come back and we will search for another icon so here we will search for another icon called crop let me use this one click here and paste it here now we will search for another icon here we will search for app let's click this one copy this one and paste it here in this third service after adding all the three icons let's come back to the website again here you can see these icons just above the service title next we have to add some css to design this layout so we will come back to the html file and you can see we have added services list and in this one we have the div so come back to the css file again write this class name services list and div so for all the individual services we will add the background write this color code then we will add some space inside this box so we will add padding of 40 pixel then let's change the font size and font weight now we will add the border radius so that the corners will be round you can see we have this gray color of box for all the services next we have to change the size for this icon so let's come back and here you can see we have these icons with the tag i so let's come back to the css file here we will add the same thing services list div and then write i for the icon in this one we have to increase the font size it will be 50 pixel then some space at the bottom so you can see the increased size for the icon next we will add the css for the title we will increase the font size for this title and we will also decorate these links which is learn more so let's come back again copy this one then write s2 because we have added the services title in h2 tag so font size will be 30 pixel then font weight it will be 500 and margin at the bottom after that we will decorate the link so again write this then write a and for this link we will add text decoration none color will be white color then font size it will be 12 pixel very small and margin from the top display will be inline block after adding this again refresh the website you can see we have some space around this title and the font size for this title is looking good and this learn more text is also looking good let's come back come to the html file we will make it capital l so it will look good so after adding this we will add the hover effect on these services list so let's come back and come to the css file here just copy this one and paste it here then write colon hopper so whenever we will take cursor over any services it should change the background color so we will add background and another color code after that we have to move this services a little bit up so let's add transform translate y minus 10 pixels so it will move the box by 10 pixel so in this one we have to add some transition so here we will add transition background it will be 0.5 seconds comma transform 0.5 seconds after adding this again refresh the website and here you can see if i take cursor it is moving up and the color of the background is also changing this border radius is not working let's see here we have added border right it will be border radius 10 pixel now you can see the corners are round so we have added three services after adding this services we will add another section called portfolio or my work so let's come back to the html file and here after this div we will add one comment portfolio then we will add one div with the id portfolio in this one again we will add one container and again we will add one subtitle so let's copy the subtitle from here and paste it here here we will change the text it will be my work let's refresh the website here you can see this title called my work next we need some space around this so let me come back and copy this id portfolio write it here in the css file first we will add one comment then write this id with the hashtag and here we will add some space so we will add padding 50 pixel and 0 50 pixel from top and bottom and 0 from left and right side so you can see we have even more space around this text which is my work now again we need grid layout where we will display the list of work so let's come back and come to the html file after the subtitle we will add one div with the class name worklist in this one we will add the first work so here we will add another div with the class name work so first we will add one image write the file path of the images it is imageslashwork1.png then duplicate this one and change the image it is two and three work three let's refresh the website you can see three images here so we have to arrange these images as a grid so again come back and copy this class name worklist write it here in the css file and here also we will add the same css that we have added in the services so let's see here we have added display grid grid template column and grade gap so just copy this three line and we will copy this margin also margin top so paste it here in this work list after adding this here we have the single work with the class name work so write this class name here work and in this one we will add the border radius 10 pixel position relative and overflow hidden again write this class name then write img in this one we have added the image so we will add width 100 border radius 10 pixel display it will be block that's it now you can see these images in grid layout next we have to add some information over this image like there will be one title text and one link for that we will come back to the html file and after this image we will add one div so let's add space here and here we will add one tip with the class name layer and in this one we will add one title so let's add the title in h3 then we will add one description in p tag so this is the description and then we will add one link so we will add a tag and in this link there will be no text we will just add one icon so again come back to the font awesome website and in this search box we will search for link i will use this icon external link alt click here and click on this code and add it here in this html file within this a tag so we have added this one let's come back to the website again you can see this text description and this link icon just below this image similarly we will add these things in all the work so let's come back and copy this div which is layer and add it here in this second one and in the third one we will change the text you can see this title and description and link in all three work next we have to change its position and we will also add the background color this text will be displayed over this image so we have to add the position absolute so let's come back and here we have added the class name layer so copy this write it here in the css file so for this layer we will add width which will be 100 then we will add height height also 100 next we have to add the background so in this background we will add gradient color so let's add linear gradient first color code it will be rgba 0 0.5 it will be black color with 60 opacity then we will add this color code after that we will add the border radius it will be same 10 pixel after adding this let's see this on web page so it is at this position so we have to change its position so let's come back here we will add position absolute then we will add left it will be zero and bottom 0 now overflow hidden you can see it is just over the image we have to move these text in the center so let's come back and here we will add display flex align items center justify content center and flex direction it will be column then we will add some padding 0 and 40 pixels so we will add some space in left and right side then we will add texture line center after adding this again come back to the website you can see these text in the center next we have to change the font size and we will also decorate this icon so let's come back and here we will add dot layer h3 because we have added the title in h3 tag let's add the font weight it will be 500 and some space margin bottom 20 pixel now we have to decrease the size for this text which is description text here so let's come back and in this one which is for the layer here we will add the font size font size will be 14 pixel so you can see decreased size for this text next we will design this icon which is the link icon so again come back copy this layer and in this layer we have the a tag so in this a tag we will add the space margin top 20 pixel then we will change the color in this color code after that we will add text decoration none then font size 18 pixel and line height 60 pixel then background background will be white color now we have to define the width and height so width will be 60 pixel and height also then we will add border radius water radius will be 50 so that it will be a circle and text align center after adding this this external link icon looks good so right now these contents are displaying by default so we have to hide this one and it will be visible whenever we will take cursor over anyone so to hide this one let's come back here we have added height hundred percent so we will make it zero and let's see it is hidden and whenever we will increase the height so it will again become visible before that we have to add one more hover effect if i take cursor over it this image should zoom in so let's come back and here we will add this work paste it here work over and whenever we will take cursor on this one it should increase the size for the image so we will add img and write transform scale 1.1 like this and let's come to the top over here in this work img we will add transition transform 0.5 seconds after writing this you can see if i take cursor this image gets zoom in so this is the first effect on this work image next we have to display the content that we have added over this image which is hidden right now so let's come back you can see we have added height 0 for this layer so again we will add this one then write dot layer and write height 100 so it will increase the height let's come back to the layer which is here so here we will add transition height 0.5 seconds you can see when i take cursor this text is coming from the bottom after adding this we will add one button so let's come back come to the html file you can see this div work list is closing here so here we will add a space and add one link with the a tag and in this one we will add the link text c mode we will add one class name so write the class name called btn you can see this link here at the bottom see more so we have to move its position and we will decorate it as a button so let's come back and copy this class name bdn write it here in this css file right dot btn in this one we will add display display will be block then margin we will add margin 50 pixel from top and bottom left right auto so it will be in the center then write width which will be fit content then border border will be one pixel solid and this color after that we will add some padding that will be some space inside the button border radius will be 6 pixel you can see it looks like a button we have to change its color also and we will remove this underline so here we will add text decoration none and color white so it is looking good next we will add one hover effect on this button so let's come back and copy this button then write colon hover let's add the background background will be this color code whenever we take cursor the background will be changing and here in this one we will add transition transition transition for the background let's add transition background 0.5 seconds you can see if i take cursor over this button the background is changing so finally we have completed this portfolio or my work section also next we will create the contact section where we will add the contact information like phone number email id and we will also add one contact form for that let's come back to the html file and here we will add one comment contact and let's create one div with the id contact so here we have one div with the id contact in this one again we need one container and within this container we will add contents in two columns in the first one we will add the contact information like phone number email id and social media links and in the right column we will add the contact form so here we have to create two columns so first we will create one div with the class name row now in this row let's create one div with the class name contact left it will be for the left column just duplicate this one here we will add contact right so it is for the right column now in the first one we will add one subtitle so let's add one h1 tag in this one we will add the text contact me and the class name that we have already used subtitle and after that we have to add the email id in p tag then we will add the phone number and next we will add the social media icons so let's add the div with the class name social icons and in this one we will add some icons so here let's add one a tag and in this href we will add the url of the social media profile so let's come back to the font awesome website here we will search for the icon facebook let's click on this one copy this and paste it here where you want to display the icon let me duplicate it you can go on the font awesome website and search for another icon code i already know so here i will write after adding this let's come back to the website again here you can see contact me this email id phone number and social media links suppose you want to add the profile link here so let's come back and in this href here we will add the social media profile link like this one write the complete profile url here and now we have to add some content in the right column which is here and in this one we will create one form so here we will add form tag and in this form there will be some input field for the name email id and message so first we will add one input field for the name input type will be text name will be name then placeholder it will be your name and this field will be required next we will add another input field which is for the email name will be email placeholder your email and it is also required then we will add the text area in this text area we will add the name called message remove this id and columns row it will be 6 and then placeholder in this placeholder we will add your message after this text area there will be one submit button so we will add button type will be submit and button text will be submitted let's check this web page again here you can see the contact information in the left side and this form input fields in the right side next we have to define the width for left and right columns so let's come back and here we have to add the css for this contact left copy this one come to the css file first we will add comment here contact then write this class name contact left for the left column now for this left column we will add the width so first we will add the flex basis it will be 35 for the left side now just duplicate it and change the class name it will be right for the right one width is 60 so flex base is 60 percent now this form is starting from here so first we will design the text and icons which is in the left side so let's come back and copy this last name contact left then write p in this p we will add margin from top it will be 30 pixel we have some space here now for this email id and phone number also we will add one icon so come back here and here we will search for one icon let me search send let's click here and copy this one edit here in this p tag this icon and email id again come back and here we will search for phone icon so let me search phone then i will use this one click and paste it here in front of the phone number again refresh the website so here you can see we have the icon in front of email id and phone number so we have to design these icons so let me come back and in the css file we will add contact left p and in this p we have added the icon with the i tag so for this i will add the color then we will add the margin from the right side and font size so this icon is looking good next we will design the social icons so here you can see the class name social icons copy this one write it here in this css file here we will add margin from the top it will be 30 pixel again add this class name then write a tag and here we will add text decoration none font size 30 pixel then margin from the right side it will be 15 pixel then color colored will be this one and after that display display will be inline block so this social media icons are looking good next we will add the whole effect on these icons so let's come back and copy this one paste it here so whenever we will take cursor it should change its color so first we will add colon hover then write color this is the color code after that we have to move this icon little bit up so we will add transform translate y minus 5 pixel so it will move the icon up by 5 pixel and in this social icon a we will add transition transform 0.5 seconds you can see if i take cursor it is moving up and the color is changing after the social media icon i will add one download button where you can attach any downloadable file like your cv in pdf file or any other file so let's come back and in this html file after closing of this which is for the social icon here we will add one a tag then write the link text download cv so you can see this link here next we have to decorate it so let's come back and here we will add one class name btn so you can see some changes here now we have to move this button in the left side so let's come back and we will add one more class name btn2 like this next copy this class name vtn 2 come back to the css file here we will add btn it will be dot btn dot btn2 there is no space so here we will add display inline block and background this color code so you can see the colored background for this button and you can see this button in the left side but right now if i click on this button nothing will happen so next we have to attach one downloadable file in this button for that you need any file that you want to attach in this folder you can see i have added one file called mycv.pdf so we have to attach this file with the download button it is in the images folder so let's come back and in this html file in this hdf we will add the file path images slash mycv.pdf then we have to add download that's it so whenever we will click on this button it will start downloading this attached file in the browser so let's come back to the website and you can see if i click here on this button download cv it will start downloading one file which is mycv.pdf it has been downloaded so this is how you can attach any downloadable file in this button so after adding this button we will design this contact form which is in the right side so let me come back and you can see we have added the form tag here and in this form we have added three input fields and one submit button and in this button we will add one class name called btn and one more class name btn2 like this after adding this class name you can see the submit button is also looking good next we will come back and come to the css file here we will add the second column class name which is for the contact right copy this one then write form so for this form we will add the width bits will be 100 now we will add form input because we have added input tag let's add comma and write form text area text area so for this input and text area we will add the css so first we will add the width which will be 100 then border border will be 0 then outline none then background here we will add one color code let's add some space inside this input field so we will add padding of 15 pixel then some margin margin will be 15 pixel from top and bottom then we will add color it will be the text color that will be written inside the input field then we will add the font size it will be 18 pixel and border radius will be 6 pixel after adding this for the input fields you can see this input field looks good we can write anything we can type any message in these input fields your name your email and your message now we will change the size for this button and we will reduce this space which is between the input box and the submit button and we will add cursor pointer so let's come back and here we will add form btn2 so for the btn2 we will add another padding it will be 14 pixel and 60 pixel so the width will be large and then we will add the font size it will be 18 pixel then margin from the top it will be 20 pixel and then we will add cursor pointer here we will add dot btn form.btn2 now you can see this submit button is also looking good if i click here it is saying please fill out this form because it is required after completing this website i will teach you how to connect this form with the google sheet where you can receive the contact from inquiries on your google site so for now we'll create the bottom section which is for the copyright section so let's come back and come to the html file just above this closing div it is here so here we will add another div with the class name copyright in this one we will add the text in p tag so this is the text in this one we will add one heart icon also so come back to the font awesome website here we will search for hurt click here copy this one then paste it here after adding this again refresh the website here you can see this message at the bottom next we have to change its position it will be in the center and we will add the background color also so let's come back and copy this class name copyright and write it here in this css file dot copyright in this one we will add the width width will be 100 then text align will be center some padding and background font weight will be 300 and some space from the top margin top will be 20 pixel you can see this bottom copyright area is looking good next we have to change the color of this heart icon so let's come back and copy this one copyright then write i tag for the icon here we will add the color that's it you can see color in this heart icon so we have added all the contents on this website and you can see these effect is working fine next we have to check this website on a smaller screen and let's see how it looks if i change the screen size you can see the header part is not looking good then this image is very small these text are large here so we have to fix this one so to make this website responsive we will use the css media queries for that let's come back and here in the css file here let's add one comment i will add css for small screen here we will add add rate media only screen and max width 600 pixel now we will add the css properties within this one so whatever css properties we will add here that will be applicable for the small screens the screen width will be minimum 0 or maximum 600 pixel so let's come to the website and here you can see we have the image in the background which is not in the perfect position so we have to replace this image with the another one so let's come back to the css file here you can see we have added the image in this dot header and background image so we have to replace this one so let's copy dot header and write it here in this media query dot editor background image u r l and in this url we will add the another image file path so in this folder you can see i have another image which is phonebackground.png so we will use this image phone background dot png copy this one add it here images slash phone background dot png after adding this let's come back to the web page this image is still same so let's come back yes here we have to collect this one w i d t h width max width 600 pixel after that you can see this image has been changed now it is in good position next we will decrease the font size for this text which is ui ux designer and this main title so let's come back and you can see we have added the titles in this one which is header text and header text h1 so we have to replace these font size let's come back to the bottom where we have added media query and in this one we will add dot header text here we will add margin top 100 and font size let's add small font size which is 16 pixel again right header text and h1 for the main title here we will decrease the font size it will be only 30 pixel so you can see this text over here it will move up whenever we will fix this navigation word in this navigation where you can see this menu is visible by default so we have to hide this one and it will be visible whenever we will click on any menu icon so first we have to add one menu icon here so let's come back come to the html file come to the top where we have added the menu links it is here so here we have to add icons so let's come back to the website which is font awesome and here we will search for menu icon so let's add menu click here copy this one so it is for the menu icon come back to the html file and we will add it here just after this closing ul tag paste it here next we will add one close icon so here again search for another icon i will add times click here and click to copy this one then add it here just above this closing ul tag add a space and add it here so we have added one cross icon and one menu icon let's see on this web page you can see this menu icon and this cross icon let me open this web page in full screen here also you can see this cross icon and this menu icon so we have to hide these icons by default and it will be visible whenever we will open this webpage in a smaller screen to hide this one let's come back and here you can see we have these icons with the class name f a s f a s so let's come back to the css file just outside of this media query we will add a space and here we will add nav dot fas for the icon display none so it will be hidden you can see these icons are hidden and if i open this webpage in a smaller screen still it is hidden so we have to display these icons on a smaller screen so let's come back and in this media query again we will add the same thing nav dot fs in this media query and we will add display block so it will be visible and we have to change the font size also so we will add font size of 25 pixel it is fine so you can see this cross icon and this menu icon next we have to hide this menu list so let's come back you can see we have these menu with this ul and li tag so come back to the css in this media query we will add nav ul background let's add this color code in the background then position poison will be fixed top 0 and right 0 then we will add the width width will be 200 pixel and height 100 vh padding from top it will be 50 pixels so there will be some space on top now you can see this side navigation menu on this web page and here we have these menu list so we have to arrange this one so let's come back again we will add this one nav ul then write li so for this li we will add display it will be block and then we will add margin margin will be 25 pixel so these menu links are arranged vertically next we have to set position for this cross icon so let's come back here we will add nav ul and in this ul we have the icon with the fs class name so here we will add position position will be absolute then we will add top it will be at 25 pixel and left 25 pixel then cursor it will be pointer after adding this you can see this icon here now we have to add the click feature on this icon whenever we will click here this side menu will be hidden and when we will click on the menu icon the side menu will be displayed right now this menu is visible by default if i refresh the website you can see this side menu is visible so by default we have to hide this side menu for that let's come back and here we have added write 0 so instead of this right 0 we will add right minus 200 pixel why i am adding minus 200 because the width is 200 so it will move on the right side by 200 pixel and it will become hidden so you can see this side navigation bar is hidden and we have the menu icon if i click here this menu icon is not working right now because we have to add the click functionality using javascript so let me come back here in this ul will add one more thing which is z index two so let's come back to the html file and in this icon which is for the cross icon and menu icon we will add two functions so let's add on click on click equal to close menu so it will close the menu and in this icon we will add on click equal to open menu so it will open the menu in this ul we have to add one id so we'll add the id called site menu like this after adding this id this on click close menu and on click open menu let's come back at the bottom and here if you add the javascript so we have added one script here we can add in the same script tag but i will add it separately i will add script and in this one we will add variable for the side menu here we will add site menu equal to document dot get element by id and write the id that we have just added which is here side menu copy this one and add it here after that we have to add the functions that we have added in the icons so here we will add function open menu define this function so whenever we will click on this menu icon that will call this function called open menu and when this open menu will be called here we will add this side menu dot style dot write equal to zero so whenever the right will be zero it will be visible let's duplicate it it will be close menu and when we will run this function close menu it will become minus 200 pixel that's it after adding this again refresh the website and here you can see if i click on this menu icon this side menu is visible and if i click on this cross icon it is hidden so this side menu is coming and moving instantly so we need some time delay so let's come back in the css file and here we have added nav ul so in this one we will add transition right 0.5 seconds that's it if i click here you can see it is smoothly coming from the right side and if i click on this cross icon again it will go on the right side and it will become hidden so this one is working fine and other things which is this title is looking good now let's scroll this and come to the next section which is for the about in this about the size for this image is small and this text is going to the right side so we have to decrease the space between these text and we will decrease the font size also so first we will decrease the size for this text which is about me so let's come back come to this media query in this media query here we will add the class name that we have added for the subtitle so write subtitle and decrease the font size font size will be 40 pixel so the size has been reduced next we will increase the size for this image for that here we will add the class name for the left and right column which is for the about call 1 and comma about call 2 for this one we will add flex basis it will be 100 now you can see the increased size for this image next we need some space between this image and this text so let's come back and again write this class name then write margin from the bottom so we have some space just below this image next we have to decrease the font size for this text which is here so let's come back and write the second class name for the second column about call 2 and here in this one we will add the font size 14 pixel so the font size has been reduced next we will decrease the space between these skills experience and education and we will also decrease the font size so let's come back and here you can see we have added the link title which is tab titles and tab links so let's copy this one tab links for this one here we will add the css in the media query let's add the font size it will be 16 pixel and margin from the right side 20 pixel so it is looking good if i click on experience it is working if i click on education it is working so this about section is also good for the smaller screen and this header section also let me scroll down and this my services section is looking good and this works section is also fine here and now in this context section we need to increase the width contact left column and contact right column so let's come back to the css file and in this media query we will add dot contact left and the second class name comma dot contact right for this left and right column we will add flex basis hundred percent so you can see this form is looking good and this button is also good here and next we will add the css for this copyright text and we will reduce the font size for this one so let's come back and write the class name dot copy type font size it will be 14 pixel so this copyright text is also fine for small screen so let's scroll this website up and you can see all the sections on this website is looking good for a smaller screen device and now let me open this website in full screen here also it is fine next we have to add the click features in these menu links if i click on about it should scroll the webpage to the about section if i click on services it should display the services section if i click on portfolio it will open the portfolio section and if i click on contact it should scroll the webpage to the contact section so let's come back and in this html file just come here where we have added the navigation links here so in this one we will add the id of this section so here in this header you can see we have added the id header now in the second one we have added the id about in the third one we have added the id services like that so here we have to add these id so first we will add header hashtag header in this hdf then we will add hashtag about then services then portfolio then contact after adding this come back to the css file and just come to the top here we will add html and in this html we will add the scroll behavior scroll behavior will be smooth that's it after adding this again refresh the website and let's click on the about it will scroll the website to the about section very smoothly let's come to the top and click on contact it is scrolling the website to the contact section let's come to the top click on portfolio it is scrolling the website to the portfolio section or my work let's come here click on services it is scrolling the website to the services section so this is working fine so now we have designed this website next we have to make this contact form working whenever people will enter any data in this contact form and click on this submit button you will receive the information on your google sheet to make this contact form working just open your google sheet and here you have to create a new sheet click here and write any title for this state i'll write contact form and in this field we have to add the name that we have added in the input field of the forms so let's come back to the code file in this html file come to the form and in this form you can see we have added the name copy this one and add it here name now in this second column we will add this one which is email write capital e it should be same like if you are using the small case then it will be small case here email then we have the message like this so we have added this one next we have to click on this extensions then click on a script for this script we will add one title it will be same as contact form and remove this function which is written in this script file and here we will add one script for that let me come back to a github link you can find this github link in the description you can see the name of the creator for this code let's scroll down here and here you will find this script so just copy this one click here to copy and come back to the form script which is i have a script here paste this one and click on this save icon which is here and after save click on run and it is asking to review the permission click here and confirm your account click on advance and click on go to contact form unsafe click on allow now you can see this message execution started and execution completed that's it after that you can see this button here deploy click here click on new replayment click on the setting icon click on webapp and here you have to add any description i will add contact form it will be your email id there is no need to change anything and in this third one select anyone it is important select anyone then click on deploy after clicking on this deploy you will get an url you can see we got an app url that will be using on our html file so now again come back to the github link and scroll down and here you will find the subscript just copy this script from this webpage and add it in your html file let's come back and in this html file just at the bottom of this closing body tag i will add this script like this and here you can see the script url here only you have to add the url that we got from the app script just copy this url and paste it here like this after adding this here you can see submit to google sheet just copy this and come back to the form where it is here in this form we will add name this one submit to google it will be same here submit to google form name is submit to google and here also it is same after that if we will submit this form we will receive the information let's see come back to the website and let's write anything here i'll add avinash one then write one email id here test one at gmail dot com and write the test one this is the message this is the name email id and message click on submit and you can see this page is as it is there is no change but if i go to the google sheet you can see we got the information here avinash1 test1 and test1 we got the name email id and message so this is how you can receive the information on your google sheet whenever people will enter any data in the contact form next we have to make this form reset after submitting the form and we will get the confirmation message here that the message has been sent successfully like that for that let's come back and here we have the form so after this form we will display one message so let's add one span tag here and in this suspend we will add one id and write the id msg and in this msg let's add anything hello and let's come to the website and see where it is displaying it is displaying here hello like this so next we have to design this one so we will change the color and some space we will add so let's come back and come to the css file at the bottom we will add after closing of this bracket we will add hashtag span because it's an id for this span we will change the color it will be this color code then remove a space from the top so margin top minus 10 pixel and after that display it will be block there is no changes here so let's see here we will add msg this is the id right hashtag msg now you can see the color has been changed we will move it up so again come back and here we will add minus 20 pixel it is here if i write minus 40 pixel yeah this position is good so next we have to replace this message and it will be only displayed whenever we will click on the submit button so let's come back and here hide this one so just remove this hello and come to the bottom in this one we have added this const this const so let's add one more here we will add const msg equal to document dot get element by id and in this id we will add msg like this now in this then we have the success so we have to remove this one and instead of this we will add our own message so after this one remove these things and here we will add curly braces then write msg dot inner html equal to here we will add this message sent successfully so whenever we will click on the submit button it will send the data and then it will display this message but this message will be displayed continuously so we have to hide this one after few seconds so here we will add set timeout then write function and in this one write msg dot inner html equal to this code it will be blank and here at comma 5000 so it is 5000 milliseconds so after 5 second the message will be removed and then we will add form dot reset so it will reset the input field in the form that's it after adding this again refresh the website and let's add any other data in this form here we will add the name email id then message this is second text message let's click on the submit button and here you can see this message message sent successfully and it will be removed after five seconds done and you can see the form has been reset let's check our google sheet here you can see we got the another enquiry name email id that we have entered in the form and this message this is the second test message so this is how this contact form is working so finally we have completed this single page personal portfolio website or you can say resume website i hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video