Build a Stunning Software Engineer Portfolio with HTML, CSS, and JavaScript

hi there are you ready to showcase your  coding skills and land your dream job   let's build a stunning software engineer  portfolio using HTML CSS and JavaScript learn how to create your visually appealing and  highly functional portfolio that highlights your   projects experience and blocks don't miss out this  opportunity to evaluate your professional Pres   and open doors to exciting career opportunities  let's have a quick demo right here here on the   screen we can see the portfolio website  that contains logo Dynamic menus with   download CV button and then below text says  who am I with Dynamic social network links if I scroll you can see the features if I scroll  again you can able to see the about session   with person image and detail explanation if  I scroll you can able to see the fixed top   navigation bar it was set the menu active based  on the session and then below we have a portfolio   of my recent works here we can see the list of  projects done by the users all the projects we   have already created and uploaded in my channel so  I have used for this references and then below the   we can see the fun fact of that user below we  can see the work experience and then education if I click on service here we can see the  service what I offer and then contact we can   see the contact to that person if I click on blog  here we can see the recent blogs to that user end   of the website we can see the footer with logo  and then copyright text with social network icon   and then next to this here we can see  the scroll to top icon once we click   this it was automatically scroll to the  Top If we are in the top the icon will   be disabled if I scroll now we can see that  if I scroll to the top again we can see that if I scroll to that particular session it will  be visible so this website is fully responsive   now I have switched to the tablet view the top  navigation bar has gone and now we'll get the   mobile menus once we click these three bars we  can get the side collapse menu bar with Dynamic   menus if I click it will close and again if I  scroll we can see the fixed navigation board and   if I click on works we can get that particular  session this is responsive for mobile also so if I scroll to the top and here we can able  to see the menus we can click and navigate   and then we can close this that's all for the  demo before beginning this video video I would   like to introduce myself as Sharathchandar  K if you find this tutorial useful Please   Subscribe like and share this video with your  friends let's level up our Tech game together here on my desktop I have already created  project folder name called software engineer   portfolio let me open this into your  Visual Studio code so for that I will   drag this directly into your Visual Studio  code Visual Studio code will automatically   loads all the files inside it inside  the directory I have already created   index.html style.css and script.js along with  that we have a supported images and then inside   the index.html I have already created the HTML  boiler plate with the help of exclamation mark I have changed the title to software engineer  portfolio by Sharathchandar K below I have linked   the style.css and script.js from this I have  used one more link tag to use the icons with font   awesome inside the body we are going to add the  header first so with header inside the header I'm   going to add the div with ID and class with the  help of embed abbreviation so I will type # with   header sticky with class of transparent header  if I hit enter it will automatically created   the Div tag with the ID attribute with value of  header sticky class attribute with the value of   transparent header inside that I'm going to add  the container with same embed abbreviation dot if I hit enter it will create a d with class  of container and inside that I'm going to add   a row inside the row we are going to create  the logo so inside the logo I'm going to use   the it tag to use the font awesome logo  with class of fa solid fa code logo value   of shop and then next to this I'm going to add  the main menu with view inside that we are going   to add the top navigation bar with the help  of new DOT class value of desktop menu inside   that I will add the UL tag these are the UL  tag we are going to add the dynamic menu from   the JavaScript next to this I'm going to add  the download CV button with the help of div inside that I'm going to add the button with  class value of BTN button value of download   CV next to this we are going to add the mobile  board inside that I'm going to use the icon with   class of fa solid fa B now let us see our  HTML file in action so for that in Visual   Studio code we have a extension called go live  once we click this it will automatically run   our project into the default browser so so here  we can see the icon with show off the logo with   download CV button with men boards now we need to  style this for that I will jump to the style.css so here I have already added the import URL of  one family just and I have added some colors with   text color primary color session BG light color  and then title color these are the colors we are   going to use repetitively so I have created  as the root variable so inside that we can   use that many times here we have added the ash  or a global element to reset the values and set   the values of one family next to this I'm going  to add the styles to the body with the help of   element selector body first we'll set all the font  size to 1rem font weight to 500 line height 1.5 will set the color of that entire website  using variable of text color so this text   color will refer the color of this particular  variable we'll add the background with variable   of primary color the primary color is white  we need to set common styles to some element   so for that I will add the styles to the  UL I will reset the margin to 0 adding to   0 for the LI will remove all the list style  to none for the image of element selector IMG   will set the max width to 100% we'll add  the transition of all 03s is out with 0s now we need to add the styles to the header  right so I will copy this class selector   we'll use the class selector with DOT of the  value of transparent header I will mention   the command for this to segregate which  are the parts represent to which one and   I need to set this transparent deer on top  always so for that I will set the position   to Absolute we set the top to zero left to  0er width of 100% transition to 0.3 second   padding top and bottom to be zero right  and left to FM will set the Z index of 9999 if I save if I go to the browser now we can able  to see the header placed with the padding now we   need to set all the text into the center of the  screen right so for that again I will jump to here   we need to add the styles to this class selector  of row so these are the row we are going to use   commonly in many times so I will set the row as  display flax we are going to use the Align item   Center so I will create a common class for this  align item Center next thing as justify content   tool in inside that justify content of Base  between I will use this align items to this row if I save if I go to the browser now  we can able to see the Align items to   be Center for that particular row if I  insert here we can see the row class to   that container and then I will set justify  content also if I save here we can see the   justify content with space between if  I go to the Styles if I remove this   it will be next to the elements if I add this  we can see the space between these two elements   We'll add the styles to the logo with the help  of class selector with do logo we'll set the   color with variable of primary color I will  add the font size to 35px font weight to bold if I save we can see the text here because we  have added the color now I will set the back   color to this with background of variable with  that text color if I save now we can able to see   this for now we can add the menus here so for that  I will jump to the index.html I will add the L of   a hre I will add the Ash and then inside that I  will add the some menus for now so later we can do   this as Dynamic if I save if I go to the browser  here we can able to see that so now we we need to   add the styles to that so again I will jump to the  style.css for this nav bar we have a class already   so I will use the same with DOT desktop menu for  now I will set display To None transition to 0.3 if I save if I go to browser we can't able to see  that so I will set these things to block now I   will set the styles to that Li desktop menu with  that element selector of UL and then l we'll set   the display inline block we'll add the margin  left to 35px will set the position to relative if I save if I go to the browser here we can  able to see the Lis in the column view now   we need to add the styles to that a also  so for that desktop menu ul and then Li I   need to add the styles to all the a with the  help of Arrow Mark I will use the color of   primary we'll set the display to inline  block again we'll set the padding inner   spacing top and bottom to 50px right and  left to zero we'll remove the underline to   this with the help of text decoration  To None we set the font size to 18px if I say if I go to the browser now we can able  to see the menus it was listed here so once we   over we need to add the animation effect to that  right so again I will jump to the style.css I will   copy this selection I will add the a of before  so this will help to set that over effect with   the position of absolute we set the content  to null width of zero height of 2px will add   the bottom to 45px I will add the transition of  all 0.3 second again is is out with 0 second now if I go to the browser I insert if I go and click  here inside the a we can see the before if I click   on before we can see the Styles here once we over  we need to display that so for that again the same   thing of Li of all the a with h we need to set  the before content to that the same thing of Li   do active once the menu is active of a of before  we need to set that so with the help of background   of primary color of that variable I will set  the width of 100% will set the Left To Zero if save if I go to the browser if I over now  we can able to see the animation effect to   that menus how cool is this right now we need to  set this menu and then download CV in a single   liner right so for that that I will jump to the  index.html here we are going to use the display   flex so for that we have already used the row  align items to be Center if I save if I go to the   browser here we can see the main menus with that  element it set to Center I will add the styles   to this do main menu of do download CV for this  download CV I will set the margin left to 45px if I save here we can able to see the space  and then next thing we need to add the styles   to the mobile board so for that again with  main menu of mobile bar I will set the color   to same primary color then we'll set the  cursor to pointer will set Z index to 99 so if I save here we can able to see the styles  to this this mobile menu will visible only for   tablet or mobile view right so for now we'll  set the display To None to add this by save   we can't see that next thing we need to add  the styles to this button with the help of   BTN I will add the color to same primary  color border to 1px solid where of primary   color we'll set the background to transparent  adding inner spacing 15px top and bottom right   and left to 30px we'll set the font size to  15px font weight to 500 border radius 5px   we'll remove the outline with zero and then  none we set the text transform to capitalize   I will set the cursor to pointer we add the  transition of all 0.5 second and is in and out if I save now we can able to see the button style  to that BTN so wherever we are using this BTN   this Styles should be applicable once we over we  need to add the styles to this with same BTN off   over we'll change the color to primary color and  then we'll add the background color to the text   color I will change the color if I go on over now  we can able to see the effect on that button next   thing we are going to add the side mobile menu  so for that so I will collapse this header for   now and then next to this I'm going going to  add one more div with class of site mobile menu if I hit enter inside that I'm going to create  one more div of close site mobile menu inside   that I'm going to add the icons with the help  of class font a Some solid font awesome Circle   x mark again I'm going to add one more D  with menu board inside that I'm going to   add the nav with mobile menu inside that we  are going to use the the same practice how   you done for the UL for the top I will add L  A of H for now I will add some two elements   and then later we can change this as Dynamic  home and how about below to this I'm going   to add the H5 element with class of Follow  Me value of same follow me and then below   to this we are going to add one more UL tag  with class value of social then inside that   I will add Li so inside this social I'm going  to add one icon and then later we can set this   as Dynamic next to this I'm going to add one  more div with body overlay once we open this   menu board we need to add some background color  with the help of this overlay we can achieve that so now I need to add the styles to  this so again I will jump to the   style.css I'm going to add the styles  to this side mobile menu of dot I will   add the width of 380px and then height of 100%  we'll set the position to fixed and then top to   zero left of - 125% and then Z index of 99 I  will add the background of text color I will   set the padding Inner Space 35px again we'll set  that transition of all 0. 5 Second with ears out I save we can't able to see that instead of  minus 125 I set to zero now we can able to   see the side mobile menu here and then we  need to add the styles to this close side   mobile menu also and then again with  this class We'll add the text align to   end we'll set the margin to 10px we need  to add the styles to that I also because   inside that we have added the I tag so with  the help of I will set the font size to 35px   I will add the color of primary color  will set the display to inline block if I save now we can able to see the crossed icon  here now we need to style this so with the same   do site mobile menu I will copy this nav bar of  class value and then ul and then Li of a I will   set the color of primary color this should set to  White font weight to 400 font size to 16px padding   inner spacing top and bottom to 10px and then  right and left to 5% and then we'll remove the   text decoration of that underline with the help of  none we'll set that display to block width of 90% if I save we can see the Styles same as the top  menu next to this I need to add the styles to this   follow me and then social icon so I will  use this follow me as a class selector I   will add the margin top to 35px color of  same primary color with white font size   to 20px we'll set the margin bottom to 10px  so now we'll add the styles to this social of   ul . social we'll set the display to flex  we'll set the Align items to be Center   so instead of this I will go here and I will  use the row and then align items here and then   I will remove this two things and then I will  set the margin bottom to 25px and now I need   to add the dot social of Li margin right to  0.5rem I will add the Border radius of 50% I save here we can able to see the i in and  I need to add the background color to this so   again with the social of Li and then itac  so I will use the font size 222 PX color   of primary and then width of 45px and then  height of 45px Lite 45px this will help to   set the icon into the center of the screen  with the help of texture line to be Center if I save here we can able to see the  LinkedIn icon to this now we have added   the icon here once the side nav bar is open  we need to set the body overlay so for that   we have already added this body overlay here  I will copy this and I will add the styles   to this with the help of background color  with rgba color we are going to set the   blur effect to Red to zero green to zero  blue to zero and all four should be 0.5 if I save now we can't see that because  we need to set the height of 100%   and then width of 100% if I save here we can see  that I'm going to set this position to fixed we'll   set the top to 0 and then left to Z We'll add  the Z index to 999 if I save now we can see the   body overlay on top of the website once we open  this should be on top of this and then we'll set   the opacity to zero and then visibility to hi  done for now transition to all 0.5 and years   out if I save now we can see that instead of  it done I can set to visible and then opacity 2 I save now we can see that they should need a  functionality so for now we'll set this side bar   also instead of left I can set to minus 125%  I save we can see that now we have completed   the header session and then Side Bar also we  need to add the main session so again I will   collapse this as I said I'm going to add the main  session with the help of main tag so inside that   we are going to add some sessions so for the  first session with ID of home if I hit enter   it will create the session and then inside that  I'm going to add the container so these are the   same patterns we are going to use for other  sessions also so I will copy this and I will   paste it here instead of home I will set these  things to about I will paste it the same and   then here we are going to change as works next one  I will paste it below to this and I will mention   this as service next to this I'm going to make  this as contact then next to this I'm going to   add the blog these are the content inside the  main so after the main we are going to add the   footer also so for now I will make the footer also  here with footer inside that same container now   we need to implement this session one by one now  we are going to add the sessions of Home inside   the home I have already added the container  apart from that I need to use this as single   slider because this set to top on all the time  so I will use this single slider and then inside   that I have already added the Div inside  that I'm going to add the H1 tag so inside   the H1 tag I'm going to mention the name with  welcome message so for that I will add the span   tag tag and I can mention this as subheading  and then I can say here hello I am and then   another span tag of class name with sub name  with that name of Sharath subname of Chandar K if I save we can't see that because it was  backside on this header so we need to add the   styles to that also next to this I'm going to add  another header I will mention as have passionate   with panag as full stack developer and then next  to this I'm going to add two more buttons the   first button is class with BTN this will set the  same styles to this of say hello then value of   say hello then I will copy the same paste it  for below instead of say hello I will change   these things to about me I will change the value  also about me and then next to this container I'm   going to add The Social Network icons so I will  use social home and then inside that I will add   the UL tag so we need to style this so again  I will jump to the style.css I will add the   commands to this particular session of w I will  use the ID selector of Ash with the value of home   we have already added the single slider here  I will use the same class name of dot selector   I will set the height to 900px then I need to  set this background image here for this I will   set the image of background with the help of URL  with images and then here we have already added   the slider bar image I will set the background  size to cover I will set the background repeat   to no repeat I will add the Overflow hidden I will  set the position to relative Max height to 1080px if I save now we can see the background image  but but still the content is not visible so for   that we need to add the styles to this with the  help of row align item Center if I save now we   can see this here for this we need to add the  justify content to be Center if I save now we   can see the say hello and about me into the  center of the screen the H1 tag is there but   we need to add the color to that I will add the  styles to this ID of home with do container and   I will set the text align to Center we add the  color to the entire container of primary color if I save now we can see this with center  of the screen now we need to add the style   to this H1 tag so for that again with  Ash home with do container I will use   the subheading of class We'll add the  phone size to 30px line I to 1.3 will   set letter spacing 7px font weight  to 400 and then display to block if I save we can see this for the text hello I  need to add the styles to this Entre H1 right   so I will copy this I will set this element  selector of H1 I will set the font size to   90px text align to be Center we'll set the  letter spacing of 5x I say now we can able   to see the font size for the subname we need to  change the font right so for that again I will   copy this and then I will use the subname class  to that pan tag and then I will set the web kit   text stroke to 2px of white and then again same  web kit web kit text fill color to be transparent if I save now we can see the text of two  different shapes how simple is this right   right I need to add the style to this again  I will copy this same and I will use the H2 I   will set the text align to Center again we'll  set the font size to 30px for this line I to   two margin bottom to 45px if I save now we can  able to see this so I need to set this different   font size to that role of the user for that I  will use this with span tag of font size 38px   I save now we can see the different Sharath  of this same text would be different then   next thing I need to add the different  color to this button with the help of   this one Ash home dot container of works  and then I will set the margin right to   15px and then I will set the background color  to where of primary color color of text color if I save now we can able to see the two  differentiate so for this I will use the   different over effect I will copy this and  I will change the primary color to this of   text color and then this four primary color  if I save if I go on over now we can able to   see the styles to this the next thing we need to  add the styles to this social icon so again the   list is null I will add the LI of it tag I will  use the same and I will add the styles to this   of Ash home. social icon we set the position  to Absolute because we are going to set this   social icon into the right hand side I will add  the right to zero and then we'll set the top to   50% we'll set the transform Translate Y to minus  50 percentage I need to add the styles to that UL   also so I will copy this social home and then UL  will add add the padding right to 50px then same   thing for ul and then I will add the styles to  the L we are going to add the border to highlight   this with 1px solid and then RGB color with 204  of red two1 of green blue to 217 and then 0.2 if I save so here we can see that we need to  add more style to this so I will set the border   radius to 5px and then margin top and bottom  to 10px right and left to zero I will copy   this and I will add the styles to that a  because I need to add this as a h while   clicking this we need to jump to the new tab  right so here we can see the LinkedIn so for   this a I will set that display to block  text align to be Center one size to 18px   width of 55px then margin top and bottom  to 2px right and left to zero I will set   the height of 50px line height to 52px  we'll set the color of primary with white if I save now we can see this so we can  add more icons like here if I save here   we can able to see this right now we are in  the tablet view if I go to the desktop view   here we can see this so This icon should be  dynamic and once we scroll we can't able to   see the top navigation bar here right we need  to set the top navigation bar to Sticky so how   we can do that first we need to add the styles  to that so I will jump to the style.css next to   the mobile board I need to add the Styles as  sticky menu so I will add the class value of   sticky menu and then I will set the background  color to text color we set the position to fixed   top to zero left to zero width of 100% and then Z  index of 99 We'll add the Box Shadow to this with   0 8px of that direction and then 4px and - 7px  we'll set the rgba color with red to 115 green   to 115 blue to 115 and then all four should be 0.1  and we'll add the transition to this of 0.5 second if I save nothing will happen if I copy this  sticky menu if I go here if I add this sticky   menu to this transparent header and if I hit  enter here we can see that so once we scroll   we need to open this if I refresh if I scroll  we can see that this functional D should be   added in the JavaScript so for that I need to  jump to the script.js here in the script.js I   have already added the arrays of menu men and  then Social Links so here we can see the six   menus and then four Social Links these are  the Dynamics we need to append here we can   achieve this in shortly so for that I need to  declare the Declaration with the help of Const   with header sticky equal to document document  object represent your web page if you want to   access any element in an HTML page you always  start with accessing the document object with   the help of Kit element by ID with header sticky  so if I go to the header here we have used that   header sticky as an ID so what this contains  so I will use the console.log to find this if I save if I go to the browser in the  console.log we can see the header sticky   entire Dom object here once we scroll we need  to set the styles to that right so how we can   achieve that so for that we are going to add  the window. scroll so with the help of window   object and then add event listener inside  the add event listener we are going to use   the scroll function of bracket here we can see  the console. log of window do scroll y so sorry   this is a screen it has appended as screen  instead of screen we need to set to scroll y if I save again I will jump to the browser  if I scroll here we can able to see how much   scroll is happened to the window so if I go to  the top it was Zero if I scroll it was getting   the scroll positions with that number here  if this scroll y greater than 50 that time   we can set so here it was Zero if I scroll it  was added on the 50 so it is 50 I need to set   the header sticky of that class of do class  list do add we have added the new Div class   of sticky menu and then I will add this if I go  if I refresh if I scroll see now it was set all   the time if I go to the element if I scroll it  was set all the time so can able to see the Box   Shadow here instead of this once it zero we  need to set to transparent so for that we'll   add the same thing I will use the same line here  and I will instead of add I will set to remove if I save now the window scrollers zero now  we can't able to see the Border if I scroll   see now we can set this to fixed so once  we set to fixed we need to set this height   of the header right how we can fix that  so again I need to jump to the stads yes   this once the sticky menu we need to reduce  the logo size of font size to 30px and then   we'll add the transition to 0.3 second if I save  if I go on scroll you can able to see Theo size   is changing the same as we need to reduce the  size of this so same sticky menu dot for this   desktop menu UL Li of all the a will remove the  padding to 25px to top and bottom and then right   and left to zero then I will reduce the font  size to 17px we set the transition of 0.3 second if I save if I go to the browser if I scroll  now we can able to see the transition effect   the it of the Eder and then font size it was  reduced next thing we are going to add the   menus Dynamic so for this again I will jump to  the script.js here I will replace this header   sticky to that all declarations what are the  Declarations I'm going to use this into the   website you can pause the video and you can  write it by your own if I declare all the   Declaration it will take some time so for the  time consumption I will add the Declaration by   own and then next thing as I said I'm going to  add the dynamic menus and icons here with the   help of onload so how we can do that the same  thing with window do add even listener of even   should be load here so previously we used for  scroll here we need to use for load inside that   we are going to use that here we have already have  the array of menus I will set the array menus of   for each will iterate to that menu I of index  I will check this console. log of menu comma I if I save if I go to the browser in the console  without any action we'll get all the values that   is how the add even listener of load will work  so here there we can see the array value of oh   and then index of zero so now we need to append  this value into the Eder inside the onload I   will create one more Declaration of let item 1  equal to document do create element this will   help to create the element of LA because we  are going to append this La into this UL so   I will copy the same I will create one more of  item two this item two is going to set to that   side mobile navigation so this also we need  to set right this is item one is for top Nave   item two is for side nav I will create item 1 do  inner HTML equal to we'll add the a tag of href   because we have added the styles to this with  the help of Sting concatenation of menu again   one more sting concatenation of same menu so this  item one is same as item two now we need to upend   is for desktop menu as well as the mobile menu  so for this I have already added the desktop menu   of UL with query selector dot append of Li this  is for mobile menu with UL dot append of item 2 if I save we are getting an error of console so Li  is not defined This Is Not An Li this is an item   one and this is for mobile for item two if I save  if I go to the browser here we can able to see   the menus as Dynamic with Styles how simple is  this right I can check for this also here also it   is added so we need to remove the static values  from the index.html I will remove this I will   remove the LI inside this also if I go and refresh  now we can able to see the menus here as well as   the sidebar tool so if in future if you want to  disable any of the menus so simply we can directly   go to the script.js I can remove the service  and then contact session from here so I can cut if I save now we can able to see only the four  menus so if I undo this now we can get so for   the sessions also we need to disable and enable  based on the menus that is one more interesting   thing that we can do and now we need to open  the social icons also right so same as this I   will create one more for each of social links. for  each so inside that I will add links with function   of let item equal to same document dot create  element of el item do inner HTML equal to we are   going to add the same thing of HF and then here  with string concatenation so here in the social   link we have three different values for the menu  array we have stright forward for this social link   we have the link icon as well as the background  color this link we are going to append once we   click this it will redirect to this particular  link and then this was the icon and this was   the background color so for this link as I said  instead of links I will set these things to link.   link and I will close this a tag and then inside  that I will add I tag of on some class with string   cation with linkof dot icon I will close the  it tag I will append this into the social so   here I have already declared the social of  this class value of social do append item if I save if I go to the browser here we can  see because that social is init mobile menu so   I will go and set these things to fix so again I  will go here in the index.html I will remove the   static icons into the mobile menu if I remove  if I save if I go to the browser I will enable   it so here we can see this so now we need to add  the background color so how we can do this so for   that in item do style. background so for this we  have already added the background to this link. BG if I save now if I go and enable the sidebar  menu here now we can able to see the dynamic   icons with background color so for this background  color we need to set the Styles so here we need to   set this adding to this with social L of a with  padding to 1px with important if I save if I   go to the browser if I enable that sidebar menu  now we can able to see the follow me with icons   so for now we have set this as # if you have any  links you can give it here it will automatically   append here for example if only we have Facebook  and x and right now we don't have LinkedIn so   again we don't need to go and change a HTML here  so instead of that so I can directly came here if I cut if I save if I upload only we can see  the three social networks that is how the dynamic   content will work now we need to open the social  icons here also so with same onload that Social   Links I will create one more L with item home  with create LA with item home of the same value   so here instead of style background I have set  this directly the inner HTML I have appended this   and then I need to change this link here if I save  now we can able to see the social icon here so how   much we have it will be grown so for the static  we need to remove so for that I will jump to the   index.html here in the home I can simply remove  all the static element if I save now only we can   see that Dynamic content here so if I scroll we  can get that so the next thing we need to add the   features so for that I will jump to the index.html  so I will close this session so here inside the   home next to this single slider we need to add one  more div of intro future for each enter it will   create a d inside that I'm going to create one  more div with row with line items to be centered   because we are going to set this content into the  center of the screen here inside that we are going   to add the four intros with four Div how we can  add the for d with EMB abbreviation so for that   in Visual Studio code I can type single intro  * of four if I hit enter it will create four   intros of four de inside that I'm going to create  the icons with intro icon record Vally next thing   I'm going to add the intro text and then inside  that I will add the H4 of dedication next to this   I'm going to add the P tag with some dummy text  here so if I go to the browser here we can see   this with icon this is what the feature we need  to add for four times so the same thing inside   this I will copy here I will paste it for other  divs also and then I will change the dedication   to Smart work and then icon and then third one as  collaboration and then fourth one as technology if I save if I go to the browser here we can  see the display with flux of design so we need   to add the styles to this so I will jump to  the style.css here in the home session first   I will add the W of intro future because  this is what the DU has created of intro   future I will set the background color to  this session BG this is the one more color   we have added here so this this will take that  session bgs background color next to this I'm   going to add the styles to the row with same  intro feature of row I will set the padding   to 10px with gap of 25px this Gap will work  for this Div display Flex I need to set the   styles to this each single intro with box shadow  of 0px 5px 60px 0px of the position and then RGBA   color of red to two green to 24 blue to 93 and  then all for should be 0.8 We'll add the inner   spacing of 55px of top 48px of bottom 35px  right 48px again to the left we'll set the   Border radius to 20px we'll set the cursor to  pointer will set the transition to 0.3 second if I save if I go to to the browser here we can  able to see this and then once we over we need   to add the styles to this I will add this over  to this single intro of box Shadow with same   box Shadow and then all for color of 0.15 if I  save I go to the browser I over we can see the   background effect to that box shadow of that  container so here we can see the all box in a   single line so we need to add some styles to  up and down like Steps so how we can do that   so for that the same single intro we can add this  second and fourth child to be lower comparing to   the first and third child you have already got  what I'm going to do single intro of nth child   of two and I will copy the same and then nth  child of four I will add the margin top to 100px if I save if I go to the browser here we can see  the difference one is up and one is down and again   one is up and again one is down so here we can get  some stylish effect next thing I need to add the   styles to the icon with the help of intro icon  with I I will set the font size to 4rem margin   bottom to 15px I will set the color to text color  I will set the styles to that H4 of intro text so   I will use the intro text here of margin top  to 1rem same thing of intro text H4 element of   font size 2px Marin bottom to 22px same thing into  text of P tag will set the font size to 18px we'll   set the font weight to 400 line height to 1.67  and then we'll set the light color of variable if I save if I go to the browser here we can able  to see the icon size and then collaboration with   p tag with font weight of 400 and then color  also now we have fixed that header with Styles   and then home also now we need to add the session  of about so again I will jump to the index.html   now this session of ID home is done now I need to  add the session of ID of about for this about I'm   going to create class of about me. r do align item  Center if I hit enter it will create this de with   three set of class inside that I'm going to add  the about image to display the user image I will   set the image of source from that image folder of  man.png below to this I'm going to add the about   content inside that about content I'm going to  add the title and then inside that I'm going to   add the title of about me with help of pan tag  next to this I'm going to add the H2 element   and I can say I develop system that works next to  this I'm going to add the paragraph tag with info   text so in this info text I'm going to add some  dummy text here with two set of value same thing   of info text with same dummy text next to this I'm  going to add the about info of row inside that dot   rad dot align item Center inside that I'm going  to create the UL and then Li here I can mention   this as name this is for age and this P tag  as for occupation another LA with the value   of name for sander age as 29 occupation as senior  technical lead I will copy and use the same D here   below to this instead of name age occupation  I I will change to phone email and nationality   here for this value of phone number email ID of  allow atd.com and then nationality of bangaluru if I save if I go to the browser if I scroll to  the bottom so here we can see the person image   with about content here we need to style this so  again I will jump to the style. CSS I'm going to   add the styles to that about do container of  padding 5rem if I save now we can able to see   the padding of that about session the same padding  should be applicable for all other session also   right so I can use the same for others ID and  containers so I will use with Comm and then I   will add ID and then container it will applicable  to all the session with ID of container now I need   to add the styles to this title with do title this  is a common thing so I will use the color of title   color title do pant tag of font size 18px letter  spacing 7px if I save if I go to the browser here   we can see this title with color content title  of H2 I will set the font size to 50px margin   bottom to 30 PX color of text color if I save if  I go to the browser here we can able to see the   so this title and then H2 is common for all the  sessions so for this if I add any du with title   and then S2 same style will be applicable to the  entire project and then next thing I'm going to   add the styles to the about content so we need  to set all the about me into the center of the   screen so for this I will use the about me of do  class with justify content to be Center for this   we have already added the row align item and  then I need to set this justify content here   so I can remove this now I need to add the styles  to the about image so I will use this about image   of class I will set the width of 800 PX and  then margin to 20px if I say if I go to the   browser here we can see the about image it fit  to the screen and then next thing I need to add   the styles to this with the help of ID about  about content and then info text for this info   text I will set the margin bottom to 25 PX  color of light color now we have this and   list of row we need to set this as column  this name should be equal to sander K and   then age to be 29 like this we need to show as  row wise for this about info I will set this   same as about do about info of this about  content we'll set the Border top and bottom   of the color to this with one PX solid of light  color and then same thing I will copy and I will   set these things to bottom also if I save if I go  to the browser I will insert this so sorry here   we need to set this variable if I save if I go  to the browser now we can see this and then next   thing I will add the styles to the Div for this  do I will set the margin of npx and then as I said   this Li should be in list wise so for that again  with about info of Li we'll set display to inline   block this will help to set this content into  the inline we'll set the padding right to 50px if I save if I go to the browser now we can  see this how simple is this right now we can   able to see the name and then particular value  and then form and then particular value I need   to add the styles to that P of padding with  0.5rem if I save we can get the space to this   that's all for the aboard the next thing we  have the works inside the work I need to add   some marque so for that marque I will add the  Div marque of mar I will set the span tag of   two times with the value of senior technical  lead from India and then I will copy the same   marque again and I will paste it below now the  value should be I'm open for new project let's   work together I will change this  pan and I will change here to if I save if I go to the browser here we can see  the text so we need to add the marque effect to   run this so for that instead of do we have a  tag of Mark you in HTML if I save if I go to   the browser here we can see the text is moving so  the same as we need to achieve this in style. CSS   again I will change these things to span tag now  I will add the styles to this as I said this is a   mark q and this Mar Q is contain for that works I  will set the display to block and then margin Auto   top and bottom and then right and left to Auto  white space to be no wrap overflow to be hidden   min height to 100% height to 100% for this marque  we have another tag of pen so I will add the mar   here again with that element selector of  pan tag I will set the display to inline   block I will set the padding left  to 0 percentage text transform to   uppercase and then white space again to  no wrap then Min width of 100% and then   height of 100% and then I will set  the line I to 1.1 font size to 96px if I save if I go to the browser here we can  see the text with f size so now we need to   make this as anima scroll right so for that  we need to add the key frame key frame of   the identifier of marque1 and then inside  this marque I can set two parameters of 0   percentage 100 percentage for this transform  translate 0 comma 0 for the 100 percentage   transform again with translate of minus 100  per comma 0 I save nothing will happen I need   to assign this marque right for that as I said I'm  going to add the animation of that key frame of 20   second we set the linear to infinite if I save if  I go to the browser now we can see the animation   is running for the both it was going to the left  hand side so we need to set this one to right and   one to left so for this this one as I can mention  this as marque2 and then again I will jump to the   style. CSS I will add the marque 2 do span tag  I will use the same style of this so I will copy   and paste this with webk text stroke and then  fill color I will add the same animation to this if I save if I go to the browser here we can see  the text of first span is normal text and this   one as we have style so we need to for right  hand side right so this is simple I can copy   the key frame and I will mention these things to  two here instead of zero and I will set to minus   100% like Ulta I will set I need to mention  this as Market you if I save if I go to the   browser here we can see this but here we have a  space so we need to fix that instead of container   I will set this outside the works because we  have set this container as padding with 5rem if I save if I go to the browser here now we can't  able to see that space now we can see that now it   is going backside to that website next thing we  need to add the portfolio with list of projects   so for that I will add one more div of portfolio I  will move this container inside the portfolio as I   mentioned I'm going to use the same title here so  I will copy this I will paste it here instead of   about me I will set to portfolio here these things  as my recent works next to this title I'm going to   add one more div of my recent Works inside this  I'm going to list the projects what I have worked   on so for that I will create row do align items  Center do justify content inside this I'm going   to create the post category as web development  and then next do as post title as Todo list and   then next one as post image with the image of  source from the image folder of project 1.png   if I save if I go to the browser here we can see  the category and then title with image we need to   add the styles to this again I will jump to style  CSS here below the works after the marque I will   set the title text align to be Center same thing  for row of my recent works here with row for this   row I will set the justify content to be space  between padding inner spacing top and bottom   to 35 PX right and left to zero We'll add the  border to this with the help of Border top 1 PX   solid variable of title color and then we'll set  the curs to pointer I need to set this entire du   into 100% so for this I will copy this with the  help of do will set the width of 100 percentage if I save if I go to the browser now we can see  the web development to-do list and then app once   we over this we need to add the animation to this  so before that I will add few more projects as a   developer I have a challenge for you for now  I have created this as static so you need to   create this as Dynamic using JavaScript for the  last one I need to add the Marin bottom right so   here I will jump to the style. CSS I will use this  same to add the margin bottom to that nth child of   four so here right now we have only four if you  are creating a dynamic you need to find this last   one and you need to set the margin bottom to this  so that is what the task for you margin bottom if   you have done this as dynamic make you can take a  screenshot and post it in the LinkedIn and tag me   as Shandra K now we can see the border to this  and now we need to add the styles to this then   again I will jump to the style CSS I will add the  styles to this post category with the help of same   Div here with post category of color with variable  of title color with text transform to capitalize   width of 40 percentage padding off inner spacing  10 PX same thing I will add for the Post title to   I will change the font size to 48 line to 1.2  width of 140% because here this both has same   width so instead of this I need to set this 40  and this things to 140 next thing I need to add   the styles to the image of post image and then  I will set the Border radius to 10 width of 350 if I save if I go to the browser here we can able  to see the list with font size of project name   and then image size also we need to transform  the image once we over on that row how we can   do that so for that here I will use this same  element and then as I said if we over to this   row that time only we need to do that so I will  set the or of this row will transform to rotate   of - 10° if I say if I go to the browser if  I over now we can see the animation effect to   this so user can know which are the projects  they are over on that list now we have added   the recent work and then next to this we need to  add the fun fact of that user so in the index.html   next to the container I will paste the content  of that fun fact and then experience content if I save if I go to the browser next to this  portfolio we can see the fun fact with title   and then text here we can see the fun fact of 8  years of experience and then total clients and   then project Digital Services and then below  to this we can see the work experience and   then education so I need to style this so for  that again I will jump to the style CSS I will   add the fun fact of background color to be text  color and then color of primary color if I save   now we can able to see the background color and  then text color of primary color next to this I   need to add the color to that H2 of title with  primary color because we have already added this   title color as common on top so we need to use  this important to set the color of white here   so now it will set now we have set the styles to  this and then here we need to set the styles to   this funfact content for this funfact content we  have the years of experience and then it will be   listed view so we need to set to grid and two two  per column I will set the styles to here with work   and then fun fact to display grid and then grid  template column to be repeat for two times if   I save now we can see the list to two times in  a single row and then next thing I need to add   the styles to this fun code here we have four  fun codes so I will add the fun code style of   padding 50 of top and bottom right and left to  30 BX then I will set the border of 1 PX solid   with RGB color I will set the Border radius  to 10 PX margin to 25 PX if I save now we can   to see this so next thing I need to set the font  size to this font Cod count so for that I will add   the font Cod of do will set the font size to 72  PX line I to 0.4 and then margin right to 25 PX if I save now we can see the font size of  this next to this same as this I need to   add the styles to this H3 also I will copy this  I will add the H3 of element selector we'll set   the font size to 21 PX line height to 1.5 and  then font weight to 400 if I save we can see   this so instead of do I need to change H3 if I  save now we can see this with space evenly and   then next thing I need to add the styles to  this experience for this experience we need   to set the space between both rows so I can  use this my work. experience justify content   to be space around and then I need to set this Li  because we have added this education and then work   experience with ul and Li we need to set the  styles to the each Li of margin bottom to 25 if I save we can see the space between this Lis  and then I need to add the styles to this icon   for the icon we have already still created with  Li and then next element of do icon with font   size of 35 PX border radius to 10 PX Marin 2  10 and 20px if I save we can see the icon to   this and then next thing we need to add the font  size to H3 tag of that what the content we are   used so I will add the same Li with service and  then H3 I will set the font size to 30px font   weight to 400 margin bottom to 0.5 rem same thing  I need to add the styles to the H4 also so I will   copy this and then I will change the font size  to 18 PX and then margin bottom to same 0.5 RM   below to this I need to set the styles to this  paragraph tag this pan tag also for this I will   copy this of pan tag I will set the phone size  to 12 PX color of where color then as I said we   are going to set this paragraph tag styles with  p tag font size 15 PX color off where take color if I save if I go to the browser here  we can see the work experience and the   education with Styles so here this style is  not taking for the span tag because this is   H3 but here in H4 we have mentioned so I need  to change these things to H4 if I save if I go   to the browser here now we can see the styles  to the span tag also now we have completed this   work session also the next thing we need to add  this service session so for that in the service   session inside this we are going to add the title  and then H2 so for the title we have already added   the same for service and then what I offer and  then inside the service the same as this we need   to add some content so for that I have already  created the content I will copy and paste here   because the same content is repeating so instead  of typing I will use the same to copy and paste if I save if I go to the browser here we can  see this so this is the service content and   then what are the service is going to provide  with web development this is same ul and L tag so   need to style this again I will jump to the style.  CSS so here in this service we are going to set   the background color as text color of dark color  and then again I will set the title to be center   with the help of text line Center if I save now  we can see the service session with what I offer   other content is not displayed because of that  color change again if I jump to the index.html we   need to add the styles to the service code right  so for the service code I will add the background   color to white and then margin 10px border radius  to 10px and then padding to 40px we have already   added the icon inside this so we need to add  the styles to that icon also for that icon I   will set the font size to 70px and then margin  outer spacing to be to RM and I will add the   font size to this H3 tag so this way we can find  out this is a heading we need to add the styles   to that P tag also here for the P tag we are  using this light color and then font size as 18 if I save if I go to the browser here we can see  that so here it was in the list view so anyway we   need to set the grid for two column one per frame  as like this so we need to use this same content   so for that I will copy this because we are going  to set this as 2 per one right so we have already   used this grid content we'll reuse with comma  and then service content if I save if I go to   the browser here we can see the grid of two repeat  of one per frame how simple is this right we have   done this service and then next thing we need to  add the content so I will jump to the index.html   to add to work on this content inside the content  I will add the title of contact me and then let's   start a new project same thing I will add the  content here I will copy and paste my content   here inside that I have already added one div  with content details same as this service and   then inside that content only changed here this  is ul and then L off location and then phone   number mail ID this is for the left hand side  and then right hand side we have a contact form   with input parameters with input of text your name  email phone number and subject with text message if I save if I go to the browser here we can  see this this is what the title and then this   is what the UR and then this is what the form  now we need to style this next to this service   I will set this title into the center of the  list with title of text line Center we need   to set this both ul and then form should be  center of the screen with space evenly so for   that I will add the content and then content  row of space evenly if I save we can see the   space evenly to this same thing I will add the  LI of margin bottom to 20px and then I will add   the styles to the I ions with a font size of  32 and then margin of 10px and then next thing   I will add the styles to this H4 element with  font size of 24 PX next thing I will add the   styles to this P tag with the same Li of p with  font size of 18 and then color of light color if I save if I go to the browser here we can see  this now we need to add the styles to this form   so here for this we are going to add the  styles to the form with the content form   and input text area because we are going to  set the Styles commonly to all the input and   then text area so for that I will create that  ID of contact form with class selector and then   element selector of text and then text area of  element selector I will add the margin inner   spacing of 10 PX adding inner spacing of 10 PX  will set the Border radius to 10 PX we set the   border to 1 PX solid with title color we'll  remove the outline To None we'll remove the   resize to none for the text area we'll set  the width of 300 PX and then height of 55 PX if I save if I go to the browser here we can see  this this should be rare again if I save now we   can see the text here so here it is not fully  filled to this so for that I will add separate   style to this with the text area I will remove  this I will add the height of 100% percentage   this height of 100 percentage will set to row  to height and then column to 50 with the help of   width 97 percentage if I save I go to the browser  now we can see the contact me with that location   with input area and then next thing we need to add  the blocks here so for that again I will jump to   the index.html here inside the blocks I'm going  to add the HTML element of same thing like like   title and recent blocks and then next to this  I'm going to add the row with align item Center   then inside that I'm going to add the single  blog with that blog image of image source to   be image of Project 1.png Blog content of H3 and  here I can add the title of the video if I save   if I go to the browser here we can see this get  updates of title with block so I will copy this   I will reuse for three times because I'm going to  display the three blocks here so if I save if I   go to the browser now we can see this these are  all the projects we have already uploaded in my   channel if you are interested please check it out  now we need to style this so again I will jump to   the style. CSS in the style. CSS for the blog  I will set the background color to the session   BG this is a light color of comparing to White  and then we need to set the styles to this of   single blog of margin one RM cursor to pointer  I will set the styles to the image of image with   single blog and then border radius to 10px box  sizing to be same of that previously we have   added for that service session and then margin  bottom to 20px same thing we can use the single   block over we need to to scale to transform  of that image so I will use the transform of   scale 1.1 if I save if I go to the browser  here we can see the recent block with hover   effect to that blocks and then next thing  we need to add the content to the footer so   again I will jump to the index.html inside  the footer I will add the row with column   of text and then logo with all rights received  by Sharathchandar K and then here next to this   we have added the follow me with social footer  with UL I need to add the styles to this again I   will jump to the style dot CSS I will add the  color to that logo as well as the follow me if I save now we can see the color to this logo  as well as the follow me but the social icon is   missed right we need to add some Dynamic so I  will copy this I will paste it here instead of   item home I used to set item footer so we need to  use the background colors so I will copy this and   I will paste it here instead of item I need to  set to item footer I will copy this I will paste   here for this social we set that social footer so  if I save if I go to the browser here we can see   the follow me with icons here we need to add the  styles to this so for this social we need to set   the center of the list and then with Center if  I save now we can see the follow me with social   icons how simple is this right how many place we  have all the places we can use this as Dynamic and   it will display the website as much as we can  and then next thing we have already added the   values here once we click this is going to some  other else right so instead of this if I click   we need to navigate that one so here this was but  we have not yet mentioned that Ash so for that in   the script.js here in the dynamic menu I can add  the ash before the click so this will help to set   that off Ash and then I will close this with this  I will use the same and then I will close this so   I need to add the ash inside this now it is Ash  of whom if I click it will not go because this   was in h of capitalize so we need to set these  things to lower case so how we can do that here   we have a to lower case with this if I copy if  I paste it here if I save if I go to the browser   it will refresh if I click now we are in the home  if I click about it will go to the about session   if I click work it will automatically go to the  work if I click service now here the style is   not correct here if it is in home we can see the  Styles as correct once we set to Sticky the Styles   is not correct we need to set that so again in the  style. CSS for this once this sticky menu we have   set after after the a of before because after this  before we have set the values to bottom of 19 PX if I save if I go to the browser if I refresh if  I over now it will be set to the bottom of 19 so   for the first time the home should be active  right so how we can do that in the script.js   so this is what the one major advantage using  Dynamic values if I index equal to0 that should   be ohm so if this is home then we need to set  the item 1 do class list. add class of active   if I save if I go to the browser now we can  see the home active is present because here in   the active if I go and search this so we have  already added this of over and then active if   both present we set the background of color if  I go and click this this should be active and   this over should be remoted right if I click this  this should be remove and this should be active   and then whenever we scroll to this session this  automatically set to this particular menus right   we need to jump to the script.js first while  clicking this we'll set that to active for that   we need to create item one dot add event listener  of Click because whenever we are going to click   this should be append of e of parameter and then  we need to set that e do Target do parent element   because this is Li of a once we click this we need  to set the active class to that parent element   only right like this L class of a so I will use  the parent element of class list do add class of   active if I go on refresh if I click about now  it set to active and then if I click this set   to active this should be removed right for this  we are using as a desktop menu for the desktop   menu we have already added the Declaration of of  desktop menu with child nodes. for because these   are all the child nodes from that particular UL  tag of Li inside this I will add the console. log   of Li if I save if I go to the browser in the  console if I click on about we can get all the   L with active class we need to remove this class  right same La dot class list do remove of active   if I save if I go to the browser I click it is  automatically scroll and set to active here once   we are in the bottom we need to go to top right  so for that we need to add the scroll to top in   the index.html next to footer I will add one more  div with scroll to top and then HF of a tag should   be home and then angle bracket if I save if I  go to the browser here we can see this now we   need to add the styles to this once we click  this it will scroll to top so anyway we need   to add the styles to that so again I I will jump  to the style. CSS in the end of the list I will   add this scroll top of this class of ey of that  icon position to be fixed this should be fixed on   that bottom below corner and then font size to  20 PX right of -1 PX then we'll set the bottom   to 30 PX cursor to pointer we'll set the color  to primary color and then we'll add the trans   position of all 0.3 second years out 0 second  We'll add the background color of text color   to set the circle like with the help of width  of 45 PX and then height of 45 PX we'll set the   Border radius to 50 PX it will set to Circle text  align to be Center and then margin right to 15px if I save if I go here now it is in the left  hand side so because it is ex if I save now we   can see the scroll top here we need to set the  line height to this of 45 PX this will set to   center of this one so once we click this this  should be automatically go to top but here it   was merged with this so we need to enable only  when user is scroll to here so for that I will   set this visibility to Hidden opacity to zero if  I save if I go to to the browser here we can't   see that once we scroll here that time only  we need to display here so for that we have   already created the even for scroll event  here I will set one more if condition the   same thing I will copy this and then one more  if condition of if greater than 400 El so for   this we have already added the Declaration of  scroll top do style do visibility to visible   same thing R Top do style dot opacity to 1  and then same thing I will copy here and I   will paste it below here instead of visible  I will set to hidden then opacity to zero if I save if I go here if I scroll now we  can see that once it reaches 400 then it is   visible the next thing we need to add the  response view so if I switch back to the   tablet or mobile device it is not proper so we  need to do the functionality for that and then   once it is in the tablet view once we click  menu this should be open the side navigation   board right so for that I will jump to the style.  CSS here first I will set the desktop menu to none   if I save if I go to the browser now we can't  able to see the desktop browser here in the end   of the list we need to add three media queries  the First Media query is for desktop view for   desktop query of midnight to 990 and then second  thing is tablet view of tablet query with screen   size Min width to 481 PX and then Max width  to 468 in between this resolution this media   query will fire third one is mobile view for that  mobile query I will set screen size only with Max   width of 480 so for the first thing whenever we  are in the desktop view that time only we need   to show the men board right so right now we have  set this side mobile menu as displayed To None I   will set the desktop menu as display to block if  I save if I go to the browser here now we can see   the menus if I go to the tablet view it is not  visible so for that we need to add the styles   to that so whenever we are in the tablet view we  need to add the styles to that transparent header   of padding should be one rem so right now we are  added fire RM if I go to the mobile view now it   is 5rem if I switch back to the tablet view this  should be 1rem so here we can see the difference   of the Styles and then next thing I will add the  main menu do mobile bar we need to set to visible   right that three bards we'll set the display to  block margin left to 25 PX if I save if I go to   the browser here we can see this once we click  this we need to open the site navigation bar right   so for that I will jump to the script.js in the  script.js we need to add some even listener for   that we have already created that open menu do  add even listener of that menu Bar with click of   function inside that we are going to add the site  mobile menu. classlist do add off open menu board   and then body overlay dot class list. add off open  and then we need to create one more function with   close menu bar inside this function we are going  to close that so I will copy this same and I will   paste it inside here and instead of add I will  set to remove so for this where we can remove   we have the close menu on that side new board  for this I will create that add event listener   of function and then I will call the function of  close menu board next thing of Body overlay. add   even listener this are the Declaration we have  declared on the top of click close menu bar if I   save if I go to the browser if I click nothing  is happened right if I go and check that here   we have added so if I refresh now here in the  side mobile menu nothing is there there is no   more class if I click this here we have added the  open menu board so we need to add the styles to   this Open men board so again I will jump to this  style. CSS I will move to the top of that site   menu board here do site menu board do open menu I  will set the left to zero one more thing I need to   add for that body overlay so here body overlay  dot open if I set these things to open we need   to set this opacity to one visibility to visible  if I save if I refresh if I click on open it was   opened so we need to set this body overlay outside  this side navigation board so because inside this   it is set to Z index to same if I save if I go to  the browser if I click on menu we can see the menu   item here once we click this it is automatically  scrolled to that particular portion but still some   of the places design is not same we need to fix  that so again I will jump to the style. CSS in   that media query of tablet view for for this first  I will set the social menu with padding right to   25px I will set the slider I to 600 PX if I save  if I go to the browser now it's set to 600 PX so   the next thing we need to set this font size of  that H1 I will set to 60px if I save it is reduced   and we can able to see this the next thing we need  to add this future in a two per column right so   previously we have done this for adding the grid  so I will use the same for intro future as well as   the block content to so the same thing the block  content also should be in this T row so I will go   here if I save if I go to the browser here now we  can see the row if I click if I go to the Future   now we can see that two per row still the margin  top is there we need to reset that for that we   have already added the nth child of 2 and4 I will  reset to margin top of zero for that so if I save   if I go to the browser now we can see that margin  top to this for that all Container we used to set   to padding of FM so now I need to set to padding  of 3 RM for this containers and then title size to   be 40 PX and then margin to 10px if I save now  we can see the about image of 400 PX and then   we need to set this flex direction to be column  because this was displayed to flex we need to set   to column to flux Direction I will add some which  are all the places set to flux direction to be   column these are all the place of the element  I need to set the flux direction to be column if I save if I go to the browser now we can see  the style of with of 400 and then we can able   to see the top and bottom and then list and  then year everything looks good but here in   the about content here it is not good we need to  fix that and then I need to reduce the Maru font   size also for that Maru font size I will set to  60px I will set the post category of work title   should be phone size of 25 PX if I save if I go  to the browser now we can see the title space   was reduced next thing I will scroll here the  experience this should be column wise I need to   change this Flex direction as column wise if I  save if I go to the browser here we can see the   column wise reversed education should be on top  and then experience should be bottom if you go to   the laptop view experience is the first and then  education is the next for the tablet view it was   reversed I will set other phone size here  for the works and service if I save if I   go to browser here we can see this now for the  tablet view everything looks great if I click   menu we can see that menu and then click also  working and everything looks fine if I switch to   the mobile view still it is not fine so we need  to fix this with that query of Mobile screen so   here almost the similar thing we need to do for  that I will copy this entire thing for the tablet   View and I will paste it for mobile also if I save  if I go to the browser here something looks fine   we need to change some other thing also I will  change the styles from the top the transparent   Eder this should be same this one has also same  and then for the single slider I will set to   width of same and then here for this container I  will set to 35 PX if I save if I go to the browser   here we can see this and then next thing I need  to change the intro future of row I will set to   padding of 3rem then 2rem for this mobile view we  are not going to show this icons for here because   it was merged so for that mobile view only I will  set this social home to be display none if I save   if I go to the browser now we on see that and  then next thing for the flux Direction column   we need to add some content same as above so  I will use this Row for the flex direction if I save I go to the browser here it was added  so still the issue is there for that service I   will go to the top and then only for works and  service we need to set to display flex and then   flex direction should be column if I save if I go  to the browser now we can see the content here if   I click it will be open the side menu but still we  have some gaps here so we need to fix that where   it is coming from so here the Gap is coming from  here this content form we need to fix that this is   from the footer so for this for all other values  with that footer I will set to 2rem instead of   three and then I will set the font size of H2 and  then width of I to be 300 and then about info of   flux wrap should be wrap and then about content  of padding right to be 15px and then for this   mobile view I will reduce sizing to the markqe of  one size to 40px and then I will set the content   to be block and then I will reduce these things  to align item to be flux chart if I save if I go   to the browser if I refresh if I click on menu it  is coming correctly and we can see all the texture   as we expected with response view if I go to the  tablet view we can see the content as visible as   possible and then that style should be added for  the web kit of scroll board so for that we are   having that web kit scroll board to add the styles  of dynamic web kit scroll board with of 8px and   then background color to be and then background  of that scroll bar should be same as text color   if I save if I go to the browser if I expand  this now we can see the scroll bar Styles here   so now once we scroll we need to automatically set  this menu active from that particular session that   is the last one and then final thing for that I  will jump to the script.js I will create one more   function of on page navigation so here inside that  we'll get that scroll y with window. page y upset   so we need to call this on page navigation on that  scroll event here we need to add the one more L   Declaration of sessions so for that I will create  one more const and I will add the Declaration with   sessions and then document. query selector all  of sessions with ID what this will do for this   sessions. for each of current we'll set that const  session height equal to current do offset he so   here we'll add the console. log of current if I  save if I go to the browser here in the console   if I scroll will get all the sessions here inside  this current so with the help of this we can find   that offset height and then we need to set that I  will create one more con of session top then this   session top contains current. get bouny client  reset do toop plus window do p y offset minus   50 because we are going to set this above the 50  I will create one more Declaration of session ID   equal to parent do get attribute of ID this will  get that session ID here so with the help of this   ID we can directly set that right so if document.  res selector of do desktop menu of a of of href   equal to session ID if not equal to undefined  then we need to perform that if CR y greater   than session top and then CR y less than equal to  session top plus session it if this if condition   matches we can directly use this document. query  selector do parent element do class list. add or   active else we'll set this same thing and then  instead of add we need to remove this if I save   if I go to the browser if I go to the Top If  I refresh if I scroll now we are almost in the   above session see how simple is this right the  ab session before the minus 50 it will find and   it will set active if I scroll to the top it will  remove all the active from other class if I scroll   it will be automatically scroll to the session  and it will set to active here and if I go to   the tablet view we can see that design if I go to  the mobile view we can see the design the design   is not proper so I need to fix this for that again  I will jump to the style. CSS for the mobile view   footer with social footer so for this we need to  set the display web kit box if I save now if I   go to the browser now we can able to see see The  Social Network icon in the list view so if I go   to the tablet view it should be in the single View  and then if I go to the laptop view we can see as   I said the menu is dynamic so I will remove work  and service from here if I save what will happen   so here it was removed work and service from here  right if I scroll but still I can able to see   the work service session also here so we need to  remove this tool so for that in the script.js for   the on load we need to write one more condition of  document. get element by ID with menu dot to lower   case with the same one I can use this so for this  inside the forage I will set this document. get   element by ID this is the menu's ID we get as the  same for that navigation and then we'll set simply   style. display equal to block I will go to the  style. Cs here on the top before the header I can   set all the sessions display To None I save I will  go and refresh the browser here now we can see   only home about content and block if I scroll we  can see home and then about and then contact and   then block so other two things is not visible so  again I will go and enable this like service work   if I save if I go to the browser yes we can see  all the menus if I scroll we'll get that work if I   scroll we'll get the services too and then contact  and then blog if I click on scroll to the top we   scroll it will set the session finally we have  completed this dynamic software engineer portfolio   using HTML CSS and JavaScript I hope this video  will be helpful for you please like this video   and also subscribe to my channel Sharathchandar  K to watch more more videos like this one if   you are interested in JavaScript projects like  this I have created and added a playlist Link   in the description please do check it out thank  you so much for watching until next time keep   coding and keep learning see you in the next  video Happy coding bye for now have a nice day

Channel: Sharathchandar K

Views: 181

Keywords: personal portfolio website using html and css, responsive website using html and css, personal website html css javascript, portfolio website tutorial, website html css, web developer portfolio, developer portfolios, web developer portfolios, web dev portfolio, javascript, web development, html, javascript tutorial, javascript for beginners, Responsive Portfolio Website From Scratch, portfolio website, personal portfolio website, build website, css, html css js portfolio, website

Id: 8bz_yr8TtZc

Length: 99min 43sec (5983 seconds)

Published: Sat Jun 01 2024