How to React JS + Tailwind CSS Portfolio Website Step by Step Coding Session Tutorial

react Tailwind we all of them in today's portfolio we will make contact from work so we will receive emails then we will deploy our page and of course it will be responsive first make sure we have this intellisense extension installed and also this es7 now we'll go to terminal there we'll do new terminal and we'll paste there our first command and it will be this one you can find them in a description there we will use this as a front end name we will select react JavaScript now on the Tailwind page we'll go to get started framework guide we and there we already did this so so we will use this First Command we actually maybe didn't went to our front end project that we created so we will CD it now we will run the command now we will run the second one that is there now we should go in tailent config file and paste there this then we should paste the Tailwind directives so let's go to to their Source folder index. CSS paste dat directives and there to try that our tail vent is working and connected we'll go to ab. jsx file and paste there the thing like this we don't need logo and weat also we don't need well basically anything now even this constant save it let's check the. CSS we can delete it index.css we will leave there and this main. js6 also now we will do that we will run def so npm run Def and it will open the server where will be our page now let's drive this is working so let's do for example this and yeah it's working so we have Tailwind installed and now we can start uh in our folder first we'll create there uh some folders so first one will be components where we will have the sections that we will use then assets we have there there we will put the images and that will be it for now we can also install there create the new terminal and we can also in actually CD front end and there we can actually install the react scroll and also react icons library that we will use for the smooth scrolling and also for the icons on our page now I would precreate all the components that we will be creating and put them in our ab. js6 so we have this ready and we can just then code the components so let's start first one will be actually na bar now we as we imported the the or installed the extensions we can use this rafc and save it then we will also use some skills section also some about section contact Section then a footer and what else so we will have about contact footer definitely hero section right and also we will have there some work section with with our work that we did now in this AB jsx page we will put all these components and then we'll just code it and it will be ready so we will start with the nabar it will import it then we will continue with the hero section after hero section we will continue with work probably then we will have there some skills after skills there will be about section contact Section and on the end there will be a footer so we have there two four six seven components okay that should be fine of course we can reorder it in the end it will be fine I just now prepared it so we can then just code let's go and code the first comp component but before that we should add some assets I will addit these assets that you can find on a git I will provide for you and also of course use your own pictures but if you want to code along and use something that I used you can of course use also this that I will give to you I will also give you this index. CSS file where I'm using this grid layout or great background for my world page also this font space grotesque and also also this glass CSS class that we will use for most of our components to make it with this effect that will have some Shadow backdrop filter with blurred background so it will create the class effect then we will just apply it as other Tailwind classes and it will add it to our Elementor component and this is how the grid background will look like by the way and you can also see there on the left side there are all of our components that we imported in epot js6 and we like precreate and now we add a code and a content to all of them so let's dive right into it what we will do first there is that we'll also import use State because we will be using a state variable that will be changing our navigation from desktop to mobile version then we will import the icons for our navigation so we'll be importing outline close and also outline menu then we will be importing the link from the smooth scroll or from the react scroll Library so from react scroll and now in our Navar we can start above the return and we'll start with defining the state variable that will be a constant and N with function setna there we will create a function handle NF and this function will be setting the state variable nef there so whenever we will click the element that will have onclick function with this handle NF the nef value will will be set from True to false or other way around now having this state nav we can continue in our navigation in our main div there we will just start with some unordered list with list items and inside these list items we will have the link that we just imported from this react scroll Library it will be used for for this mot scroll let's copy it three times let's say because we will have it for the homepage home also for about then for portfolio and also for contact then after let's do some spacing there then after this we will have there also the icon that will be changed whenever it's like Mobile screen or whenever it's disktop version so there we will add a div and we will add there the on click function so on click we will call this handle navigation and after it's called it will change the value of the navigation State variable there in site we will add the Turner operator Naf and this will execute the first position or the second position based on the value of the variable so the first position as true position and in case uh it will be true it will execute the so in case it will be true it will be showing the outline close icon we import it there and in case it will be false which is the default state it will show the other icon which is this outline menu we will set there some size let's set 30 let's close it there and set the same size and also we will set there some styling for this icon but let's Ed it later as I will be need to change the screen you can see there to Mobile screen and I want don't want to do it now I just want to finish now the text and then I will start adding the classes okay last thing that we need there is the mobile navigation so we will create their div that will hold another unordered list and again that will be the same story there will be the list items with these links we will use in this D another Turnal operator because we want to show this navigation only when this onclick function happens so only when this menu is changed to this close icon or the value of the variable is changed from false to true and there in The Styling we will again use the Turner operator so there we will use the variable question mark and we will Define the first position and then the second or false position first what we will need to do is that we will need to actually hide this unordered list for the desktop for the menu and close we'll set the styling so on the mobile screen it will be block and then on medium screen and above we will hide it also we will put there some color so text GR 300 is fine then we will make it fixed also we will as this is fixed we will put this to right let's try 10 and also top 10 so it's not yeah something like this is fine and also we'll hire the Z index now let's try if the so it's changing that's fine so the ter operator works and now we will make is that we will code there for the second turnning operator The Styling and it will actually show the mobile navigation when we'll click it so when this will be false we will make it fixed to left minus 100% we will style there text grade 300 but let's actually make it through on our screen so when I click it it's going getting to minus 100 fixed left and when I click it again it appears well and that's basically it for this Mobile screen navigation but of course we need to style it so it looks at least somehow good let's start with the text Gray 300 continue with Z index 240 so it's we are able to see it even though there are some other elements with other Z indexes on the page then we will make it fixed to left zero and also top zero let's make width to full we can now try the background to White yeah of course so it's taking the full width and it's fixed to left and top zero as we want it let's now actually set some background so usually what I'm using for my navigations is something like this gray color color then I will continue with ease in out that will make our navigation smoothly slide in and also some duration so it's not instant 500 is fine let's now try it now we will add styling to our unordered list so yeah it doesn't look like this let's uh put there some ping let's let's increase the text size let's also do some margin to left let's also hire the Z index there and what else will we do is that for these links is that you put there all the alts you basically hold alt and then you will click on all these lines and then we can write on all these lines at the same time so I will use their class name and I will set their pedding to two and it will do this okay we also need to make this link work what we need to do is that we need to add a destination where this link will head us so we'll add two and the first one as it's a homepage it will let us to Hero then also for this smooth scroll to work we need add few vales first one is spy we will set it to True second one will be smooth of course we want it to be true and then we'll set the offset values which is 50 and also the duration and again I will use there 500 then I can just copy it from there and put it there and then just use these you know contact portfolio because it will be the IDS I will put to my pages so I can then just reuse it and this smooth scroll navigation will work let's change this to a different screen size let's close it change it to different screen and this is where we will go the desktop navigation so now let's do there something like medium screen and above this will be again displayed Flex with background white so I can see it okay so let's put there something more or actually now you can see because I moved the window in my OBS so yep we can continue I made sure it's there with this background white and there I will just continue with the styling so I'm using on medium screen and above display Flex so that will change the display hidden and now we can continue so we can leave there the background only for the purpose so we will see where our navigation bar is we can do something like orange 200 or 800 okay we will use also some fixed height so it's not this 10 let's use something like I don't know 96 pixels this fixed height we will use on the top diff because that will hold the wall uh navigation bar so we'll set it there also the color will be set there and this will just keep the hidden and on medium it will become display Flex we can set there some Max width let's use 1200 pixels we can set there display flex and uh justify between so we will have between spacing with between all between all elements we will have on our in our nav bar so I will justify between and also item Center so we will Center it vertically how our navigation bar looks like okay we will also need to use their MX Auto we will also add their uh logo or our name and that can be just in some H1 tag so I will use there H1 John do name and on the right side the items of course in the items we can also use uh justify we can set some gap for example to six also some text Excel maybe that's fine and for the logo of for the name we also set text Excel and uh maybe even font bolt and that's fine now we will do the thing that I mentioned on the beginning we will start or we will change this backgrounds for the class effect we import it in index. CSS and it will look like this also you there some padding on a horizontal line so I will add there maybe eight of course I also need to the change the text so let's use text White or even better if you use something a bit darker so text grade 200 okay 300 works the best probably and I will keep it like this now let's try to change the window to this and it works we need to change this to the same style as uh we have there in Mobile navigation that means we'll change it to the link with the smooth scroll like this yeah and now we can really we maybe don't even need a sping by the way uh how it looks like yeah this ping is not needed so we can delete this wall you know classes from the link list items like this and we can keep it in hero section we will start with all the Imports so we will import the images then we will import also the other pictures which will be two notebooks and one mobile if I'm not mistaken so we can check there notebook left notebook middle and also mobile right these pictures are name the same so we will just copy paste this one and also we will need to import the type animation so import type animation from react type animation yeah I didn't imported the library so let's open the terminal npmi react type animation install it and that should make it work again yep it helped and now we can go to coding of the hero section as we imported everything so there we will open the section or the main diff and uh again we'll start with the elements so we want there three pictures that will be behind all the text in our hero section so this will have some here we have some class name also some source and also an alt we will want it three times then we will have there div that will hold the heading one which with our like react animation text or yeah type animation text where will will be written what we are doing and so on and under this there will be a paragraph that will say our name and below this div we will have a profile picture it won't be actually below this div it will be next to it but it will be on the bottom of this section so there we will just add a div and inside we will again put some image like there of course we have the errors but we'll quickly fix it so the first images will be the notebook left then uh it will be the notebook middle and then it will be the mobile phone then we will have there the profile picture and it's working now we have there the pictures and we can continue first let's add the react type animation actually so there in the H1 tag we will add a span and inside these span Texs there will be a paragraph tag I am uh and there will be the other text now A Break Tag and below this will be the type animation this type animation requires some fields we need to fil first one will be sequence and that will be saying what we want this animation to write so first we'll want it to write front end developer for duration of 1,000 second one web designer for duration of th000 again and third one consultant for duration of 1,000 again we will wrap this in a spantex and also we will put there some speed that will be set to 50 and we will repeat this on Infinity that means it will be in an infinite Loop we will also need maybe first to style the images because then we would be able to see actually our navigation and be able to play with it now we cannot see it because it's actually so small so you cannot see it on the screen yet let's go and add to this H1 some styling so there we will we use text white so you can see it's there also we are there text for XL and we'll make it responsive so on a smaller screen above we'll be increasing this on a large screen even bigger so let's use text 8 XL and also font extra bolt we will also use there for this div CL last name of the glass so it's wrapped like this horizontal pedding let's set horizontal pedding to five so we have it a little bit more not on the corners now let's actually go to the images because yeah we really need to get them to Absolute position so we can style the hero section better there to every image we will set position to Absolute we will set the lower Z index we will also set there some width so let's use 400 pixels we will set button to zero and we will set some position on left for this one I will use minus 170 pixels and uh in order for this to work we also need to set position relative to the main div so there we'll that position relative like this now we can take all these position absolute classes put it to every image okay and we also let's actually go to this image and set there some width so we can see awesome there we'll change the positioning so we can keep this as minus 170 pixels the second one we can try something else so let's do I don't know 32 pixels yes it will be somewhere more in the middle and for the third one let's use 450 pixels because we want it to be more on the right side okay let's also decrease the width to 200 pixels so it's a bit smaller and now to work with it let's also start to add some some styling for the main div so we'll use there a grid layout and on a mobile screen there will be defaultly set great columns one but on a smaller screen and above we'll be using great columns 3 so we will to create there three columns and we'll want this text you can see there this type animation with also the paragraph that we will fill my my name is John do and I have five plus years experience and we development for this world text in this D we will setle column span to two so it means it will take two out of three columns also some horizontal pedding and Center it with oh we already have there and Center it vertically like this and we will continue so we will set there some Gap we will set there also some Max WID so let's use again 1200 pixels on medium screen and above we will set some viewport height so let's use uh 70 now let's Center it again it's starting finally to get in some shape which is great and also we also there are some vertical pedding let's try eight okay the mobile picture we will need to change also the bottom position so let's use there something like 500 pixels it looks better so it's like behind our navigation and we can see some of the mobile uh yeah you can play with these values for bottom left and maybe even with width depends on what pictures will you put on your page and style it as you want of course if you want on Mobile screen to be somewhere different you can just change it from medium that it will be there and from on the basic uh Mobile screen that it will be somewhere on the different position something like this then when you will change it you can see how the bottom of the mobile is changing there let's actually continue we can rever this because I won't be using this for now for the image there we will do the same thing we will set it absolute we will put it to btom zero so it will be there but we we'll also put it to right zero so it will be in the right bottom corner then we can also delete the width from there because we will set it in the div above and there we will set the width for the large screen and above to 750 pixels still too big let's decrease it 500 pixels and now we will be playing with it a bit 600 pixels works and on Mobile screen we will set this to what about 200 pixels maybe 300 okay that's too much let's continue with styling of this paragraph text we cannot even see there so we will style this with text White ah now we can see at least that something is on the bottom we'll continue with uh some margin on vertical okay we will definitely increase this text but we'll be careful with it we will start with text small or maybe even okay we'll leave it as this but from smaller screen we will continue with text large and on a larger screen we can try something like text Excel even you will use there a Max WID 100 pixels okay and when on a larger or medium at least screen we will set a Max width to I don't know 600 pixels how it looks like looks like a bit better but what would I also do is that I would put there MX Auto no doesn't look good so margin to Left four okay and then I would do like text Gray okay of course we will delete this also so we'll use text grade 300 we will make this font bolt and on top there we will need to change this one a bit first we will get the the rate of this brake TCH then to this IM we will set the actually we don't even need a spend there right there we we will add a class name we will add some margin to bottom let's write something like four we will add our text grade 200 oh well 400 oh maybe even 500 maybe even 500 isn't that bad and uh most probably we will leave it like this so we have there Amo then the type navigation and there there is the little bit of a description and and that will be it for the hero section for now so let's move to another section and maybe on the end we'll do some final updates depends on the final design how everything will look like we will continue with an about section so let's go there open about we'll do some imports there actually we will do similar Imports like we have there so let's do two images go to about put it there we all want uh middle notebook again and mobile again so we can keep the same things just remove this one what we'll do there is that we'll do there a grd layout and we'll put there four containers and these containers will be taking a different Co span on each row so we'll have like I don't know three Co spans and the one container will take two and the second one and Below them the one will take one CR span and the right one two you will see how it looks like in a while I will let's just code it and see first let's do the containers so we'll open there the div copy it three more times do some spacings there so we improve the readability for our purpose of course otherwise we shouldn't do there any blank baces we will delete them later at the end and there we we will set a text to White so we can see it also some gap between again Max WID to 1200 pixels then we will Center this as it's some different width that we have on our report height because there is more than 1200 pixels so in that case we will Center it with MX Auto then we'll do some margin or vertical margin we will set this to 12 then we'll set there the grid layout and on Mobile screen default value will be one column and on a smaller screen and above we can set this to grid columns three yeah we will start adding some content so we'll actually see something also on the page but uh not yet first let's do the diffs the first one we'll take the column span two so it will take two columns and uh it will use the class effect and also on smaller screen and above it will have some pedding so we will set there pedding of 16 on smaller screen and above now we can see there the container let's do the second one so on smaller screen and above this one will take one com Spen also it will have a glass effect then let's go for the third one that will start from the left side so again will be the same as the second one smaller screen and above one com span class effect then the for one we'll have a on small screen and above we'll have column span of two and it will be basically the same as the first one so we can copy it and now you will see how the lay out will look like so we have there the left and right containers and this one is taking two out of three com spans and all the way around in a bottom row and we'll have some additional da and it will be only for the Mobile screen because we will be also hiding some of these grids on a mobile screen this one there will be only for a mobile phone so we will make it hidden for now and we will get back to it later for the first one we can continue so we will uh Center it vertically then we will Center it also no we don't need horizontal centering we will just put our text to left and that will be it inside we will create another div that will hold our H2 and also it will hold the paragraph tag this div will have some Max so I will show you why we need Max width first there we can do some text um I can optimize your website and the paragraph will be some ium for now and you can see what's happening on the page it's aligned to a left side and we don't want it so what we will do and we cannot also Center it because yeah it's taking the full width so what we will do is that we will set there a Max width of 60% and we'll have it like this now we can also do the styling for the heading two that means we will do there text 3 Excel font bolt margin to bottom and yeah that would be it for the paragraph Tech we will do there text Gray I don't know 200 can now move to another div that will be this one and there will be just image this image will have a source of the notebook we will set some width on a small screen to 200 pixels and on medium screen and above we will set their width of 500 pixels we also need to set there of course the height but maybe we can leave it as is maybe we can set the position absolute yeah that would be better also we will need to set there overflow hidden because it's running out of our card so of course take there and it will look like this okay then we can move to another diff that will again hold the an image so we can just copy it let's take it put it there mobile image again we will copy this overflow hidden put it there it will be like this then for the hidden one we will leave it for now and for the last one what we can do we can just copy this div we have there and paste it on its position and there will be it now we can just play with a text maybe we can also do 80% yes I think I will change it 60 to 80% and then we can also add some text like this there it will be the same awesome like two rows of text are fine I think that will be it for the work section yes and this gu us to this uh next diff we'll do is that we will hide these two pictures on a mobile screen because it doesn't look good and there is no way we can make it look good on a mobile screen it's mostly for the desktop version so we will make it hidden and we will make it on medium screen and above display block copy there do the same thing for this second diff so it will look like this and now we can code this diff that is only for the mobile purpose and it will be basically connecting these two images so we will take this there and there there we will set on medium screen and above display hidden also you'll add their position relative for the absolute position that we will add there overflow hidden so it doesn't get out of our card and uh we also set some fixed height to this card that will be 200 pixels and also we'll apply there the class effect we have and it will look like this now we will play with the pictures a bit so first this one we will just set there we don't need medium medium screen because on medium screen and above it's hidden first one is there that the width is set to 400 pixels and then we have there 200 pixels we actually need to set there uh right zero and when we will expand this page let's see what happens yeah it will get hidden and there will be the elements we had there before but for Mobile screen we will make a section where actually there are both of the images in one card what I would do is that I would add there some pedding and on medium screen and above I would reset it then I would take it apply it also to the first diff save it and let's see now it looks better and when we expand it actually H let's just do petting four for both screens and I think it's fine Mobile screen like this and medium screen and above is like this we have this section and now we can move to another one and it will be the section with our work or portfolio with our project we'll go to work component there we will need to import all the images so again we can take from there and we will import project one image from assets project 1png I hope I'm right yes and then we will copy it so it's project two 3 4 five and six awesome now what we will do is that we'll make a constant with informations from this project and then into html text we will map this constant so we don't need to repeat our code multiple times and we will have everything in one place so let's put our constant project then I will open this there I will put there ID that will be one image will be project one title will be project one and the live URL will be there or we will put it there later I mean I won't put it there but if you have some you can put it there okay now we will copy this five more times now change the numbers project two three four five six two three four five six now we have the constant so we can go to our main div and there we will first divide it even more so there will be a first diff that will be uh with heading one my work and then there will be the project mapping and inside will we will have another diff so we will open there the col brackets and there we will say that projects do map project and there we'll start the div and inside this div we will put an image and another div and in this div we will have a spent that that will hold the project title after this spent we will have another div that will actually hold the URL for the live demo so this div will need to have an anchor TCH inside and this anchor tag will redirect the person to her life demo of the project so this hre would be project. live URL and there of course will be something like life the main diff will again have Max width of 1200 pixels we will also Center it that will use two grid columns we'll have some gap of four between all the items we will use the glass CSS class that we defined in index. CSS and also you'll set there some ping now we have it there so we can start and there for the first div also first we'll Define the text so there we will put column span two and I will explain you why because if we didn't put it there into the column span two it would take you can see there you can see there is the my work think and if we didn't put it as column span 2 it would be next to all the other cards so we need to put it there now we need to sty my work H1 so there real add text for XL some margin to btom and also text grade 300 awesome and now we can go to the cards itself well the cards first the div that is holding the cards will have a key and this key will be the project ID then we'll Adder a class name and it will be a class for everything then we will use this transform and transform transition because we want to use this hover scale 105 and that means when we will hover over the card with the project it will be increasing the size inside so it will create a nice effect when we will hover over the project now we also need to set a duration for how long it will be increasing the size then we will need to set overflow hidden so nothing will run out of our card then some shadowing for the card and uh let's try it so now you can see how the effect works so it's increasing like this what we will now add is that for an image we will need to put a source so there source of the image will be project do image awesome we'll Define our some classes so width to full height to full and object to cover great there we'll continue after shadowing in and we will put there some fixed height that can be like 200 pixels and this div that is holding the spanch and the other diff Tech will make an effect where we will over over it and it will show the button to a live demo so we will need to add some opacity and so on let's start and make there a group hover and add there an opacity 90 let's see what happens now um yeah we will also need to add there uh group and next to group also uh relative because this showing with the life button will be of position absolute so we need to do it then we can go back to this div and we finally can set there the opacity to zero first I will add there some background let's use again these numbers I'm using mostly also let me set there absolute I think we will need to set there even more values to see it so we will need to next to the opposite then we will group over over it that increases the opposite to 90 there is the background we will use now position absolute that is relative to this that is also fine you do Transition opacity and duration 300 so it's not instant then after this we will need to set also the inser and now you can see it's working and the inser zero is adjusting the positioning of the element okay we can now continue with the styling of this spanch and of the second uh or of the diff inside this one we just set for the spent we will just set there text to excel also font B how it looks of course we need to set also text to White so we can can even see it looks better and I think that will be it for this pentech we will need to set the flex position there so in let's after the inser let's do flex and justify Center item Center how it looks like now better that gets us to styling of the anchor Tech itself so so the div that will hold it won't have any styling and the anchor tag itself let's set also text to White so we can even see it great there maybe we need Flex colum better now we want to make it a some button so let's just do something like background white ping X five Bing Epsilon 2 margin top two uh actually let's do their margin button let's do four let's do rounded Excel and let's do also font Bol so that will be it for the work section and now we can move to the contact one and then we will finish with the footer and also we have there the skills section but uh I don't think I will use it in the end I wanted to create some styling element but uh in the end probably we can just delete it we can also go to AB js6 delete it from there from there and that's it so let's go finish with the contact and a footer next next to react we'll need to import also the icons from library react icons AI there we will import fil LinkedIn also we will import fill G up and also fill Instagram next thing what we will do is that into this main diff we will create another diff that will hold heading to and a paragraph then there will be another diff that will hold the email form um and it will be also divided on two sides on left and right side on the left side it will hold the the icons that we just imported and on the right side it will hold the actual form so inside this diff on the right side we will also have have the H2 that will say something like ready to get started maybe with capital S and G and Below there will be an actual form inside this form we will have two diffs first one there second one there inside this div we will have first input then we will have have second input and then we will have a third input but it won't be just it will be text area actually and then in this next div we will have a button send message of course everything will have classes but I just wanted to do some blueprint of how this will look like and there will be the icons but the icons we will wrap them in Anchor Tech they will be redirecting us to the pages we will set there so linked in and and so on so it will have some href also then inside there will be the icon so AI F LinkedIn we we will add some styling to the icon and this will happen two more times there and there AI fill get up and also AI fill Instagram now let's fill the class names so we will set that a fixed width of 100 pixels and let me actually move the page down so we can see there well noted yet but we'll be able soon as we do more styling and uh H to Auto and also margin to bottom for the first two icons for the next one we won't need it or I mean for the last one as like this now you can see the icons on our page there what we also do that do the diff that is holding these icons we will set the M Epsilon order it will like Center it vertically but not yet now because well it's technically centered because it's taking the full height but it will change soon and also you will set text purple to I don't know 800 let's make it a bit darker and use 900 perfect for this div that is holding these icons and the form we will also add flexbox layout and just ify Center awesome for the form itself we will add some more styling so we will use there some ping and maybe some mix width mix width 6 XL let's try but let's do there of course the mix width of 1200 pixels that we are using for all of our page now we need to center it now we will add there the class effect we have defined in index. CSS on the start and that will be it for the next D we have there we will add there uh some text first so we can see what we are styling actually let's connect and and start working on amazing things now we would really use some text color so let's add there text Gray 500 also of course the text size so this can be like 3 Excel some margin to btom what else font Bolt and maybe let's change it to five XEL and from smaller or medium screen and above and on the base screen on the mobile screen I would do like text 3 XEL awesome now for the paragraph tag we will add uh also text Gray maybe 600 so it's a bit darker but we still need to see it so let's do 500 and text Excel well that's better then for the div that is holding this one I would use also again MX Auto but we need to do uh Max width to it because otherwise we won't be able to center it so let's do 600 pixels of Max width awesome where we are at now okay text Center awesome now we will also use there some beding that's better and what next next one we will style well I think we will just add the content for the for the contact form and we will style it so I I will go there and I will start start with the contact form and I will start with this ready to get started text so there I will use some margin to bottom again I will use text 2 XL so it's increases the text size text weight with f BT text grate 300 awesome maybe more darker one that's better for the form itself we will need to have there the action that will be with the endpoint from get form IO we will change this to an actual endpoint let's go to this page app.get for.i /login then we will sign up click on create there put there some name and put there the time zone copy this endpoint so now we also need to set method to post then in one diff below we will set some vertical spacing between the elements to four and also we'll set a margin to bottom to six now to each input we'll need to set type so first one will be text ID will be name name will be name and placeholder we'll put there just your name with three dots and I think we will just copy it and do the same for the other inputs but there is uh email ID is the email also name is also email and placeholder is your email address for text area the type is text area there is no ID name is message initial routes are five placeholder is your message and I think we can move to class names for these inputs the first input we will set with to full now we will do border gray 400 some vertical pedding some horizontal pedding and what else uh H I didn't add the Border I said the Border gray but didn't Ed it I should definitely do it what about some border radius looks better okay can we basically copy it to all the other inputs I think we can let's see how it looks like that's fine so now let's style the button and it will be it for the contact Section I will go there to this button I will use text Center we cannot see it so I will use some color let me use the color there on the button itself so and before it the button needs to be of type submit because it will be submitting the message and again it will take with full it will be purple I don't know 500 maybe a darker one 700 looks better then we will use some ping X or horizontal pedding to six of course we need to use some mix width and um what about large what about medium okay that is better ping KS to six then we will set vertical ping to three and we will do a medium round it uh okay maybe we can do XL around it that looks better so I think that will be it for our contact Section and we can move to a footer and the footer will be a quick job for us so let's go there for the footer we don't even need to import anything it's basically just a span teag and below is a paragraph tag J do jom in spentech we will use something like maybe J do something like this then we will actually he can just do their break Tech do there some I don't know hash web development 2024 of course now we need to style it a bit so again let's use a Max width of 1200 pixels let's use um some pedding let's use Flex box layout so we can do justify between that means we will have even spacing between these elements and Center it with MX Auto now we have it there but you cannot see it we need to update the text color to text Gray for 500 do the same thing for the paragraph tag [Music] and now you can see it our pag is almost done we should make this navigation work because I think I forgot to add all the IDS to sections so let's do it actually right now so contact we'll have ID contact let's copy it go to work ID work go to about ID about go to Hero there we will add ID Hero Let's go to navigation bar and I see issue now we cannot use capital letters there so H so let's just change it to uh regular letters home about portfolio and contact save it now we can try it home section about section contact Section and portfolio section is not named portfolio but it's named work section and we are naming it as a portfolio in our navigation bar which can be confusing most probably but I think I will just leave it like this we will change this to a mobile device screen and we need so we need to make overflow hidden for the hero section in our hero section there we will add overflow hidden and we'll also style a bit better the the hero section itself for a Mobile screen I think or my idea is that we will for the notebook left set hidden and on medium screen and above we will set it to block so it's better readable use this glass effect from medium screen and above for our picture or profile picture we will set the something more than 200 pixels let's do 250 there from medium and above and from medium and above bottom zero but otherwise on Mobile screen let's see what it can do 50 maybe no I don't like it 140 190 okay and this is better I think actually I like this so what I will do do more is that I will expand this text so I will go there and set there higher Max width so or actually yeah I have it there I didn't see it so set there 300 pixels and set [Music] there text small and and use 250 pixels 280 pixels and what about some ping ping four well that would be fine only if we do the Ping reset on medium screen and above and do the same also for this heading one because it needs to be aligned okay so this will happen on medium screen and above and this will happen on medium screen and above and margin to bottom two or actually let's just do six and the medium screen and above we will reset it let's open this we will need to go to Hero page so let's add there the Z index there now when we open it it will work and well we can leave there the image or we can hide it also behind the naar bar because then it wouldn't like that it's broken so let's add it also there now what else we need to fix there so we need to go to Hero section and the Overflow hidden we will apply only on Mobile screen but on medium screen and above visible like this and we need to resolve the navbar issue where we cannot click the link because it's behind this hero section that has the same class glass and we need to go to this hero section first thing that we will do is that for the glass that we are removing there we will put it back and for the index. CSS we will put there or we will copy this glass we will do class navigation remove this backdrop filter save it what will happen now is that um we need to go to Navar change this glass to glass navigation and this won't be blurred so yeah now the navigation is working what we will do is that we will just go to Navar as we are now and we will also add there from medium screen and above backdrop uh blur Xcel now if we increase the size of the page it will be blurred again so we will have our issue fixed and that will be finally it for the design of the page now let's test everything so there is our page first let's test the navigation that works let's now check the Mobile screen design and this navigation will changed from fixed also from fixed there to Absolute like this and yeah that should be it now we will open a new terminal and we will deploy our application first we need to create a disc folder so let's see the folder front end let's do command npm run build and now you can see there we have our this folder and we will use it and drop it to the netlify page on this website netlify we will login or sign up depends if you have account or not then we will go there to team overview add a new site deploy manually and there we will drag and drop the build folder that we just get with the command npm run build and we have it there there we will go to domain management you see this is our link for the page so I will click there on options addit site name now I will click it and it will open the portfolio and I can open it on my mobile phone and so and that's it for the wall page finally let's check how it looks like and I also guess you are about to leave so if you enjoy this session write me in the comments or give it a thumbs up and I hope I will see you in the next one thank you cheers

Channel: c0d1n0

Views: 5,662

Keywords: html, css, portfolio, portfolio tutorial, html css tutorial, html css portfolio walkthrough, html css website tutorial, website with html css only tutorial, bento grid, bento grid tutorial, bento style portfolio, react, tailwind, react tailwind portfolio, react js tailwind css portfolio, react js tutorial, tailwind css tutorial, tailwind css website tutorial, react tailwind website, react js tailwind css website tutorial, vite, react js tailwindcss vite

Id: pMmZz0G3HmU

Length: 77min 17sec (4637 seconds)

Published: Thu Mar 28 2024