#07 Complete React Portfolio Website Project | Footer

[Music] [Music] [Music] so [Music] [Applause] [Music] so [Music] so hello everyone welcome to the part 7 of the project today we are going to create this contact banner as you can see that this contact banner and also we are going to create the footer section of the website so this nice photo section we are going to create it and also we are going to make this all responsive so if i come here and if i go to the iphone x as you can see that this all will look good in the mobile device also as you can see so that's what we are going to create in this part of the project i hope you guys will like it also if you want to get some interesting tips and tricks about web design and development you can follow us on instagram the handle is instagram.com web underscore cipher also if you face any kind of problem with this tutorial you can join our facebook community group we have a great and helpful community and you can post your problem there so with that saying let's get started [Music] so here first of all let's create the contact uh banner as you can see that um this is the contact banner that's we are going to create here so for that let's go to our home page and before that let's actually create the component here so let's create a new file and let's name it contact banner dot js and rfc to create a functional component and let's actually have h1 let's say that this is contact banner and let's actually go to our home page and inside the home page we can actually import the component here so let's say that contact banner so import the component so now i should see if i go here and i can see the text here as you can see that in the bottom so now let's locate the banner so for that here uh inside the div let's actually create another d with a class of container and here inside that i will have another d with a class of contact contact banner wrapper and inside that i will have my p text and inside that here let's actually have some alarm with some or what i have here uh i'll have this and also uh here after the p text let's have a hd and let's also have a class here which will be the contact banner heading and inside that let's also say that let me help you and after that let's also have a button so i believe i have a button button component previously so let's import that and inside this button let's also have the button text btn text and here let's say that contact now and also let's say that btn link will be so i will link it with the contact page so contact yeah that's it i also need to import my ptex component and if i save i should see the button the text and the breakup and that's it that's the content that we need so right now we just need to do some style for it so constant contact banner styles equals to styled dot div and here we will have our styled first of all let's actually import the style from the style component and here let's say that we'll have some padding in the top and bottom so 10 ram and 0 and also for the contact banner wrapper we will say that a background color will be done variable dash dash deep dark and also let's say that border ideas will be the top pixel anyway save and let's also apply this style in this div now as you can see that uh the background color is changed and also i have the border radius so let's say that the padding will be the 5 ram and also the zero ram for the left and right and finally text align will be the center everything is now in center after that i also need to style the header so let's say that contact banner banner heading and here let's say that our font size will be the forum and also the margin bottom so margin bottom will be the two ram around yeah that's fine and finally let's also have a quick media query so media screen max width will be the 768 pixel and here i need to actually say that the contact banner heading will be the font size of 2.8 ram and if i save let's go to our small device it should be 1.8 i think this should be max with i think okay let's say that 2.8 ram automation is fine so if i come here yeah that's fine uh that's it for this uh contact banner so as you can see that uh we are done with the contact banner as you can see so after that let's also create this footer as you can see here so for that uh let's create a component here which will be the footer.js and here rfc to create the functional component and inside that let's also say that uh h1 uh hello from the footer and import this in our uh homepage so footer and import that so after that if i save i should see the text here in the bottom so i can see it let's create the footer in our footer component so here first of all let's create a d with the class of container and inside that i will have my div columns um photo column actually so filter column and this is the column number one and after that inside that i will have my column title so h1 footer column one title and here we will have the name and also after that we will have some p text so after the h1 let's say that p text and let's import the component here and inside that i will have some text here so let me copy the text and paste it over here so now i should see my text and the title and after that let's go to our uh next column so we will have four column as you can see that here one two three four and right now we don't uh right now we have first column and let's also create other columns here so d with the class of uh footer column two and duplicate it so three and four and here right now let's say that um here we will have actually a separate component which will allow us to create this other column so if you notice that these three columns are actually pretty similar so that's why we can actually create a component so that we can reuse the component in this three column so let's create the component and here in our components folder let's create that so the name of the component will be the contact uh footer i think we can use footer column digest so these will be the name and rfc to create the functional component and here let's say that h1 and this is footer column and if i save let's import it here so footer column and once i import it i should see it here so i can see my first footer column so let's actually uh use this photo column in our second and the third div so here let's also use this and similarly we can use it here so as you can see that i can see the text here uh this is footer column so right now we need some styles so let's do the styling here so here let's say that constant footer style styles equals to style dot eve and here we will have the style and before that let's import the styled from the style component and here uh first of all what we will do actually we will do the padding things so for now we just need the padding in the top side so padding top tandram and also background color will be down deep dark and if i save i can see that let me actually copy this and use this style so now i can see that the background is not changed so fine after that let's do the style here so in our container here let's say that uh display will be blacks and also gap will be through him and after that let's say that in our column number one which are here let's say that flags will be two so yeah that's fine and after that all the other column means column two column three and column four column two three and four will have the flex one so what you'll do actually it will give a little bit more space for the first column as you can see here so fine after that let's do the style for the footer column one title and here let's say that our font size will be the 3.5 prime and also the margin bottom will be the one ram fine and after that uh that's it i don't need anything else for now so now let's create the column here so right now we just have a text as you can see so in our column uh first of all we'll have a heading in our column so this will be the column heading so the here let's say that h1 and also let's add a class here and let's name it heading and here inside that we will actually show the heading so these heading we will get those heading from the props here so let's say that heading so for the heading uh default will be let's say that call heading so here we can actually pass this so heading if i do i can see this default heading as you can see so after that let's actually create these links as you can see that so for that here after the heading let's get a url and here inside that we will have the list of link so for that we will actually get those link from the prop so here what you can do actually we can create some default link props so let's say that it will be an array so links and it will be an array so inside this area we will have a object of link so the type will be so here we can actually have two kind of link so one can be linked from react router dom and another one is our traditional anchor tech so we can actually use link from the react.dom or we can actually use anchor text so here you can see that we will use and contact for our social links and also some other uh some other informational link but here you can see that all these uh internal link will be linked with the link from reactor dom so that's why we need to specify which kind of link you want to add so the type let's say that for now uh links uh the second one will be the title so the title so let's say that the home will be the title and the actual path will be the slash home and let's create another one so let me duplicate this and for the second one let's say that it will be an about and about so i i'm having an error here okay so i just forgot to give this comma here and okay that's my mistake this should be colon so now as you can see that i am having two links here so first one is this one and second one is the abortion so now we can actually use this so we can look through these links so for that here inside of our ul i just can say that we can actually keep it lowercase we don't need to make it uppercase here so links dot map and here item and index so here what we'll do actually we will say that for the for each of our link we will generate a list item so li and inside that we actually can make it parenthesis so that actually it will immediately return it so here inside that inside the parentheses we will say that list item and for the list item we need to also pass a key here so the key will be the index so that's why i just uh have the index here so inside this list item we will actually first of all check that if our type is links we will use if our type is links we will use link otherwise we will use anchor tag so let's actually check it so for checking that you can actually type item dot type if item dot type is link so if it is a link what we will do we will return something from here we will return the link from the react router dom and here we will actually use the path here so 2 will be the item dot path and inside that we will actually use the item dot title so that's what we will do if the item dot type is linked so if it is something else what we will do actually we will create an anchor tag so let's do that so here let's say that anchor tag and the path will be we can say that item dot path and also similarly the target will be the underscore blank i'm using underscore blank because whenever i am using this anchor tag it means actually it is an external link so we need to make it target underscore blank and whenever you are using target underscore blank you should need this reference so the relation the relation will be no referral and also here you just can say that item dot title so yeah as you can see that it's fine and if i go to my website i can see my two links here as you can see that for all of my columns so right now it's not having any kind of style so let's create the style here so constant i can say that column style equals to styled.div and here we will have the let's keep it styles and constant let's use this column style here in the div and here let's say that in our style so for the heading we will say that font size will be the 2.4 m and also a margin bottom will be the two ram and for the list item we will say that margin bottom will be the one and finally the anchor tag will be the font size of 1.8 ram and if i do argin bottom will be there okay so right now as you consider my links and my column are actually looking good now what i need actually i need to pass our real information so here in our footer.js uh what you can do actually we can pass those props value so photo column so for the first photo column the heading will be the important links and if i see i can see that important links are here and also i will pass my links here so it will be an object sorry it will be an array inside that will have individual object for the link so title so let's say that home and the path will be the hot slash and also the type will be link and there will be an comma i'm having this error and yeah and this should be colon once again yeah as you can see that if i pass these things so i'm facing an error here as you can see that links dot map is not a function so because uh as you can see that here i'm sending an object instead of an array so let's actually wrap this whole thing with an uh array uh with a square bracket as you can see that so we are now sending an array which means it should be fine so if i go to here as you can see that i am passing i'm having my first link which is the home so let's also pass the other link so it will be similar so i can actually duplicate this now as you can see that i see so now as you can see that i have my all links so let's also do it for our second one which is the second column and here we don't need to specify any kind of uh type because we want to make this a link with a anchor tag so that's why we just can actually leave the type blank so we are not passing any kind of type which means it will create this anchor tag as you can see i'm not having this because this is a capital l it should be a lower l so if i save now now i am having the number and i am having the email so from now on i will actually fast forward this all other links so these will be all similar things so i think you don't need to see me to do all these things so yeah we are now down with the links as you can see that it's looking good so right now we just need some uh copyright text as you can see that in the bottom we have some copyright text after the footer so let's also do that so after this whole uh div what you can do actually we can create another div with a class of copyright and inside that we will have our d with the class of container and inside that we'll have the p text and here we will have our copyrighted text so let me copy it and paste it here and if i save that i should see my copied text here and also after that uh we don't need anything else what we need actually we need to add the style for this thing so here after that we can actually grab the copyright and here we can say that diagon color will be now and text line will be the left and also the padding should be uh around 1 and zero and finally uh margin top will be the five prem if i do i can see it i think this one should have a background color of dark bg yeah that's what we have so after that let's also say that in our background margin left will be the zero yeah now it's in the left side so finally we just need to add some mediocrity and here uh we need to say that in the container we will actually need to do the flex direction of column because if i don't do that let me actually show you for our responsiveness we need to do that so right now we don't have any kind of responsiveness in the mobile device as you can see that so if i go to the uh 768 inside of 768 range what i want to do is i want to change the flex direction so here as you can see that down it is in the column so after that what i need to do and change the gap which would be the zero and finally i need to say that inside that the first dip will have a margin top of five ram yeah fine so after that we need to go to our photo column one and inside that we have the pair and say that max to it off 100 percentage yeah great so finally for our for our copyright so copyright inside that we have the container and inside that we have the div which will have a margin top of zero yeah great so that's what we have here for our footer i think we are done with the footer we have the nice footer here as you can see it is pixel perfect yeah that's what we have for our footer now it is now fully responsive as you can see that yeah that's what we have for this video in the next video we are going to create our about page so right now it's blank the about page that we are going to create is this one which is really really awesome so i'll see you in the next part of the project till then take care all right uh we need some quick fix here so here you can see that in our photo column and here if you notice that for our default links we have two default links here and the type is actually links but here we are checking against the link so it should be instead of links it should be linked only so now as you can see that the type is link um we are also checking for the link so that's fine and also one more thing uh we have the footer now as you can see that but for our other pages we don't have the footer because right now we have the footer in our home page only if i go to my home page as you can see that we have the footer in our home page but instead of the so but instead of having it on the homepage only what we can do we can actually cut it from here we can go to our app.js and here before our closing router before our closing router we can actually add our footer here so let me actually import that and so now i have the photo on my homepage and all the pages as well so as you can see yeah that's what uh for the quick fix so that's it guys if you like this video please give it a thumbs up and don't forget to share it with your friends and family also if you want to watch more video like this one please subscribe the channel and also turn on the notification bell so that you can get notified whenever i will upload my next video so my name is arfan and i will see you in the next video till then bye bye good [Music] [Applause] office [Music] you

Channel: WEB CIFAR

Views: 1,799

Keywords: web cifar, shaif arfan, react website, react website tutorial, beginner react js project, build a react website, how to make a react website, react website tutorial for beginners, react website project, react website from scratch, react website portfolio, react website development, react tutorial for beginners, react js project, react js full course, react js website, reactjs for beginners, react portfolio website, react portfolio project, react project

Id: sbFh6WhIOu0

Length: 33min 23sec (2003 seconds)

Published: Wed May 26 2021