Ultimate Next. js 14 Portfolio Website 2024 ( Zero to hero )

1. Course Intro : Take a look at this beautiful website. It all hang coded with next s. It was meticulously and professionally crafted to work in other devices. So, wouldn't it be awesome if you knew exactly how to design and code this website from scratch? Here exactly is where I come in. Hi, welcome, and thank you so much for your interest in my course. In this course, I will teach you how to build the ultimate Next GS portfolio website, using different technologies, such as next es react Jes, tear wind, and node mailer. So, if you're a newbie, don't worry. We are going to start from scratch by exploring every concept that is built in within the core of next GS frame. So we're going to cover topics like the router, which includes nexted route, dynamic route, nexted dynamic route, and catch all segments. And also, topics like data fetching, private route, file colocation, loading, layout, and so on and so forth. Haven't equipped ourselves with all the concepts. We can then proceed to build the ultimate Next S portfolio website. During this course, I will teach you how to structure the website, how to use common design components and layout patterns, and to wrap it up, we are going to follow the industry best practices to design our website. So we will make our website to be responsive on mobile devices and then optimize it for better performance. Finally, we will deploy the website on a life server, which simply implies. You portfolio website will be accessible on the Internet. So you can use it to showcase your jobs to your clients or your employers. So if you are looking for a comprehensive, easy to follow, well organized and practical course that will take you from zero to here. This is the best next e course for you. Sounds good, right. Join me and let's get started. 2. Introduction to Nextjs 14: Next S is a react framework for production. And now the question is, what exactly is the difference between next S and react Gs? React S is simply a JavaScript library for building user interfaces. And I want you to think about a library as a package that is created to solve a specific problem. React being a library is focused on creating interactive user interfaces. That exactly is the only thing react es does as a library. So you cannot use react Gs to perform routing and Httpic. Whereas a framework is a complete solution. So next gas as a framework can be used to cause effect, and as well to perform routing, which simply implies, you can use next gas to build a full starck application. Teaching good. Beautiful. Haven't understood the difference between next as and react es. In the next lecture, we will go ahead to create a new next S application. 3. Nodejs installations Installation: This section of the course, we are going to make some necessary installations to get going. It is indeed a prerequisite to have node S running on your machine before installing next gas. However, I encourage every one of you to download and install the latest stable release. This one here at the left edd of the screen. So please do not install this guy at the right d of the screen, simply because it comes with extra complexities that you may not be able to reason about. Let's quickly download and install the latest stable release. Here is it. It is downloading. Download, successful. Let's open it within the download folder. Click to install. All right. So before we proceed, we also have to quit this directory over here. And now we are left with not cheers. Let's continue. So you can go through all of the stuffs if you have the time. But for me, I just have to continue. Agree. It on install button. If you are Mc, it is definitely going to ask for your password. But if you're working on windows, it is going to be an express installation, so you don't need any password. Right now, I'm going to key in my password. Install software. The installation is ongoing. Installed, successful. Let's close it down. Do you want to keep the nods after installation or you want to move it to trash? Let's move it to trash. Right now, we are going to pop up the set b by hitting command and space bar. You just have to s for terminal. What we are going to do is to check the version we installed. I'm going to do Node space, V. Let me see if I can zoom it a little bit. All right. I can zoom up, it on the enter Key, and now we have this version of node installed. Beautiful. Now we are done with the installation. In the next lecture, we will go ahead to install VS code. This is off now. See you in the next lecture. 4. vs code installations : Hi there. Welcome back to class. In the previous lecture, we installed node GS. Now in this lecture, we will go ahead to install the code editor. Feel free to use any code editor of your choice. But for me, the VS code is always my favorite. I encourage you to download the VS code. Simply because along the line, I will share with you some tips and tricks that will speed up the development process. And for sure, I want everyone of you to follow along. Sounds good, right. Beautiful. Quickly head on to code vistudio.com, and this component will be opened right in front of you. Now let's crow down. On the left end of the screen, we have the VS code for windows, and right at the center, we have it for Obuntu and other stuffs. Lastly at the right end of the screen, we have it for Marc. Right here, I am on Mac, so I will definitely download it for Mac. But if you're working on windows, you also have to download this one right here. This one. You have to download this one. But right now, I want to download this one right here for Marc. So if you're using Mac alongside, you can quickly download the sky. Click to download. Let's check the download process. Can you see Visual Studio Code is downloading already. The download will definitely take a while. So I just have to fast forward the lecture. Download, successful. Let's open it up with in the fo Let's quickly on Zip. Boom. Here is it. Though I have it already on my machine, and that is why you can see the duplicate over here. This is the one I'm using previously, and this is the new one that I just downloaded. You can click to open. And here it. H. This is off now, and in the next lecture, we will go ahead to install some of the extensions that is needed. Those extensions are extremely important because we will be making use of it in the future. So please do not skip the next lecture. 5. vs code extensions : So in this lecture, we will go ahead to install the extensions that will be used to make things easier in the future. So first, we have to quit the release notes page. All right. At the mid left corner of the screen, you will see the extension. Here's it. And I hover, you see the extensions right. Click to open. Within the sage box, we are going to search for E seven react dor Snipe. So I'm going to do E seven plus React slash red Dox slash react Native. And here is it. Click to open. I have it installed already on my VS code, and that is the reason you can see the uninstalled butting. At your end, the install butting will be enabled. So all you have to do is to click on the installed butting. And then you will have this powerful snippet installed. This snippet is extremely powerful because we will be using it to generate some react functional component code without having to type it from scratch. Now let's go back to the said box. Now we have to install the Java script and type script nightly. Javascript and typescript nightly. Let's zoom out a little bit. I hope you can see Clearly. Can you see on the install boarding? The installation is ongoing. Installed successful. So we have to close it down. Another powerful extension is the tail wind intellisense. So this intelligence will help show the CSS equivalent to the tail wind utility class when you hove on it. Don't worry, all of this might sound tricky, but in the future, you definitely will get the gist. So let's install. T wind intellisense. And here is it. So it seems I have it installed already. Again, at your end, if you do not have it installed, you are going to see the install botin. All you have to do is to smash the install butting, and then everything will be fine with you. Again, if this is your first time to work with T wind Css, I want you to cheer up, because I will explain carefully each and every T wind utility class. Sounds good, right. Beautiful. 6. Nextjs installation : Welcome back to class. In this lecture, we will go ahead to create our first next as application. Go back to the desktop. Right within, right click new folder. I will call this folder. Next Ys practice. Take note, when naming your project, always use a descriptive name that describes the intention of the project so that you can relate with it easily in the future. Haven't created the folder. Quickly open up your VS code. The next end line is to drag and drop the folder down into the Vas code. Let's quickly maximize. Okay, we have to give it some permission here, and then let's quit the work on page. Contra bactic to open up the VS code integrated terminal. And here is it. And by the way, the ba tick is located at the top left corner of the keyboard right below the escape key. And if you cannot do it with the shortcut, all you have to do is to go to the top menu and then terminal, new terminal. And then this window below will be opened. Now, to create a new next Jz application, let's follow the command. And here is it. P X, create next ap, and then you are going to do at Latest. To copy the command, you have to click on this copy icon. Go back to VS code and then command V to paste. What I'm going to do right now is to space it out and then do. This will help install the next Js right within the next JS practice folder. It on the enter key to get it fired up. Again, hit on the enter key to proceed. Would you like to use type script? Of course, yes. Would you like to use yes lint? Of course, yes. You can switch between yes or no, using the left or the right arrow key. Would you like to use twins? Yes. Would you like to use SRC? Yes, A. Yes. Almost everything is going to be yes. Would you like to use the Import? We want everything to be complete. I will go with the option yes. Then lastly, hit on the enter key. Installed, successful. Let's quickly launch our project on the web. What I'm going to do right now is PM, Ron Dev. Simples that. And then it on the enter key. The project will be running on Localhost port 3,000, and to open up the project, all you have to do is to press down the command or the control key on your keyboard, and then click on the link to open. And on the screen is our first next GS application. 7. Nextjs BoillerPlate : All right. Welcome back to class. In the previous lecture. We learned how to create and run a basic next GS application. Now we're going to dive deep into the project files and folder structure to understand how everything works when we run our application. Let's proceed with the package JS file. Contra baci to close down the terminal. Command B or control B to open up the VS code explorer. Within the Explorer, you are going to find the package dot JN file, and here is it. Beautiful. Within the script, we have the Dave to run our application in development mode. Next is the build, which is used to build the application and get it ready for production deployment. The start script is used to start the app production server. The lint is used to set up next GS built in S lint configuration. And for the dependencies, we have react react dome and next GS. So we have react version 18 installed, and then we have next version 14.0 0.1. So as of the time of recording, this is the latest version. Below, we have the dev dependencies. Of course, we have the type script and types, and here we have the post CSS, tailwind, ES links, and so on and so forth. So let's close it down quickly. Again, within the Explorer, we have the package lock dot JN file. This file ensure consistent installation of our dependencies. Right above, we have that its ignored, which is helpful for version control. And below, we have the yd dot MD file. The yd me dot MD is a documentation that contains instruction related to running, building, and deploying the application. And we have the next env dts. It consists of typescript declaration for next gs. And what file again do we have to discusse? Let's talk about the next.com figs. And here is it. We have the next figs. We also have the ts configs right below. Also, we have the post css fig for t wind configurations. Moving on to the top, we have the public directory, and here is it. The public folder contains all the static assets to be saved, including the images and the SVGs. When we are building a reward application, all of the SVGs that we are going to use will be imported within this public directory. Close it down. The next line is the SRC, which is the source package. When you click to open, you are going to see the app, and within the app, we have the Five icon, and here is it. Let me show you on the screen, and here is the five icon, saving as the logo. Let's close it down. Here is the global CSS, which is very useful when you want to stylize multiple sections in the application. Below is the layout dot TSS. The layout dot TSS is the parent container of the entire next GS application. Finally, we have the page.tss. The page dot TSS will enter into the root layout as a children. Let me show you. So whatever you have right here, will go into the layout as children. Can you see? And here is it. When it comes here, what appears within the tag would be rendered on the screen, just like this. So everything within the page do TSS. Can you see we have the P tag which says get started by editing. When you go back to the browser, you are going to see get started by editing. This is made possible simply because the page do TS is passed down into the parent layout as children. Simpler as that. Now we have been able to understand the control flow of a next GS application. The next in line is to clean up the code. Let's do that in the next lecture. 8. Code CleanUp: In this lecture, we are going to proceed by cleaning up the code. Navigate to the page Ts. Right within, we are going to highlight from lines five to lines 111. So we want to clean up everything in order to start afresh. Wipe it off. P. The application is complaining simply because it is going to return UI. We are going to have a D here. Save the project. When you check the browser reload, you are going to see an empty screen. Go back to VS code. Now we have to open up the global CSS. It's located within the source, the app and then global CSS. When you click to open, you will see the CSS that we generated when we did MPX create app. What I'm going to do right now is to highlight from lines five. Oops. Take a look. All right. Highlight, and then down to lines 27. Wipe it off. When you save, check out the browser and bomb. Can you see? Now we have succeeded in removing everything that we do not want. We have to start from scratch. So we are going to build the application from scratch. And that is extremely good for you. I know you may be wondering why we did not delete this dw configuration over here. It is simply because if you want to Me of tail wind, this configuration must be included. So you have to leave it exactly the way it is. When you save, and again, we have an empty screen. This is off now, and in the next lecture, we will talk about the routing system in next GS 14. 9. App Router (Route System in Nextjs 14 ): In this lecture, we will go ahead to discuss the routing system in next GS 14. So let's talk about the app router. Next GS, implement a file system based routing techniques, in which the UR web part within the browser tab is controlled by the file folders within your code base. Sounds strictly right. Don't worry, when we begin to practicalize it, you will definitely understand it well enough. Take note of this key point. In next GS 14, when a folder is created within the app directory. That folder automatically becomes a route when a page.ts or a page dot S is created within. Following the next e 14 routing convention, in order to implement a route, you must definitely have to create a folder within the app directory. Let's assume we are building a reward website, where we need a contact page and a profile page. Common B to open up the Explorer. Win the app directory, right click, and then new folder. We are going to call it contacts, just like these. Another one, within the app, right click, new folder. This will be co profile. Having done this, Let's check it out on the browser to see if it is routable. Go back to the browser, and here I'm going to do Localhost Pot 3,000 slash Contact. When you hit on the entaky, it says it throws back a 44t found page. You know why? It is simply because we have to create a page do TSS or gs within the contact folder. That exactly is when this folder will become a route. Click new file. And we're going to do page TSS. Within RFC to generate the react functional component. Contact page. You can use a H one tag if you want. Take a look. Now, when you check out the browser, you are going to see the contact page. Let's route the profile page. I'm going to do Localhost than profile. When you hit on the enter Key, It returns a 404 ernaut found page. I guess by now, you should know exactly what to do at your end. Post the video and implement the profile route. Let me help you with that. W in the profile directory, right click, new file, and we're going to call it page dot TSX. Simply because we are using type script. That is why we are going with the dot TSS extension. Hit on the enter Key, again, RFC to generate the react functional component. Here, I'm going to do profile page. Let's implement it within the H one tag. Cut this, place it within and bone. All right. Save on the browser, Can you see? Now, now the page is visible. You can give the Hadron tag a class name, and then we're going to do text nine Excel. This tail wind utility class simply means we are increasing the font size to its RM. When you see and check out the browser boom. Can you see, it becomes very bold like this. Now this exactly is how to implement routing in next S. We can also route to the contact page, just like this and boom. Can you see? Take note of these key points. Routes are associated with the files based on the containing folders name within the app directory. A page dot Ts within the contact folder will map to slash contact, and a page dot TSS within the profile folder will map to slash profile. That is why when you come here and do slash contact, you get the contact page. Matter of fact, we can actually give it a background color, so you understand what we're talking about. Here let's give the SVA class name. Then within the class name, we are going to make use of the utility class PG yellow 500. When you save and check out the browser, and here is the contact page. In summary, each folder within the app directory corresponds to a URL segment, when a page with a dot TS or a dot GS extension is created within teaching Good. Beautiful. 10. Nexted Route : In this lecture, we will go ahead to discuss the routing system in next GS 14. So let's talk about the app router. Next GS implement a file system based routing techniques, in which the UR web part within the browser tab is controlled by the file folders within your code base. Sounds stricky right. Don't worry, when we begin to practicalize it, you will definitely understand it well enough. Take note of this key point. In next GS 14, when a folder is created within the app directory. That folder automatically becomes a route when a page.ts or a page dot S is created within. Following the next e 14 routing convention, in order to implement a route, you must definitely have to create a folder within the app directory. Let's assume we are building a reward website, where we need a contact page and a profile page. Common B to open up the Explorer. Win the app directory, right click, and then new folder. We are going to call it contacts, just like these. Another one, within the app, right click, new folder. This will be called profile. Having done this, Let's check it out on the browser to see if it is routable. Go back to the browser, and here I'm going to do Localhost Pot 3,000 slash Contact. When you hit on the entaky, it says it throws back a 44 root found page. You know why? It is simply because we have to create a page do TSS or do gs within the contact folder. That exactly is when this folder will become a route. Click new file. And we're going to do page dot TSS. Within RFC to generate the react functional component. Contact page. You can use a H one tag if you want. Take a look. Now, when you check out the browser, you are going to see the contact page. Let's route the profile page. I'm going to do Lost than profile. When you hit on the ak, It returns a 404 ernaut found page. I guess by now, you should know exactly what to do at your end. Post the video and implement the profile route. Let me help you with that. W in the profile directory, right click, new file, and we're going to call it page dot TSX. Simply because we are using type script. That is why we are going with the dot TSS extension. He on the enter Key, again, RFC to generate the react functional component. Here, I'm going to do profile page. Let's implement it within the H one tag. Cut this, place it within and bone. All right. Save on the browser, Can you see? Now, now the page is visible. You can give the Hadron tag a class name, and then we're going to do text nine Excel. This tail wind utility class simply means we are increasing the font size to its RM. When you see and check out the browser boom. Can you see, it becomes very bold like this. Now this exactly is how to implement routing in next S. We can also route to the contact page, just like this and boom. Can you see? Take note of these key points. Routes are associated with the files based on the containing folders name within the app directory. A page dot TS within the contact folder will map to slash contact, and a page dot TSS within the profile folder will map to slash profile. That is why when you come here and do slash contact, you get the contact page. Matter of fact, we can actually give it a background color, so you understand what we're talking about. Here let's give the SV class name. Then within the class name, we are going to make use of the utility class, PG yellow, 500. When you save and check out the browser, and here is the contact page. In summary, each folder within the app directory corresponds to a URL segment, when a page with a dot TS or a dot GS extension is created within teaching Good. Beautiful. 11. Dynamic Route : In the previous lecture, we discussed the nested route. So we created the users further. And within the users further, we nexted the first user and the second user. And within we have a page TSS, which corresponds to the URL part, slash user slash Fs user, and slash user slash second user. Though this approach works perfectly fine, but when building a reward application, it is not always possible to define a route based on a predefined part. So let me quickly break it down using a reward example. This is the elegant and super fast next Jazz portfolio website that we are going to build in this course. And by the way, the link is right within the description. So I highly encourage you to enroll. There is so much value to learn from it. Here I have listed some of the blog post. Now, if I click on any of the item, we should be able to pass down the item into a new page. Let me show you, for example, when I click on this guy, take a look. If you observe the UR well, you are going to see a slash portfolio detail s zero. It means this item has the ID of zero. Let's give the try with another item. Let's go back home. Let me try it on this guy. Now, if you observe the path, you will see slash portfolio detail, slash five. It simply implies this item has the ID of five. The dynamic routing system made it possible for us to be able to pass this item down into a new page. And with the help of the ID, we are able to fetch the corresponding datas. Can you see at the left, you can see the corresponding data to this item. So this exemplifies the dynamic routing system. Haven't discussed all of this. Quickly head on to VS code and less practicalize it. Back to VS code. So we are going to create a new folder cad blog. So within the blog, we are going to create a page dot TSS. I'm going to do slash page TSS. So this is a shortcut to create a folder and a page within. So when you hit on the enter Key, here is the blog. Can you see? Here is the page Ts, generate the functional component. What we should do right now is to render a blog post. The way we can do that right here, we are going to use the H one tag, and I'm going to do block post one like this, highlight, duplicate it eight times. Then change he to block post two, three, five, six, seven, eight. When you save the project, go back to the browser and let's see what we have. Okay. We have to navigate to the demo app. And I'm going to do slash blog. Take a look. Now we have been able to render the block post on the browser. So the next line is to click on any of the items and then pass it down to a new page. And that exactly is where the dynamic routing comes in. Now go back to the project. So within the block folder, right click, we are going to create a new folder called block ID. To create a dynamic route, we have to wrap up the name of the folder within a square bracket. The square bracket signifies a dynamic route. Now I'm going to do blog ID, simple as that, or you can do post ID. Let's do post ID. Maybe it is more readable like that. Post ID. Within the post ID, right click, and then we're going to create a new page. This will be called page Terex, generate the functional component. Here we are going to have a Hage one tag, and I'm going to do details page. When we click on any of the block item, we should be able to pass it down into that details page. When you save and check out the browser, Now we are going to do slash blog slash, for example, we are going to do one. When you hit on the enter key, and now you see the details page. When you do slash blog slash, 100, you are going to see the details page as well. Slash 800, or whatever ID that you have within your project. So you're going to see the details page. Th we should bring it up a little bit. We are making progress, and I like it. So in simplicity, next, treat a square bracket as a dynamic segment that enables us to create a dynamic crowd. So when a folder is wrapped up within the square bracket, you do not need to reference the folder within the URL before you could get the content within the page. So the essence of dynamic route is to be able to extract the ID of a post and then work on the post individually. So for example, let's go back to the first demo. So if you extract the ID of this content, when you click, based on the ID, we will be able to perform some operation on it. So we will be able to fetch the corresponding datas. We can also delete and do whatever we want to do with the data. So now let me show you how to extract the ID. In next gs. Every page in the router receives a route params as probes. So Win the page, make sure you open up the post ID like this and then page ts. Witin the function. So we're going to take in params as probes. Having done this, the next in line is to bind it with the UI. Extremely easy to do that. Win the hedge one tag, we are going to open and close the C brackets, and within the C bracket, I'm going to do params dot post ID. Simple as that. Take notes, the dynamic segment we created must correspond with the UI. So whatever you have within this dynamic segment as the post ID, that exactly is what you will have here. So please make sure the spelling is correct because this is exactly what we are referencing, and we are trying to bind this stuff here with the UI in order to extract the ID, simple as that. So the application is complaining, we have to define the type. The params is an object with a key called post ID, and the type is string. That exactly is how to define your type when working with type script. Here, we're going to do params. The object has a post ID with the type string, and now we have satisfied the type. Let's check it out on the browser. Now I'm going to do slash blog slash 200. Take a look. Can you see? Now we have DTS page 200. So this is the ID. We are grabbing it from the URL. Let me show you something. Here, let's give the class name, and then I'm going to do text nine Excel. Beautiful. Let's make it more readable. DTS page with the ID and bone. We have details page with the ID 200. Let's check another one. Let's do 17. Details page with the ID 17. Then we can do 800, and so on and so forth. Now we've been able to grab the ID from the URL. We can then begin to work on the post. This is all for now, and if you find this lecture helpful, make sure to smash the light board in and otherwise, hit subscribe. 12. Nested Dynamic Route : Next dynamic crowd. When building a complex application. You will definitely come across a scenario in which several dynamic crowd segments are required. Let me show you an example from the Reward website. Okay. This is the Reword website, of course. We have seen that when you click on this item, we were able to pass it down into a new page, right? Beautiful. Now what we want to do is to also fetch a comment that was written about the post. Understood. For example, you click. It opens up into a new page, fetching the details by the ID. And then when you scroll down, we should be able to see the comment written about this post. Good. So if we want to specify the route, we can do slash portfolio det zero, slash comment slash zero. Understood. Beautiful. Go back to the code unless implement it quickly. As the name implies, all we have to do is to create a new folder within the post ID. Here is the block, you have to open it up within the post ID, right click, create a new folder. And we will call these comments. Within the comment right click, create a new folder. And in this time, we want to create a next dynamic route. So to create a dynamic route, all you have to do is to wrap it up in the square bracket. Then we're going to do comment ID just like this. And within the comment ID, right click, we have to create a page within page dot T sex. Here we're going to do RFC to generate the functional component. Now we are trying to get the comment written about a particular post. We created a folder code comment within the post ID, and within the comment, we created our dynamic route, and here is the page within. So for a given post ID, a page do TSS within the comment folder, which is this guy will help to display the post review by its ID. Et's practicalize it. So within, of course, we have to take in the params, and what will be the params now? Of course, the params is an object with the post ID and the command ID. Having done this, let's come here and do something. Okay. Let's use the H one tag. Win. I'm going to do Params dot command ID. Let me show you. Please, it has to be these. Oops, take a look. We have spread something wrongly over here. There's need to be grammatically exact. So let's remove the n like this. This is commend ID. You can leave it, but there's need to be grammatically at honestly. So what I'm going to do now is to close down the explorer, and then we have the Params dot command ID. This params is the URA segment over here for the comment ID, which is the dynamic segment here, and it must be exactly the same spelling over here when you are trying to bind it here. So we have Param dot command ID, which is the dynamic segment we created. Trying to explain it simply so that everyone understand it well enough. Then here we're going to do for block posts, Param dot post ID. When you see and check out to the browser. Block slash, the ID is one, slash, Comment slash one. And here you have comments one for block post one. So if you do here, for example, 800, then you are going to see comments 800 for block post 800. So this exactly is how to implement it. Go back to the code. We have to satisfy this type before we close the lecture. Of course, params is an object. The post ID is type string. The commends ID is also type string. Then the type is satisfied, the errors are all gone. Okay. 13. ErrorPage (Special Files) : When you target a route that is not defined within the app folder. Next, we'll render a 44 not found error page by D fault. Let me show you quickly. For example, you all know that we do not have any route like slash Portfolio, we do not have this route within our project. When you hit on the enter key, Take a look. It says four oh four, this page could not be found. This exactly is one of the beauty of next gs. It helps you to define a four oh four not found error page. However, when building a reward application, you would definitely want to design a more beautiful four oh four not found error page. All right. Let's see how we can implement that. Go back to your project and then w in the app directory. Right click and then let's create a new file. And this will be called not found dot TSX. ROFC to generate the functional component, and here, what I'm going to do right now is to, let's say, take a look at this, remove the dash between the no found so that the function don't complain. So within, we're going to have a He one tag and within the hedge one tag, I'm going to do page not found. And then we're going to have another hedge one tag. The requested resource could not be found. So now you can go ahead to add color to it and then design it to suit your taste. When you go back to the browser, and then you can see page not found, the request resource could not be found. So this exactly is how to implement four or four not found error page in next years. If you target any route that you do not have in your project, this page would definitely up. So let's say, for example, Localho than carts. Since we do not have any route within our project that corresponds to the cuts, so it is going to redirect us to the page not found. And that exactly is how to implement the four oh four error not found page. So you can go ahead to add more colors to it, the font and everything you want to do. You can go ahead to do that. 14. File collation : File co location. File colocation simply means the way you organize your project files in next gs. Let's take this example quickly. Within the app, we are going to create a folder dashboard. Within, we are going to create a file set in dots, TSX. Let's quickly generate the functional component. Let's check it out on the browser. Slash dashboard. The requested resource could not be found. You know why? It is simply because this file is not routable. Recall that in the previous lecture, I mentioned that whenever a directory is created within the app folder, that directory automatically becomes a route when a page do TSS or a page dots is created within. So that is the convention, and now we are doing settings dot TSS. This won't work. In order for us to colocate this file properly. What we have to do is to within the dashboard, I'm going to do new file. Then we're going to have a page dot TSX like this, RFC to generate the functional component, all right. What we have to do now is to go back to the settings, and then let's quickly copy this. The function like this, highlight copy, go back to page, let's paste it here, like this. When you save, As we have to save something here like this. When you go back to the browser, and now the page is routable. But though you may not be able to see the settings over here. But at least now the page is routable. Another way you can organize your file and that I highly recommend is for you to create a separate component folder for your UI. Within the resource, which is the SRC, right click, new folder, and then call it components. Within this component is where all your UI is going to sit on. Within the component, you can have something like this, home components do GS. So you can now generate the functional component. And here you can start building your UI. This is one of the best way to cocate your file. And all of these stops, we are going to practice it in the future when we begin to build the reward portfolio website. Of course, it is deployed over there on vessel. You can check it out to see how beautiful it is, and I highly suggest you all to enroll because we have a lot to le. 15. Private Folder : Welcome back to class. In this lecture, we're going to discuss the private folders in detail. The private folder is a future provided by next S to help you effectively organize your project. This folder and all its subfolders are not routable. Even if you target the route segment, they won't be rendered on the screen. So to create a private folder, you have to prefix the folder name with an underscore. Let me show you open up the Explorer. W in the app, right click. Let's imagine you want to perform some private operation within the library folder. In order to make this folder notes to be routable, all you have to do is to prefix it with an underscore, and then hit the enter key. Now we have prefix it with an underscore. Right click and let's create a new file. So I'm going to do page TRX, then hits the enter key. When you do RFC and boom, I'm going to do here, this is the Private page. Okay. When you say even check out the browser. Let's see what we have. Slash, underscore, Lab. It's the archy, and we're going to see the page not found. Can you see that? So this is simply because whenever you preface a potenym with an underscore, next treat it as a private route. So it is not going to be routable. But let's see now when we remove the underscore, let's see what happens. Let's take off the underscore like this. Boom. Go back to the browser and as well, take off the underscore, like this and the bomb. This is the private page. So now we have removed the underscore. It is no longer a private page. But if you want to make it a private page, you have to go back and then prefix it with an underscore. And where is this folder. All right. Here is it. Right click, rename. Then here we're going to have the underscore, just like this. Take a look. It says, not found, the requested results could not be found. So whenever you prefix a folder with an underscore, it indicates that the folder has some private implementation details, and that folder should not be considered by the routing system, and thereby opting the folder and all its sub folders out of routing. Teaching good, Beautiful. 16. Route Group : In this lecture, we are going to discuss Route group. Route group is a very beautiful feature of next S that enables you to organize your route segment and project file into a logical group without affecting the URA path structure. If you want to create a route group, all you have to do is to wrap up the folder in parentenss, and that exactly is the convention. Haven't set all this. Let's quickly practicalize it by implementing an authentication system with the register page, login page, and forget password. Right click on the app, new file. We are going to create the register order slash a page Ts. P is the file. Beautiful. RFC to generate the functional component, and within, let's see what we can do here. Let's have a head one tag, and I'm going to do Register page. Let's give it a class name. Then text, let's make it five Excel. Fund serf. Let's make this e Excel. Again, right click on app, new file. The next is the log in to create the page Ts. You have to use the forward slash and then page TSX. Again, generate the functional component quickly. Let's go back to the register page, highlights the Hage one tag, cop, come here. Paste. Here we're going to do login page. Can make it more beautiful by specifying the background color and all that. Lastly, we are going to create the forgot password. Again, we will paste the age one tag, and then here is going to be forgot password. Okay. Cool. So Safe, make sure to run the application. As you can see, mine is already running, so I just have to hide the terminal. On the browser, we're going to do localhost three than register. Here's the register page. Beautiful. When I do slash login, here's the login page. Lastly, he's do forgot password. And here's the forgot password page. Though everything appears to be working perfectly fine, but this approach is not organized. It is not a good practice. Because if another developer picks up your project, your project structure will be difficult to read. Therefore, we have to organize our authentication related file into one parent fer. For example, let me show you, let's say you handed this project over to another developer. Then if the developer want to implement something within the login, the structure is not organized. If you are building a complex application, chances are you will have more than let's say 20 files. Within the app, create a new folder called th. The next in line is to move the register page into the th. Again, we have to move the login page or the logging route into the dd. Lastly, we have to also move the forged password into the earth like this. This is one of the best way to organize your code. For example, if another developer picks up your code and if you want to make some changes within the login or the register page, they can always go to the earth directory because that exactly is the place where we house all the authentication related files. When you click to open, you're going to see the Forged password, the login, and the register. So this is more coincz. Now, let me show you the problem. When you go back to the browser, you are going to see the page not found. This happened because we have moved the file out of the parent folder. Previously, it was within the app directory, and now we created a parent folder cut off and we moved the file within. For you to hit the registers route, you must have to reference the O. Let me show you. We're going to do slash of slash register. Do you see? Again, slash slash Log in. Everything seems to be working perfectly fine, but the URA path structure is being affected. Recall that when we created the register page, local host 3,000 slash register. Now it says page not found. The idea is to group the route carefully without having to affect the URA path structure. How do we implement that? Go back to the code and let me show you. So to properly implement a Route group, all you have to do is to wrap up the parent directory with parentenss. Right click Rename. So here, I'm going to open up the bracket here, and then close it up here. Say yesterday. So when you go back to the browser, you will be able to route the password page without having to reference the off. As well, the login and the register. So this off over here is no longer visible in the URA structure. Let me show you. Can you see? Beautiful. Let's do, slash, log in. Can you see? Everything is working perfectly fine as expected. Teaching good. Beautiful. 17. Layout : Welcome back to class. In this lecture, we are going to learn and understand the concept of layout. Now, what exactly is a layout? Layout is simply a UI that is shared between multiple pages in the application. When building a complex website, chances are you will want to have a header that stays consistent all through the pages, and that can be achieved by using layout. Now, the question is, how do we really define a layout? A layout can be implemented by default exporting a react component from a layout dot TSS or a layout dot GS. And the layout component will accept a children props that will be populated with a chart page during rendering. Take note of this key point. Layout serves as the root component of every next GS application. It must have a HTM tag and a body. Open up the app, and then within the app. Here is the root layout. I believe I showed you this in the previous lecture. Can you see? So it has a HTM tag, a language which is said to English, and then it has a body. Let's tak, for example, we want to implement a header component that will stay consistent or through the project. So let's say we want a header and a foot component that will stay consistent or through the project. Now within the component here within the component, right click new file. And I'm going to do aa dot es. Guys, I'm going to be a little bit faster right now. Then here I'm going to do Foot a dot es. Within the Futa, let's do FC to generate the functional component. And here let's give it a class name, and then let's give it a BG dash. This is the Futa let's give it a BG dash. Yellow dash 300. So this is the Futa. What I'm going to do right now is to copy some of the test from the th, because I love the design already. I just have to copy the Hage one within the register or the login page. Come here within the footer and paste. Here I'm going to implement the padding, P for having done all of this. I quickly have to copy this one here, and then go to head a dot S, RFC to generate the functional component. Then within the return, just have to paste. Save and maketure to format the code. All right. Now let's change the yellow to blue 300, something like this. Then here we are going to do ops, look at. This should be the head page. And you save, go back to the footer, and this should be the footer page. We are already building a reward application, and that is nice. So this is the homepage of the entire application. We want the header and the footer to stay consistent all through the pages. So if you go to the block page, the header and the footer will be displayed, the users, the authentication, and all of the pages. So the way we can do that right now is to scroll up a little bit, layout TSS, scroll to the top and here we're going to put header from dot dot slash component slash, header. Then lastly, we're going to put footer from slash components, slash footer. Over here, we have to render the header close it up with the self closing tag. And here we will render the footer. When you save and check out the browser and do this. Now when you do slash blog. Can you see, the header appear both on the blog page. And then we can do slash profile. We have all of these routes within the project. Of course, we implemented it in the previous lectures. And boom. The header and the footer is consistent all through the project. So you are going to get them anywhere in your page. So that exactly is the concept of a layout. 18. Layout route group group : Welcome back to class. In the previous lecture. We learned how to generally create a layout that can stay consistent or through the pages. But sometimes you may like to create a unique layout that applies to a specific page in your application. Let's assume you want other the user's page to have a similar background. You can create a layout within and then when you run the application, the page will go into the layout and assume the shape and the background. Let's quickly practicalize it. Within the users, we are going to create a layout. Layout dot TSX, just like this. Then we are going to quickly generate the layout. I just have to copy and paste, and you can pause the video at the end to type all of the stuffs right there. What I did right here, Let's start from scratch. I just have to wipe off this guy. Okay, so you are going to give this dv class name like this. Win the class name, the background is going to be the sd, 200. And then the screen is going to be is 100 view height. Having created this background, the first user's route and the second user's route will go into this layout as children, and here is it. Then it can assume this property over here. Understood. Beautiful. When you save the application, check out the browser. When you do Lhost 3,000 slash users slash first user. And then you're going to see the first user with the background color of red. Now let's do something. I don't like the red background, and by the way, that is my opinion. I'm just going to do blue right here. Blue 200. I think it's cool like this. We can make it 100. Fine. This is the filter, and this is the header. Recall that we rendered the header and the footer component within the root layout. That is the reason you can see the header and the fola around the pages in the application. But for the layout, we created within the users. The first user and the second user is the only page that can go into this layout. Even if you do slash users slash, second user, let's do something like this. Can you see now we have second user and it assumed the same background color. Now you change it to yellow and it appears nicely. So whenever you're building an application, and you want two or three different pages to assume the same property, all you have to do is to create a layout within the parent further. And then all the routes within the parent further would definitely go into the layout. It's as simple as that. Now the question is, what if we have another user, but we do not want that user to assume the same background. So here exactly is where the challenge comes in. Let me show you. Let's say, for example, we have up to third users. N your file, I'm going to do third er page TSX. Generate the functional components. Then here, we just have to go to the first user and copy the properties. Let's copy the properties over here. Of course, you can check it out how I implemented these properties behind the scene. Here we have the patent four. Pat and top is 20. The text size and the line height is eight Excel, the font is extra light. So you can do that at your end. Alright, I talk too much, really. It is for your own good, 'cause I want to explain everything. Here, let's do Fed user, just like this, okay? When you save. So when you do slash users slash Fed user. And here is the third user, assuming the same property background within this layout. So the third user, second user, and the first user. All of this page right here will go into the layout, and they will reside here as the children. So when this happens, this property will be applied to the children, which in this case, the first user, second and the third user. But right now, the challenge is to exclude the third user. So we do not want the third user to go into this layout. We want to stylize it differently. What we have to do right now is to create a route group layout. It's quite simple to do that. Now within this user, this is the parent users. We are going to create a new folder, users layout. Now, what we are going to do is to move this layout within the user's layout like this. Having done that, we also have to move the first user within the user's layout. Lastly, we have to move the second user into the user's layout. Having done this, what you have to do is to abstract this folder away from the URL so that we don't have to do slash users slash users layout, slash, first user. Now when you go back to the browser, you will realize that the third user no longer assume the property of the layout. But we have a problem right here. Win the URL, we have to target the user's layout. Slash, first user. I If you observe carefully, you will realize that we are doing too many things just to target the first user. The best practice is to abstract the user's layout away from the URL segment. The only way we can do that is wrap up the user's layout in parentenss, like this. You hit the enter key. With this implementation, we have succeeded in abstracting away the user's layout from the URL segment. This guy right here will not be injected into the URL. Now when you head on to the browser, it says, page not found. You know why? It is simply because the users layout is being abstracted away from the URL segment. By so doing, it is not going to be injected into the URL. All we have to do is to wipe it off like this. Now it is going to be Localhost 3,000 slash users slash Fas user and boom. Can you see? Everything is working perfectly fine as expected. When you do Localhost slash users slash third user. The third user can no longer make use of the properties within the layout. So this exactly is how you can create your own layout and then abstract away some of the pages that you do not want to assume the same properties. In this example, we want the first and the second layout to assume the same background, and then we want to create a unique layout for the third user. I want to show you everything. Third user, p Ts, let's give it a background class name, and then Bg red 200. We can also give it a height, H screen. So this will make the view height to be 100. Can you see? Now we have implemented a unique background for the third user. But when you check out the first user, it has a light yellow background, and then the second user also has the light yellow background. 19. metadata route : We come back to class. In this lecture, we are going to discuss meta data routing. When it comes to building professional application. Ensuring proper SEO optimization is crucial for improving such visibility that leads to conversions. The meta data API introduced by next GS allows you to define meta data for each page. Ensuring accurate and relevant information is saved when your page are shared or indexed. In this lecture, we are going to discuss how to utilize the meta data API to improve routing meta data. Following the new routing convention. There are two ways to configure meta data. You can either generate the static metadata object or export a dynamic generate meta data function. This may sound a little bit tricky. But worry, when we begin to practicalize it, you will definitely understand it well enough. Now, open up the VS code and let me show you. Right here, we have to close some of the stuffs down. We in the app. The layout right here contains the first meta data. The first meta data that we have in our project can be seen wherein the root layout. Click to open. The root layout is right within the app directory. This one is the default layout of every next S application. Here is the meta data. Within, we have the title and the description. When you go back to the browser, ops, see. This is the home page. Let's quickly implement the height. Give the class name quickly. Give the height off 100 feet height. All right, look, it is working fine. Then let's quickly give the H one a class name. Then I'm going to do text for Excel. All right, good. Home page. It's fine. You can implement the padding and the rest of them, but that is not the intention of this lecture. Now, let's close down the page, go back to the layouts to TS. So I haven't seen the title and the description. When you go back to the browser, let's quickly inspect the console. Open up the element window. O Here, within the head, click to open. Then when you scroll down, you are going to see the title criect next app. This is where it is coming from right here. You can do, let's say next case from beginner to advance. Now, can you see? W in the title, you're going to see next course from beginning to advance. I haven't seen the first meta data. We can as well creect our own meta data within the page. So let me show you how to do that. We have to look out for a page that we can use. So let's try using the profile here. Then open up the page TS. So here at the top, we have to define the meta data. Within, it is going to take in a property called title. Within the title, I'm going to do code with a do barber. Save the application and check out the browser. Now I want to show you something. Here is the homepage. When you reload, and here we have the title as next course from beginning to advance. Now, when you do s profile. Check out the title again. It is now called with a do baba. This exactly is how you can create your static meta data. Having done this, let's quickly see how we can create a dynamic meta data. Let's assume you are creting a block application. And each block has several posts. When you click on each and every of the post, we should be able to see the title of the post as meta data. Let's do that quickly. Open up the block and within the blog right here, within the page that TSS not here. This one is for the single block page. Open up the post ID within, you're going to see the page dots. All right. Here exactly is where the phone begins. First, we have to import metadata from next. Import in bracket, metadata from next. Having done that, let's quickly create the type. Now, params is going to be an object with a post ID of string. Beautiful. Having done this, let's quickly export the meta data. L et's quickly take in the palms. We didn't have to set it to an arrow function. Now we're going to return. So with the return, we're going to access the property title. The blog post. Then I'm going to do Params dot post ID. We are trying to bind the meta data and the post ID. So when you click on any posts, you are going to see the title of that post within the meta data title. Having done this. Lastly, we have to alter this function here because we have already created the type here. Okay. We just have to delete this one like this. Wipe it off, and then I'm going to do probs. And having done this, Okay, there's a problem here. Okay, guys, take a look. So when you come here, let's give it post ID because this must be the same with the sky right here, which is the URL segment. Okay? And here it should be post ID, just like this. Let's check out the browser, refresh. Now I'm going to do Localhost 3,000 slash blog slash 800. Let's see what happens. Okay. Beautiful. Let's take it out on the element window. Click on head in. And with in the title, you're going to see block post 800. Can you see block post 800? So we have succeeded in extracting the ID and then passing it down into the title using meta data. So if you do, for example, slash block, slash football. Then when you check out the title, you're going to see block post football. A. 20. TitleField : Title metadata. The primary purpose of the title field is to define the document title, and it can either be a string or an object. An example of string title field is what we have here within the layout. This is the string title field. In this lecture, we will go ahead to implement the object title field. To achieve that, what we have to do is to wipe this guy off for the meantime, and then open and close core ly bracket. Make sure to place a comma right here. Again, make sure to import the meta data at a tub. Import type meta data from next. Having done that, within the title, we have three different properties. The first property is the absolute. The second property is the Default property. Lastly, the template property. Now, let's talk about the Default property. The Default property is useful when you want to provide a title for a route segment that do not have a meta data. For example, let's look at for a page route within the project that do not have a meta data. I say I have to close this down for proper understanding. The user do not have a meta data. Let's see what we have here. This page do not have a meta data. When you go back to the layout, all you have to do is, this is the default title for all the layouts without meta data. This is for example sake, you can use a more readable sentence at your end that describes the intention of your project. When you see even check out the browser, now we're going to do localhost slash, 3,000 slash users slash d user. The attention should be within the elements window. Let's open up the head, scroll down, and then you see this is that the fourth title for all the layout without meta data. Even if you check out, for example, slash users slash first user. This is the first user, and it has exactly the same title. Can you see hope you can see the title over here. This is the default title for all the layout without meta data. This exemplifies the default property. The next line is the template. The template property is useful when you want to create a dynamic title by adding either a prefix or a S fix. Let's quickly practicalize it so that you get the gist. Here is the template right. What I'm going to do right now is the percentage sign, and then S like this, something like this, and then I'm going to do a Duba by digital. When you save, let's quickly open up the block page. Let's use the block page for this one. Here's the blog. Here's the block page. Good. Within the block page, we have to import the meta data from next, then having done that. Let's quickly export. And the type is metadata. Specify the title, and I'm going to do here blog list. The idea is simple. We want to use this blog list over here to replace, let me show you this guy. On the browser, you are going to see blog list, b data. You save L et's check out the browser. Localhost slash 3,000 slash. Oh, my goodness. Guys, I live close to the airport. So if you hear any sound of the airplane, it simply implies you are going to travel anytime soon. All right. Let's continue. Now we're going to have Localhost 3,000 blog. Here within the title, you see the blog list and then Duba digital. We have used the blog list to replace the sky right here. In other words, we are suffixing the blog list with Duba digitals, just as seen on the browser within the element window. Blog list, dub digital. Whenever you want to prefix or suffix some stuffs within your project, this exactly is how to implement it using metadata. Let's talk about the absolute. All right. The absolute property is useful, if you want to provide a title that ignores the title template, sets within de parent layout. For example, if you want to ignore the guys right here, all of the title template right here. If you want to ignore it, you have to make use of the absolute. Let's check it out on the browser again. Here, we have blog list and a Duba digital. If you go back to that same page, which is the blog page, Now let's implement the absolute. What we have to do is to wipe off this guy and then introduce the object. Within the object, we are going to do absolutes. I just have to close this down. We are implementing the absolute right here, so we do not need it within the parent layout any longer. Wipe this off like this. Sa Right here, what you have to do is, this is the absolute title. When you check out the browser, can you see, this is the absolute title right here. This is all about routing and meta data. 21. Links and navigations: Welcome back to class. In the previous lecture, we explore the next GS file based system routing techniques, and we learned how to create different route techniques like the next Ed route dynamic route and the Ca route. However, you will notice that we have been entering the URL manually within the tab. If we want to route to the blog page, we have to do Localhost 3,000 slash blog, like this. And then if we want to route to the profile page, we have to do slash profile. From the developer's point of view, there's nothing wrong with this. But from the end user's point of view, it is considered improper because the end users may not even know the route that you have within your project. Therefore, we should be able to make it easy for the end user to route from one page to the other by clicking on a link, and that of course will be implemented with the link component present in next 14. Let me show you quickly. Go back to VS code, common B to open up the Explorer. Win the app. So here is the home page. The page do S S that is right within the root directory, which is the app. When you click to open, right here, we have to implement the link. To implement the link, first, take a look. The next image is not in use. So we have to import link from next slash link. Having done this, let's quickly implement the links below the H one tag. So let's assume we want to route to the block page. Link, and please take note. The link is on capital letter L. The hypertext reference equ, we're not going to use the C bracket. Instead, let's make use of the single code or the double code. Now, let's look at something. Within the explorer, you will realize that we have a route called blog, right? So to target this route, all we have to do is slash, and then we have to specify the route, which is blog. Simples that. Then close up the link. Here, I'm going to do block page. The inner HTML is going to be the test that will be displayed on the screen. And when you click on the test, it will lead you to the blog page. Seven check out the browser. Okay? We have to navigate to the home page. And here is the blog. When you click, now we are on the blog page. Teaching good. Beautiful. So you know that when implementing a reward application, when you visit the block page, you do not have to click on the stab right here to go back. Instead, we should be able to implement a link over here that will redirect us back to the home page. So what I'm going to do right now is go back to the project, within the block page. This is the block page right here. Let's quickly link from next slash link, and we have to put the link at the top like this. HREF equal. We're going to do home, and here, we're going to do home. Now, we don't have to specify a home right here. Wipe it off. So if you want to route to the home page, the convention is to specify a forward slash like these. This will be a pointer to the home page. When you click on this home within the inner HTML. You will be redirected to the home page. Seven check it out. And here is it at the top. Can you see, when you click on the Home, you go back home, and then you click on the blog, block. And now we are within the blog page. We can as well go back to Home page. Everything is working perfectly fine as expected. Now the next in line is to implement the dynamic crowding system. For example, if you do Localhost than slash blog slash 800, okay? Now we've been able to pass the block post down to the details page. So that exactly is what we want to do, right? So for example, when you go back to the block page, if you click on the Block post one, we should be able to pass the block post one into a new page. We don't have to type the URL manually on the address bar. All right, I talked too much, really. But it is for your own good. So within the block page, what we have to do now is to implement the dynamic crowd. We already imported the link at the top. So right here, What we should do is simple. Highlight this guy, and then cut it off, which is the inner HTML text. And then we are going to have a link like this. Then this link, the H REF, which is the hypertext reference. Slash block slash one. And then here, we are going to paste the block post one. As simple as that. Now, when you click on the Block post one, it will open up a new page with block post one. So this exactly is how to implement a dynamic link. Now we have to copy the link, highlight from lines 18 to 20 highlight copy. Come here. Highlight the inner HTMA text, wipe it off, and then pit this guy. But now we have to change the ID to two and the block post to two as well. And so on and so forth. So you can do the rest at your end because you're a smart guy. Of course, you can do it. Three, here is going to be three. All right, not to waste your time. I just have to save, go back to the browser, and let's see what we have on board. Let's give it a try by clicking Block post one. Take a look. It says Datos page with the ID of one. Take a look at the URL, block slash one, and now we've succeeded in passing down the ID of a hair. This is so nice. So when you click Block post two, Data page with the ID of two, and so on and so forth. Something very important that I want to share with you is the replace probes. So here, let's quickly format the code. All right, he's got a very nice shape now. So here I can do something like replace. Okay? When you save, let's check out the behavior of the replace probes. This guy. Go back to the browser. Now, give it a try. We click on Block post one. It opens up B Dt page with the ID of one. So you go back. Block post two. Here, we have the ID of a post two. All right. Now, let's click on Block post three. I want you to notice the behavior. When I click on this guy right here, can you see? It sends us back to the home page. Okay. So blog page. The first blog post when you click, it takes you back to the blog list. And then if you click the second one and go back, it takes you back to the blog list page. But when you click on the Post three, when you go back, it is going to send you back to the home page. So that exactly is what the replace prop does. Give the try. I click. You see, it sends us back to the home page. This is off for now, and in the next lecture, we will discuss how to conditionally stylize a link. 22. conditional links : Welcome back to class. In the previous lecture, we learned how to implement the navigation links. We will go ahead to stylize the link based on condition. For example, if you observe this beautiful portfolio website, you will realize that we are right within the home page, and that exactly is the reason the home link is highlighted because the URL is active. Also, when you click on the portfolio, The portfolio link gets highlighted, simply because the URL portfolio is active. If you click on about me, same thing here, simply because the URL is active, the link will be marked as selected. That exactly is what we want to implement on our demo application. W in the project C and B to open up the explorer. Let's implement it on the register page. Right here, what we have to do is to click on the layout. Of course, you know that the forgot password, the log in, and the register would definitely go into the layout. Now click on the layout to open and then close down the Explorer. The first thing I'm going to do right here is to highlight and then place a comment on the meta data. Having done that at the top, we are going to import link from next slash laying. Now, we are going to import the use path name. The US path name is going to help stall the active UR well. When it stalls the active UR well, we would then be able to extract the URL and stylize it differently. U path name, of course, it's a hook, and it is coming from the next slash nation. Having done all of this, let's quickly do something. Again, very important stuff that you have to take away from here is that we want to read all our links within an array. After that, we just have to map through it. This exactly is how to build an application like a pro. Let's start it on a constant. Have links equ, open and close array, and then within the array, we are going to have the first object. We're going to call it name. The name is going to have register. This one is going to be the inner HTM vibe. It is going to be the text that will defined the link. Now we're going to have a head ref. Also, we have to set the head ref to slash register. Knowing that we have a route called register over here within the project. We are targeting this route. Now the next line is to highlight, duplicated two times. Here, we are going to do log in. And it is going to be slash Log in. Of course, here, we're going to do forgot password. All right. Having done this, make sure to change this to small letter because it should match exactly what we have here. The best way to do it is to right click and then rename. Copy the name, and here you can just come and paste exactly the name of the route. Oops, take a look. We have to place a cam on it. Having done this. Let's go ahead to map all of the stuff right here and have them display on the screen. Right below the tu ren, we are going to have opening and closing Ci brackets so that we can take in Java scrypt and stoves like that. Now we're going to do Nav links, dot map. Then we are going to take in the link. This guy right here represents each link in the RA. Set it to an R function, open and close co bracket. And within, we are going to return the UI. Open and close parentenss, within the parentenss, we are going to have the link. The H REF, which is the hypotex reference, we are going to do link.hf. Again, we have to specify the key because we are mapping through an item. The key is going to be Link Dot name. We can use name to uniquely identify each of the stuff right here. We have register, login, and forgot password. I feel good. Quickly, let's close down the link, right here, give you a class name. We have to render the name. So I'm going to do Link Dodd's name. Save and check out the browser. The this. Observe it carefully at the top. Can you see? We have the register, the login, and the forgot password. Now when you click on Login, we will move to the login page. When you click on password, we will move to the password page, and as well, we can come back to the register page. Beautiful. Now, I want you to recall the intention. The idea is to mark the link as selected when you click on it. When you click on any of the link, we want it to stay active. For example, when you click on forgot password, we want the forgot password to be highlighted because it is active over here within the URL. Let's quickly do that with the help of the US path name. The use path name is a hook. We have to invoke it. Let's do it right here. As we tried here. The use path name is a hook we have to invokate. Use path name, and of course, is a function. Then we are going to store it to a constant. Cs path name equ use path name. Now the path name is going to store the active URL. Now we have the active URL stored within the path name. We have to make use of it. When you come down here, what we should do is we're going to do C is active equ. Path name dot, within the use path name hook, we have a method called start with. Now we're going to accept a method called start with. And then we're going to do link to HREF. Now we are don't getting the current URL, what we have to do is to conditionally stylize the link based on the active URL. It's quite simple to do that. Within the classme over here, let's replace this with the C bracket because we're going to do a lot of java scripts in between. If it's active is true, What we're going to do is to have the text to be text yellow 400. We can then change the font to serif. Let's make it bod a little bit. Font dash bod. You can go ahead to stylize it and make it look better at your end, the way that it you. Else, what do we do? We're going to give you the text color of blue fur hundred. When you save the application, check out the browser. Oops, remove chart on node. All right guys. Let me show you something within the console. Can you see error use path name only works in client component. By default, next gs runs on the sever side. If you want to make use of hooks, you have to switch from saver side rendering to client side rendering. It is extremely easy to do that. Scrot in the single quote, we're going to do use ****. Simple as that. You can terminate it with the sem column if you wish to. When you save again, let's see what we have now. All right. Let's check it out on the browser. And they are these. But before we proceed with the demo, I want to show you something very important. When I reload the page at the bottom left corner of the screen, you will see the error allert. When you click to open, it says, Test content does not match sever rendered HTML. Something is wrong behind the scene. Let's go back to the code. W in the layout that TSS. We have to do something. Let's take off this HGM over here. Take it off. Here let's replace the body with a fragment. So you just have to highlight the body, and then command D to multicelect, wipe it off. Save the application. Quickly, let's check out the browser. Reload, and the error is gone. When you observe the screen carefully, you will see the register log in and forgot password. Let's give the try by clicking the log in. When you click, can you see? Now, within the address bar, you will realize that the log in is currently active. For that, this has to be highlighted. As well, when you click on the password, the URO will become active, and here it will be selected. It is active over here, and so on and so forth, register, log in, forgot password. 23. error page (special files) : S. Our application works perfectly fine when you navigate to localhost 3,000 slash blog, s one, slash comments slash one. And this will take us to where we have the comments for a blog post. So you all know that sometimes an error could occur in your application, right? So let's assume you are trying to fit the first comment for the first post. And so you just encounter an error. To demonstrate this example, we have to create an error in the application ourselves. Open up the explorer, and then the blog post ID, comms, commend ID. Open up this guy command B to close it down. Now let's quickly create an error. Here, we're going to have a function. Get a random. I'm going to have a count. So what we should do is to return Matt dot flow. This is just a basic Java script that you should know. Then matt dot random beautiful. Having done this, come here. Let's quickly store the random to a constant. Const Random equal, get Random. Here exactly is where we will throw the error. If random is equal to one, then we are going to throw a new error. Error loading this comment. Now we're done with this. Let's quickly check it out on the browser. Let's reload. And we have it here, error loading these comments. The intention of we creating this error is to see how we can handle an error in the future when an error occurs. So just take for example, someone visits your website, and he is trying to process something. Suddenly, an error pops up like this. The person will lose trust of that website immediately. Okay? So if there's any error within the project, we should be able to handle that error without breaking down the application. Because right here, the application is broken. Even when you reload, look, The application is broken. So this is not professional. The best thing we should do is to capture this error and then have it displayed on the UI so that the users can have a better experience. That exactly is how we can handle this error professionally. So you go back to the VS code. Open up the explorer. Within the comment ID, this guy, right click. New file. We're going to call this error dot TSX. Within the error dot TSS, let's quickly spot the error boundary. RFC to generate the functional component. But this time around, we're going to call it error boundary, just like this. And then here on the UI, we are going to have a He one tag. So within, we're going to have a H one tag, and then we're going to do error in comment ID. So we have to switch from sever side to the client side. SF again on the browser, All right. Now it says error in the command ID. Previously, when we implemented an error in our project, the entire application got broken, and then we saw the annoying error on the screen. That is a very bad experience to give to your users. Okay? So, for example, you visit the website to purchase something, and suddenly the website got broken, and you see some bunch of red lines everywhere, complaining of an error. I believe you will lose trust of that website. So the best way is to present the error to the users in a very professional manner. And that exactly is what we did here, okay? So you can go back to your project and customize the error the way you want it, okay? So you can give the class name, for example, then you can do P four, Bg red, let's say 200. Text, it's Excel, it Excel. Let's see what we have now. Reload, reload again and again. Then you see error in command ID. This exactly is how to handle error in next gs. Another thing you can do is to display the error programmatically. We have a prop right here called error, and the prop is of type error. Having done this, What we have to do here is to display it on the UI. I'm going to display error error do message. When you save and check out to the browser. Se error loading this comments, and the stuff is coming from this place right here. We are getting the error message from here. All right this is off for now. See you in the next lure. 24. Template vs Layout : Template file is similar to a layout in that it wraps each child layout or page. Unlike layouts that persist across routes and maintain its state. Templates create a new instance for each of their children on navigation, which simply implies, the state of the application will be altered when you navigate to a new page. To get a deep understanding of how the template works, we definitely have to put it into practice by comparing it with the layout. Let's quickly implement it. Command B to open up the explorer. All right. So I think we should do it within the register, which is the earth, right? So let's do something. Okay, so open up the oth, and then this layout right here. Let's implement it because the forgot password, login, register, they are all going into the layout. Bum. We need states in our application to demonstrate this example. Let's quickly impute the used hook from react. Let's quickly declare the variables and the seta function to update the state. Right here, I'm going to do Cs impute Ca set impute. And the initial state is going to be an empty string. Of course, you should know this starting from react. Having done this, let's quickly implement it within the project. Now we're going to have a df within this dif, we're going to have an impute tug. Specify the value. The value is going to be impute. On change, which means when the user begin to type into the impute field, we have to grab the datas. Now we're going to get access to the event. With the help of the event, we are going to call the seta function to update the initial state, and within the seta function, we then have to use the event to target and grab the value. Simple that. Lastly, we have to close the impute with a self closing tag. Let's quickly give it a style. A little bit of style to make it appear nicely. Class name, I'm going to do outline. We want the corner to be rounded a little bit, so let's make it rounded SM. Having done this, let's quickly check it out on the browser. Now we're going to do Localhost three than register. And now you can see the impute right here. Okay. Let's do something. Let's give this div class name. Let's specify the padding to be four. And good. All right. Take a look. Now we have the Impute right here. Let's quickly type in something within the Impute field. Dub digital. I want you to observe the behavior when I navigate to the log in page. So I click on the login page. Let me show you. We are within the login page. Look, can you see the state is not altered. When you also navigate to forget password, you will realize that the state is not altered as well. The layout maintains a consistent state within the project. Can you see, even when you hit log in, when you hit register, and the state is not altered. This is the state of hair. Now, we want to replace the layout with the templates, and then we can observe the behavior to understand the difference between the layout and the template. All right. Let's do that quickly. C and B to open up the Explorer. What we have to do is to right click and then rename, wipe off the layout, and then I'm going to do template.tss. Boom. We have to say yes to it. Now, save the project on the browser. Let's quickly reload. Everything cool. Now, let's give it a try and I'm going to do Duba digital. When you hit on login, you see, upon navigation, the state is destroyed. This exactly is the difference between the template and the layout. 25. Loading Page(Special files): Special files. The special file that we're going to discusse in this lecture is the loading dot s. The loading dot S or TSS helps you to create meaningful loading UI with react source pans. With this convention, you can show an instant loading state from the server while the contents of a route segment loads. The new content is automatically swapped in once the rendering is complete. So for example, if a user click on a blog post, it will take some time for the post to be fetched and be rendered on the screen. So while you keep waiting for the post, we should be able to create a loading bar to give the user a kind of response that the post is currently fetching. Now you open up the explorer. Let's quickly implement it on the block pose. Woad in the block, right click, create a new file. And this will be called. Loading dot TSX. You can call it loading dot S depending on what you are using. When you hit the enter key, Generate the functional component. Let's quickly design the loading UI. Give it a class name off, and then the height is going to be 100 Vg. The ba ground BG, Yellow, 800. Oops. That will be too much. Let's make it 400. All right. Having done this, within the inner HTML of the D, we're going to have a H one tag, and then we're going to do loading. Let's quickly stylize the H one tag as well. Text, it Excel. Text, blue, 100. The text color is blue, and then we have to align the test to center. All right, save the application. Go back to the browser. So when we click on the sling right here, before the block page opens up, you will definitely see the loading page. Take a look. Though it is quite fast, but we have to do it again. All right. This exactly is what we are talking about. 26. Website demo : Here exactly is the application that we are going to build in this course. Now let's proceed. At the top left corner of the screen, you will see the menu. When you click, it is going to open up the navigation drawer. And when you hove on the links, it is going to be highlighted. I hover, the portfolio get highlighted about me and hire me. Right below, we have the social media links, and everything is working perfectly fine as expected. Matter of fact, when you click on Instagram, you can open up my Instagram page. So you can click on the X icon to close it down. Also at the top, we have the header. Within the header, we have the links. It has exactly the same behavior with that of the navigation drawer. When you hover on it, it get highlighted. When you click, for example, when I click on the portfolio. It is going to smooth scroll to the portfolio component and then this link will be highlighted. Take a look. Do you see, now we are within the portfolio component, and this portfolio link over here is highlighted. The same thing here, and when you go back home is exactly the same behavior. Tell me, doesn't it look good. Of course, it does. Let's continue. At the left edd of the screen, you have my name and my company. As well, we have the project botin and the Get resume butting. The project butting does exactly the same thing with the portfolio link over here. When I click on the project, it will as well smooth scroll to the portfolio component. When I click on the Get resume butting, it is going to download my resume. Take a look. Can you see downloaded? Let's check it out quickly. Here is it. Beautiful back to the project. Here we have the profile picture. Right at the bottom, we have the skew box. L et's quickly go onto the portfolio component. When I click on the project, take a look. Beautiful. We have the various project that I have worked on. We have the am Food Company, the next year's portfolio website, which is this website that I'm showcasing, and so on and so forth. So I can click on each card item to open it up on a single page. Now when I move on this card, you are going to see this icon here like the eyes. Click to open, and here is the portfolio detos page. This is what I have to say about the portfolio, the description, and these are the technologies I used. Very interesting. When you scroll down, we can click on the button to show the next project. Can you see? Take a look. Also, we can click on the previous to show the previous project. Let's quickly go back to home component. The next end line is the about me component. And this is another interesting component. Look so beautiful. When you hover, you see some beautiful hover effect. Can you see that beautiful animation? The front end developers kill, back end, and so on and so forth. You can as well change it with this button right here within the card. Take a look. Having done this, let's move on to the testimonial component. You can as well use the mouse to swipe the testimonial. Lastly, we have the footer component. At the bottom right corner of the screen, you are going to see the c to action button. When I click, it is going to so to the home component. And now I am about to showcase one of the most important feature of the portfolio website, which is the HaM page. When you click on HiaME, it is going to open up the HaE page. And here we have this beautiful write up. And also, we have the cards showing your address, your phone number, e mail, and your opening hours. Now when I click on the contact form, it is going to smooth scrow to the contact form section. Take a look. Perfect. Now, let's start by clicking on the sent bot in. When you click on the sent boarding, it is going to prompt you to fill in the fields for the name, D. For the email, David at tm com. For the number, I'm just going to type a random number. For the subject, I will say, testing the website. Right here, what I'm going to do is So having done this, let me quickly take you back to my inbox for clarity. Right here, I will have to reload again because I want everything to appear transparent. Now can you see, I do not have anything within the inbox. No new message. Go back to the website. Let's give it a try by clicking the send boton. I click. It begins to load. Can you see this loading bar over here message successfully sent. Thank you for contacting a D bar bar. Let's go back to the inbox and see what we have. Now I click to open. So this is the message from David. Tell me, doesn't it look good? Of course, it does. For sure, you can reply David by clicking on the reply button over here and conversation can go on. Let's quickly test the application on mobile device. You see, beautiful. You can click on the service to open up the services content here, the company, the heartful link, and all of these tops, you are going to learn how to do them from scratch. Screw top, open up the navigation drawer. Let's go back home. Take a look. This is super amazing. All right. And when you click on the C to action button, Boom. Beautiful. You can download your sum if you want. Can you see that? You just download it right now. You can smooth scroll to the portfolio component, and you can check it out over here. All right. So having done this, let's check it out on iPad device. Can you see? This is so nice. This is beautiful. Can click to open. Can hit the nest, the nest, and so on and so forth. Can go back home. I have included the link to the demo website, right within the description. Simply because I also want you to have the experience at your end to see how fast and beautiful the website is. Indeed, you deserve it to be seen. 27. Nodejs installation. Vs Code Installation. Installing Vs code Extension: Getting started with the ultimate next GS portfolio website. In this section of the course, we are going to make some necessary installations to get going. Let's start by discussing the node versions. It is clear that before you install, react or next GS, you need to have node GS installed on your machine. My advice to you is simple. Awats make sure to download and install the latest stable release. You see this guy over here. It is not meant for you and I. The reason being that it comes with extra complexities that you may not be able to manage. So let's quickly download and install the latest stable release. Click, then we are downloading already, and here it. Click. Let's continue. You have to go through all of the stuffs if you have the time. But for me, I just have to continue. Then I agree. Continue hit on the install boarding. Of course, if you're mac, you have to log in. Click on Install sofa. Installed successful. Open up the terminal. Within the terminal, we have to check and be sure that we have installed node. What I'm going to do is node V. This will actually show up the version of node that we just installed. Hit on the key. Now we have node version 18.17 0.0. Close it down. The next time line is to install a code editor, and the code editor I'm going to use the course is the VS code. Feel free to use any code editor of your choice. But for me, the VS code is always my favorite. Depending on the operating system you're working with. Click on this arrow and then install for MAC Windows or lines. Right here, I am working on Mac OS. I just have to download for MAC. I have it installed already, so I don't have to do this any longer. You just have to go ahead, download and install VS code. Having done that, let's quickly open up the Vs code. He. Maximize. Now we are done installing the VS code. Let's go ahead to install the necessary plugging that will be useful in the future. Extremely important. Open up the extension. W in the set box, we are going to set for. Reactinative react redock snippet. Here is it. You have to click to install. This is a short cutting to that will help us generate some piece of code. So we don't have to type all of those stuffs from scratch. Don't worry, you definitely will get the gist in the future. Haven't installed this one, close it down. Again, we are going to install Pi. Click to open and then install. Basically, Predia will help format your code for proper indentations. Now we're done with the installation, close it down. And for sure, some of you are curious to know the VS code theme that I'm using. Don't worry. I will definitely share with you. Again, within the sedge box, we are going to set for you. Click to open. I have it installed already on my VS code, so make sure to install it at your end. Then the actual theme that I'm using. Let me show you, click on Set Color Theme. I am using U D. Here is it, so you can decide to use any of these themes over here. They are all fantastic. Previously, I was using U mirage. But now I am using UDC. So please do make sure you install all of these plugs, because it is going to be extremely helpful in the future. Having done this, let's move on to the next lecture where we will install next. See you in the next lecture. Stay focused, and always take care. 28. Nextjs 13 Installtions: In this lecture, we will go ahead to install next S. Before we proceed with next S installation. Make sure to restart your VS code. Reason being that in the previous lecture, we downloaded some plugins. For this plugins to work, you have to restart your VS code, and I've done that at my end. Having done that, quickly create a folder right within the desktop. Click, new folder. I'm going to call this folder. Portfolio. Drag and drop this folder down into the Vs code. Quit the work on page. Maximize the VS code, contro bactic to open up the VS code integrated terminal. Or you can go to the top Mw terminal, new terminal, and then this guy right here will be opened. Now we have to proceed with the installation. So I'm going to do Px, create. Next, give it a space s. This guy right here is going to point to the directory portfolio, and that will have the next S installed within the portfolio directory. It on the enter key to get it fire. Here, it says, would you like to use type script? Nope, we are not using type script. Would you like to use yes links? Yes. T wind. Yep. You can use the left or right arrow key to switch between yes or no. Would you like to use the source directory? Yep. Would you like to use router? Yep. Then it says, would you like to customize the deft import allers? I'm going to say yes. Having done that, it the enter key to get it fire up. The installation is ongoing. This would definitely take a while. I just have to fast forward the lecture. Next gs installed, successful. Now we're going to run the server. PM. Run D. It's the enter key boom. Now, the server will be opened on Localhost port 3,000. Here is it. You click on the link to follow up, and here is it. This is how the Deft next S application looks. Let's clean up the code. Go back to VS code. Open up the SRC page. Let's bring down the terminal. I'm going to do common B to close down the explorer. Let's highlight from line 62 lines 110. Haven't highlighted all of these. We just have to wipe it off. Safe. Also, we don't want to make use of any of this guy here. You saf, go back to the browser. Nothing is seen on the browser. Common B to open up the explorer. We have to tidy up the global CSS. Click to bn, select from lines five to the end. Wipe it off. Save on the browser, here is it. This is off for now. In the next lecture, we will make the necessary settings. See you in the next lecture. Stay focused, and take care. 29. Import and Settings: Basically want each and everyone of se to achieve exactly the same result. In terms of the font, the images, including the style. Open up the portfolio resources. At your end, the portfolio resources would be placed below this lecture. Open up the portfolio resources. Now, here are some of the assets that we are going to use, including the datas. Quickly, open up the portfolio images. Here are the images and funds that we are going to use. When you open up the fonts directory, we have all the rect that we want to use. Beautiful. Now open up the portfolio directory. Open up the public. What we are going to do is to highlight everything over here, right click, copy. Come here and paste. We have to replace, and as well, we have to replace. This is just the two items that we replaced. The next SVG and the vessel svg. We are done importing the images and fonts. One more thing that we are going to do. Close this down. Go back to portfolio resources. Open up at next directory. Now we have the Google Fund. Go back to VS Code. Open up the next module. Scroll down, and you are going to see at next Open. Let's minimize the VS code. What I'm going to do is to drag this font right into at next directory. Maximize. Can you see? Perfect. Having done this, still in the portfolio resources. Open up code resources do MD. We are going to copy the global star. Stop at lines 72. R click Copy. Go back to VS code. We also have to close down the node module. Right in the SRC, you are going to find the global CSS. Click to open, command V to paste. These are the global style that we are going to use all through the cos. For sure, this guy here is responsible for the blue tick when the link is clicked within the header. This is responsible for the smooth scroll. So you do not need to worry about the stuff right now. It is going to be explained carefully in the future. So Safe close it down. One more thing we are going to do is to set up the Google funds. Steel within the code resources do MD, scroll down. We have to copy the stuff. Go back to VS code. Open up the layout dot S. We do not want to use the inter Funds. We are going to import a Local funds from at nest slash font slash, local. This guy is no longer needed. Wipe it off. And now we are going to paste. Having done this, we have to get all of these funds in sync with the project. So right here, remove the inter, and then we are going to do pops. Okay. Everything is cool. So Friends, please do make sure to import all of the stuffs correctly. 30. Project Structure : Application built with next S and react as follows the component based architectural approach, which simply implies components are one of the basic buiting block of every react application. In this lecture, we are going to define the structure of our project following the best practices. On the screen is the home component. At the top, we have the header component. When you scroll down, we also have the recent works component. There is something that I want to show you over here. Within these components, when you click on any of these cards, let me show you. It is going to pass the corresponding datas into a new page. We can say that we have a portfoli Datos page, or you can call it a single post page. This will open our eyes to dynamic routing system in next years. Go back home. Already, we have the recent works component. Now we have the about me component. We have the testimonial component. Lastly, we have the footer component. When you observe the bottom right corner of the screen, you will see the car to action butting, and that as well is a component. We can make it a reusable component in the future. When I click on the car to action butting, it is going to smooth scroll to the home component. Here is it. Beautiful. And when I click on H i am, it will as well open up a new page. So we can say that we have two different pages in this application, and we have let's see how many components we have here. The header component is one, then the home component is two, three, four, five, six. At the bottom right corner of the screen, we have the cart action component. Now at the top left corner of the screen, we have the diagonal draw component. The diagonal draw components can as well be found within the header components. Having said all these, let's go on to create the corresponding folders that will map to these components. Open up the SRC, right within the app directory, right click, new folder, and we are going to call it components. Within the components, right click, new folder. We are going to create the header directory for the header component. Win the components, we have the home component. Again, right click, new folder. We have the Abt M, We have the slider card, and the slider card will map to the portfolio component. Let me show you. This is the portfolio component, so all of the stuffs here. Good. Again, we're in the components New the contact component. We are going to have the corto action component. Let me show you. At the bottom right corner of the screen, you are going to see the corto action butting. When I click on this button, it is going to smooth scroll to the home component, and here is it. Beautiful. When you scroll down, the button appears. Lastly, we are going to have the f component. 31. Home Layout SetUp: Welcome back to class. In this lecture, we are going to design the home component. Quickly open up the component and within this directory, right click, new file. We are going to create a component called home component dot gs. If you have the react antive react redox snippet, when you do RR of C, you should be able to generate the functional component. Beautiful. Having done this, let's quickly render the component within the parent page, and here's the parent page. Click to open. Right at the top. We have to import home component from component home component home component. That's simples that. Then we have to render it over here. Sf. Let's see what happens on the browser, and here is the home component. Beautiful. Let's go ahead to design the home component. Common B to close down the explorer. We are not going to use a parent simply because we do not want an extra node in our tree. Wipe it off. What we are going to use is react fragment. Good. Win the fragment, we are going to have a dv, give it an ID, home, close down the df. Let's create the layout. Here we are going to have an inline stale. The background image linear gradient. We want to rotate it 62 degree and the color from the left is going to be zero 50%. Place a coma right here. We are going to give it a minimum height of 500 pixels. Separate it with the coma, the maximum height is going to be 1,200 pixels. You have to separate it with the coma. Let's specify the actual height, height is going to be 100%, the width 100%. When you save on the browser, here is it. Beautiful. 32. Home item design : In the previous lecture, we succeeded in setting up the layout. In this lecture, we are going to proceed with the design. Where in the VS code, the first thing we are going to do is to import the hind font. I'm going to do import. It is a named export. We're going to do hint from next slash font slash Google. Then here I'm going to do const int equ, Hind. We in the object, we are going to have the subset. We're going to have the latin, separated with the comma. Oops. Okay. Good. The what 300400500600, and lastly, 700. Oops. Take a look. All right. We are done setting up the font. Let's proceed with the design. Here, we are going to have a d, give it a class name. We want this dv to be responsive in all platforms. For that, we are going to make it container. Then the imagine, we are going to set it to auto. Of course, if you want to see the CSS equivalent, all you have to do is to hover on the utility class. R W in the intellisens. You are going to see the CSS equivalent. If at your end, you do not have the intellisens, all you have to do is to open up the Explorer. Then click on extensions. W in the search box you are going to search for tail wind intellisens. And here is it. I have it installed already. At your end, you just have to hit the installed button. As you can see over here, the installed button is disabled. That is why you can see it uninstalled. Install the tail wind intellisens and let's have fun together. Close it down. Make sure to safe as well. Let's close down the explorer. We are going to have another df, give it a class name. We are going to have it display grid. The grid template column is 12. Now we're going to have another df, class name. Let's set the background color to be white. We are going to have it display flex, flex direction is column. Justify content, center. The grid template column is 12. Let's stylize it on medium device. On medium device, the grid template column is five. Lastly, for this D on medium device, we want the background to be transparent. B transparent. Close it down. Good. Let's quickly format the code to get proper indentation. Right click. Format document width. Priya. Can you see? Perfect. I love this. When does deve, we are going to have another deve? Margin is going to be to. With this, whatever we have within this df is going to be centered. With this, the df is going to be responsive in all platforms. Teaching good, beautiful. Another df. On large device, we are going to have the padding left to be 24, which in actual CSS equivalents, the padding left is going to be six m. On a small device, the padding left is ten. And so the actual padding left is going to be zero. The padding top and padding bottom is 20. On medium devices, py zero. The padding top and patting bottom is going to be zero. As well on medium devices, the test is going to align start. Also we have to align it to center. Good. Now we are going to have a P tag. Let me show you. This is the P tag over here, the i D. Within the inner HTML, I'm going to do i. Give it a class name. But now we are going to use the string interpolation. Open and close co bracket, within the C bracket, open and closed back tick. And by the way, the b tick is located at the top left corner of the keyboard, right below the escape key. Here we're going to have to test. The test color is going to be light blue. We're going to have 47 A EDE. Let's say, check it out and here is it. Beautiful. In T wind Css, whenever you want to implement a custom style, all you have to do is to open and close square bracket, and then do whatever you want to do within the bracket. Test Excel. This will map to the font size and the line heights. On medium devices, test d b. On the large device, the test is going to be text two Excel. When you save on the browser, good. Can you see? But the problem here is that we do not want to use this font. For that, we are going to have the font here. I'm going to do hind dot class name. When you save, check it out on the browser and boom. Something has changed. I love it. Now, the nesting line is this. We're going to implement it with the hedge one tag. After the closing P tag, we're going to have a hedge one. Let's give this hedge one a class name. Let's specify the color of the test. The font is going to be recta black. The test size. Let's make it five excel. On medium device, the font size is going to be five excel. On a large device, the font is going to be seven Excel. On extra large device. Also the test is going to be text, seven Excel. The margin tb is going to be five. On medium devices, the margin tb is going to be three. What in the He one tag, we are going to do I am a H six. When you save, check it out and bom. Beautiful. After the He one tag, we are going to have a H two tag. We are going to do this to have the nd sign, and an instructor. This is the result for now. Let's check it out on mobile device. Take a look. It is extremely responsive in all platforms. Beautiful. Let's quickly go back to the code. Let's give the h to a class name. The test color is going to be the exact same thing over here. Copy and paste. Putting top and patting bottom is going to be two. The font is going to be bold, and then we are going to have it transform or perks. On medium devices. The test is going to be x l, so the line height and the font size will be 1.25 ram. I think that's all for the H two tag. One more thing that we are going to do is to make use of the string interpolation. Just like this. Then bati bati. Win the bati, we have to copy this fonts, highlights and paste. When you save on the browser, we have this resort. I am loving everything. The next line is to implement the Butings. To implement the batings, we're going to use the A tag. After the closing H two tag, we are going to have an A tag. But in the A tag, we're going to do projects. Let's give the class name. This time around, we're going to use the string interpolation because of the funds that we've been using. We're going to have it in line block, the bground, we're going to use this background. Transition all. The duration of the transction, make it 300, and the animation is going to be is in and out. We want the borders of the bolting to be a little bit curvy. I'm going to do rounded Excel. The test within the bolting is going to be wit. Putting top and parting bottom, it's going to be three. Also, patting left and parting right, it's going to be five. Now when you check out the botm, you have something beautiful like this. I like this. All right. We are making progress. I just noticed something. I don't like how curvy the borders are. So let's go back here. The rounded, let's make it rounded G. The rounded G will make the border radius to be 0.5 ram. When you save on the browser, this exactly is the expected result. The font is going to be bod, margin top, let's make it eight. We're going to have it transform or case. Here is it. Whereas again, let's quickly stylize it on mobile devices. On medium devices, the padding bottom and padding top is going to be two large devices, P three. As well, large devices, the padding left and padding right, is going to be eight. L et's reduce the test size on median devices. Test ta, Excel, and large device. Text tag B. I think we're done with mobile responsiveness for the botin. One more thing. On medium devices, the margin top is going to be five. On extra large devices, the margin top is going to be ten. Lastly, we also have to make use of this fund. This fund. Copy, come here and paste, safe, and here is it. Now when you hove on the botin, nothing happens. Let's quickly implement the hover effect. When you hove on the bottom, we want to change the background. We're going to do BG. O n Hova va Column shadow da LG. On Hova translate Y one. I think that's all for the Hova effect. When you save on the browser, take a look. Can you see, I love this. When you Hva, you see this beautiful effect. Now, what we are going to do is to highlight the A tag and then duplicate it, or you can highlight copy and paste. Now, let's change these to my resume. Of course, the background color let's change the background color. So on ho, we also have to change the background color. Let's change it to light blue. Because when you save and check out the browser, you will realize that this guy here is black, right? And one more thing, there's no space between these two buttons. So what I'm going to do here is to come and then do Mag left, ten. The ML I love so much is that of messages Bs. A right. I talk too much. When you save, and hear the. Now we have space in between the batons. Let's specify the cursor to be pointer. C you save. Check it out. Good. Now you see this beautiful hand pointing at the resume. Copy. Come here. And paste. Save. Now, let's implement the download resume functionality. Win the A tag, we're going to specify the hypotext reference. HDF, I'm going to do a CV dot PDF. We want it to be downloadable. I'm going to do download equ. When the CV is downloading, we want to show this name and then the name of the CV PDF. CF, let's check it out. Beautiful, can you see? And he is it. Perfect. I'm loving every bit of the stuff. Right where in the project. We are going to implement the HRF. He ref equ, s pound sign, and then portfolio. Because when we click on this button, we want to be directed to the portfolio component. For now, we do not have the portfolio component. But in the future, when we create the portfolio component, we are going to set the ID of the portfolio component to the exact same word of a H portfolio. Then when you click this button, you will smooth scroll to the portfolio component. After the closing deve was the background color of white, does deve over here. We are going to implement the image. We're going to have a d, give it the class name. What in the class name, we're going to do call a span 12. Patent top is going to be. We want to specify a custom padding top. Let's make it one t pixels, and this will be on medium device. Padding top 50 pixels. On medium device, we want the background color of the image to be transparent. The bar ground color is going to be lighter blue. L et's close down the D. Let's make it responsive on mobile platform. On median device, call span seven. Wherein the D, we are going to have another D. Specify the class name. Let's make it container so that we can have it responsive in our platforms. Then the margin is going to be auto. Wherein the DF, we are going to call the image. IMG, SRC, equ, slash, A Psi dot PNG. By the way, all of the stops can be found right here where in the public directory. Recall that we imported it in the previous lecture. Here is my CV. Here are some of the images that we are going to use. You can open it up and then check it out at your end. Let's close it down. When you save on the browser, here is it. Isn't this beautiful? Let's make the necessary settings for the image. That the coding, we're going to make it a sync. If the image link is bad, we have to display something. I'm going to do here profile pies. Right click format document with Pred The code looks extremely. When you save, this is the end result. Let's check it out on mobile device. All right. Guys, this looks good. Honestly, it looks good. Take a look. On iPad. Oh, my goodness. This is beautiful. I love this. Having done this. In the next lecture, we will go ahead to implement the skew box. See you in the next lecture. 33. Skill box Slider Implementation: Let's go ahead to implement the skew box. Before we proceed, we have to make some necessary installations. Win the terminal contra C to stop the currently running server. We are going to do MPM install, slick, react, slick, and then we are going to also install slick coser. Hit the enter key to get the fire up. And please do make sure your Internet connection is turned on. Install successful. Let's bring it down a little bit. Scrot the top. Now we are going to make the necessary inputs. We're going to pot slick crus slash, slick slash, slick.cs. Another one, we're going to pot slick carer slash slick slash, slick them dot CSS. Finally, we are going to import slider from react slick. Simple as that. Having done this, let's quickly copy the slider settings. Open up the code resource dot MD. Highlight, copy, go back to FS code, and within the component, we are going to paste. Let me quickly explain. Scroll to the top. Here we have a verbal settings, and within the object, we set the infinite to true. Slide to show is going to be six. The slide to scroll is one, and the speed is 2 seconds. Arrows, we set it to fs, Autoplay is going to be true. And then autoplay speed is 2 seconds. Then here we have the loop, we set the loop to truth, and then the Css is linear. Having done all of this, we also want it to be responsive in all platforms. At the break point of 17 60, we have to reset the slider. The slide to show is six, slide to scroll is one, infinite is set to true, and the dots is set to force. On a break point of 60, we also have to reset the settings, but in this case, I think it is exactly the same with 17 60. And so on and so forth. And here we have the slide to show to be four. Slide to scroll is one, and the infinite and dot is set to true and false. So continuously and so on and so forth. Haven't set up the carrousel. The nesting line is to implement the items itself. Scroll down. Right below, we are going to have another d, give you the class name. Let's make it responsive in our platform. The margin is going to be to. We are going to have it position absolute. Now we are going to have another df. Class name, P x three. This implies the padding left and right is 0.75. Close it down, right under d, we are going to have another d, give it a class name. We are going to have it position relative. The maxi max S n. Then the bottom. Bottom, we have to specify a custom stay. Let's make it 70 pix. On medium devices, MD, column, Max, five excel. On tra large devices. We're going to have it Mx W six cel. Padin left and right is going to be four. Let's make it five. But on a large device, we want it to be Px 14. Overflow, is going to be auto x auto. The margin left right is auto. Whats again, Let's specify the BG, which is the background. BG white. So I'm going to do rounded d to Excel. We want the corner of the ski box to be a little bit curvy. And the z index z index is going to be 20. All right. Close the deve down. Within this d, we are going to have the items. Let's run the application to see the end rest. All right. What we are going to do right now is to. Please a comment on the input, the input of the slider. Still within the Steve. We are going to use the inline style. Style. Let's specify the box shadow. 25 pixels, 50 pixels, and ten pixels to the right. We are just setting the all round box shadow from the left to the right, from top to bottom. When you save and let's see, right. It is coming out a bit. Let's put something within so that you can see it. Now we're going to have another d, give you the class name. We want the patting top and parting bottom to be ten. On medium device, patting top and parting bottom is going to be six, on a smaller device, PY six. Coss, A da crow. Beautiful. I will show you in GP, so you don't have to worry about that. Now when you check out the browser, here's it. The skew box is ready. And when you hove on the skew box, you will realize that your cos will change. Take a look. Looks like the sign of the cross. Can you see? Good. So this is responsible for the course or change. All right, so let's quickly go ahead to display the items within the skew box. IMG, SRC, e qu, slash, Mongo DB dot PNG. And by the way, we imported all of these images in the previous lecture. So when you open up the public, you can always see all the images that we used over here. All right. Let's close it down. T equal Mongo db. Let's give the class name so that we will be able to stylize it. Basically, what we are going to do is to specify the height. Close it up with the self closing tag, highlights, duplicate it six times. When you save on the browser and the ads. Don't worry, we will put everything together. Now here, we are going to change it to reacts png. We are going to display next gs. Oops, I should have highlighted this one as well. Next. Doc PN. So we're going to have express cheers. Here, we're going to have note es. Let's do here express es. When you save, and here all the kills. Oops. Note S is not showing up. T there's something wrong over there. It should be note J dot PNG. You have to specify the image format. Now we are able to display the skulls. Let's quickly make it slide. Scroll to the top. We are going to commend the stuff here. SF, and for the settings, now we have to apply all of these settings. The way we do it is actually very simple. Win does D. Let's quickly render the slider. Within the slider, we are going to spread up the settings. Close it down, highlights the closing tag. Cut it off. Come here, and then paste it. When you save on the browser, oops. What the hell? Oh, my goodness. He says, super expression must either be know or function. So let's screw to the top. Let me check the terminal. Ro module. All right, guys, we have to do something within the page dots. Close down the terminal. Open up the page dot S. Simply because we are rendering the home component within the pages. We have to switch from the sever side rendering to the client side rendering. So at the top, We are going to do us clients. Just like this. Let's wipe this off. All right. Again, let's check out to the browser. Can you see? Everything is working perfectly fine as expected. This is super amazing. Awesome. 34. Window on-scroll event: Welcome back to class. In this lecture, we will continue with the header component. Quickly, within the directory header. We are going to create a new component, header dot JS. VS code, command B to open up the explorer. SRC component. And here is the header. Click new file. Header dot S. Again, within the header, create a new file. Diagonal drawer dots, Gs. Lastly, diagonal drawer C S. Beautiful. Close down the CSS file. As well, close down the diagonal drawer. Now we're going to do RFC to generate the functional component. The header is going to stay consistent all around the project. So we have to render it within the layout. Open up the layout. Let's quickly. Heada from dot slash app slash component slash header slash header. We are going to render it at the top of the children. Here we are going to render the header. And here is it. Can you see beautiful? Basically, what we are going to do in this lecture is to get the initial position of the application on y axis. Let's do that quickly. Go back to head at dot s. Close down the explorer. Let me zoom up a little bit. Nice. First, we have to import the use effect and the used hook. For that reason, we are going to switch from sever side rendering to client side rendering. We are going to do e client. Simple as that. Place a comma right here, p and close co bracket. We're going to import the use effect. Ca. The state hook. Now let's declare the necessary state variables to be used. Within the component, we're going to do const selected index one, C set selected index one. Equ, the state, the initial state is going to be zero. Again, we are going to have const is open. Ca set is open, equ. The initial state is going to be force. Let's declare the state variable to get the position of the application on y xs. We're going to have cost crude set is and the initial state is going to be force. Beautiful. To demonstrate this example. We just have to duplicate the home components so that we will be able to scroll. Let's open up the page dot s. Home components. I just have to duplicate it three times. And please, this is for example sake. When you save, now we can scroll the application. I just want to demonstrate it to you so that you understand it well enough. Go back to the code, close down the explorer. The idea is simple. When the application on page y offset is equal to zero, we want to set the initial state to force. Else, we want to set the initial state to true, which simply implies. Come here. Now, the application on page y offset is equal to zero. You know why? It is simply because we did not scroll the application. But when we scrow the application like this, when you screw up. The application on page y offset is going to be greater than zero. For that, we are going to set the initial state to true. In a simple term, when you screw the application, we just want to update the state. The reason for that is to be able to give the header a class name in order to uniquely stylize it when the user screw the application. You would definitely get the gist after the implementation. Here we are going to have a use effect. What the use effect? We are going to have handle scroll. We're going to have constant scroll Tp Q window dot page y offset. Or document document element scroll T. Terminate it with the semi column. And here we have to update the initial state. Set in scroll two. Scroll top is greater than there. And here we're going to do window dot at event litener. Scroll, handled scroll. Having done this, the next line is to clean up the function by removing the scroll. Here, we are going to have a return. Window dot, remove event listener. Scroll handle scroll. Let's quickly condition the use effect by applying an empty dependency array. After that, we're going to do console dot log. We are going to log a sc. When you save the application, common I to open up the console. When I screw up. The application on Page y offset is going to be cred than zero. And then we will update the initial state to true. But when I scraw down, the application on page y offset will be equal to zero, and then the current state will be updated to force. Understood. Beautiful. So let's do it one more time. Screw up down. Check it out on the console. Down. With this, we will be able to stylize the header when the user scroll the application. Having done this, let's get set to design the header components in the next lecture. See you then. 35. Implement pageYoffSet: Let's quickly apply the example. So Let's implement it right here. We are going to wipe off the d because we do not want to add extra nodes to the tree. We have to use react dots fragment. Within the fragment, we are going to have a header. Now let's stylize the header. Give it a class name. We are going to make use of string interpolation. We're going to open and close co bracket, within the co bracket, specify the bag di. We are going to say, if scrode is set to true, we are going to do header show, and else, nothing happens. Beautiful. Whenever you scroll the application, we want the header to remain fixed to the top. We are going to have the position to be fixed. From top is going to be zero because we do not want any space in between the header and the Y axis. The z index is going to be 50. Transition all. Then the duration up, is going to be 500. Now we are going to have a stale. The background color. We want to conditionally specify the background color. We are going to do if scroll is set to true, which means if the user scroll the application, we want the background color to be white. Else, we do not want any background color. We want it to be transparent. Separated with the co, wipe off the column. For the box shadow, we also want to conditionally specify the box shadow. If scrolle is set to true, which means when the user scroll the application, we are going to have a blue box shadow all around the head. And else, nothing happens. W in the inner HTML, we are just going to have a H one tag for teaching papers. I'm going to do testing the header. It's fine. Save on the browser, here it. Can you see? Now, the header has got no background. But when the user screw up the application, the background color of the header becomes white, and then the box shadow will appear. When you screw down, the box shadow disappears and the background color as well disappears. So when I screw up, can you see, observe it over here at the top left corner of the screen. Do you see? Okay, let me do something. Let's give this a class name and then, I'm going to do text seven Excel. This will make the text to be extra large, and then the example will be more fixable. When I scroll up, the application on page y offset is going to be greater than zero, and then it will update the initial state to true. When the initial state is being updated to true, based on the true s, we then have to apply a b ground color of white to the header with a box shadow. Understood, beautiful. Now when I scroll down, it disappears. Up, the header by ground color turns white and the box shadow turns blue. Everything is working perfectly fine as expected. In the next lecture, we will begin to design the head. See you in the next lecture. Stay focused, and always take care. 36. Navigation Links: Let's go ahead to implement the navigation links, right within the head. But before we proceed, we have to bring everything to normal. Come here. Let's wipe off the head one tag. Go back to the page to cheers. We have to wipe off the duplicates. Save on the browser. Beautiful. Okay. Let's go back to the header, and here we are going to have enough let's give it a style. We are going to make it invisible. The visibility is going to be hidden. Now on extra large device, we are going to make it visible. Also an extra large device, the max width to be for Excel. This will give the max width 56. At this break point, we are going to have the width to be eight Rm. The margin left and right is going to be auto. Again, within the nove, we are going to have on or that list. Let's give it a style. We are going to have it display flex. The font is going to be co black. Oops. The black has to be on cap like this. Flex tag roll. The flex direction is roll. We have to align items to center. The height is going to be 24. Now we're going to have the LI tag. Let's give it the style. We're going to have it grouped. The text is going to be to Excel, which will map to the line height and form size. We're going to have a position relative. The font is going to be bored. The margin right. Let's make it 20. Save on the browser, nothing happens. Now, let's begin to implement the links. Here we're going to have an A tag. So we're going to do home. Now when you check out the browser, you're going to see home. Beautiful. H. Let's give it a style. Class name. We're going to have some java script in between, so let's use the strength interpolation. Now, we want to apply the menu style. Menu item. Don't worry, I will show you right now. Open up the explorer. Within the global CSS. We copied and pasted the stoves right here. And here is the menu effect. So from the left, -0.75 M, from the top, the Z index, height with border radius, colors, and the rest of them. If selected index one is equal to zero, we are going to have the test black, and else, nothing happens. Now, let's apply the actual test. I know this part is quite tricky, but on, after implementation, I will explain it simply. The color value is going to be 666 d47. Good. The group cover, when you hove on it, the text is going to turn to blog. Let's specify the hypertext reference. This is a pointer to the home component. On click of this link, we have to update the selected index. We should update it to zero. Right after the L, we are going to do I selected index one is equal to zero, then we are going to do something. We're going to have a span here. Let's give the stay menu effect. Transform, the opacity make it 100. We will rotate it towards the negative direction. Therefore, minus rotate 12, so this will have it to rotate towards the negative angle. Group. We also have to rotate it. S. We just have to highlight the span. Copy, come here and paste. So the difference is that this is going to rotate towards the positive direction. You don't have to prefix it with the minus sign. And I think that is the only that we have to make. Let's s and check out the browser. Now, can you see? It is highlighted. Okay. Good. What we need to do right now is to highlight the LI tag and duplicate it three times. Or you can copy and paste three times. Highlight from lines 38 to 50. I'm going to duplicate it three times. Perfect. So this is the first duplicate. Now here, if set selected index one is equal one. Update it to one, and this is going to lead us to the portfolio section. This is going to be two. Two. When this link is clicked, we want to smooth scroll to the About me section. About me component. Lastly, ops, guys, I'm sorry about that. Look, we have to change the inner HTML. Here I'm going to do portfolio. Here I'm going to do about me, or you can do about Lastly, here's going to be three. H. Three. We're going to display ami. Save the application. Check it out on the browser. Beautiful. Can you see when I ho? All right, so I am not fully convinced with the result we have. Because if you observe carefully, you will realize that the links are all highlighted. We do not want it that way. So let's get it fixed in the next two lectures. See you then. 37. Header navigation drawer Menu: Welcome back to Clouds. In this section of the course, we are going to proceed to design the diagonal draw. Open up the header component. Scroll to the top. Let's quickly clear off the console log. Here we're going to do constant open drawer, set it to an arrow function. Win the function, we are going to update is open. Let's update it to true. Recall that in the previous lecture, we declared the state variable is open, and the initial state is false. So now we are updating the state right within this function. Nice. Let's quickly render the drawer. What I'm going to do first is to import it at the top. We're going to import drawer from dot slash, they are going to draw. So within the fragments, we are going to have a div. Give the class name. For sure, we want to make use of string interpolation, so we can write some java script in between. Dagon to d drawer. If is open is set to true, we are going to have the is open class, and else, nothing happens. We are going to stylize this class in the future. Let's close down the D. Within the D, we have to render the drawer. Close it up with the self closing tag. Now we are going to do is open, is going to be equal to is open. Then set is open. Is going to be set is open. Selected index one, is going to be equal to, selected index one. Lastly, set selected index one, it's going to be set selected index one. Beautiful. We are sending all of these tops as props down into the drawer component. Now having done all of these, we have to receive these props within the drawer component. Open up the explorer and then diagnodrad or chairs. Let's generate the functional components. Right within, we have to destructure is open. Coma set is open. Coma selected index one, set selected index one. Haven't destructured all this. Let's go back to the header component. What we are going to do within the header component is to display the drawer. Right here, we are going to have a d, give you a class name. We're going to have its position relative. Within this d, we are going to have another d. The Z index is going to be 30. Let's have its position absolute. The cars is going to be pointer. The width is 14. The height is also 14. On large devices, the width, let's make it 24. O G column, H 24. The bagrond color, we are going to have our own custom color, going to do for eight AF d E. We're going to have it display flex, justify content to center. Align items to center, and we want the borders to be rounded. Rounded d, B R, x l. This will make the border bottom rights to be a little bit curvy. Here. Let's close down the d, and within the D. Before we proceed, we have to implement the click. On click off the deve, we want to open up the drawer. Let me show you quickly. Can you see? Here is it? So now we are going to put the menu over here and look at this. What the hell is this? That will be fixed in the future. Let's continue. Now we are going to have a dev. Give the dev a style. We're going to have its position relative. The width is going to be seven, G ten. The height is going to be seven. G H, ten. We're going to have it display flex, ify content to center. Align items to center. Close down the D. Within the D, we have to display the image, which is the menu image. IMG SRC equ slash drawer dot PNG. The alternative, we're going to do drawer item. Let's give the style, the width, let's specify a custom width of 150 pixels. The height is going to be ten. Closer up with the self closing tag. When you save and check out the browser, the ADs, can you see? Isn't this beautiful? When you observe carefully, you will see the stuff over here, and it is actually occupying space and I don't like it. This write up. I don't know where we have it, but we have to look for it. I think that should be within the diagonal drawer. And here is it, this deep overhead. Now I'm going to wipe off this item within the inner HTML. When you save the project. Beautiful. Now we are making progress and I like it. When you observe the navigation link, you will realize that the drawer is covering the home link. Can you see, there's a link at the top left corner of the screen, the home link. So we have to align it properly so that the home will come right after the navigation drawer. So we need a space in between. Let's do that in the next lecture. 38. Home Link Challenge: Based on the observation in the previous lecture, we realized that the navigation drawer is covering the home lane, and that exactly was the issue I promised to disclose to you. Haven't said that. Let's get it fixed quickly. Back to S cot, within the head S, you have to scroll to the top where we have the head at tag, and here is it. What we are going to do here is to specify a width of 100%, which is W. The actual CSS equivalent is going to be width 100%. And when you hover on it, within the intellisens you are going to see it right there. Save on the browser, they are these. Can you see? Beautiful. Now, when you click on the home, the home gets highlighted and the rest of the navigation link gets a little bit faint. When you click on portfolio, it is going to get highlighted and the test color will be black. Same here, same here. Then same here. Everything is working perfectly fine as expected. Something I want us to do here is to render the home page multiples. I want to show you something very quickly. Open up the page s, and then let's quickly render the home component multiple times. I just want to do this in order for us to get a scroll. Now we will be able to scroll the website. So you will observe that when I scroll up, can you see, the header becomes white and the box shadow becomes blue. And here by making the navigation links more visible. Isn't this beautiful? I love it. All right. It is responsive in our platform. Can you see? On iPad. Beautiful. All right, guys, so this exactly is what we're going to achieve in this lecture. Quickly, go back to VS code. Wipe off the multiple renders, and then let's have only one home component rendered on the screen. All right, everything cool. And that's right. 39. Open and close navigation menu button: In the previous lecture, we implemented the navigation menu. But when you click on it, nothing happens. In this lecture, we will go ahead to implement the open and close functionality. He onto VS code. At the top, we are going to import. Use router, com Ue path name. And this is coming from next s Navigation. The use router is a function, so we have to invoke it. And then we will assign it a variable. Const route equ. Let's do the same to the use path name. C pathname equ U pathname. The use path name is a client component hook that enables you to read the current URL path name. Having done that, let's replace this d with react fragment. Within the fragment, we are going to have a df, give the class name to stylize it. We are going to have it position relative. Within this d, we are going to have another df, give it the class name. Now we want to use the string interpolation so that we will be able to write some piece of java script in between. The z index index 50. Right now, we are going to have some condition. If path name is a like this, which is the pointer to the home component, we are going to have it from top zero pixels, and else from top is going to be 100 pixels. So here we're going to have the cos or to be pointed. We want it to be fixed to top. The menu within the drawer is going to have exactly the same height with the menu within the header component. Okay? Dt worry, you definitely will get the clear gist. So go to the header component, scroll down, and let's copy everything right here. Starting from the height. Come here. And then paste it. Beautiful. Close it down. Another one, give the class name, within the class name, we're going to styleze it. Also, come here. Let's copy this dive because it is going to be exact same thing. Let's replace it. Close it down. One more thing we have to do within this df is, come here. We want to specify the click. On click of this df, we want to close down the menu. We're going to set is open to force. Here we're going to do. If it's open is e quo true, we want to display the closed SVDic. So quickly open up the code resource dot MD. Highlight from lines 192 2205. Copy, come here and paste it in between. And s s. We also have to show the menu icon. Highlight copy, come here and paste it in between. All we have to format the code. When you save on the browser. All right. Nothing happens. So for now, you may not be able to see the effect on the screen. Let me show you something. Let's change the BG to red so that you understand what we are talking about. BG, red, 500. Having done this, let's quickly apply the stars. Open up the diagonal draw at CSS. We have to stylize that they are going to draw within the head at cheers. Copy, come here, dot, they're going to draw. The width of the draw is going to be 100%. The height 100 view height. The position is going to be fixed to top. Transform origin, we want it from top right. Transform translate, -100%, -100%. Transction, we want to transform it 0.5 seconds in an. The Coso is going to be pointer. The z index is 100. Now for the diagonal open, the sky. If this open is set to true, we also have to stylize this class over here open. Copy the diagonal draw, come here and paste. Dot open. All we have to do here is to transform, translate 00. Simple as that. Go back to the header component, right at the top, we are going to pot do dot slash, header slash. They are going to draw dot CSS. When you save, now you will definitely see something good on the screen. Can you see? When you click, you close it down. Click to open, you close it down. Now, let me explain everything line by line. You will realize that when I click on this menu, the navigation drawer will appear from the top left corner of the screen to the right. Take a look. C. Then when it appears, you are going to see the x icon, which is the close icon. Now, when I click on the close icon, if you are vigilant enough, you will see a menu icon. Now watch. Do you see? There is a menu icon that appears before this other menu. Let me zoom up a little bit. Take a look. Do you see? It goes out with a menu icon. So that exactly was what we did within the drawer. Let me show you. If his open is set to true, we are going to show the close icon, and here is it, the x icon. And if it open is set to force, which is if you close down the navigation drawer, we are going to quickly display this icon before it closes. Then take a look, observe it carefully. All right. Good. Having done that, At the top here, we have designed the layout for the drawer. So the color is red, and here is it. It has the exact same size with the one on the head component. Can you see? Now we have been able to initiate the is open and is closed. In the next lecture, we will begin to implement the menu items. All right, everything cool. But one thing we should do here is to change the BG to blue. Okay? I actually did it red for teaching papers, so you have to return it to this color. When you save on the browser. Now when you click, can you see? All right. Everything is working perfectly fine. Let's move on to the next lecture where we will implement the menu items. See you in the next lecture. 40. Menu Drawer Navigation Links: So let's proceed with the menu design. Open up diagonal draw Gs. All right. Scroll down. Right after this closing d, we are going to have a header. L et's quickly stylize the header. Give the class name, we're going to use a strong interpolation. The position is going to be fixed. The width is going to be full, which will make it 100%. Transition is going to be all. The duration, let's make it 500. The z index is 40 beautiful. Having done that, we are going to have a condition here. If path name is equal this. We are going to have it from top zero. A s, we are going to have it from top -98 pixels, or you can make it 100 if you want. Okay. So within the head We're going to have a dif, give it the class name, let's have it position relative. Another df with the class name. Here we're going to have the z index position, let's position it absolute. Transform GPU. We're going to have it is in and out. The duration is 500. Transition is all. Scale, we want to scale it 100. Translate x, none. Let's highlight this. Copy, come here. Paste. This is going to be translate Y. Let's give it opacity, 100. The bar ground two, two, 3740. Let's close it down. We are still stylizing it. We're not done yet with the style. BG opacity, which is the background opacity, is going to be 95. The width 100%, we're going to have it flex column. Then on smaller devices, we're going to have its flex roll. We are done with this. Now within this de, we are going to have a nerve. The test within the nerve is going to be white. The fonts, we want to use the color board. Test align c. T for Excel. Let's have it transform up ese. All right. Good. Having done this, we're going to have the UL. Win the UL. Let's quickly give it the style. Class name, display flex. Flex direction is column. Win the UL, we're going to have an LI tag. Let's give the class name to stylize it. We're going to have it grouped. Moting top and bottom. It's going to be four, A Excel, we're going to have the mating top and bottom to be four. This will map to the margin top and margin bottom on the break point of 15 36 pixels. Having done this, when you save on the browser, click the menu. All right. It is coming. Can you see the drawer is indeed coming, but let's try to finalize it to see if we have issues. Within the LI tag, we are going to we are going to have a d, give the class name We're going to have a display inline block. The position is relative. We're in the D, we're going to have the A tag. We're doing a whole lot here on the header. H REF, the hypertext reference. We're going to do slash home. So when you click on this one, it will take you to the home component. Specify the click. Click, we're going to set selected index one to zero, simply because that is the default value for the home. And I hope you understand what we are doing here from the previous lecture where we declared the state variables to be used. So when set selected Index one is zero, it means we are on the home page. Do you understand, don't worry, as we keep rocking, you will definitely understand everything. Here we're going to set is open to force. Because when you click on the link, we should be able to close down the menu. So let's set it to force. Let's close down the A tag. The inner HTML, we're going to display home. When you check out the browser, click, can you see, it comes. When you click on it, it takes you to the home component and the navigation drawer will disappear. That exactly is the idea. Having done all of this, we want it to be highlighted when clicked. Outside the A tag, we're going to have some Java script. If selected index one is equal to zero, we want to give it some style. Now we're going to have a d, give the class name. We're going to have it position absolute. From top, is going to be two from left, is going to be minus two. Anytime you see me prefix the tail wind utility class with a minus sign, you should understand that we want to specify a negative value. Left, two. It is going to be left, negative two. The width is going to be full, which makes it 100%. The height is going to be full as well, which makes it 100% height. Transform GPU. Transiction is all the duration. Let's make it 300. We're going to rotate it negative six minus rotates six. The opacity 100. Group dv rotate six. Group dv. The Hva opacity is going to be 100. Sorry, the baground, We're going to have it randed Excel because we want the edges to be curved. The z index, we're going to have a negative ten. Okay, let's save it and see what happens. Oops, before we save, we have to close down the d like this. The closing de shouldn't be here. Cut it off, and then let's close it down here. Ls ls, ls, nothing happens. Make sure to close the under de over here. Then highlight this d again, C P. Come here. Oops. Also, we have to close the under d. Then paste it here. Now we're going to make some changes. A This is going to be. Rotate zero, the opacity is going to be zero. And what is again? I think that's all. When you save on the browser, when you click, when I hover on the menu, take a look. It is going to highlight red, and this red is being rotated. Understood. Beautiful. Now, let's change it to the actual color. I think the actual color is going to be light blue, so we have to copy it from here. The sky copy. Where do we have the color? Okay. Here is it. Command D to mult select. Wipe it off in both lines and then paste. Save on the browser. Again, when you ho, take a look. I love this. We are going to highlight the LI tag and then duplicate it three times, just like we did when we were implementing the links within the head component. Hot on the shift ten odds, and then tap the down arrow key to duplicate duplicate one, two, and three. Beautiful. When you save on the browser, now you have it like this. But I have doubt in my heart. This guy over here is supposed to cover the screen, which is this menu over here, and I don't know why it is not showing up like that. Okay. Can you see? It looks good. Now let's begin to make some changes. This is the first LI tag for the home page. For this one here, we are going to update the set selected index to one, and I set selected index is equal one, then we have to do this. And here is going to be portfolio. This will link us to the portfolio component. The second LI tag N C. For the third LI tag. We're going to update the set selected index two. If then if it is equal two, we want to move to the About me component. And by the way, we also have to change the ref. So here, I'm going to do about component. Scroll up. Here, we have to change it two. Portfolio. And this is the last one. So let's update it to three. If it is equal to three, then we have to move to the iami components. Here, we're going to specify a M, right in the drive. What is again? We have to check it out very well. All right? Okay, it's fine. If we miss out something in the future, we can definitely fix it. When you save on the browser, open and boom. Now when you hover, you see stuff like this. Can you see? So in the next lecture, we will implement the social media icons. 41. Navigation Drawer Challenge (Fixing the height ): So the diagono dra is half screen, and I'm not happy with the end result. For sure, there's an issue with the height. So I want you to take it up as a challenge, post the video and try as much as possible to fix it at your end. Haven't tried to fix the issue at your end. Quickly, let me show you how I got it fixed as well. Go back to VS code. Win the Dagono dra do s, here is the header. We have to specify the height of this t. So So we have the flex direction to be column. The right thing to do is to have it display flex, and then the flex direction is column. Having done that, we also have to do H da screen. This will map the height to 100 view heights. When you save, check it out on the browser. Now can you see, everything is well aligned. When I ho, take a look. It looks good, and I like it. Close. Open, close. So basically, the issue is fixed, and everything is working perfectly fine as expected. Indent lecture, we will begin to implement the social media icon right below the Nav, which is the link. We're going to implement it here. Let's do that in Dines lecture. 42. Navigation Drawer Social Media Icons: All right so let's begin to implement the social media icons. Win diag to draw, right after the closing nerve. We are going to have a section. Let's give it a class name. The margin top and margin bottom is going to be 14 and smaller device. The margin top and margin bottom is going to be 12. All right, so on smaller devices, we are going to have it position absolute. On O G, we're going to have it relative. Again, on smaller device, from the right is going to be zero. The height is going to be pops before we proceed to the height, also implemented on large device. Hope you can see clearly. All right. On Small the device, the height is going to be full height, which will make it 100%. On LG, the height is going to be auto. All right. So within the section, we are going to have a H tag. Let's give the class name. We are going to have a display block. On smaller device, we want it to be hidden. On smaller device, we want it to display none. Now G, we're going to have a display block, the font bode. The test, we have to specify a custom test. Test dash to Excel. Then we're going to have to transform upper case. The margin bottom is going to be five. Within the inner HTML, we are going to do follow me around. Just like this. When you save, check out the browser. Open the drawer. Oops. Let's see something. Let me save again. Load. All right. Here is it. Beautiful. The next line is to display the social media icon. Within the section, we are going to have a D. Let's give the style. We're going to have a display flex. Flex direction, is going to be roll. On smaller devices, the flex direction is going to be column. Large device, we want it to flex roll. Within the D, we're going to have an a tug. Within the A tug, let's give it a ref. Right here, you have to specify your Twitter handle. The link, and I just pasted mine. Good. Give you the class name. The test is going to be gray, and then we have to specify the value to make it thicker. On hover, we want to change the test to. Text white. Transition, color, and then the duration. Let's make it 300. The next line is to copy and paste the Twitter SVG. Now go back to the code resource MD. Here is the Twitter SVG. Copy from lines two, 27, 2238. Highlight and copy. Go back to the code. Within the inner Html of the A tag, we just have to paste. When you save, let's format the code to get proper indentation. All right. Fine. Save and check out the browser. Can you see, now we have the Twitter icon. One thing I'm observing is that there's no much space between the H tag and the icon. Let's see something. All right. Here's where the mystic ly. It is indeed a typographical error. It is going to be B, which is Magin bottom. Okay? When you save on the browser, now take a look. Can you see? Beautiful. I'm loving every bit of the scores. And I hope you write a wonderful comment to actually appreciate my handwork. Thank you for that. So the nest in line is to highlight the A tag and then duplicate it as many times as you like. I'm going to duplicate it three times. I think that's enough. All right. It is nice. One more time. And when you save on the browser, take look. It looks nice. So what I'm going to do right now is to change the icons and the hypotext reference. Yeah. For me, I've done this at my end. So you have to copy the UR well of your profile and then paste it right within the Hage reve. Now, the second Hage reve We are going to have the git. I'm just going to do here git. This is not the URL of my Git profile. You can do your at your end. Open up your git account, go to your profile, and then copy the URL, paste it within the HRF. Having done that, we have to change the SVG because this is a Twitter SVG. Go back to the code resource. Now, here is the git. Copy the gits like this. Check it out from lines 242, two, 254. Copy, come back, and then paste it right here. Quickly format the code. Also, we're going to have this one for Dribble. Copy the URL of your Dribble account and paste it within. What I'm going to just do is to change the SVG and then you can do the rest at your end. Wipe it off, go back to the code resource, highlight, and then copy. Okay, paste it here. A ways make sure to format. And by the way, you can hold on the shift and t and then tap the F key to format. That is the short cut to format with predia. And here, we're going to have ng in. As well copy your Link Den account and paste it here, the link. I'm just going to specify Link Dn. Delete the SVG. Go back to the code resource and then let's copy the SVG for the Link D. Highlight and copy. Come here, paste, hold on the shift and d, press the FG on your keyboard to format. Also here, we have to all of this you can do at your end, even without watching the lecture. Here, I'm going to do Instagram. Copy your Instagram account. For that, I just have to copy my own Instagram account. Wipe it off, past the URL of your Instagram account. This is mine, and by the way, you can follow me up on Instagram. So we also have to change the SVG for the Instagram. Just like that. Shift an odd and press the F key to formats. Now let's check out the end result. Can you see extremely beautiful? On iPad, it is aligned to the right. Then on mobile device, t a look. It works perfectly fine, exactly what we expected. This is responsive in all platforms, and I like it. So you can click to open up my Instagram handle, and then make sure to follow me up. All right. So everything is working perfectly fine as expected. See you in the next lecture. 43. Portfolio screen layout and item display: We'll come back to class. In this section of the course, we will go ahead to design the portfolio components. Basically, what we are going to do in this lecture is to set up the background layout. Where after I do. Let's get started. Quickly open up the explorer, and then SRC, we have to implement it within the page s. Before we proceed, we have to make the necessary input regards to the font. Open up the component, the home, and then homes. We have to copy from lines five to lines ten. Highlight and copy, close it down, go back to the page, which is the parent page. Common B to close down the explorer. And then we have to paste it right here. Beautiful. The nest and line is to specify the height here. Let's quickly give it a class name. Man, screen. We're going to have it position relative. The minimum height is going to be 100 v. Having done that, below the home component render, we are going to set up the layout for the portfolio. Now we're going to have a dev. Give it a class name, and within the class name, we have to apply styles to it. The margin top to be zero. Then the Padin top five, the margin bottom, we are going to have it -40 minus margin bottom, 40. Close down the dev. As well, we have to specify the ID of the d. I'm going to come here. We are going to do ID, equa, portfolio. So there's need to be precise over here. Open up the explorer. Go back to the header, header dot G. So we have to look for all right. Here is it. It is extremely correct. So Make sure it matches with what we have over here because when this link is clicked, we want to open up these components. Beautiful. All I talk too much. Close down the header, close down the explorer. And now let's continue. Having done that, we also have to give this DV style. We want to use some inline style here. The background image, linear gradient, we are going to rotate it -62 degree. Coma, and the color is going to be a light blue. We're going to have EF seven F B. We are going to have it zero, 50%. And this portion is going to occupy zero, 50%. If the coma and the other portion is going to be white, and it's going to occupy zero to 100%. You can as well recalculate it at your end and make it look more better in terms of dividing the screen. Place a coma right here, and then let's go down. Separate it with the comma. Come here unless specified width. The width is going to be 100%. When you save, make sure the application is running, and then check out the browser. For now, you may not see anything on the screen. Let's quickly display some items to make it visible. Wouldn't this D? We have to quickly format the code. Right within the d, we're going to have another D, give it a class name. Then we have to make it responsive in our platform, container. Then the agine is going to be auto. Within this df, we are going to have a P tag, and the inner hetermal of the P tag is going to be portfolio. We want this portfolio to sit behind the background. Save. Now, here is the portfolio. Let's give it a star. Class name, where in the class name. We're going to have the test. Let's make it 300 pix because we want it to be large. For now, you can see the portfolio over here, how right. Now, give it 300 pix when you go back to the browser, and then you see beautiful. Now, I want you to carefully observe the portfolio screen. You will realize that it is divided into two portion. The first portion is white and the right edge of the portion is a light blue. So we want this portfolio to be seated only At this portion, the white portion. So what we are going to do is to make the overflow to be hidden, and then we will apply more styles to it. But for now, just notice that the screen is divided into two portion, and here is the implementation. This guy right here. Here. Beautiful. Okay. Let's continue. The test, we are going to have a custom color test, F seven FB, cod. On medium devices, the pattern left is going to be 50 pixels. Otherwise, we are going to have the paddn left and right to be five. The max with, we have to 2750 pixels. The width 100%. Then overflow. Let's make it hitting. When you save, now the portfolio here is going to occupy the first portion of the screen. Take a look, and here is it. All right. Now we're going to have a style. We're going to have it transform, translates, zero pix, -20 pixels. Now after the p tag, we are going to have another d. We are going to have exactly the same style with this, so I just have to highlight cop. Come here. Please take a look and paste it within the D. Within the inner HTML of the d, we are going to have a P tag. Give you the class name. The test, we're going to have a blue test. For A, FDE, on medium devices, it's going to be eight pixels. Otherwise, the padding left and padding right. It's going to be five. The front, we want it to be extra bod, within the two tip, and then we have to select extra bod. The text five Excel. Win the inner HTML of the P tag, we are going to do recent works. Save. Let's check it out. All right. Beautiful. Now we have the recent work. Okay. I'm already noticing something, but I will tell you when we're done. After the closing P tag of the recent work, we are going to have another P tag. Let's give the star. We want to make use of the string interpolation. The max width, let's make it to Excel. On median devices, the pardon left. Let's maintain 80 pixes. Pad left and pad and right, let's maintain five. The test is going to be system pixes. The test color for seven, c26d. Then line height, let's just make it, margin top, et five. Now, let's assign it the phone, so we will make use of the Google hind. I'm going to do hind dot class name. Perfect. Within the inner H T ML of the P tag, we are going to copy and paste something there. Open up the finished work. I just have to highlight this. Click and copy. You can go ahead to write whatever that describes your company or yourself. I just have to paste it right here. Let's form as the code, save. And here is it. Everything is working fine, but we have to fix some issue. The portfolio is overlapping, as well, the test is overlapping. Let's check it out on the finished work. See on the finished work, everything is within the first portion. As well, the portfolio is used as a background for the rest of the item, and you can see it c. What do we do right now? Go back to the code. It's quite easy to do that. When you scroll to the top, right wouldn't this d. Let's make this minors 250 pixels so that it can push the item upward. Now when you save on the browser, look, everything is well aligned. I love this. Beautiful. One more thing I want to bring to your notice is that the items at the left edge of the screen is at growing it container. The way we can fix that is to make this container to be bigger than the container at the right edd of the screen. I hope you can observe and see what I'm talking about. Come here. Let's see where we divided the screen. Right here. Now, let's make this to be 45%. When you save on the browser, everything is well aligned, and this exactly is the expected result. Now we are done setting up the layout. In the next lecture, we will go ahead to implement the slider cards. This is all for now. See you in the next lecture. Stay focused, and always take care. 44. Portfolio Card: Let's go ahead to display the items on the screen. Back to VS code. The first thing we are going to do right here is to import the data. Minimize the VS code, drag it to the right edge of the screen, and then open up the portfolio resources. Within the portfolio resources, you are going to see the data source, open up the data source and here lies the data gs. Go back to VS code. Common B to open up the explorer. Now, drag and drop the data s right within the app directory. Beautiful. Now maximize the ias code. This includes the datas that we're going to use within the slider card. It is just an array of object. Within the object, we have the title, name, description, and images. As well, the second element, we have exactly the same thing. And so on and so forth. Let's quickly render all of these items on the screen. Open up the components. Right click on slider card. Here on New file. My slider dot, G is. Another one, right click New File. Slider card dot gs. Generate the functional component right within the files. Close down the explorer. Let's proceed with my slider GS. To have the items displayed on the screen. First, we have to import it within this component. Import data array from app slash data. Of course, the data S is right within the app directory. Having done this, come here. Wipe it off. We in the D, we are going to map through the data. Now we are going to do Data array dot map. We're going to take an item column index. This item over here represents each element in the array. Let me show you the title, the name, description, images, and so on. Whenever we want to retrieve the title, we're going to do item dot title, item dot name, description, and so on. You can change the name of the item to anything you wish, but make sure to give it a descriptive name that describes the intention. Here, we're going to set it to an arrow function, open and close perentens. We're going to return the UI. We're going to have a d with the class name of M slider. Win my slider, we are going to render the slider card, which is this guy right here. So go to the top. Now we have to import slider from dot slash slider card. So I simplicity, I'm going to do slider. Closer up with the self closing tag. And now we are going to pass the item and index as props down into the slider card. So I'm going to do item equ item. And then index equ index. So we are passing these props over down into the slider card. What ness? Let's go ahead to receive the props right within the slider. Slide a cut, and then we have to destructure item, an index. I think we should use a fragment of hair. Highlight, wipe it off, and I'm going to do react dot fragment W in the fragments, we are going to have a D, give the class name. The height is going to be 200 pixels. It is a custom height. On a large device, the height is going to be 450 pixels. On a medium device, the height is going to be 400 pixes. On a smaller device, your handset, the height is going to be 200 pixels. On a large device, the width is going to be 650 pixels. On a medium device, the width is going to be 450 pixels. L et's make it 300 pixels. We are going to have a position relative. The margin is going to be tal, closed on the def. Win the dv, we are going to have another df. Give it a class name. The height is going to be full, which makes it 100%. The width full. Let's give it a group. Then we're going to do Coso all scroll. The z index z 50 avid position relative. Closed down the d, and within the D, we are going to have an IM tag, S R C equ. Now, recall that we received the props over here item, and this item represents each element within the R A. H, and over here, We map through the data array, and then we pass in the item. Remember that this item an index was sent into the slider component as probs. So down here to access the images, I'm going to do item dot images. And here is it images. So we want to get the first image within the array. H. I talk too much. To accex the first element in an array. Of course, you know that. You just have to use array index of zero. Close it up with the self close in tag. When you self. Let's see what we have on the browser. Nothing is displayed on the screen. You know why? Let me show you. Open up the explorer. Won't the page that Jz scroll down? After the closing dif, let me show you this dif was the class name of container. We are going to have another dif. Give it a class name. For now, we're not going to apply style. Here, we are going to render my slider. Close it up of the self closing tag, and please do make sure to import it at the top. Save on the browser. They are these. Can you see? Now we have succeeded in displaying the images. It looks good. But we have to size it properly. Let's styleze it so that it appears nicely. The t is going to be. The width is going to be 100%. The height is going to be 200 pixels, but on large device. Let's make it 50 pixels. On median device, let's make it 300 pixels. The max width 100%. Can you see? Now the images have exactly the same size. Let's make the borders to be rounded a little bit. Now I'm going to do rounded dash G. Sf and the browser. Take a look. Can you see? Now the borders are all rounded. After this d, we are going to have another d. Let's have this position absolute. From top, 14, and smaller device. Left 12, from left, rounded LG. We also want the borders to be rounded. We are creating the card overlap, give it the color white. The height is going to be 200 pixes. Then on large device, the height 30 50 pixels, on median, 300 pix, width is going to be 100%. So within the dive. Okay. Just before we proceed, we have to give it a box shadow. Let me show you something. Now I'm going to do VG, red 500. I really want you to see the card overlap. Can you see? Now, see it looks nice, really? It looks nice. This is the card overlap. W the red background. Now let's change it to white. So to make it visible because if it is on white, you may not see clearly. Can you see? It is not visible enough. So what we have to do is to apply box shadow around the corners. So I'm going to do stale box shadow. 48 A of the E. We want to apply the box shadow both from the left, right, top and bottom. Minus ten pixs, ten pixels, 20 pixs, ten px. Let's save and see. All right. Beautiful. I love this. Looks nice, really. Format the code with predia. Where in this d, we are going to display the name of the item. We are going to have another div with the class name. We're going to have its position relative height, always 200 pixes. On large device, the height is going to be 50 pixs. On medium device, the height is going to be 300 pixes. Of course, these are all my specifications, so you can do your own t at your end. 100%. Close down the D. Within the d, we are going to have a p tag. Win the inner hetemel of the P tag. We are going to do item dot name. Let me show you where in the data s. Here are the names. Okay? Save on the browser. Oops. All right. So it is actually showing up, but it is behind the image. So what I'm going to do now is to give it the style. We have to position it absolute. And then bottom three. And when you check out the browser, here is it. All right. I don't like the way it appears from the left side. There's no margin at all. What I'm going to do now is from the left. Let's give it far. The test, it's going to be O G, the font. Let's make it 300. Okay. All right. Everything is well aligned now, and I'm loving the end results. Take look. Isn't this beautiful. One more thing we are going to do is to display the clickable icon. Right after the IMD tag, we are going to have a D, give the class name. We are going to have it position absolute. From the bottom, 270 pix, on a large device. So we are actually trying to target all the break points. So yeah, it's going to appear at 44, a medium device. It is going to appear two on a smaller device. It is going to appear 270 pixels. But something we have to do right here is, let's change this to 100 pixels. Yeah. I think that is more correct. Left, six, from the left, it is going to start from six. Then we want it rounded LG, transiction, The duration is going to be 300. I hope you can see clearly. Opacity opacity is zero. Let's have it grouped group. We only want the icon to show up when we hove on the image. Group. Now the opacity is going to be 100. Bg, the background, 47 c2cd. The cos, the Coso is going to be pointer. We're going to have it display flex, align items to center, Justify content to center. Shadow accent color. G for 76 to six d. The width of the icon is going to be ten, the height ten, and medium device, the width 12. Again, on medium device, the height is going to be 12 and LG, I'm not talking about LG in terms of product. Rather on large device. W 20, again on LG H 20. All right. It's quite complex over here. Okay? So let's close down the D. Beautiful. You can go through it one more time. If it becomes so stressful, you can copy and paste my code. It's not a crime at all. Now, let's display the SVG. Go back to the code resource. You are going to see I S V G for card slider. Let's copy this SVG right here. Go back to the coat. Paste it within this seve. Let's format the coat. S on the browser. All right. Now, when I hove on the browser, you see the I are. Can you see? I love it like that. Can you see? Can you see, Let's give it a box shadow. Go and stylize the d. Place your mouse right here. Hit on the enter key, the style, box shadow. It is going to be the same with the slider cut shadow. I just have to come here, and then paste. Save on the browser. Now we have it. I am loving the end result. Take a look. All right. This is beautiful, fantastic. I think we are done with this component, and we are done for good. Now we are done displaying the card. A very important point that I want to bring to you notice is the dynamic routing system. We do not want to display this icon as design. We want it to function. So it is more of functionality than design. When I click on this icon, we should be able to pass these items down into a portfolio details page. When I click on this guy, the name, the images, and everything related to this guy would be passed into a new page. Same as this guy and the rest of them. The idea is simple. We want to get individual post when this icon is clicked. Let's implement it Internet lecture, simply because I would like to explain it in details. See internet lecture. Stay focused. I'll always take care. 45. Card slider implementation: We have the items aligned on a column. But when you check out the finished project, you will realize that the items are all aligned on a row. Let's quickly implement that with the help of react slick. Back to FS code C B to open up the explorer. Slider cards, open up my slider dot s. Again, we have to copy some imput right from home component, home component, home component. We have to copy from lines two to four. Copy, and then paste it here. The nest in line is to implement the slider settings. Don't worry, I have it prepared already. So let's quickly grab it from the code resource do MD. Here is it. You have to highlight and copy from lines 340 2482. Copy, come here, and then paste it within the component like this. Save, we have to apply it. So we are going to have a consistent loop. Slide to show is going to be one, slide to scroll is going to be one. This is the speed. The arrow is set to fall because we do not want it to have an arrow left or arrow right. Center mode is true. Center padding is 400 pixes. The dots is set to true. We want need to have some dots right below the image sliders. Now here, we want to stylize it on mobile devices. At the breakpoint of 1,700, we are going to have the slide to show to be one. Slide to screw is one. We are going to have it look continuously. The dots is set to true. Center padding is 400 pixes. So we have it responsive to the breakpoint of 640. At this break point, slide to show is one, to scroll is one, infinite, which means we want it to scroll continuously. The dot is set to force. Center mode is set to force, and then center parting is set to zero. Let's apply these slider settings to the items. Now we have to wipe of this d. Here, we're going to do slider. Right within the slider, we have to spread up the settings. Just like this. H highlight and cut, and then we have to wrap it up overhead. Beautiful. SF. Let's check out the browser. Oops. It says the name slider is defined multiple times. Let's scroll to the top and see what happens. We have a slider here, and we also have a slider here. So there's a name conflict. Screw to the top and let's have it fixed. Let's make it slider card from slider card. We also have to apply it here. SF, and on the browser, they are these. Can you see? Look so beautiful. I love it. Now, here are the dots. Can you see the dots right at the bottom? So let's check it out on mobile device. On mobile device. The slide to show is one, and the slide to scroll is as well one. Now we disabled the dots at the bottom. Can you see that? But on iPad, the slide to show is one, and the slide to scroll is as well one. We cannot show two slides. Can you see, we only have one showing, which is this guy at the center. Everything is working perfectly fine. Oops, we have to clear off the console for that annoying error because we've fixed that already. All right. Now, if you observe carefully, you will realize that the space between the P tag and the slider is quite huge. So we're going to push the slider up a little bit. And here is another challenge for you. So post the video at your end and then try to give it a quick fix. All right. So let me help you out. VS Code, open up the page dot s. Right here, within this deve where we rendered my slider. Let's wipe off the class name. Scroll to the top. We are going to copy this style from here. Highlight copy. Win this D. We are going to paste it. Then you save, the. All right It went up a little bit. So here I'm going to do 100. This is more like specifying the margin top to be -100 pixels, and that will push the item upward. It's looking great, but we also want to push it higher. Let's do 170 pies. Minus 170 pixes. Beautiful, and this solves the problem. Can you see? I am loving the end rest. 46. Dynamic Route: Hi there. Welcome back to Claus. In this lecture. We will go ahead to implement the single post page. When I click on this item, we should be able to pass down the item into a new page. Also, when I click on this guy, we should be able to precisely pass down each into a new page. We can call it portfolio Details page. Here exactly is where dynamic routing comes in. Let's go ahead to implement it quickly. VS code, open up the explorer. Slider card, slider card. Over here, if you notice, you will realize that we do not have an on click. Even when you click on this guy, nothing habpens. Can you see? You can only hover on it and it shows up. But when you click, nothing harpens. We have to implement on click D. D D over here that is housing the SVG. By default, Next es runs on the sever side. To implement the on click, we have to switch from sever side rendering to client side rendering. Scrot top, to have a switch, we are going to do use client. As well, we are going to make some input. We are going to import use router from next slash navigation. The use router is a function, so we have to invoke it. Ue router. Assign its to variable. Cost router equ Ue router. Let's quickly define the click here on the Steve. We're going to have an on click, set it to an arrow function. So with the help of use router, we will be able to push the item into a new page. And how we do that is simple. I'm going to do router dots, push, open and close perentenss, and then we want to make use of the bag thick. We want to get the items by the ID dynamically. So what I'm going to do is slash, portfolio detail, slash, the ID. Recall that in the previous lecture, I told you we are using the index as the ID, and we destructured it here as probs. Teaching Good. Beautiful. Haven't done this. When a user click on the DF that contains this icon. So in other words, when a user click on this icon, we want to pass down this ID into a new page called portfolio Dt. So when you save and check out the browser, let's re. When you click, it throws back 404 error warning, which says the page could not be found. One thing is setting. We have succeeded in grabbing the ID dynamically. When you check within the tab, you are going to see that the D of this post is zero, which is the index of the post. Understood. Perfect. When you go back, let's click on this. Take a look. Within the tab, you are going to see the ID. The ID is one. Now let's go back to VS code to create the dynamic page. Common B to open up the Explorer. I'm going to copy the portfolio detail, which we specified here as a route. Copy, right click within the app, New folder. Paste the portfolio detail, it on the entaky. Take notes. What you have here must be exactly with what you specified as the route. If you do otherwise, it is not going to work. Oops, take a look. All right. Win the portfolio detail, now we're going to create the dynamic route itself. New folder. To create a dynamic route, we have to wrap it up in a square bracket. What we are going to grab here is the ID it on the enter key. Having done that, we have to create a page within the ID. Right click on the ID, new file. I will call this page dot Gs. RFC to generate the functional component. We're going to have a Hage one tag for teaching papers. I will do dynamic page. Let's give the Hage on a class name and the test seven Excel. Check out the browser. When I click, Oops, something went wrong. All right. Oh, my wrong. Guys, we have to specify the forward slash like this. I think we did it previously. When you reload the application, let's click. Can you see? Now we have dynamic page. Let's click on this guy. Can you see? We have the dynamic page? Beautiful. Everything is working perfectly fine as expected, and I am loving the end rest. This is the page that J Now we've been able to implement our dynamic route. In the next lecture, we are going to grab the post and have them displayed on the screen. Believe me, the end result is going to blow your mind. This is off for now. See you in the next lecture. Stay focused, A take care. 47. Get the id on a new page (Dyamically): In the previous lecture. We succeeded in passing the ID of each item into a new page. When you click on any of the items over here, we are going to dynamically pass the ID into a new page. When you observe the tab, you will definitely see it over there. This item has got the ID of one. Recall that we are using the index as the ID. In this lecture, we will go ahead to grab this ID, and that will be done with params. Open up the VS code. Within the app, we are going to create a new folder called page. Within the page, we are going to create another directory called portfolio Dt design. Within the portfoli Dt design, let's quickly create a new page. Right click new file, and then we're going to call it index dot GS. Having done that, close down the page. Now open up the portfolio detail. Within the dynamic route, we have to open up the page. Portfolio detail, ID, and page. Close down the explorer. What we have to do here is to highlight and wipe off the basic functional components we generated. Then we're going to have const portfolio, set it to an arrow function. L et's quickly export default portfolio. Let's import react from react. We have to take in props. The nest in line is to grab the ID and the datas. We have to import the portfolio detail design. L et's quickly import the data array. Done. Right here, we are going to return the UI. We're going to use react dots fragments. Wind the fragments, let's render portfolio design. Portfolio detail design. Close it up with the self closing tag. The nesting line is to pass the datas as props down into the portfolio design. Data equal, data array, and here we're going to do props dots Params dot ID. Remember we take in props over here, beautiful. The ID equal props dot params ID. Lastly, data array equal, data array. Let's console params. Console dot log P params ID. Having done this, at the top, we're going to do use client. We have to switch from the Sea side rendering into a client side rendering. Let's click to check out the Console. So when you click on an item, I come an I to open up the console. Then you are going to see the item ID is zero. Let's make it more readable. Here I'm going to do. The ID is whatever the ID may be. Save, and here, I want to click on a different item. Let's click on this guy. Open up the console, and you see the ID is two. Two 48. Single Post page (Portfolio Detail Design ): L et's continue with portfolio Dido design. Let's quickly set up the background layout. Right after the closing df of position absolute. Here is it. We are going to have another df, give it a class name. W in the class name, we are going to have it display grid, grid template column is 12. Let's have it position relative. Space left and right is zero. On a large device, space left and right is also zero. Close the d, within the d. Now let's give it the star. The background. Linear gradient. We want to have its 90 degree RGBA 238, 247, 251, and one. We want this portion to be 58% out of 100. Then the other portion RGB A two, 255 2551. We want it to occupy 52% of the screen. This is just my specification. You can do more at your end. Now within the def, we are going to have another de, give it a class name, and then Column span 12. On a large device, Column, span eight, margin bottom. We want to scroll. On a large device, Patting left and parting right is zero. On a smaller device, Patting left and parting right is also zero. Let's make it 20. Then We all know that each portfolio post has multiply images. Let's quickly display the images. Data dot images dot map. Take an item. Let's have a D, give it a class name. Let's quickly apply the utility class. We're going to have a display flex. Justify content to center. But on a large device, we want to justify content to the end? Let's align items to center. Close down the d. Won't this d, we are going to have the IMD tag, S R C equ, item, which is this guy right here. Close it up with the sf closing tag. When you see ventrical, the browser, and here is it. Can you see? Here are all the images that corresponds to the food delivery Company website. We have all of these images right within the ara. You can go and check it out within the data as. Now we have succeeded in displaying the images. Let's quickly apply styles to it. At portfolio photos. The height is going to be Auto. Let's give it a class name. Margin top is 20. We want the borders of the images to be rounded. On the browser, here is it. Can you see? Everything appears very nicely. One thing we do not want here is that the first image is overflowing container. So let's control it by applying the width. Width is going to be 800 on your save on the browser, and now we have it. Beautiful. All the next line is to implement the items on the right of the screen. By the way, when you go back to home, if you click on any of these items, we are going to fetch them dynamically. After disclosing df. We're going to have another df. Now I want to be fast a little bit. On large device, just have to copy this, and then piste. Also on a large device, we want the px to be zero. Small device, we also want the P X to be zero. Of course, you should know the CSS equivalent of the Px and the rest of the stoves. I've been showing you all. Now we're going to have another dif, give this div class name. The margin tb is ten, but on a smaller device, the margin tb is 24. The width is going to be full width. On LG, we are going to have the max width to be 300 pixels. Also on LG, we're going to have the parting left end pardan right to be one. The padding left end pardon right is going to be three. So we're going to have it sticky from top ts. The parting bottom, is going to be 14. So this will have its position sticky. I think that's the only utility class that I did not explain. And now I explained it. Beautiful. Having done that. We are going to have a hedge one tag. Win the Hedge one, we are going to display the name of the portfolio. So the name of the project, so to speak. I'm going to do Data dot name. Let's see what we have. All right. This is Yum Food Company. A. Let's quickly give the Style. We are going to access the utility class of text d three cel. The margin bottom is four, so the text color text dah, we want to be consistent in our colors. So let's use a light blue. For eight FDE. If you notice, you will realize that we have been consistent with our colors, including the font size and the rest of them. That is simply because when building a professional application, we have to be consistent with the fonts, the color, and the rest of the design. Of course, that is an important point that you have to take note of. Oops, take a look. Let's make this 20. Right now we have it here. Let's continue. Okay guys, there's no margin between the image and the name. Let's proceed. We have to fix that at the end. Haven't displayed the name of the project. Let's proceed to display the description one and description two. Now we have to use a p tag. Data dot description. Here is it. Let's quickly give it the style. The test size is going to be 14 pixels. We're going to make use of the font size. The margin bottom is going to be four. Then we also have to be consistent in the test color. Two, two, 370. All right. Now, we've done it. Another P tag. Put this P tag, we want to display data dot, description one. Let's see what we have, and here is the description one. Perfect. Give it the class name, and let's apply the utility class. For the utility classes, everything is going to be the same. So I just have to highlight copy, come here and paste. When you save, Oh, beautiful. I love this. All right. Having done this, let's display the skies right after the P tag. We are going to have a d give this D class name. We're going to have it display flex, and we're going to have it Flex Rb. A H one tag. Quickly give this style. Guys, before we proceed with this, I think we are going to have a highlight in between the p tags. Right after this P tag, we're going to have another P tag. Give the P tag an ID, e qui, highlight. We are going to do project descriptions. Let's see here is it. What I'm going to do now, Having done this, give it a class name. Margin top and margin bottom, is going to be two. The text, we're going to make it dug. 20 pixes, the font is sis. All right. This exactly is the expected resort. Let's continue with this D. Margin right is going to be five. The text, let's make it 14 pictures. We are staying consistent here. The bar ground, we're going to have a very light blue. 65f1. On a large device, we want to change the bar ground color. Px two, Py, one. We want the corners to be rounded, the fonts, margin bottom. The texts, on large device, we want to change the test color to 6a787 d. Win the inner H term of the H one tag, you are going to display your scale. IU x design. Save and see what we have on the browser. All right. Take a look. It appears very nicely. What I'm going to do right now is to highlight and duplicate it as many times as I want. Highlight the Hadron tag. I'm going to duplicate one, two, three, four, five. Safe, beautiful. It appears so nicely. You can change the scales. Next dot s. You can do react, and so on and so forth. All right. Now we are done with the design and everything looks outstanding. The next end line is to make a space in between the descriptions and the image. Let's do this correction in the next lure. 49. Portfolio Space Challenge (Assignment): In the previous lecture, we had a challenge with the image and the description. If you observe carefully, you will realize that there is no space between. So I want you to post the video and then try as much as possible to get it fixed at your end. Okay. So let me show you how I fixed it. Screwed to the top where we have the parent de. This is the parent de that contains every item right after the over labor ground. Everything here like this is right within this d. If you observe the dv, you will realize that on large device we specified the margin left and right to be zero. Let's change it to two s on the browser. Now we have a little space in between. Let's go ahead to increase the value. I'm going to make it safe. And by the way, this is mind specification. You can try another value at the end. Can you see? Now we have space in between. And everything is working perfectly fine as expected. Let's check it out on mobile device. Can you see? On mobile device, we have this background to be blue. The test background over here that highlights the scale, and that exactly is the expected result. All right, so everything is working perfectly fine. The nest on line is to implement the next, the preview boarding. Let's do that in the next lecture. 50. Next and Previous Button: The. Welcome back to class. In this lecture. We will go to implement the next and the previous functionality so that when the user click on the next bot in, we will be able to open up the next project within the portfolo details. The same thing applicable to the previous bolting. Let me quickly demonstrate it so that everyone understand it well enough. Here is the final project. When I scroll down, you are going to see the previous the next bolting. I want you to observe carefully. Now, if you observe carefully, you will realize that within the previous bolting, we have the portfolio image. Within the next bolting, we have the food delivery image. You know why. It is simply because when you click on the previous bolting, the previous project to be displayed is the portfolio, Axal the next project is the food delivery. Let me show you, when I click on next, do you see, now here is the food delivery project. If you observe the next boarding, the real estate website is the next, and the previous is the Hotel Management website. Let's implement it within the VS code. Right at the top, we are going to import the used state hook, and the use effect hook. We also have to import the use router. From next slash, navigation. Let's quickly import the Google font. We have done that before. Now we just have to copy. Open up the page, scroll the top, copy from lines four to nine. Close it down, paste it. Beautiful. Let's declare the necessary state variables and the set of functions. Within the component. Let's quickly initialize the use router. It is a function, of course, we have to invoke it, and then assign it to a variable. Cost router equ use router, declaring the state variables. We're going to have next dash set next. Also, we are going to have, we just have to highlight and then duplicate it. Here, we're going to have previous, and we are going to set previous. Simple as that. Within the use effect, we have to implement the functionality. If Js dot pass, if Js in dot pass ID, equal data are rad at length. Let's quickly type the code, and I'm going to explain better when we are done. Here we are going to set next to zero. Else, we're going to set next to Json dot paz ID plus one. Having done this for the next, let's quickly duplicate it for the previous. Let's replace all the occurrences of set next two set previos. Command D to highlight the both and then here We are going to do set previous, and let's changes to minus one because we are actually decrementing. When you click on next, you are incrementing. But when you click on previous, you are moving backward kind of. Yeah, so that is what it is. Having done this, let's implement the bodins and then apply this functionality. Right after this closing d, we are going to have another d. Give this d a class name. We are going to have its position relative. Have it display flex, background as color. The height is going to be 48. The text because we're going to display text within, the color is going to be white. Within this df, we're going to have another div, give it a class name. Now we're going to use the string interpolation because we are expecting java script expression in between. By the way, the back ti is located at the top left corner of the keyboard right below the escape key. The width is going to be 1/2, which in actual CSS, that will map to 50%. We are going to have a display flex Align items to center, Justify content to center. BG cover. Then we want to make use of the Google font ind dot, close up the D. Again, what we have to do is to use our actual star. Of course, you should know what we want to do right now. We want to specify the background image. Let's use a bag ti. URL. Data ray taken previous dot images. And we are going to grab the first image right within the image array. Save and see what we have. Components, slider card, my slider card. Are you serious? Oops, guys. What the hell is this? Wipe it off. We don't need it here. And I think we'll be fine now. Go, go ahead. Oops. Again, let's go to the page has. Oh, my goodness. I made a mistake there, my bad, and I'm sorry about that. Paste it here. H. Okay. Now we are have an error, cannot read properties of undefined reading image. One thing we are going to do now is before the dot, let's apply a que mark like this, and this will solve that problem. Take a look. Now we have the previous. You will definitely get the gist. We are going to have an A tag. Let's quickly stylize the A tag. We have a display flex justify content center, and then the color is the actual color that we've been using. The coser pointer, transition, D color, duration, Sk it 300. The bar ground 405 b66. The BG opacity, let's make it 90. Items Align center. The width is going to be full width, and of course, you should know the CSS equivalent by now. And the height is going to be full height. Having done this, let's quickly implement the on click. Within the inner HTML of the A tag, we are going to do previous project. Saf, on the browser, and then you get it. Having done this, we have to display the previous icon. Open up the code resource. Here is the previous icon. Highlight and get it copied. Paste it here. Format the code for proper indentation. Sef on the browser, now you get it. Beautiful. Now when you click on this button, nothing happens. Let's quickly implement the on click. E Within the A tag. We are going to have the on click. On click of this button. We are going to do route a dot. Push. What are we going to push? Taking a bag tick, and then slash portfolio detail. So it should be exactly the same thing right here within the dynamic routing system. Portfolio detail. Okay. Slash, previous, Save the changes. All right. So let's try to select an item. L et's scroll down quickly. Now when you click on previous, it is going to take us to the previous project. Can you see? Now let's implement it for the next. We have some air over here within the terminal. Okay, guys, see what we're going to do right now. Screw to the top. Let me show you. Ten do. We are going to do something like this. Save. Let's see. And the previous It demand that we do it for the title. Let's do it here. Let's do it here. Let's do it everywhere. Save. Let's strike again. Da name 177. Right dated hopes. Here is it. Now, the problem is solved. Okay. Nice. Beautiful. I think we have to implement the next as well so that everything will be balanced. Now what I'm going to do quickly is to highlight this de. You see this de over here. It ends here. Write on lines 138. Let's copy two lines one, 38. Highlight and copy, come here and then paste it. Save on the browser. Now we have previous previous. Let's quickly change the properties. First, here's going to be next project. Save and C. Now we have next. You can see the arrow is pointing to the left, so let's use the propol SVG for the next project. W in the code resource, copy the next SVG, and then wipe this off and paste. Save and format the code for proper indentation. When you check out the browser, now we have the next. Code. What else do we have to do? Now we have to call the actual image for the next. What I'm going to do here is next. We have to update the next here, and then call the image. As we're here, we have to pack it the next project. When you save and check out the browser. Let's hit on next. Go back home. Now, let's start afresh. Let's click on this guy. Previous. All right. Next, beautiful. Next, beautiful. Next. Everything is working perfectly fine. It is working. All right, guys, so we are done with the next and the previous porting. And I hope you find this lecture helpful. All right. This is off now. In the next lecture, we will begin to implement the Abt M section. See you in the next lecture. 51. About Layout : Hi there. Welcome back to class. In this lecture, we are going to design the Aba M components. Quickly, we have for that do. Let's get started. VSCode, open up the Explorer. S RC components, within the Abad M directory, right click, create a new file called Abat Mi Dot s. Generate the functional component. Close down the explorer. Let's proceed with the layout design. As usual, we are going to make use of the fragments. React dot fragment. Win the fragments, we are going to have a d. The background color is going to be f3d. Let's give it the patent top 250 pixels. Give it a margin top ten. The padding bottom 100 pixs. On a large device, the padding bottom. Let's make it 600 pixes. We're going to have it position relative. On a large device, the height is going to be 800 pix. Another one. We're going to have it container, and margin is going to be at. This will have anything within this t to be centered because the margin left and right is going to be equal. Now we're going to have a hedge one tag. Within the inner HTML of the Hage one tag, we are going to do about me. Let's pis it out. Also, let's apply the utility classes on the Hage one tag. The text is going to be 240 pixels, the W 8%. Overflow heating. Position absolute. On a large device, from left is going to be 40. On a medium device, from left is going to be 30. The top, we're going to have -50 pixes. The text color e7fc. Good. Check it out on the browser. All right, nothing happens. Let's quickly render these components within the page s. Go outside the steve. Then we are going to render about me. And please do make sure to import these components at the top. It was automatically imported for me. All right. Now we go back here, safe on the browser. Red. All right. And here is it. All right, so, the background is not showing up. It is simply because we spaced out the square bracket for a custom style. Let's quickly make the necessary adjustment within the square bracket. And he it. Beautiful. After the hedge one tug, we are going to have another Hedge one tug, and this time around, I'm going to do about myself. Let's quickly give it the star. Let's have it position relative. The font is going to be rector block. Text, five Excel. Again, the text color, we are going to stay consistent with the header color. I'm going to do 48 AF dE. Now you get it. Margin bottom. It's going to be five, and also the margin top is going to be -40. On a median device, padding left and padding right, is going to be 24. And E, we're going to have patting left and pattern right to be five on the other break point. Let's save and see what we have if the heading is properly done, and here is it. Beautiful. Everything is aligned properly. All right. Perfect. All right Before we proceed, let's quickly give this D an ID. Okay? ID, equ, save the project, command B to open up the explorer, go to the head gz. Let's check out the link to see the reference if it is actually correct. This is the Abt M, and here we targeted A component. I advise you should highlight and C. Go back to Abt M and then paste it like this. Save, let's see if it works. Now I click on the About me. Boom. It moves scrolled to the Abat me components. Portfolio, boom, Hm. Lastly, Hm. Now let's do it again. About me and boom. Beautifully made. All right. Let's continue. Close down the explorer. Now you have to write about yourself. After the Hage one tag, we are going to have a H four tag. Within. I'm just going to do knack of pod in software with front end n and back end operation. Oops, take a look. All right. Save. Let's check it out. Fine. Let's quickly stylize the H f t. Let's have it relative. The width is going to be full width. The front width is going to be 300. On medium device, we are going to have the width to be 3/4, which the CSS equivalent is 70%. On large device, W 2/3. On large device, the width is going to be 66.6% thereab On extra large device, W 1/2. The front is going to be rector. The text. We're going to stay consistent with the text, two, two, three, 740. The font size and line height is two Excel. Margin bottom ten, Pardon left and pardon right is five, on a median device. The P x, which is the pardon left and pardon right is going to be 24. Let's see and see if it is well aligned now. H. Beautiful. We are actually making s. Let's do some other stops. After the heat four tug. Let's format the code. Good. Now we have a proper indentation. After the heat four tag, we are going to have a section. Within the section, we are going to have a p tag. Before we proceed with the P tag, let's give it the star. We're going to have it position relative. We're going to have it display flex. Flex direction is colon. On large device, the flex direction is going to be rolled. Parting left and right is five. On a medium device. Of course, which should stay consistent. Parting left and right is going to be 24. Okay. Good. Within the P tag, I just have to write stops about myself. So I copied and then paste the write up within the P tag. You should know exactly what's the right of head to describe your capacity. Having done this, when you check out the browser, they are these. So what we are going to do is to divide the screen into three different portions on a large device. W in the P tag. Let's give the class name. We are going to make use of the string in tapulation because of the Google hint. The width full. Let's quickly do it on large device. On are device, we're going to have the width to be 1/3. Now, this is the first portion. It is occupying one of the entire section. Understood, beautiful. The test, the color of the test, of course, we are going to stay consistent. I just have to grab it from here. D done. Here is it. Paste. Margin right is going to be zero. Margin bottom is five. On a large device, margin right is going to be four. I don't like the way the font is, we want to make it a little bit faint. Yeah. Quickly go on to the page to s, which is the parent page. Let's quickly copy the pods. Scroll to the top and then paste. Again, we are going to grab this one from lines seven to ten. Then paste it here. Scroll down. Now let's apply the font. Ind dot class name. Save on the browser. Let's check it out. This appears so beautiful. I love it. All right. But I'm noticing something that is not in shape. Don't worry, we will definitely give it a fix when we are done. And that exactly is how I want the lecture to end. Okay, fine. Quickly highlights the P tag, duplicate it twice. SF, this exactly is the expected result. And I love it. You can change the write up here and here. Now I'm just going to post the lecture and then go back to my portfolio, copy, and paste. The whole of this right to of a hair describes a six. At your end, do all to describe yourself properly. Perfect. Now, the next line is to implement the item clicks. I think we should do that in the next lecture. But before we proceed to the next lecture, you see this about me background. I want to push it to the top a little bit. I want to leave it as a challenge for every one of us. Quickly pose the lecture and then try as much as possible to fix it at your end. This challenge is very important because it will open our eyes to the common mistakes we make when using t wind CSS. Now post the lecture and sort it out yourself. All right. Let me fix it with you. Go back to VS code. Scroll to the top, where we have the hedge one tag of the Aba me. Now, when you come to this place, you will realize that from the top, we want it to start from -50 pixels. But right now there's something wrong. Where we have the top, we did not implement it with the dash. You have to suffix the tail wind utility class with dash to make it work. Here is it. Can you see, now it is at the top. Beautiful. Everything nice, portfolio about me home. So tell me, doesn't it look good? Of course, it does. This is off for now. See you in the next lecture. 52. About Component Logic: There we come back to class. In this lecture, we will go ahead to set up the necessary state variables and defined the functions to be used. Let's do that quickly. VS code at the top. Let's import the state hook. Hooks are not allowed in server components. Therefore, we have to switch to clients components. L et's quickly import the data. A data from a slash data. And within the components. Const is flipped set is flipped. E states, the initial state is going to be f. Just have to highlight duplicate it three times. Here, we're going to have is faded. Then that set is faded to four. This one is going to be selector index. C Set selector index. Please do make sure to change this guy to capit Set selector index. We're going to set it to zero. Okay. Mp data. Let's set it to set map data. The initial state is going to be about data. We're going to have the first item in the data, which serves as the initial state. All right. Having done this. Let's put all of these together in a function. Now we are going to have const my functions, set to function, within we are going to take in the. Okay. Set flipped. Let's keep it as false. Satisfied. Fall. Set map data, let's set it to data. All right. Let's get the handle card click. Const. Handle card click. E qui, we're going to take in data, index. Let's give it a quick format. This function is going to update the initial state to a new state. Let's set is flipped to true. Set is faded to true. Set selected index to index. We're going to do stuff here. Set time out. My functions, and then passing data, and we want it Basically, what we are trying to do is that when you click on the card, it is going to fade in. It is going to take some time to fade in and swipe into another card. Don't worry. Again, when we begin to implement it, you definitely will understand the gist. Trust me. You will definitely understand the gist. Having done this, we're going to implement the next and the previous function. C and next. Set it to an R function. Now we're going to have some e statement here, and it says, if selected index is less than five, then we are going to call the function handle click. Win the function, we are going to get the data, and then selected index plus one. We are going to get the data and then incremented by one. Again, selected index plus one. Arrows, Handle cart click. About data. We are going to maintain the first item. If the button is not clicked, we are going to maintain the first item. We're going to keep everything as default. All right. I talk too much. Now, let's implement the handle previos. Just have to highlight and then duplicate it. You can copy and paste as well. Handle previous. If selected index is not equal to zero, Then we are going to call the handle click function, access the data within, and then decremented by one. Simple as that, else, we are going to keep the fifth item, just like this. Okay, fine. Now we are done setting up the logic, don't worry. In the next lecture. When we begin to consume this logics, you definitely will get the clast. This is of for now. S in the next lecture. Stay focused, and always take care. 53. Grid button implementation : Now we are done implementing the logic. Let's quickly apply it to the UI. Scroll down. The first thing we are going to do right here is to create the background layout. Of course, we've been doing this all through the lectures. What I'm going to do right now is to quickly copy and paste. Paste it here. Close down the d. We just have the background, a linear gradient. We are just specifying the layout of a head. On a large device, we set the margin top to be -60. Within this d, we are going to have a section. Let's apply the utility classes. Let's set it to container. We're going to have it display flex, flex direction is column, margin dash auto. Then on a smaller device, we're going to have it flex. The flex direction is going to be roll. Padding left on right is five. On a medium device, Padding left right is 24. The margin tub, let's make it 50 pixels. On a smaller device, the margin tub is going to be zero. Let's have it transform. Translate Y, going to make it -100 pixels. Within this section, we're going to have another D, give the class name. Then we're going to have it heading on a smaller device, we're going to have it display flex. With is going to be full. Again, on a smaller device, The width is going to be 50% 1/2. On large device, the width, let's make it 7/12. How. Close it up. Now within the deep, we are going to map through the datas and have them displayed on the screen. But before we proceed, I want to show you something. Scroll to the top. Over here, where we took in the index and the data. Previously, I did like this, which is not right. You should know that this is going to be index. Beautiful. Just a little typographical error. And I think everyone makes mistake. And by the way, I am not a robot. All right. Now we are going to do A data dot map. Please, I do want you to pay attention over here. We are mapping through the datas. We are going to take in the first parameter, which represents each element within the array or within the data. Then the second parameter is the index, which serves as the ID. Now, outside the parentenss, we're going to have an arrow function. This time around, we're going to return UI. For that reason, we have to use the parentenss, and not the co bracket. F W in the parentenss, now we're going to write the UI. First, we are going to have an A tag. Let's specify the click of this A tag. By the way, whenever you want to specify the click, you definitely have to switch from sever side rendering to a client side rendering. Scroll to the top, and then here is it. If you haven't done it at your end, let me wipe it off for clarity. I'm just going to do use client. Simple as that. Okay. Let's continue. R within. We are going to invoke the handle card click. It occurred to me that there's also a mistake in the spelling of the handle click. So this is exactly how to spell it. If yours is not like this, it is not going to get registered. So screw to it to here, it is going to be handle card click. Post the video, make the necessary corrections, let's proceed. Handle card click. Then we're going to take in item an index. L et's give it a style. The box shadow 48 e DE. There need to stay consistent. We're going to have minus five pixes, or around the four corners of the card, we're going to apply the box shadow. Ten pixels, 20 pix, zero pix. One of the side won't get the box shadow. Cool. Now, let's give it a class name. Within the class name, we have to do it within the back tick. The position is going to be relative. The coser is going to be pointer, transction, all. Then we're going to have it transform. The duration, it's going to be 300. L et's crop it. The borders of this card is going to be rounded. So this card is going to serve as the butting. Don't worry, you will get the clap picture when we're done with the implementations. There's nothing to worry about. By the way, you can always ask questions as many times as you wish. And I will be there to reply you immediately. Rounded Excel. We're going to have it center, the padding, let's make it six. On a large device, the padding, let's make it ten. Let's have it display flex, flex direction is column, Justify content to center, and then align items to center, and that's all for the A tag. Within the A tag, give it a class name. So this d is going to serve as the container of the image. We're going to give the width with d 16, height 16. Then a smaller device, width ten. Also height ten. An larger device, the width is going to be 16. Again, an larger device, the height is going to be 16. Beautiful. We're going to have an IMG to display the image, S RC, e qui, this item over here that represents each element in the array. So we're going to do item dot. So whenever we want to access the items we have within the array, we are going to use this parameter. Item dot, IMG. Closer up with the self closing tag. Let me show you quickly. Here we have the data gs. When you go through, you are going to see the about data. So we have the counts, the title, the IMG, and the arrays of informations. And all of the stups are right within the array object, okay? And we have it into six places. So when you do item dot, count, you're going to get the count of one. Item dot title, do IMG or R A, and so on and so forth. So let's quickly close it down, close down the Explorer. When you save, let's see if it appears on the browser. It appears nicely, but this is not the expected result. All right? The images are right well in the D. I think I explained it earlier on. The item is on a roll. This is not a way we want the items to be. Let's do something like this. We are going to have a d, give the class name. We are going to have a display grid, on a smaller device, grit, C to an extra large, grit three. The gap is six margin right, zero. On a large device, margin right is going to be ten. Close down the d. Now, within this d, let me show you. Copy from the opening co bracket to the closing co bracket. You just have to press down the option mark and then tap the arrow key to move it within the steve. Or you can as well highlight, cut and then paste it within the steve. Save and see what we have. Now everything is aligned as expected. Beautiful. But right now, when you hover on the buttons, you can see nothing happens. Even when you click, nothing happens. Can you see? So let's implement the on hover. And then when the user click on the button, we want the butting to be highlighted. We also have to display the title within the boton. Okay? Go back to FS code. After the closing D that serves as the IMG container, we are going to have a H four tag. Win the H four. We are going to do item dot title. Save and see what we have. Now we have the titles displayed, but it is not well aligned. Let's align it quickly. Now give it a class name. We're going to use the string interpolation because we are expecting Java script within. Let's have it test align, center. But on a smaller device, the font size and line height is 0.8 RM. On a larger device, the test Excel. The font, rector board. The B should be on Cp. Transiction colors, duration 500. What is again, do we have to do? Group, we're going to have it group, hover. Text, white. When we hover on the bottom, the text is going to change to white. And otherwise, the text color text, we're going to maintain the color that we have been using F seven, 626d, margin top is three. All right. So now let's have the conditions. Let's do it like this. If selected index is equal index, then we want to show the text white. Text white, else, nothing happens, Save and see if it is working. Can you see, when I hover, the text transforms to white. One more thing that we are going to do is to display the count. When we hover on this guy, we want to display the count of this item right within the array. If it appears as number one, number two, three, and so we have to do it. Right after the H four tag, we are going to have a di, give the class name. Again, let's use the ba ti. We are going to have it position absolute. From the right, we're going to have it minus two, and from the top, we're going to have it minus two. We're going to have it transform. The transition is going to be all. Duration, 500. Opacity is zero. Let's quickly close down the deep so that the moine error can go off. Group, hover, let's implement the hover. When you hove on it, the opacity will be 100. Remember that we set the default opacity to zero. When you hove on the card, then you set the opacity to 100 and then the item will be displayed on the screen. Simple as that. The show shadow Excel. The width is going to be 12, the height 12. The corners are going to be rounded. The background. For teaching papers, we are going to use a random background. B, green dash, 500. Don't worry, I will use the original background. We are going to have a display flex. Justify content to center Items align center. What else again do we have to do? The fonts, let's make it boat. Font d bot. Tex d whites. And the font, recall it tabled. Also, the text X l good. Win the d, we have to display the count, item dot, count, simple as that. Save and see what we have. When I hover on the card, the count will be displayed at the top right corner of the card. Take a look. So this is number one within the array, two, three, four, five, six, and I hope you get the cheesed. What else can we do now? We want it to appear in a very nice way. Let's rotate it kind of. Now, what I'm going to do. Sometimes the best explanation you can give is implementation. So let me implement what I have in mind so that you understand it. If selected index equal index. The opacity is going to be 100 and not zero. Then let's rotate it 12 degree. So we're going to rotate it a little bit, and then s, what happens? Group, rotate 12. Let's check it out quickly. Can you see? Notice that when I hover my mouse on the buttings, the cut count gets slanted to the right. That is as a result of the rotate utility class that we implemented. Having done this, we want to highlight the butting when clicked. Let's do that quickly. Scroll to the top, where we have the A tag. D D. Here is the class name of the A tag. Win the batik. Now let's take in some java scripts. If selected index equal index, we will keep it highlighted, which simply means, if a user click on the boton. If a user click on the A tag, so to speak, we want to have it highlighted. To do that, we just have to specify the color. BG. Let's use red, 500. When you save, we have to implement the house before it works. Good. Save. Can you see? Everything works. Good. Now, another important thing that we have to implement is that when we hover on the items, we want to change the color. And by the way, the red is just for teaching papers. Don't worry, we will have everything fixed. Okay. Even as we want to specify the color, we also want some sweet animation. Okay. Very easy animation. Minus translate Y. Y minus two. This is how we can prefix it if you want to apply a negative value. On Ha, the background color, let's make it blue. The va shadow, it's going to be Excel. So we're going to have it translate y minus two. I just have to highlight and copy this guy, baste it within the ho. What is again? The color. Let's make it white. BG White. Okay. Now let's save. Quickly format the code for proper indentations. Save and check out the browser, these. Click. Can you see? When you hover on it, the color changes, and when you click, it gets highlighted. All right, so beautiful. And I want you to notice the animation. Can you see? Take a look. I love this. Now, we have to make use of the right color. For the whoa background, we are going to use a custom color, highlight, wipe it off, open and close square bracket, and within the square bracket, we have this color. The same thing applicable to They highlighted like this with exactly the same color. Also, I think we have to change one other stuff here on the count. Right. Let's give it the same background color for the count. Okay. Beautiful. Everything cool. All right, guys. Do you see? It looks good. Can you see? Take a look. Okay, I love it like this. This is off for now, and in the next lecture, we will go ahead to implement the show card. See you then. 54. Skill Card display: The previous lecture, we displayed the image and title, right within the A tag, which we are using as the butting. When you have on it, it is working perfectly fine as expected. In this lecture, we are going to display the data that is related to each title. For example, when I click on the front end developer, we want to display the datas that is related to the front end, which is the scale. As well, when I click on back end, we should be able to display the back end related twos or data, so to speak. Let me quickly show you what in the data. Here within the data s, we have the about data here, and within, we have an object within the object, we have counts to be one, the title, which is I x, the image. What we did in the previous lecture, we displayed the title and the image. Here. In this lecture, when you click on the button, we want to display all of the stoves. The same thing applicable to the rest of the object to put in the array. When you click on the back end, we want to fetch the back end related datas, which is the node S, Mongo DB, and the rest of them. The name array over here can be changed. You can rename it to items or whatever name you think describes your intention. Move on to about me component. After this d, let me show you this df here. This is the closing d. When in this d, we are going to have another dif, give the class name. The width is going to be full, which makes it 100% width. On a small device, the width is going to be 1/2, which makes it 50%. On a large device, the width, it's going to be 5/12. Over flow visible. Putting left and right, the hash zero. On a small device, part and left is going to be six on large devices. Putting left and right, it's going to be ten. Close down the df, and within this def, we are going to have another df. Let's give it the class name. The background is going to be white. So we want all four corners to be rounded. Parting is ten. On extra large device, parting is 14. Shadow accent, color. We have it position relative, and within the deve, we are going to have a section. Close it up. Let's quickly apply style to the section. Give it a class name. Now we want to use the string interpolation. Win the bati, we are going to assign it a class name of feet left. Take note of this class name. We are going to stylize it in the future. Overflow, let's make it heating so that it won't grow outside its container. Now let's have some Java script within. We are going to do if is faded is equal true, then we are going to assign the class name Fad out, and else, no class name will be assigned. Win the D, we are going to have a p tag that will serve as the label. I'm going to do my text es A. Then we are going to have the text skies below. But before then, let's save and check out to the browser. Good. Here is it. My text skies are, whatever your text cues may be when you click on any of this boarding. For the card, let me show you. Here is the D. With the background of white, rounded Excel, which makes all the corners of this dv to be rounded. I hope you can see perfect. W in the P tag, let's give the class name, and also we want to use the string interpolation. Now, we're going to have the text. Let's maintain the color. So we're going to have here 476 26d. Seven C. Good. You may not notice, but the color has been applied. Now, let's do for the font. We can do it here. There's no problem. We're going to do int dot class name. Again, save. All right. Now, take a look. Good. The text is going to be G, which will map to the font size and line height, and that will make it 1.2 m. On a small device, the text Bs on G, text, excel. Let's have a transction, and then the duration. Let's make it 500. Let's have it transform. The opacity, the opacity should be 100. It's fine. After the P tag, we want to display the titles. Let's have a H one tag. Let's do it with a H two tag. With in the H two, let me show you, we're going to do Map data dots title. When I click on front end, now we have the front end. When I click on the back end, we have the back end. To and things, we have the tool and things. Let's display the items, the related skills. Before we proceed, we have to stylize the H two tag. Quickly, let's give the star class name. The fonts, recta bod. The text color is going to be the same copy, come here and paste. Text d three cel. On a small device, text d to excel. On medium device, text three Excel. Now we're trying to apply a different font size across each screen. Each break point. Margin bottom six, the width is 44. On medium device, the width is going to be five, six. Let's have a transction. The duration, 50. Then we're going to have a transform. Specify the opacity to be 100. Simple as that. Save on the browser, beautiful. Take a look. Exactly the expected result. Go back to the code. After the H two tag. Let's quickly format the code for proper indentation. Press then the shift and option Ken keyboard, and then tap the F key. As well, you can click format document with pre code format. After the H two tag, we are going to have a UL tag. Now we want to disp the corresponding ke to the title. Let's do that quickly. Here, we're going to do Map Data dots array dot map. We're going to take in skills, which represents each item within the array. Then set it to an arrow function. We want to return a UI, so you need to open and close parentenss. And please do not use the Ci bracket. Now we're going to have an LI tag. Within the LI tag, we have to display the skill. Save and C. Oops. It should be skills. All right. Let's check it out. Now, scroll down. Here we have it. Beautiful. Let's give the style and have the font look extremely awesome. All right. The UL tag, give it the class name. We're going to use the string interpolation. First of all, the font is going to be d dot class name. The font weight is 300. Last disc. The Last style type is disc. The text color is going to be the same with this highlight copy pasted here. M eight, margin left, eight, and enlarge device, M ten. The text B, which map to the line height and font size. On large device, text G, S transction, Sorry. The duration always 500. Then transform. Opacity is 100. Okay, Save. See how it appears now. Oops says, Oh, my goodness, take a look. Guys, this so be. Save and let's check it out. Okay. Beautiful. Everything appears nicely, and I like it. When you click on B end, the back end related skill pops up here. Oh my goodness. Tell me, Doesn't it look good? Of course it does. Okay, let's continue. On a mobile device, we want to hide this grid layout over here, these buttings, and then only this card will be shown. So we need another butting within the card to switch between the scales. Let's do that in the next lecture. 55. Skill Count: We want to do something exceptional. We want to create a new card at the top right corner of this card. Let's do that quickly. After the closing tag of the section, we are going to have a d with the class name. Let's have it position absolute. Perspective. 500. We are going to give it minus seven from the top. On a small device, minus eight from the top. The right is zero and a small device. The right is 20. It is going to start from 20 on a smaller device. And else, let's give it a class name of card. Please take note of this card. We are going to stylize it in the future. Now after that, let's take in the Java script. Closed down the D. Now within, we're going to do if flipped is equal true, we are going to have a class name flipped and else, we're not going to have any class name. Also format the code to have a proper indentation. Within the D, We're going to have another dif, give the class name card inner. We're going to stylize the card inner with Cs. Within the card inner, we're going to have another dif, give you the class name. We want the borders to be rounded. The Cs, let's make it point. The text within this card, we're going to make it seven Excel. On extra large device, the text nine excel. The font is going to be recta black. Text white. BG, let's give it a bag ground color, and we want the bagrand color to have the exact same text color that we have been using. Copy everything within the custom style, and then paste it within. Save and see what we have ops. We have to close down the D. Nothing is displayed yet. Now after the background color, we want the padding to be five. An extra large device, padding is going to be eight. The width is 28. The height is 28. An extra large device, the width 48. A extra large device again, the height 48. Let's format the code. We're going to have it transform, transction, the duration 500. Then we're going to have transform preserve. Now we want to rotate it minus, rotate six. Again, we're going to do transform preserve. Having done this, we should be able to see the card here. Can you see, now we have a card over here. What we want to do is to display the count within the card. Here we're going to span. We in the span, we're going to do map data dots Ct. Before we continue highlight and cut it off, we want to do it outside the span. Now let's see how it looks on the browser. Perfect. L et's stylize the span. Give it a class name text dash to Excel, an extra large device, text da six Excel. Margin right, two, and a small device, M R, which is the margin right, is going to be three. Having done this, we are going to have a star in between the span to make it look beautiful. Now we get it. Everything appears as expected. Beautiful. Beautiful. Tommy. Doesn't it look good? Of course, it does. Perfect, guys. Alright. It's been a very long journey. Having done this. The next in line is to implement the next and the previous boting, right within the card. Simply because on mobile devices, the bots right within the grid layout is going to be invisible. Let me show you. This is just on iPad and. Let's go to iPhone. Scroll down. You see, the botins all disappeared. So we want a butting to switch between the skies right wherein the card. All right, so let's do that in the next lecture. 56. Button Flip: All right so the About me component is set, and everything is working perfectly fine as expected. One more thing. We need to implement the next and the previous boting. Put in the card. You all know that the grid butting is going to be hitting on mobile device. So we need a boting to move between the scales, and the butting will be here. Let me show you on mobile device. Do you see? The grid butting is gone. We have to implement the butting right within the card. Let's do that quickly. After this closing d, we are going to have another D. Give the class name. We are going to have it positioned absolute. R d ten. From the right, we're going to have it ten. The bottom five. And then we're going to have a display flex. Within, we're going to have an A tag. Within the A tag, we have to display the SVG. This a tag will handle the functionality of the previous. Let's quickly implement the click, so you understand it. On click of the A tag, we're going to call the handle previos. No. Within the A tug, we are going to paste the SVG. Go back to the code results do MD. Then you are going to see the previous SVG for at me flip. Copy from lines 527 2541. Highlight copy, within the A tag. Paste. Make sure to format, save and see what we have. Because the SVG is white, you may not notice it on the screen. Let's change it to red. Let's see what we have. L et's reload. I've seen it already. Can you see? Here is it? All right. Let's quickly stylize it. Let's make it white. Let's give the A tag a class name. The width is 12, the height is 12. Rounded, Excel. We want the border to be a little bit curvy. I think we should specify the background so that you can see on the screen. BG 47, 626d. C. Here is it. Can you see? Beautiful. Now let's continue. The margin right is going to be one. We're going to have transform. Tranction, duration, let's make it 300. Here is it. The cosor should be point. On hove, when you hove on the button, we are going to translate y one. It is going to move up a little bit with a sweet animation. Let me show you. L et's spread it up. Now when I hove on it, It moves down. No, we want it to move up. We have to specify a negative value to push it up. We're going to do minus, translate y one, which is minus one. Give it a try. Can you see? It moves up? Good. I told you I'm going to explain every bit of tail wind utility class. We're going to justify content to center. And then items align to center. We're going to have the SVG at the center of the card. I still did not appear at the center. Look, the SVG is still here. Before the whole of the stuffs will work, we're going to have it display flex. And you see, now the items will be centered. Can you see? We have to display flex before we can align and justify item. Okay? I think ths often now. It's cool like this. It's fine. We don't have to do too much here. So what I'm going to do right now is simple. We have to duplicate the A tag highlights from lines 182, two, 199, duplicate it or you can copy and paste. So we have the first A tag. This is the first A tag. And then this is the second A tag. When you save, right. So we have it like this. Now, when you click, click. So we have the buttons doing exactly the same thing. Can you see? This is previous. Watch. Okay. Now we have to implement it for the next. First, we have to remove this SVG, highlight from 242217. Wipe it off, go back to the code resource dot MD. Here, we have to highlight this SVG, the next SVG for A M fleet. Highlight copy, come here and paste. Now, quickly format the code. Wipe off the handle previous. We're going to do handle next. When you see the browser, everything appears nicely as expected. Previous, previous, and it can go next, next. Backward, backward, forward, forward, forward, and forward ever. Beautiful. Everything is working perfectly fine. So we have to check it out on mobile device. Good news. Now on mobile device, we have the button to move from one skill to the order. Now we have the back end developer skill. And so you can go back, can move forward, can go back. Can you see? Everything is working perfectly fine. And I love the end results. All right. So let's quickly head on to the next lecture where we will begin to implement the f. This is of for now. See you in the next lecture. 57. Flip Animation: Welcome back to class. In this lecture, we want to implement the animation on the flips when the card is clicked. Right now, you can see the way it flips traditionally. It is not nice like this. Okay. Let's add some good animations to it. Go back to VS code. Open up the Explorer. Right within About me directory. Right click new file. I'm going to call it Abt M dot CSS. First, we have to stylize the card. Dot card. Let me show you. In this D? Now, we are going to get the card. Here is it. Yeah. So let's do it right here. The perspective 800 pixels. The Cursor pointer, we are going to have a display flex, justify content to the right. The card A card NA. One more time, let me show you. Here is it. So this card over here, I think the best way to show you the stuff is to change the background color. Let's assume the background color is red 500. Now when you save and check out the browser, can you see? Here is the inner card. Now let me show you the container card. This is the container card. Let's do BG, Blue 500. Save on the browser, here is it. Can you see, this card over here is laid upon this other card. So let's quickly stylize it. Let's get the width 100%, the height, 100%. Transction. We are going to have it transform 0.6 seconds. Then the transform style. Preserve three d. Before we proceed, we have to link the component with the CSS file. Go back to About Ms, scrot to the top, and let's do it over hea. We're going to put s Abt M C S S. Having done this, go back to About M Css. We have to stylize the card dots. Flip card in ops. Take a look. It should be a concatnator. Transform. We want to rotate on Y x angle 90 degree. Let's make it a negative angle. Fit Dash left. And by the way, let me show you the classes. Here's the fed left and then feed out. For the fed left, we're going to have a transction, the opacity 0.5 second. Transform also 0.5 second, and here the opacity one. Transform translate on x axis. Let's make it zero. For the fit left and fit out, opacity is there. Transform. Transform, translate x, let's have it 40%. Having done all this, let's quickly go back to the Browser and check if it is well done. Take a look. L et's click. Beautiful. You see, within the card, we have some sweet animation flip. Can you see? But also, we want it to affect this card over here. What do we do now? Let's see what happens. Before we proceed, we have to change the card color. It has this exact same color. This guy do not have a color, but this guy does B G. Alright. Beautiful. Let's go back to the CSS. Start from here, the card, cart in cut flip cut.in. Oh, my goodness. Guys, take off the stuff. When you do it like this, everything is going to work. Yes, M. R. Try it again, try it again and again. This is indeed fantastic. Take a look. And then we can change it with the buttons. On iPad. It works. This is incredible. All right. We are done with the About component. But what we have to do in the next lecture is to fix some stuffs, like the margin top on mobile device. Let's see. Can you see this over here? The margin top on mobile device shod go down a bit. 58. Testimonial slider settings: Hi. Welcome back to class. In this lecture, we are going to design the testimonial component. But before we proceed, we have to implement the slider settings. Quickly open up the explorer, common B, open up the component. Witin the component, right click, New Fd. Testimonial. So right click on testimonial, No file, testimonial dot GS RFC to generate the functional component. Let's render the testimonial within the parent page. Right below the apart M component. We are going to do testimonial. And please do make sure to import it at the top. Save, Then go back to testimonial. Let's quickly implement the slider settings. To implement the slider settings, we have to make some few imports. Open up the home component homes. Let's quickly highlight from lines two to four. Come to the top and then pastes. Also, we are going to make use of the had. We also have to copy from lines five to ten. Then pastes. Lastly, let's quickly copy the slider properties. Open up the code resource MD, and then scroll down. You are going to see the slider settings for testimonial. Highlight. Highlights from 584 2667. Copy, go back to the code and paste. Let me quickly go through the settings. Here we have a variable settings. Of course, this variable is an object. Within the object, we have the slider properties. We have set the infinite to true, which will make the slider to scroll continuously without ending. Here we did slide to show is three. Slide to scroll is one, so you can only scroll one slide at a time. The speed is 3,000 milliseconds. Arrow is set to force, which is the arrow left and right, so we do not need it right here. We set the autoplate to true, which means the slider will begin to scroll without having to do it manually. The center mode is set to true, and then the center pad, which is the space between each slider. It is set to ten px, and then here we have the autopl speed to be 3,000 millisecs. Now within the responsiveness, it is an area of object of course, and then we have the break point. Now on the breakpoint of 17 60, we want to change the settings, the settings over here. On this breakpoint, we are going to have two slides to show. The slide to scroll is going to be one. Infinite is set to true for continuous loop, and then the dot is set to fall, and so on and so forth till you get to the least breakpoint. Formats the code. Good. Now we are done with the slider settings. Let's quickly proceed to the next lecture where we will begin to design the testimonial. See you in the next lecture. 59. Testimonial slider design: L et's proceed with the testimonial design. Here with in the return. Wipe this off. We are going to give this D an ID. Testimonial. We in this d, we are going to have another d, give you the class name. The max height is going to be 450 pixels. Putting top and parting bottom is 12. On a large device, putting left parting right is 12. On a medium device, putting left parting right is five. And, the default padding is going to be three. We're going to have it rounded G. Having done this, let's quickly create the layout. Now open up the page dot. We want to copy this inline style for the layout. Place a mouse right here. Then paste. Everything is going to be the same, so we do not need to make any changes. On the browser, now we have the layout. Let me show you, here is it. When we begin to display the items, it is going to be very clean up for you to see. Within this d, we are going to have another d, give it the class name. On a large device, we are going to have it container. The margin left turn right is auto. Padin left turn right zero. On a small device, the max height is 350 pixels. Now within this df, we are going to have another df, give it a class name. The text is going to align center. Now we're going to have a heading tag, and I'm going to do what my customers says about me. And here is it. It is going to be a heading. Now let's quickly give it the stall. The font extra wood. The text five Excel. We want it to be large, so now you have it. Margin bottom and B six. The text. Let's give it a text size, and we want to stay consistent with the test color of the heading, which is going to be 48 ADD. When you save, and here is it. All right. Beautiful. After the H two tag, we are going to have a p tag. Then this P tag is going to be the description. Quickly head on to the code resource, copy the testimonial description and paste it between. When you save, and here is it. Let's give it a style. Give the P tag a class name. We want to use the string interpolation. Max D W to Excel. The pons 200. Reco a board. Margin left and right is auto. Margin bottom is 12. On large device, margin bottom is 24. All right. Now let's check it out. Good. It appears very nicely. Mm. Having done this, let's implement the slider. Right after this de. We are going to render the slider. Recall that we imported the slider from react slip. Let's give it a class name. Then we're going to do part in top, ten. Then also the cos scroll, all scroll. Let's quickly design the items within the slider. We are going to have a d for the class name. We're going to have a display flex. Part in left is zero. Win this d, we are going to have another d. The width is 100%. Yes. Oops. Take a look. There should not be any space between. Yeah. On a small device, the width is 95%. Padding left, 20. Margin is oral. The edges will be rounded to Excel. So we are trying to design the card. Yeah. Let's give it the padding of four. On a large device, the padding is six. Let's give it a mean height of 250 pixels. And that's all. We have the card displayed on the browser. But it is not going to be visible simply because we did not specify the co. When you come and do PG, green 500. Now we have the card on the browser. We do not want to use this. Rather, we want to set up a layout within the card. Quickly screw to the top and let's copy the inline style. Paste it right here. Wipe off the width, and so let's make the necessary settings. Here we're going to have it five degree. This portion will be positioned five degree with the color of blue, 48 AFD E. Now, check it out. Can you see the card is now divided into two equal portions, the white portion at the top and the blue at the bottom. But this is not what we want. Now let's make it ten because it is too large, and let's make the white portion to be 90. Beautiful. Let's display the items within the card. Now within the card, we're going to have a D, give you the class name. Let's have it display flex. Another one. Man, 100 pixels for the mean w. Then we're going to have an IMD tag, SRC equ. The images we're going to use is right within the public directory. You can check it out, and then I'm going to do Papo dot PNG. Now safe, and now we have purple on the screen. All right, we want to do some stops over here in regards to the settings. We all know that not all images are rounded. What we are going to do is to give the image a size so that when you have four corner images, it can be rounded as well. Now what I'm going to do. Let's quickly give it a class name. 20 height, 20 rounded full. Here is Papa. Can you see? Beautiful. Again, we have to specify the alternative. And I'm going to do clients photo. Please do not do client image. I learnt that the image is now a key road. Now we have client photo. Mm hmm Haven't displayed the image. We also have to display the right. After this df, we are going to have another df. You must need a container to define the shape of your website. So the D is something that you cannot run away from. Within the class name, let's have it display flex, Flex column, which is the flex direction. Then we're going to do gab x four, which is the column gap. On a medium device, we want it flex direction column. Also on a medium device, the items align center. Good. So within this def, we are going to have another def. As a front end developer, the df is your friend. The front wit is going to be medium. Text dash base, which will map to the front size and line height. Done. So within the def, I'm going to do Daisy Papo. All right. Sounds funny, right? Here is it. What else again do we have to do? Now, after this closing d, we are going to have another d with the class name. But this time around, we want to make use of the string interpolation. The front we is going to be 300. Then let's use the Google hind Hind, class name. The color of the text. It is going to have the same test color with the heading. I don't need to do that twice. I just highlight and copy and then lift it here. Close down the d. And within the d, I'm going to do YouTube students. Das Papo commented on my YouTube channel, so I have to lift it up here. Haven't done this. We are going to have a P tag. Win the P tag, let's quickly go back to the code resource and copy the review of Des Papo. Here is it. Highlight and copy, paste it within the P tag. When you save on the browser, the. Beautiful. Let's quickly align the p tag. Give it a class name. Again, we want to make use of the string interpolation. Margin bottom, it's going to be six, the font. So you can see that the font is too bold. I don't like it this way, so we want it to appear a little bit lighter. So the font specify 200 for the w. Now you see Code. Let's use the rector block. The mean height, 70 pixels. The text, let's make it 15 pixels. Margin top. Let's make it three. Now save beautiful. First, let's format the code. Can you see, this guy, they are aligned to the center, and that is not the expected result. Let's go, check it out. This is the d says on median device item aligned to center. I don't think this is necessary. Then now we have it. Having done this, let's quickly apply the slide. Scroll to the top, where we have the slider. First, I want to tell you that the gap between the slider and the description is too much. So I think we have to remove something. Where do we have the slider? Slider, where are you? Oh, my goodness. Here is it. Let's remove the pad in tub. Having done this, we are going to apply the slider over here, then settings. Simple as that. Now, what I'm going to do because we need multiple items for the slide to work. The D highlight. We're going to highlight from lines one, two, 42160. You can copy, but for me, I just have to duplicate it as many times as I like. Save, let's see what we have on the browser. Bed. Now every thing is working perfectly fine as expected. Let's quickly check out the mobile responsiveness. On iPad, the slide to show is one. Let's check out on mobile phones. As well, the slide to show is one. It is indeed responsive in our platform. This is beautiful. It all appears nicely, and I love it. This is off now. Indeure, we will begin to design the. See you Idee. 60. Footer Badge: H id. Welcome back to class. In this lecture, we are going to design the fa component. We I do, let's get started. Common B to open up the explorer. Make sure to open up the component within the filter, right click, create a new file. Fat Gs. Another one. Win the filter. Codon dot s. Generate the functional component. Save and go back to the fa s. RO of C to generate react functional component. The filter is going to stay consistent all through the project. So we have to render it within the layout. Open up the layout dot s. We are going to render filter. Close it up with the self closing tag, and please do make sure to import it at the top. Safe, and then close down the layout dot as. Now let's start with the fa. Let's quickly give this dv ID ID equal. Fa. Now let's see what we have on the browser. Can you see this is the filter over here? And even if you open up the portfolio details page. When you scroll down, you are going to see the filter. Can you see? This happens simply because we have it rendered within the layout to as. The filter will be displayed all through the pages. Wipe it off. Let's quickly give it a class name. Margin top empty. Let's make it 90 pixels. Within the d, we are going to have another df, give it a class name. The background color is going to be white. Part in top zero. On a large device, part in top 100 pis. You close down the d, and now we are going to have another df, give it a class name. The max w max 11 40 pis. F The background is going to be blue d 500. Rounded, excel. Let's close down the D. Let's make it responsive. Px 20 pixels. On a small device, px 64 pixels. Py 64 pixels. Mm auto. This is the padding left and right. The padding left right on a small device, the padding top and padding bottom. Now we are going to have an inline style. We are going to have it transform. Translate zero pixels, 70 pixels. Now when you check out the browser, here is it. Can you see? Nice. All right. Everything is going fine. Let's display the content within the. We are going to have a d. We're going to have display grid grid template column 12. Another one. The grid column is 12. On large device, the grid column is nine. Within the d, we are going to have a P tag, and within the P tug I'm going to do ready to get started. And he is it. Now, let's quickly align it properly. The text 30 pixels. The test color is white. Let's quickly align the test to center. On a large device. We're going to do text start. And now you have it. On a large device, it is going to start from here, but on a smaller device, the test will be aligned to center. Take a look. Can you see? Beautiful. Right after the P tag, we are going to have another P tag. Then I will paste the corresponding right to. You can use this P tag to tell your client your company. When you see, now we have it like this. Let's quickly give this. The text is going to be white. The font sounds. Again, we are going to have it exactly the same here. I just have to highlight copy, and then lift it down here. Save and see what we have. Beautiful. Again, on a smaller device, it is going to align to center. Great. What ese again do we have to do? Now we need the boating. Right after this closing D. We are going to have a div with the class name call spam 12. On large device. Again, I just have to highlight and copy this guy. Come here. Paste. Let's change it to three. Close down the d, right within the d. We are going to have another one. Let's have it display flex, Justify content to center. The margin top five. But on a large device, the margin top zero. Within the d, we are going to have an a tag. A tug, within the inner H temel of the A tag, we are going to do, sign up now. We have it at the rage of the container. Let's quickly stylize it. Give it a class name. Font Sans. The font family is Sans. The Cs, let's make it point out. P X ten, P Y, five. The BG, which is the background color. Now, we are going to do something different over here. 01, d9ff. Oops, take a look. Now we have the butting. But we want the edges to be a little bit curvy. What I'm going to do now is rounded dash, Excel. It appears nicely. The text white. The font we, let's make it medium. Text g, and this will map to the font size and line height. All right. I think that's all. When you save, as quickly format the code for proper indentation. And now we have something beautiful like this. Having done this, let's proceed to the next lecture where we are going to design the parent. Seeing the next lecture. 61. Footer Icons: Let's continue with the food tub. Open up the code resource dot MD. Let's quickly copy the puta items, which is the array of data. I just have to highlight from 6852 708. Scroll to the top, and then paste it within the component like this. Having done this, the nest and line is to display the logo. Right after the closing d, we are going to have a pot tag. L et's quickly give it a background. BG 223740. Within the foot, we are going to have a d. M X auto, which is the margin left and right. Max W screen Excel. Space, y eight. P X four, and the P Y is going to be 16. Of course, by now, you should be familiar with the tail wind utility classes. On a small device, P X six, on a large device, space, y, 16 LG, Px eight. Let's format the code. Another one, L et's make it container. X auto. P for D on a median device. We want it to be heating. Then we have to display block, margin top, pen. The margin left and right is set to auto. The max width is 12 80 pixels, and we're specifying the margin top and margin button. You are familiar with the rest of the classes. Beautiful. Now let's display the logo. On medium device, we want it hidden. Else, let's have it display block. Another one. The text t s hundred. Let's have a display flex, justify content to center. Margin top is ten. What we should do now is to copy the SVG and then paste it between that d. Go back to the code resource dot MD. Let's highlight from 712 2742. Highlight from the opening SVG to the closing SVG. Copy, go back to the code and then paste it within. Let's format the code. Beautiful. After this closing d. We are going to have a P tag, and I'm going to do, you deserve it to be seen. Let's quickly stylize the P tag. Give the class name. Margin top four max aces. This will make the max width to be 20 M. Text. What text color are we going to use here? Seven b858b. The fonts, which is the font family. The let's align it to center. All right. Now let's have a P tag. And this is going to be a copy right. We are going to have exactly the same color, exactly the same test color, so just have to lift it up there. Again, exactly the same font, highlight and copy, paste it here like this and boom. Again, what we have to do after disclosing d, we are going to have another d. We're going to have it display grid. The gap six, the grid template column, six, and median device, part and top is 20. And now we want to display the logo on a larger device. I'm going to do on a medium device. We're going to have it block, else, let's have it hiding. Now we're going to have another d. Text Blue 500. All right. We also have to copy and paste the SVG. Is highlighted already. I just have to copy. Paste it within the d format the code. SF scroll to the top, we are going to have the exact same information here. I just have to highlight copy all of the P tags. Then paste it right after this deep. Having done this, check it out on the browser. All right, we have the logo. The blue logo will appear on a large device, and on a smaller device, we are going to change the logo to green and so on and so forth. So let me show you quickly. Scroll to the top. The first one here, we have the logo heating on medium devices. And then it is going to appear on a smaller device only. And the second logo of a here, we have it heating on a smaller device and we displayed it on medium devices, and then this is the logo. Simple as that. But the issue we have now is that things are not well aligned. So let's see what happens. Scroll on the top. All right, guys. Take a look. P X. Let's change it and see if we're going to get the proper alignment. Reload. Same thing here. We have to go back to the code. All right. So here, you know, we lifted this code from here, right? So we have to change some of the properties. We do not want it to align to center. Having done this, scroll to the top. The grid template column here is going to be five. And I think that will solve the issue. All right. Beautiful. Let's check it out or more by device. This is the expected result. All right, guys. The footer is gradually taking shape. The nest in line is to display the items. Let's do it in the net lecture. 62. Footer Items: Let's quickly display the puta items. And right at the top. So we have an array of service. W in the array, we have all of the stuffs that you can render. And by the way, you can change it at your end. Yeah. So you can specify the kind of service that you render. Here also, we have an array of companing. We have a bat meet the team account review. And here we have an array of heaping, which contains the contact, frequently asked questions and the live chat. And here we have the legal policies. Now we are going to display all of the stuffs on the screen. Right after its closing dv. We're going to have a d, give it a class name on medium device. We're going to have it display block, else, we are going to have it hiding on smaller device. So the idea is to use the accodu to toggle and open up the items on smaller device. Now let's have a P tag. I'm going to do services. Let's give it a stale. The font medium, which is the font wet. Text white. Font Size. All right. After the closing P tag, we are going to have on that list, a UL, within the UL, we are going to map the items. Here I'm going to do Servis dot map. So we are trying to map through this array of data, which is service. When we map through this array, we are going to have all of these items the split on the screen, which is the elements within the service. All of the stuffs are actually the basic. Now we're going to do item, and this item represents each element in the array. So we're going to return the UI. Within the UI, we're going to have an LI tag. Within the LI tag, we're going to have an A tug, and then we just have to display the item. Save and see what we have. All right. Now we have it over here. Let's quickly give it the s. Give the A tug a class name. The text, seven B, 858b. The font dash, Sans, which is the font family. On Hova, the opacity is going to be 75. Let's save and see, save. Now we have it on the browser. On Hova, do you see? One more thing, let's make the coser to the pointer. Is already looking beautiful, but I am not satisfied with the alignment. So let's see if we can stylize the UL tag. Give it a class name. Margin top six space y four. Then the text size is going to be SM. Save the project. It looks more beautiful like this. Now having done this, scroll to the top. We have one, two, three, it means we're going to duplicate it three times. Highlights from this opening dive to the closing deve. I'm just going to duplicate it three times. You can copy and paste it three times. Okay Let me copy and paste. I copied, then come here, I paste, paste, paste. I want to make it easy for everyone to follow along. On you save, now we have the same items in three places. So let's quickly th the individual items. On you scrot to the top, this is going to be companing. This is the first item. This is the second item. We're going to map through the company, and here the P tag, we're going to do Copanin policy. I think it sounds more better like that. All right when you see. Good. Can you see Beautiful Scroll to the top again, we have the hep C. This is the company, then we're going to map through the helping. What do we do here? Helpful links. Yeah. Lastly, we have to map th the lego. And here is it. So I'm going to do legal policy or policies. What do you think? Now we're going to do ego dot map, and then the items will be displayed on the screen. Take a look. Beautiful. So we are done with the footer on large devices. When you check out the mobile device, you will realize that nothing is showing up over there. Don't worry, I understand that the testimonial is outgrowing its container. We will definitely fix it in the future. Nothing is displayed on the screen on a small device. Let's see what we have on iPad A. Good. On iPad, we have it like this. And I am loving every bit of the design. Perfect. The nest and line is to display the social media icons. Let's do that in the next lecture. 63. Display Social Media Icons: Welcome back to class. All right, let's go ahead to display the social media icons. Right after this d, we are going to have another d. A extra large device, the max w is going to be six excel. As well, we're going to have to excel max with seven excel. Px ten on medium device, Px 20. A extra large device, px 44, Mx or two. On a smaller device, the Pi is going to be ten overflow heating. Now we're going to have another d, give the class name. Let's have it display flex. Then we're going to have it flex wrap. The flex wrap is going to be wrap. Justify a content, space between. Items aligned to center. Another one. The width is going to be one pair of the screen. A small device, the width is going to be auto. Again, on a small device, margin left and right is for Margin bottom is ten and a small device, B zero. Oops. Take a look. Beautiful. Now we are going to have an A tag. Within the A tag, we have to paste the SVG. Open up the code resource. Scroll down. You're going to see the fo icons. Let's copy the SVG for Twitter. Highlight and copy. Come here, paste it in between the A tag. Format the code. Save and see what we have on the screen, and now we have it like this. Let's quickly give it a style. Give the A tag a class name. Let's have it display flex. Flex direction, is column. Items, Align Center. As well, justify content to center. All right. When you click on the social media icon, we want to open up a new tab, so Target equa, blank. Within the H REF hypothes reference, make sure to paste your thread link over there or your tweeter so to say, if there's anything like that now. Having done this, below the closing tag of the SVG. We are going to have a H five. I'm going to do Twitter thread. You can do thread if you have a thread account, and you can as well use the thread SVG. Mm. Now let's give the class name. It's going to be rector. Mting top, it's going to be one. On large device, Ming top three. Text S and a more device, text B. Font, The font family, we're going to have his sons, and then the test, the color of the test is going to be gray 200. The transition will be set to the colors. The duration's make it 300. Group, hove. We're going to have a text. Now when you hove on the test, we are going to have a blue test color. 48, e of dE. L et's save and see what we have. Good. Take a look. Do you see? Now, what I'm going to do is simple. We are going to highlight this de select from lines one, nine, three, two, two, one, two. I would duplicate it four times. You can copy and paste four times. All right. When you save, and here is the end result. It's all beautiful. So let's replace all of the stuffs. We're going to have Instagram, dribble, and so on and so forth. So I just have to post the lure and then implement it at my end. It is extremely easy to do that. So for example, open up the code resource, Then here is the Git SVG. Highlight and copy over here. I'm going to do Twitter. Now, I will replace this SVG, and this one is for Git. Please do make sure to paste the URL of your profile or your Gits profile within the H. Is lend to format. Here I'm going to do Git. Okay, let me do it for you. C watch the lecture at the end. This one is for Dribble, highlights, wipe it off paste. Now I'm going to do dribble. Here is dribble. The next is link D. Copy the link, then's going to do as well, we do Also, we have it for the Instagram. When you save, take a look. Beautiful. So when you click, it will open up a new page. For example, if you have pasted the URL of your Github, when you click, it will open up your GitHub account in a new. Let's also implement it for the Gmail. We have to also duplicate it one more time. Highlight from lines 28223 oh three duplicated. This will be G mail. Let's replace it with the G mail SVG. All right. When you save and check out the browser, here is the end result. This is extremely awesome. Having done this, let's quickly head on to the next lecture so that we can display these items on a smaller device. If you check it out on a small device, you will notice that everything is working fine except for the items. 64. Footer Menu on Mobile Device: H i there. Welcome back to class. In this lecture, we are going to implement the Futa menu. When the user click on the menu, the items will be displayed on the screen. Let's implement it quickly. Open up the filter directory. Filter dot z. As well, we have to open up the codon. Oops, take a look. Close down the explorer. Within the filter, the first thing we are going to do is to import the codon. Inputs codon from dot slash codon. Having done this, the next end line is to pass the whole of these items as props down into the codon. How do we do that? Let me show you quickly. Scroll down. Write bring the section after the s. We are going to render accordion. Close it up with the self closing tag. Now we have to take in the title, and we're going to do services. Here, then let's pass in the contents content equal, scroll to the top and let me show you. This guy right here, which is the array of service. Highlight and copy. Come here and paste. Now highlight, we have to duplicate it three times. Hold on the shift and out, tap the down arrow key to duplicate. Duplicate one, two, and three. Now we have to change the title and the content. Here we're going to have. Actually, you can check it out from here. Let me show you. So these are the titles. The Copaning policy, helpful links and the legal policies as well. So now I think we have the companing policy. Highlight and copy, come here and paste. Screw to the top. We have to pass in this array of company as props down into the acodeon. So what we should do right now is to pass it as content here because the content is already an attribute that is going into the accodon. Here we have the helpful links. Then highlight, wipe it off, paste it. We have sepsis. Scroll to the top. Here we are going to take in helping, the array of helping. Lastly, for the title, we're going to have the legal policies. Scroll to the top, where we have the array of legal. Highlight and copy. Come here. We have to replace it as well. Having done this, the nest and line is to receive these props within the acodon. Do what to save, go back to the accordion gs, within the parameter of this function. We are going to destructure title and content. Let me show you again. Here is the title, and here is the content. Please do make sure to spell correctly so that you don't have issues. Now, everything is done correctly. Declare the necessary state variables to be used. Up here, we are going to port the U state hook. The Ute hook is a function. Therefore, we have to invoke it. We in the U state function. We are going to take in force as the initial state. Then here we're going to have an array of two entries. Cost is open, C set is open, then assign it like this. This is the variable that holds the initial state, and this is the seta function that will be used to update the initial state. Simple as that. I think you should give me some acolytes for these beautiful explanations. Now we're going to have a function. C, we're going to call it Tg, Tg accodu. Set it to an function. Win the function, we are going to do set is open to not open. Now within DUI. If at your end, your d do not have a class name, please do what to specify the class name. Let's give the border, and the border color border d39, 39, 39. Margin bottom is four, Parting top and parting bottom. Let's make it six. We are going to have another d. Give it a class name. We are going to have it display flex, Justify content space between. T. Align items to center. The padding is two, but on a smaller device, the padding is four. The width is going to be 100% full. Lastly, the background is going to be red 500 for teaching papers. Yeah. Win does D? No, I don't like it like this. Fine. When does D, we're going to have a H two tag. H two. Win the H two tag, we're going to display the title. This title over here, recall that we destructured it here within the parameter of the function, and it is coming from from here. We passed it as props down into the codon, and then we received it here. Since we have received it here, we should be able to make use of it anywhere around the component. Let's see and see what we have on mobile device. When you reload, it says, modulo f countries of codion. Wall. Let's see what we have here. Within the footer, we have the codon. Let's go back to the footer, scroll to the top. We are importing codon from codon. Take a look. We have to take off the sledge. Now it works. Screw down. All right. Beautiful. Can you see the title? We have the service, the Copanent policy, the helpful link, and the legal policies. If you observe with your engineering eyes, you will realize that the space between each items are extremely marge. Let's fix it quickly. All right. Let's go back to the Accordion. Close the Explorer. I think we have to stylize the H two tag. Let's give the class name. Text d two Excel. Let's make it wide. The font is going to be semi bold. All right. Let's save and see. All right, I love the color of the test and how it appears. Let's quickly reduce the space between H items. So what I'm going to do right now is to change the padding top and patting bottom. Let's reduce it. Let's make it too. When you save. All right. I think this is better enough. Yeah, I love this. Check it out on other device. Good. Take a look. Looks nice. What do we do right now? Here, we're going to have a D, give it a class name. BG let's give it the background color. We're going to have exactly the same color hair, high light cop. Then piste. The height is going to be eight. The width is going to be eight. We're going to have it display flex, Justify content to center. Align items to center. Then we are going to make the edges to be rounded. So we are going to make it rounded full. We want to have it circled. Having done this, let's copy the X VG and paste it down here. Open up the code resource dot MD. Copy the accordion SVG. Go back to the code, paste it between, save, make sure to format. Check it out on the browser. It appears very nicely. But we have to change the color so that it can be more visible. Let's give it a class name. Here, we're going to do W six. Now we are stylizing the icon itself. The width of the icon is going to be six, the height is going to be six text white. Check it out. Now, can you see? Beautiful. I love what I'm saying. Let's continue. When we click on this item, we want to rotate the icon. Let me show you quickly. So within the class now, we have to take in the string interpolation because we are expecting Java script so that we can write the condition. All right. Now we can have the condition. If it open is set to true, pay attention, nothing will happen. Else, we have to rotate the icon. Minus rotate 90 degree. When you see the outcome, you definitely we understand what we did right here. Now we have the icon like this. Yeah, let's quickly implement the click. So where do we implement the click now? Let's implement it within this D. Click, we're going to call the Togol acordeum. Safe. Now, check it out. When I click on this icon, it is going to rotate downward exactly at go 90 degree. Take a look. Tell me, doesn't look good. Of course, it does. When you click again, you rotate, you rotate, you rotate. You can as well click to adjust Everything working, everything cool. I love it. This is often now for this lecture. In the next lecture, we are going to display the items when the title is clicked. When you click on this menu, we should be able to display services related datas. As well, when you click on the Copanent policy, we should be able to display the Copanent policy related data. Simple as that. I talked too much. See you in the next lecture. 65. Footer Drop Down Menu on Mobile Device: Hi there. Welcome back to class. In this lecture, we are going to implement the menu drop down. For that, we are going to make use of the headless UI. Quickly head on to headless.com, and scroll down a little bit. Here you are going to see the installation command. Make sure to highlight and copy, go back to FS code. Open up the terminal. Make sure to click within the terminal and then do contra C to stop the currently running server. Now we're going to piste the command to install the headless UI. Hit on the enter key to get it fired up. Install successful. Let's bring down the terminal. Screw to the top. Please, we are still within the codon. Now we're going to pots, take a look. We should separate the stuff. A We are going to import transction from headless UI. Having done this, scroll down, then where do we implement it now? Right after this d, let me show you right after this D, where we implemented on click. We are going to render the transction. We are going to make some settings within the transuction. But before we do that, let's quickly render the items. Open and close co brackets. Within the co brackets, open and close parenthenss, and then we are going to take in R, set it to an R function. Now we are going to have a d, give you the class name. The pattern of the d, we're going to have it to be four, the BG for teaching pales. The BG is going to be yellow 500 for teaching purples, close it down. We're going to take and attribute. Within the D, we're going to do content dot map. We have to map through the contents to have it displayed on the screen. Of course, you should know other processes involved. Now, taking items, which represent each element within the array. I keep saying this because I wanted to stick to your memory. We're going to have a P tag quickly. Within the P tag, we are going to display the item. Save ops, we have to do within the terminal, and PM Run dev. Let's see what we have. The application is open on local host pots, 3,000. And now it says transection is used, but it is missing the show property, which is a boolean operation that will either return true or false. So what we have to do now within the transction, we're going to set up the property here, we're going to do show. We're going to set it too is open. All right. Let's save. Scroll down. Now when you click, so we are able to open up the menu. But I don't know why the items are not showing up. We have to go back and check out what we've done here. Here's the P tag. Content dot map. Let's see. Yes, we have the content there. What is again? All right, guys, you know we are returning your over here. I always tell you not to make that mistake. But now it seems we are all victim. Okay. Here, we have a parentensis and not a co bracket. Make sure to open the parentenss here and close it. Save and let's see. Beautiful. Can you see? Take a look. This is awesome. I love this. Now I feel relieved. Can you see? Now I feel good. Let's implement some properties within the transaction to make it look nicer. Head on to the head L UI. At the bottom left corner of the screen, you are going to see the transction. Click to open. What I'm going to do is to copy all the properties here. R click, Copy. Come here. W in the transction, paste it, save. Me sure to format the code. Now let's check it out again. A better. Do you see the animation? Take a look. Everything cool. Let's quickly stylize the P tag. P Y one. The text, let's make it gray. Text gray, 500. Let's make it 400 because the gray will be two du and it is 500, but right. Now we have the actual value. The font sounds good. Safe. Tockle again. Perfect. But now we have to remove the bgrond colors because I used it for teaching purpose so that you understand well enough what I did. The background color should be exactly the same thing with all of this stuff here. Highlight copy. Come here. Paste. Oops, wrap it up in a square bracket. C. I don't like the menu background. I think we should use the footer background for the menu so that it can blend. All right. Quickly open up the footer. Where we have the background for the footer. Here is it. We have to copy this background, highlight copy within the footer section on lines 52. When you come here, we just have to replace it. Same thing here. We also have to replace it. Okay? When you save, let's see what we have. Now, beautiful. Can you see how beautiful this looks? Extremely beautiful. Take a look. This is top notch. I think we're done. We're done. Indeed, we're done. So let's check it out on iPod. Perfect. Everything cool. So this is offer a potter, and I hope you love the design. Make sure to read and review the scores. It means a lot to me. Yeah? 66. Contact Page Header Design: Hi there. Welcome back to class. In this section of the cause. We will proceed with the contact me page. Quickly, within the page directory. Right click, New Folder, and this will be called Contact. Win the Contact me directory, right click, new. We're going to have the pages. Beautiful. Now within the page, we have the contact me and the portfolio detail design. It will be very nice if we follow the core principles of designing professional website, which implies we should rename the page two pages. It should be a pleura word. Do not worry about that for now. We would do it at the end of the course. Contact me pages. Close down the explorer, RFC to generate react functional components. We're going to do contact page. Open up the explorer component, and then open up the header, header dot js. Scroll down quickly. Within this LI tag, what we are going to do is to hit the contact me page. In next g stating, whenever a package is created within the directory page, which is the guy, that directory automatically becomes a route. For now, we can say that the contact me is a route because the page he is created within the contact me directory, and the contact me directory is created within the page. Let me take it one more time. In next g stating, whenever you create a folder within the page directory, This folder will automatically become a route when a page dot s is created within. Simple and short. Now, what we are going to do is to target the page and then contact me. Let me show you quickly. And I guess you will definitely understand it when we implement it. I'm going to do slash page slash, contact me like this. When you save, let's check it out on the browser. Make sure to reload. Let's give the try by clicking the Hyam button. Can you see? Now we've been able to open up the contact me page. Let me clear your do. Go back to the code pages. W in the DP, we're going to have a Hage one tag. W in the head one tag, let's copy this test. Sorry, we have to cut and then paste. Give the class name. We're going to use a tail wind and I'm going to do text seven Excel. This will make the text to be extra large. Now you have the text at the top left corner of the screen. I also have to clear your curiosity. We're going to have a display flex. Justify content to center align items to center. This is just for teaching purpose, and here is the contact me page. Looks nice. We do not need any of the stuffs here. Highlight, wipe off, command B to close down the explorer. Here, we are going to be a little bit fast so that we can catch up with what we have for this lecture. Go ahead to write a beautiful comment if you like the way I teach. We are going to have a react fragment. You can go ahead to use the empty fragments if you wish. They are all the same just that the react fragments can accept some props. Yeah. I think that's the difference. Here we're going to have a dive. Give the class name. We're going to have the dv to display flex. Flex direction is column. Let's align items to center. As well, justify content to center. W, full pading top, 80 px. Padin bottom. Also, let's make it 80 pix. Let's do margin top, F we're going to have another D. Same thing here. We just have to highlight these from here, copy, come here, and paste. We don't have to waste time. We're going to specify the background, BG, open and close square brackets. Win the square brackets, we are going to take in the URL. Then open and close parentenss. Win the double. We're going to do slash offices dot JPG. We have an image offices. And this image is within the public directory. I don't have to take you over there anymore because you should know it by now. Here, we're going to do BG cover. We're trying to stylize the image. By the way, let's close down to D. W Full. Let's give the height. Let's make it 400 pixels. Save on the browser, here is it. Perfect. Is carefully coming out. One more thing we have to do is to align the image to center, PG center. Save and see what we have. All right. Looks nice. Write O in this def, we are going to create a background overlay. We are going to have another df, give the class name. We will have it exactly the same thing here. Highlight copy, come here and paste. Yeah. So the width is going to be the same. The height, full, the background, we are going to stay consistent with the dark background we are using 223, 740. What we are going to do now is we're going to do slash, which is divided by 70. We want to reduce the thickness of the background. When you save sorry, we have to close down the teeth, save and see what we have. Now we have it. If I remove the 70 like this, Can you see, It is going to be like this, something like opaque. But if you want it to be transparent, we just have to do divide by 70 or you can divide it by any value of your choice to give you that transparent look that you really wish to have. Mine is like this. I am satisfied with this. Let's apply the brightness. Backdrop brightness, brightness. No, we're going to have it 50. I think that was when you see. Nice. Putin this d, we are going to have another d. Put in a UI is d. Test align center. BG, we want to give it the background. Of course, we're going to stay consistent with the background. 48, AFD E, PY, one pix, Px, eight pixels. Track and white. We're going to have to transform our per case, the font is going to be semi bold. Text 20 pixes. Text white for the color, and we want the backgrounds to be rounded G. Within the D. Can see it right now. Okay. I think I should increase the front a little bit. Do you like it like this? This is too bad and it is going to hide almost everything. Let's continue like this. So what is again? Let's check it out. You may not see anything on the browser until we display something between the d. So we're going to have an a tag here. W the A tag, we're going to do contact form. When you save, here is it. This exactly is the expectation. Putting top and part and bottom, let's make it five pixels. I think it is fine. Then let's make these ten pixels. All right, beautiful. We're going to do HREF equal, contact. When we click on this A tag, which in this case, does guy over here, it is going to smooth scroll to the contact form exactly. Yeah. What is going to do now? Let's give the class name. Let's make it po. Beautiful. What else do we have to do now? After this dive, we're going to have another deve. The margin top of the deve is going to be ten pixels. Win, we're going to have a Hight one tag. Remember we are staying consistent with the phone. Here we're going to have the fonts to be recollect board. The text d five excel. Again, the text text, ex the same color. I'm just going to highlight copy, and then replace it. Pan is going to be two. Let's test align to center. This is for the later spacing. Win the head one tag, I'm going to do i and you save M All right. Here is it. We got it. Good. After this DF, we are going to have another D, give it the class name. Let's do something. Now we are going to have a P tag. Win the P tag, we just have to copy the write up and then paste it between. Within the code resource.md, we have to copy the write up. Highlight and copy, go back, paste it. Format the code. Save on the browser and here. Let's quickly stylize the P tag. First, we're going to sterilize the deep. We're going to have display flex, Justify content to center. We're going to have a test line, center. Margin top ten. O medium devices, we want the width 700 pius and s. Put in the p tag quickly give it a class name. Text whit. The font we're going to make it 300, which is the font with. Then text center text Excel. Having done this when you see, Beautiful. This exactly is the expected result. I love it. It looks beautiful. So having done this, let's quickly check it out on mobile device. Can you see? Good. Perfect. 67. Contact Page Menu Card: In the previous lecture, we designed the contact me header. In this lecture, we will go ahead with the cards, Hao s code, right after this d, the d over head. This guy. We are going to have another d. Padding left and right, 20 pix. Within, we are going to have a d, give the class name. On a smaller device, we're going to have a display flex, the GAP 20 pixels, margin top 50 pixels. The max width the actual width is going to be full, which is 100%, and the height as well is 100%. What in dos de, let's quickly format the code. We have it like this. Now we are going to have another def. We're going to have it di flex. Flex direction is column. Then we're going to do flex. An extra large device, the flex direction is going to be roll. Let's give the gab. 20 pixels. We are trying to create the boxes. We're going to have another dv. PY, 35 picks, P X 45 picks. Rounded d G because we want the corners edges of the boxes to be a little bit curvy. The shadow, G, the cos, let's make it pointer. I want to have it transction, all. The transform the duration Bash 300. On Hova when you hove on the card, we going to change the background. Yeah. It is going to be the actual Hova background that we have been using. I told you, there's need to stay consistent when building a professional website. We also want to change the Hova text. Also on Hova. We want to translate Y. We're going to have it. The actual background color of the sard is going to be. B, white. I want to show you so you can see it c. Now we have it. That's fine. Let's quickly apply the box shadow to it. Quickly, open up the code resource dot MD and then copy this box shadow. Having done that, go back to the code and paste it within the D. Let's paste it here. Si, when you check out the browser, and here is it. And when you hove on it, the background shows up. The nest line is to display the content within the d or within the card so to speak. But I want you to notice that when I hove, it translate downward. Take a look. That is not the expected result. It should translate upward and not down. Go back to the code where we implemented the hover. Here like this, I think we have to specify a negative value like this. We did it previously. Over again, take a look. All right. Fine. What the df, we are going to have another div. Have it display flex as aligned items center. The gap, let's make it 15. We can pick from here. Let's make it 16. Nope, Let's specify a custom gap. 15 pixels will be good for it. W in the D, we have to display the icon to proceed with the icons. First, we have to install the react icon. Click within the terminal cont C to stop the currently running server. I'm going to do MPM install react icons. Hit the enter key to get it fire. Installed, successful. Again, I just have to start up the server. Let's bring it down a little bit. All right. Haven't installed the react icon. The nesting line is to import the necessary icons that is needed. Again, go back to the code result dot MD. There's no need western time to type all of the tops. You just have to highlight the react icons for Contact me box. Here are the, from lines 8472 850. Copy, go back to the code, and then scroll to the top. Right here, we just have to paste. These are the icons. Let me show you this guy, the F A location, the FI phone call, and the rest of them. So here we are going to render the F location dot. Close it up with the surf closing tag, and let's quickly stylize it. The size, let's make it 40. P, this should be a Cole bracket, 40. The cooler we also have to stay consistent 48, AFE. What is wrong? Oops, Sorry, this has to be done within the double or a single. When you check out the browser, here is it. It looks good. Hurry. Let's continue. Right after this, this guy here, We are going to have another D, flex, and then the flex direction is column. Another one, and within the deve, we are going to have a P tag, and I'm going to do location, just like this. We have it like this. Nice. What do we have to do now? Let's quickly give the dive a stale. The text, this guy, copy, paste it. We're going to specify the custom tax size of 14 pixels. All right. Take a look. Can you see? Stick in shape, and I like it. We're going to have another d. Within the D, we're going to have a p tag and within the P tag, I'm going to do visitors ad. You have to specify your address. When you save, can you see, take a look. Things are gradually taking shape, and I like it. Within the D. Again, the front dah, let's make it semi bot. Text, 20 pixels, track in white, which is the line space. Beautiful. Having done this. Come here, we're going to have a d. Let's I forget. Win the D highlight this icon. Press down the option K mac and then tap the par key to move it within the D. Having done that. Highlight the closing d and here it. This guy over here at lines. Highlight the closing d at lines for five, cut it off. We have to paste it right here. Which simply implies, this deve over here is ending here. Lines 40 is ending on lines 54. Let's quickly format the code for proper indentations. Now when you check out the browser, we have it look like this, and this exactly is the expected outcome. Right after this df, let me show you the deve over here that we addressed not long ago. We are going to have another df. Within, we are going to have a P tag. Win the P tag. I'm just going to do? By the way, this is just a Domi street address. Yeah. Quickly give the P a class name. Text dash. Just like this, who to make it gray. It's not bad, highlights, duplicates it. You can change the street name here and whatever. All right. So, having done this, what we are going to do right now is to highlight. Let me show you. Does de over here, It is ending here like this. Take a look. It ends here on lines 63. We're going to highlight 38-62. C P, come here. Past it. Save nice. We have it like this. The next line is sc top. We have to highlight this de. This de over here from seven is ending here on lines three. Highlight from 37293 copy, and paste. CF quickly formats the code. Let's go back. Now we have it look like this. Extremely beautiful. Check it out on mobile device. It looks like this. On iPad, it looks exactly like this. Can you see, everything is well aligned on iPad device. Having done all of this. The next in line is to change the icons and the right tops. Okay? Let me show you. This is the first box over here. And this is the second box. What in the second box, we are going to have the phone number. So I'm going to render F phone call. I'm just going to do here 27 service. Here I'm going to do colors on. Then you just have to specify your phone number over here. So all of this you can do at your end. Yeah. So I'm just going to have a random phone number. All right. L save. Now you have it look like this. Beautiful and clean. What is again, do we have to do? Should I do all of the stuffs for you? All right. Let me take the pain. This is the third. Here we are going to display the mail. So I'm going to do AI mail. So what do we do here? We're just going to do drop a line. You can write something here that can make your website look nice. We're just going to do mail address. All of this you can do. So here, I'm just going to do a este at gmail. You can use your e mail and please do not use my email because this website is now for you. Lastly, we're going to have it for the time. So the days of the week that your company opens. You know all of the stops. So here we're going to have AI outline field time. Of course, here we have to specify the office hour. I'm going to do office hours. Specify whenever you open and whenever you close. I'm going to do opening time. From Monday to Friday. And then the time is 9:00 A.M. Two 6:00 P.M. So the closing hours, normally, we don't open on Sundays. Sundays, you just have to go to church or you can go to masque anywhere you want to go to. You can go out to party. And. When you s, here is the outcome. It looks like this. I don't like it like this. You see this guy here is taking almost all other space. What we should do to resolve this. You can resolve it at your end, but for me, I just have to reduce because this e mail is not valid. There is no need having a long e mail within the p tack that is obstructing the box. Another way you can resolve it is to specify the phone size. It doesn't have to exceed a certain amount of space. Okay. Now it appears like this and I like it. Yeah, this is fine. Mm hmm. This is cool by me. By the way, take a look at the hover effects. It looks beautiful. Oh, my goodness. Let's check it out on mobile device, sorry, on iPad. Take look. Guys, this design is top notch. Look at that. Can you see? Makes sense. All right. A enough of this. Let's proceed to the next lecture where we would design the contact form. See you then. 68. Contact Form Layout: H i there. Welcome back to class. In this lecture, we are going to proceed with the contact me layout. Quickly, go back to VS code. Right after this d. Let me show you, which is the dive over here. Now we're going to start a new section. We are going to have a dev with the class name, and then we're going to have a display flex. Let's close down the d for the meantime. Won't this d, we have to specify the ID of this d. ID equal, screw to the top and let me show you. This guy right here. Recall that I told you when you click on this A tag, we want to smooth screw to the contact me section. So we have to highlight and copy this ID. Contact. And then paste it here. God. The flex direction is column. On extra large device, we want to flex roll. Justify content to center, the gap, 60 pis, Mging top, ten Pix. Put in left and part right, pixels. Max with scrot to the top and let me show you. We have to stay consistent with the max width over here. I think we specified the max width here. Max with, where are you? Here's the max width. I just have to highlight and copy. Come here, and paste. Mm or two, which is margin. The padding is ten. Within the dF, we are going to have a df, give it the class name. On a smaller device, we're going to have it heating. Medium device, we're going to have it display block. Then position relative, W, 50% on Excel W, 50%. H 550 pix. We're going to have it rounded Excel. On a medium device, the width is going to be full. On a large device, the width also is going to be 50%. Now what we should do is to specify the image. What I'm going to do, now we're going to use the inline style. Within, we're going to have the background image. Specify the ba tick. Win the ba tick. I'm going to do UR Well, opening close perinenss. What I'm going to do is slash customer seve dot JPEG. When you save, let's see if the image appears. Good. Now we have the image like this. As you can see the corners are all rounded. Good. Go back. What we should do right now is to center the image. We can use the tail wind utility class. PG center, and also PG CV. Can you see, now it appears very nicely. Good. Having done this, we also have to create the background overlay so that it becomes transparent. Now, wouldn't the d close it down, quickly format the code, and within the class name. We're going to have it positioned absolute so that it rests on top of the steve. Now this deve is positioned relative. When we position this guy absolute, it is going to rest on top of the guy. I know you know that. H f with Bg gradient to top. This will make the gradient background from bottom to top. Then we're going to have it from. Now we have to specify the color to start with 22, three, 740. Via same color here. I just have to highlight this guy copy paste. Shadow dash in. Now, the opacity, let's make it 70. When you see on the browser. That didn't work. Why is the stuff not working? Opacity is 70 years, which will make it ta. The shadow Nova thing here is cad. Oh, my goodness. Take a look. Absolute. No. What was that? This is the right thing. Hight full with full, and now you're going to have it like this. Beautiful. All right, so take a look. This is the closing d, right? We do not have anything within the dive. We just used it as a background overlay. So we're going to have another dive outside the dive. Okay? I hope you're following. Again, we're going to have its position absolute. In set zero. Let's have it display flex. Flex direction is column. The gap, let's make it 20 pixes. Items align center. Justify content to center. Text is going to be white. Shadow is going to be all g, and the pattern is going to be six. W in the d, we are going to have another d. The text is going to be for Excel. A estra lag device, the margin top. Let's make it 150 pix. Margin top is going to be zero, rounded full. So we want it to be secured here. You will see that in a GV. P X 15 pixels, PY, 15 pixels. And the background. Let's stay consistent with this BG. Let's make use of this background over here. If it doesn't make sense, we will replace it. Okay. Text within, text is going to be white. So let's display the icon so that we see what we have. Recall that we imported it in the previous lecture. Yeah, we copied the import from the code resource, and then we paste it here. I want everybody to follow along, and that is why I take time explaining everything. And I hope you reward my handwork by and writing a wonderful comment. That will be much appreciated. All right. I talked too much. F A headphone. Close up with the soft closing tag. Now let's see what we have. Boom. Can you see it appears here? Don't worry, by the time we begin to implement the items underneath this guy, it is going to push it upward. So right after this deve, we're going to have another dv. Fonts, semi bold. Text dah, 24 pixes. And I'm going to do at with life. You can do something else. Here is it. Chat with life. Outside the D, we're going to have another D. Give you the class name. Win, we're going to have a P tag. Within the P tag, we just have to screw up. Let's highlight the text copy. Paste it within. Quickly format the code. When you save, and here is it. Good. The font doesn't look nice, don't worry, we will definitely fix that. What I want to bring to your notice is this guy over here. Sometimes whenever you format your code with PD, this will show up. So I don't want you to be curious about it. Let's quickly stylize the P tag. Not much but to specify the text and the rest of them. Text center. Margin top five. Font. Let's make it 200 apa the font weight. Text Excel. I don't think there's need for the stiff to have a class name. Now it appears like this, and it looks more beautiful, high like. Everything rocking perf fine and everything cool. Having done this, let's implement the boton below. Right after the closing def. We don't also need a class name here. Here, we're going to have a boating, and within the boating, I'm going to do less chats. And here is it. All right. Let's quickly give the start. The background, co, we should use the BG, highlight copy, come here and pit. Text. Margin bottom 30 pix. Putting left and right is four. Putting top and patting bottom is two. On hover, hover, we should also stay consistent with the actual hover color. I don't know if we can get it at the top here, within the c. Take a look. Here is it. C P, replace it here. Transition color, and we want the button to be a little bit rounded. Let's see what we have. When you save. Oh, beautiful. Take a look. See that. Looks nice, and I like it. All right. Having done this, we are going to have a right top at the right of this card. After this d, we are going to have another D. Let's have a display flex. Flex direction is column. Gap. We are going to ops. It should be gap and group. 20 pixures. Another one. Within the deve, I'm going to do contactors. Outside the D, we are going to have a P tag. We also have to wrap up the p tag within the D. Highlight the P tag and then push it in. You already know how to do that. W in the P tag, I'm going to paste the right to over here, request the core back, feel free to reach and contact us. We don't need to type that. Okay. Now here is it at the right of the corner. I don't like the way it appears, so we have to give it a little bit of star. Let's quickly stylize it. Starting from the contact. The D here, we're going to have a text center, W. 100 pixels, which is the width the PG. So right here for the background, I'm going to use PG red 500. So this actually is my specification because I want it to be noticeable. Let me show you. Can you see? Yeah. So if you don't like the color, you can also change it at your end. P Y, the line spacing. We're going to have it transform per case. The font d 300, font Sans, text 14 pixels. The text is white, and then the round it LG. Save Can you see that? Looks good like this. Having done that, we also have to stylize the P tag. For the P tag, we do not have to do. So let's give you the class name. Text 30 pix. Text, this color over here, highlight copy. And piece. When you save and bom. Perfect. This exactly is the expectation. All right, our layout is ready, and the next line is to but the contact form over here. Right after the speed tag. We're going to have the contact form here. And everything looks good. Of course, it looks good. This is beautiful. I keep admiring this design. Honestly speaking, the design is top notch. Take a look. All right, enough of that. See you in the next lecture. 69. Contact Form : The design is already looking so beautiful. So let's quickly finalize it in this lecture. In this lecture, basically, we are going to set up the contact form. We are going to have the name field, e mail, phone number, subject, and the message field. Let's go ahead with it. Right after this df. We are going to have a form. Give the form a class name. Let's have it display flex, flex direction is column. The gap 20 pixes. If you observe carefully, you will realize that we have been maintaining this exact same gap. Teaching you the concept and the principles of a professional website. You always have to stay consistent with your font, your te size, and all of that, including yours. Now we're going to have a div with the class name. Let's use the string interpolation. Let's have a display flex. Flex direction is column on a smaller device, flex direction is roll. Again, the gap, 20 pixes. Win the D, we're going to do ind class name. Recall that we imported the Google hind. Oops. We did not import it. Really? Let's do that quickly. Within the code resource, you can quickly copy the import. Paste it like this. All right. Scroll down. We have it here. Let's close down the dee. Where in the deve, we're going to have an impute field. The type is going to be texts. Let's do it like this. First of all, let's close it up with the soft closing tag. All right. Name Name. Place hold a your name, and it is going to be required. It is a way of validating the form in a very quick manner. We don't have to do all of the stuffs. Give the class name Px, 12 pixes, the outline. Rounded, MD, P Y. Again, 12 pix. Flex dash one, Bg gray 200. Don't with it. Next and line is to highlight the imp field, duplicate it ones. When you save, let's see what we have on the browser. All right. Now we have it like this. You name, your name. There's no space between. Let's go back to the code. First, we have to change some of the properties. Here, we are going to do e mail. And of course, the put type is going to be e mail. Again, what in the placeholder, we're going to do your e mail. Okay, your name and your e mail. But look, we are having this issue. There's no space between the field. Let's quickly go through the code. Here we have display flex, flex direction column. On a smaller device, flex direction is row. And take a look. The gap and here. All right. Good. Everything cool. The next end line is to highlight. Let me show you from 1932 208. Duplicate it one time. Si on the browser, here we have it. Let's quickly change the properties. The impute type is going to be test, but the name is going to be phone number. Your number, and this is going to be for the subject. Change the name to subject. All right. It looks good. I like it. What we should do next is to implement the text area. Right after this d, we are going to have another df, and basically what we should do here is just the fun. I'm going to do Text area. Close it up with the self closing tag. We're going to have it required. The name message. Please hold up. We're going to do your message. Quickly give the class name, and it is going to be exactly the same thing with this. High light call P, come here. Paste is quite the same, but something changed, which is the height. Let's make it 180 pix for the text area. Good. The height looks nice and I like it. We also have to specify the width, so we're going to do with full Take a look. All right. Everything makes sense. Let's quickly implement the boating. For the booting, right after this df, we are going to have another df. We're going to have a boting. And I'm going to do send us message. Or you can do something better within. If you have a better English to speak, you can see it here. It's not a crime. Now it appears here. Let's remove the style here for the D. Instead, we have to do it on the boting. The background, we are going to maintain exactly the same background that we have been using. Copy here on lines 176. Go back and paste it here. The width d fall. On smaller device, the width is auto. Px 30 pixels. Py, 12 pixels. On hover, so I think we should copy the hov effect from here. Here is it. It is going to be exactly the same thing. Copy from lines 17, six, come here. Then paste. Transction is going to be color. The duration 300 f, semi bode. We should change the text color to white, and then let's make the corners of the botin to be rounded. Quickly, let's do that. I'm going to do rounded G, text, and that's all. Good. Beautiful. This is classic. All right. Something I also want to show you scroll to the top. Recall that we implemented the smooth scroll within this a tag. So when I click and boom, can you see? Perfect. Let's check it out on mobile device. Scroll down. Take a look. Friends, this is classic. Extremely responsive in our platforms. I can broadly tell you that. If you observe carefully with your engineering eyes, you will realize that the space between the contact form and the footer is merge. The space here. Mm hmm. Even on large device. Can you see it kind of makes it look empty. So let's quickly go back to the code. Now, scroll. Up. This is the contin a D of the contact section. What I'm going to do right now is to specify the margin bottom and B. Let's make it minus 150 pixels. When you see, good. Let's make it 160. Hope it is not going to be too close. I think it's cool. I's fine like this. Now we are done with the design. The next end line is to convert it into a controlled impute so that we can grab whatever the user type in within the impute field. I know you understand what I'm talking about. Let's do that in the next lecture. 70. Controlled Input (Contact Form): Now we have a very beautiful looking design, but the contact form is not working. It is not going to get updated when you type something within the impute fields. To get the contact form working, we have to convert it into a controlled impute. He onto Vs code, scrot to the top. The first thing we're going to do right here is to import the usted hook. Let's do it online too. Han't done that. We also have to switch from sever side rendering to client side rendering because we are now making use of the U state hook and definitely we will make use of the click. So here, we're going to do e client. And now let's proceed. Let's quickly declare the necessary state variable for the imputed. Const state said state. Then we're going to do equa states. The initial state is going to be an object with properties. You just have to open and close a co bracket within the state function. For the first field, we have name, e mail, number, subject, and message. Quickly, we're going to do name set it to an empty string. C and then highlight, duplicate it four times. Now we're going to replace this with e mail, and this will be phone number. These subjects. Lastly, we have the message. All right. Beautiful. Before we proceed, let's quickly do something. We are going to have another state variable. Definitely, we're going to use it in the future, so let's do it here. We're going to call it loading, set loading two We are going to set it to force. Simple as that. Let me explain the logic. When the user begin to type in within the impute field, that action will trigger an date. When the date happens, we have to grab the test, teaching good. Beautiful. We're going to have the function, handle change. Const handle change, equal, set it to an arrow function. Wearing the parameter of this function, we are going to take in the event. And here, I'm going to do const key equ event dot, target. We just have to highlight, duplicate it. Here we're going to have value. We're going to do events do target dot value. Basically, what we are trying to do is to grab the test within the impute field when the user is typing. Here. Having done this, we have to update the state set state, within the parameter. We're going to have an object and within, we're going to spread the state, we're going to take in key. Column value. Simple as that. Having done this, The next ten line. It is obvious that we do not want to accept any letter within the phone field. The only thing we want is the number. Let's quickly validate it. After this function, we're going to have another function. Cs and phone change. E qua. Definitely, we have to take in the event and then let me increase my pace right now. So we're going to have cost value equ et target dot value. Now we're done getting the value. The neton line is to use the regular expressions to validate the fd. So I'm going to do here cost. Numeric value equ value dot replace. Within the replace function, we have to perform the operations here. We're going to have two forward slash and within, we're going to have the square bracket. What we want is 0-9 simpler that. You should know all of the stuff. This is just a basic stuff from Java script, Set states within the set states, spread up the state phone number, assign it a property numeric value. Simple as that. Good. Lastly, when the user click to submit the phone, we want to refresh the feud. For example, after typing within the feud, and when you click on the submit button, if everything is okay, we want to clear off the fd I know you understand what I'm talking about. Let's do that quickly. Cost clastic equa, So within this object, we're going to call the seta function to update the state within the seta function. What I'm going to do right now, scroll to the top. We have to highlight everything from here from lines 19 to 23. Copy because we want to take it back to the default state. This is the default state, nothing in between. They are all empty strings. Format the code for proper indentations. Now we are done setting up the functions and everything required. The next in line is to apply these functions. So let's crow down to the feud. Okay? This is the form. What we should do right now is to implement the change. Let's do it right here. Un change. All we have to do is to call the handle change. The responsibility of the change is to update the feud when the user begin to type within the impute. Now we also have to set the value to state dot name. Recall that this is the impute field for the name. Beautiful. Now, let's copy these two lines of code, highlight and copy, within the impute field for the e mail, past it here. We have to change the name to e mail because this is the e mail field. For the phone field, so we have to paste it here. Of course, we copied earlier on. Here is going to be state dot phone number, and so on and so forth. State dot subject. Lastly, this is for the message. Let's do it here. Ste dot message. Simple at that. Check it out on the browser. Now, let's see. Everything is working. To be sure of what we did, we have to console log the state. Scroll to the top. Right after the handle change function, we're going to do console dot log state. Let's I forget, the handle phone change should be called within the phone field and not the handle change. Let's go back to the phone field. This is the e mail. T. This is the phone field. We do not need to call the handle change because the handle change is for the rest of the input field and not for the phone field. I'm going to do handle phone change. Having done this, when you save on the browser, let's quickly check out the console. Now when we begin to type something within the input field, you will definitely experience the updates and the changes. Here is going to be for the name. I'm going to do John. Take a look at the console. Can you see the way it updates? For the e mail field, I'm going to do Can you see the way to update? The Fm feud is working perfectly fine. For the phone number, I just have to impute anything, and for the subject, I'm going to do text in the form feud. It is walking. Take a look. It is indeed working. All right. Let me see. Everything cool, everything fine. What a second do we have to implement? The farm field is working and it is working perfectly fine. This is off for now and hope you enjoyed this lecture. See you in the next lecture. Stay focused and list care. 71. Node amiler API Using Nextjs13: Hi there. Welcome back to class. In this section of the course, we will go ahead to create the API. Quickly, what have I do? Let's get started. Open up the VS code, and please do all to open up the explorer. Open up the SRC, which is the source directory. Now within the app, we are going to create a folder called EPI. For some people, you may have the EPI already created when we generated the next GS boiler plate from scratch. I deleted mine simply because I'm going to start from scratch. If you already have the EPI directory within the app folder, good for you. But if you do not have it, all you have to do is to click on the app new folder, EPI. Within the API directory, we are going to create another directory. All right click New Folder, and I will call it Contact. Within the contact, right click New file. Again, within the contact. Right click, New file. I will call these route dots GS, simples do. Before we proceed to create the API, we have to install the necessary packages. I'm going to close down the explorer. Common B to close it down. Click within the terminal. Then contra C to stop the currently running server. I'm going to do MPM install. Node mall space. We also need the dot EMV, so I'm going to do.env, just like this. It the enter key to get it fire up. Done Install successful. Let's check it out. Open up the package.jf. Here is it. Let's scroll down. Here we have the EMV. And here we have the node Mailer. Close it down. Let's close down the terminal. At the top, we are going to import next response from next slash saver Having done that, we have to export this file. Export a sing function post. It's going to be a post request, so within, we're going to take in the request, and here exactly is where the phone begins. Let's quickly import the EM V. We're going to require do en V dot config. Here we're going to have a constant. Data equal weight. Request dot JS. We're going to do node mail equ. We also have to require the node mailer. Require Node Mel. Han't done that, we are going to have a tri block. Within the tri block, we have to create the transporter. I'm going to do Node Ma dot. There is a method within the Node Mela called creect transport, and here is the method. Within this method, we are going to take in some properties. Properties like the pot, which is the pot number, is going to be 465. C This stuff. I don't know keep disturbing. The host, in this case, is going to be SMTP gmail.com, the service. The service is going to be what guess. G mail. All of the stuff, we have to assign it to a variable. Here I'm going to do Cs transporter equ, right. So we're just assigning everything to the sky here code transporter. And within the node mailer, we accext a function, create transport. Within the function, we took in this object. And this object here, we have the property of ports, and we assign it value f65. The host is sp and the service is Gmail. Simple and short. For sure, whenever we have a tri block, we definitely have to catch. We're going to do here cut. What do we catch? We are going to cut some errors, but not now. Let's just set it up for the meant. Right here, we're going to take in the property of. Oops, take a look. You have to separate it to put the coma. We in the, We are going to have the user, and this is going to be my Gmail. Please do well to include your G mail at your end. Yeah. I'm going to do aztec@gmail.com. You can hit me up with this Gmail address and Make sure to replace it with yours at your end. C, we also have the pass property, which is the password, single. For the pass, we have to generate the google app password. Let me show you quickly. Open up your GML account at the top right corner of the screen, if you are going to see the profile. Click to open and then manage your Google account. At the top left corner of the screen, you will see the menu. R W in the menu, click on security. Screw up. Make sure your two step verification is on. As you can see, I have mine alt. It means my two step verification is on. Click to open. Here it is accent for the password. I have to include my password, and then here on next. Scroll down. Right at the bottom, you are going to see the ap passwords. Of recents, I have three a passwords generated already. For teaching purpose, I have to do it again from scratch. Now click on this right arrow. Within this field, you are going to specify the app name. In this case, I'm going to do baba portfolio for teaching papers. Now, let's click on Create. Here is the generated a password. Highlight, copy done. Take note, do not copy my app password. Simply because after this lecture, I would definitely delete it. It is going to be of no use. Generates at your end and then go back to the code. Within the pass, paste it here. Make sure to remove those spaces in between like this, like this, and like this. Beautiful. Having done this, The next line is to call the send mail function. For that, I'm going to do transporter dot, send mail. So we are just calling the send may method that is found within the node mailer. So within this function, we are taking an object and within the object, we are going to have a property from which means where the e mail is coming from. In this case, it is going to come from the impute field. Yeah. So I'm going to do data dot name, separate it with the comma. This is going to my Gmail account. All right. I'm sending it to my Gmail account. And please at your end, you have to replace every occurrences of my GMil with your own Gmail and every occurrences of my app password with your own password. Next, we have the subjects. I'm going to do inquiry from Duba portfolio. Separated with the comma. I don't know why this keep obstructing the view. The text right here, let's use a ti like this. Here, we're going to use an empty string because I do not want anything within. HTML. Let's use the backtick. Within the back tick, we are going to design the template. The email inbox template. I have the design already, so we just have to copy and paste. It is just a HTML CSS that everyone can understand easily. Within the code resource dot MD, we have to copy from the opening HTM tag, which is from lines 8722, lines 928. Again, can check it out. Copy. Now we have to paste it within the ba ti. Here we have the body, we specified the font family. We have the emo container. The max width is 600 pix, we have the margin, the padding, background color is white, and then the box shadow is the consistent blue that we have been using. The border radius is ten pixus, which will make the corners to be a little bit curvy. Here we have the P tag, the font size, line height, and all of the stuffs that you know. We have the UL and the LI tag. The signature and the rest of them. Now we have a UR tag, and by the way, this is a P tag saying a Duba by digital, which will appear at the top of the theme as the header. Here with in the UR tag. We have the LI tag, and also we have the strong, which will make this label to appear thicker and more visible. Now we have the data dot name, data dot e mail, phone number, subject, and message. This will appear in accordance to your fields. So please do not mistake anything here. Even the spellings, check it out carefully and make sure it is well done. Having done this, scroll to the top. Now let's assign it to a constant. Cost info e quo weight. It means it is going to return a promise. Therefore, we have to await it. Everything cool right now. Scroll down. Here we are going to check if the message is successful or not. If the message is successful, If info dots message ID, we are going to return. Next, respond dot Jason. Now pay attention. If the error property is set to force, which means if the message is successful, then we are going to have a toast message. Message successfully sent. Thank you for contacting a Duba bar. Simple as that. As L et's quickly copy this written. Highlight and cop. Come here and paste. If the error property is set to true, The toast message will be something went wrong. Oops shown an error within the e. Guys we have to take it down. Within the catch plug, we have to catch the error as well. Cons log. We have to log the error. Then highlight this error message and paste it here. Simple as that. Now quickly format the code, and everything looks clean. Now we are done creating the API. In the next lecture, we will go ahead to consume it. See you in the next lecture. 72. Progress Bar: Or come back to class. In the previous lecture, we created the API. In this lecture, we will go ahead to consume the API, write within the contact page. Quickly open up the contact page. Write within the pages, contact page to cheers. Common B to close down the explorer. Scroll to the top. First, we have to import We have to import toast container from react Tify. We also have to import the toast. This is for the toast message. Lastly, we're going to import react, Tf slash, dist slash, react Tii CSS. Having done this, let's quickly consume the API. Now we're going to have a function. Wipe off the console log. We are going to have the handle submit function. Costs, handle submit. Q, set it to arrow function, within the parameter of this function, we are going to take an event, and then I'm going to do event dot, prevent de Fd. Quickly, we're going to set sloding to true. Recall that we have the sloding state variable in the previous lecture. We're going to let data equa, set it to an empty object and within, we are going to spread up the state. Of course, you know what all of this holds. Here is it. It holds the name e phone number, subject message. Here exactly is where we will hit the API. Now, taking the double quote and I'm going to do slash API. Let me show you, we are trying to hit this directory EPI and the directory contact. This is the route that we are trying to hit. Slash contact. We're going to have a comma right here and then open and close bracket. Within, we are going to take in a property method. Of course, the method is going to be posts, another property, headers, and here is where we will implement the content type. Application slash, J text slash plan. We are trying to configure the kind of test that we want to get. For the content type content type. It is going to be application, slash, sin. We are trying to get the stuff in Jin format. Simplest that. Right within the body. Body. We are going to do JS dot string. We want to convert the data in Jin format into a string. Look at the body is showing an arrow, simply because we have to separate it with the comma over here. We're going to have the ten. This is going to be on a sinc. So the response. Within, we're going to set load into force. Cost response equa, weight. Then I'm going to do rests in. If the response do not return an error, we are going to clear off the fields and then to a SX message. Else, we also have to c the f and then an error message. Understood. Let's practicalize it right now. If not respon error, Of course, we have to clear the state by calling the Cleste function. After that, we're going to have a toast message. This is going to be response dots message. If there's an error worth the process. We also have to clear the state, and then we have to toast the error message. Something went wrong. Here, we are going to catch the error properly. We the catch block. We're going to take an error. Set loading. We're going to set loading to fall. Also we have to clear the state. Copy exactly this toast message, highlight copy, come here and paste. Having done this, now it is time to check it out. Right here, we are going to render the toast container. So it will appear at the top right. All right. Having done this, the next end line is to implement the submit. Scroll down within the form. Here I'm going to do submit, we are going to call the handle submit. Simple as that. Something I want to bring to your notice is that, let me show you. You can see this is the e mail field, and this is the phone field. Now within the subject fd, we have to replace the type to text. Having done this, everything is going to work at fine. Within the terminal, I'm going to do PM Run Dev. Start up the application at your end. Let's go back to the browser. Scroll down. Here, I'm going to do Peter. Let's do peter at g. Let's sell a random number. Let me say Te stander API. So what I'm going to do is to highlight everything within this place copy and paste. Hit on the sent button. Take a look. At the top right corner of the screen, it says message successfully sent. Thank you for contacting a Duba bar. I'm so happy about this. Let's go back to the Gmail. And here is it. Click to Open. Can you see? Perfect. Guys. The name is Peter. Peter at gm.com, which is the e mail, the phone number, the subject, and here is the message. Recall the P tag within the API. Here is it. Let me show you. Go back to the route, and then this is the P tag. Here we are trying to display the datas. Simple as that. We have the name, the name. This is the name label. And we have it Peter, which is this guy, we rendered in between the LI tag. We have the e mail, which is this e mail label, and then we have the data dot e mail, which we rendered within the inner HTML of the LI tag, and here is the e mail. And so on and so forth. Friends, everything is working fine as expected. 73. Call to action button implementation and logic: All right, so we are done with the design and everything is working perfectly fine as expected. Super fine, super fantastic. I love every bit of the design. Basically, what we are going to do in this lecture is to implement the core to action boarding. The idea is simple. When the user scroll down the application, the page y offset is going to be greater than zero. Then if the page offset is greater than zero, we have to display the car to action button at the right d of the screen. That when the user click on the c to action button, the application will smooth scroll to the home component. Simplest that head on to VS code unless implemented quickly. VS code. Quickly open up the component. Here is the car to action directory. We created it in the first few lectures. If you do not have this directory, all you have to do is to right click on components, new folder, and then name it to action, just like this. Beautiful. Within the car to action, right click, new file. Call to action S. Generate the functional component quickly. We're going to import the U state hook use effect. Having done that, let's quickly go back to the header component and then copy the handle scroll function. Header header gs. We also have to copy the state variable, for the scroll event. We have to highlight from lines 11 to 24. Copy, go back to the C to action, and then paste it right here. Right here, we are checking if window dot page Y of set is greater than zero. If window dot page i of set is greater than zero, then we are going to update this guy to true, and if this guy is true, we have to do something. Now we're going to do if s crow is set to true, then we're going to return a UI. W in the parenthesis, we're going to have a D, give you the class name. The background color is going to be red 500. This is just my specification. You can do something else at your end. We want it to be fixed. The bottom is going to be eight. From the right, we want it eight as well. Let's quickly, close down the explorer. The cos, let's make it point. The z index so that it can appear at the top of or contents. Let's make it fit. Close down the D. What we need to do right now is to copy and paste the SVG within the D. Go back to the code resource dot MD. Scroll to the bottom. I think we have it here. Here is it. Copy the SVG. Highlight copy. Win the D paste. S. We're going to have nothing. Quickly format to the code. When you save, let's see what we have on the browser. All right. We have to render it with the page, which is the pay page and here it. Scroll down. I think we should do it right after the testimonial. Here I'm going to do call to action. Make sure to import it at the top, and here is it. Save on the browser. Now when I scroll the application, here it. Can you see at the top right corner of the screen, you will see the call to action porting. But when you click on it, nothing happens. Let's quickly implement the click. Call to actions. Screw to the top, right where in does D We're going to have the click, and when a user click on this botin, we want to smooth scroll to the home component. So I'm going to do window dot, scroll 200. You know that let me show you here. When this is greater than zero, it is going to update the initial state to true. When the initial state is true, this de over here will appear at the right d of the screen with the boting. Now the idea is this. Let me show you. When I scroll the application, this guy here will appear. Now on y axis, the application is greater than zero. But when we click on this botin, we want to equal the application on y axis to zero. We want to return it to zero. That exactly is what we are doing right here. Initially, we did that when this guy is greater than zero, this guy will be set to true, and then this will appear. Now, when this appear, it means it is greater than zero. When we click on this DF, we also want to send it back to the normal position. Think that is how far I can explain this. So yeah, when you save the application, check out the browser now, click on the botin and bomb. Can you see? So anywhere you are on the application, when you click on this butting, you will always return the application to zero on y axis. Which means you will always go back home. I think this explanation is clear enough, honestly. L et me implement the animation for you. Go back right here on the Steve. I'm going to do animate. We are going to do bound. Simple as that. Now, take a look. The call to action button is bouncing happily at the right end of the screen when you scroll the application. I like it. Another thing I want to do is to make the icon a little bit sticker. So we can do it over here. Instead of 1.5, we can do five. Now it appear broadly, and it looks nice. So this exactly is the intention. 74. 49 Loading bar : He so we've implemented the form. Also we have tested the API. Everything is working perfectly fine as expected. In this short lecture, we will go ahead to make the form more interactive so that when the user click on the senboart in, the loading bar will appear and that gives an insight that something is happening behind a scene. The user have to wait to see the outcome. Sounds good right. Had onto Vs code unless implemented quickly. Scroll down to where we have the form. And here it. We also have to scroll down. Let's implement it right here on top of this botin. We are going to implement the progress bar based on condition, and the condition is one sided. After filling the form, when the user click on the send bolting, the loading bar appear. It is going to be done based on truc, and that is quite simple to implement. Now we're going to do. I loading, and n, then we are going to show the loading bar. We are not going to have an L. So we are going to have a d, give it a class name. We in the d, the margin bottom is three. The text, let's align it to center. ML, I'm not talking of ML in terms of Mercedes, but margin left. W6h6. Let's give it the border. And the border color border, blue 500. Let's make it 600. The border is going to be solid. And then we're going to do animate, dash, spain. Close down the dev. Okay, check it out on the browser. Load, quickly fill in the form. Now, let's click on sand. Oops. Take a look. Can you see, and the message is successful. I do not like the shape of the loading bar. What we are to do right now is rounded. Let's have it. Again, fill in the fd. Here on sent, and take a look. Can you see, and here we have the post message. Everything is working perfectly fine as expected. Let's go back home. Take a look. Tommy. Doesn't it look good? Of course, it does. All right. One last thing we have to implement is the call to action butting. Let me show you, when I scroll down the application like this, the call to action butting will appear at the right edge of the screen. And when I click the call to action butting, it is going to smooth scroll to the home component. Wever you are, for example, if you are down here, it is going to appear at the right edge of the screen. When you click, you will smooth scroll to the home component. Okay, Let's round it up by implementing the core to action boarding. 75. Header Fixes (Assignment): Hi there. Welcome back to class. In this short lecture, we are going to correct the header behavior on mobile device, and also when you open up another page. Let me show you quickly. On mobile devices, when we scroll to the top like this, the header still appear at the top. We don't like that because we already have the navigation over here, so there's no need to show up this space here. The menu is here already, so there's no need for all of this space. We have to take it off. That is behavior number one to be corrected. When you spread up the application, for example, let's go to Higher ME section. Click to open. Now when you click on the menu, The height of the diagno dra is no longer a full. And also, you will realize that the menu has actually dropped down a little bit. That is not what we want. Okay? The first thing here we are going to do is to correct the behavior on mobile device. Let me show you. Can you see? Take a look. It doesn't look nice at all. So you go back to VS code, open up the component. Header header dot s. Scroll down and let me show you. Right here, we have an e condition. We said, I scrolled is set to true, which is when the application on y axis is greater than zero. When you scroll the application, we are going to assign it a class name head, else, no class name will be assigned. Right here, and we are also stylizing it in a different way. We said if the scrode is set to true, the background color will be white, and then else it is going to be transparent here. Also, if it is true, we are giving it this box shadow. I don't think this is necessary here. Place a comment on it. Save the project. Check it out on the browser. Can you see? Everything is working fine on mobile device. And now it brings up another problem. When you maximize the application on large device, scroll to the top, can you see? Now we no longer have that transparent pack ground. And that is not nice because it makes these menus to actually kind of appear weird. Can you see? It doesn't make sense, so we have to give it a pack ground when you scroll the application on large device? Quickly go back to VS code. Following this condition, if scroll is set to true, we are going to stylize the head ashore. Here, so quickly go back to the global CSS. Here is it. Click to open. Scroll down. Now we have to target a particular break point. Open and close parenthesis, mean dash w on a break point of 12 80 pixels. We are going to stylize the header show, head show. Take note, the show is on carb, and by the way, we have to use the dot here. Here, the background color is going to be white. The box shadow. Let's copy from the header. It is going to have the exact same box shadow over here. So paste it within when you save the project on the browser. There are these. Can you see it's working? I like it. This is beautiful. Take a look. Now on mobile device, you're going to have a very beautiful behavior. Can you see? Take a look. All right. I have to reduce this guy to 75. A Beautiful. Okay, fine. The next end line is to correct this behavior over here. The diagno draw on a different page. Can you see? These things are not nice, so let's quickly head back to the diagno draw dot. Close down the global CSS, close down the header, and then we have to open up the diagonal draw. It is actually very simple. Let me show you here. I don't know where we have this condition. But Oh, boy. W in the header. We have a condition here. We said, if path name is a quo, this is over here, which means when the user click on this path name, we assigned it from top to be zero. Es we assigned it from top to be -98 pixels, and that is why you see this behavior. Take a look. This blank space over here at the bottom is -98 pix. That is the reason the menu is not covering up the screen. When we remove this value, this negative value, let's just make it zero. When you save the project, now it is covering the screen, but we have another space at the top. Don't worry, we definitely have to fix it right now. Now, go back to VS code. Open up the diagonal draw Cs. Within the diagonal draw, we're going to do top. Let's make it zero, just like this. When you save the project. Now for the diagonal draw, everything is working perfectly fine as expected. But for the menu, it is also the exact same problem that we just fixed right now. Go back to VS code, within the diagonal draw dot S. We have to search for the place where we have the condition. I think it should be at the top here. Yeah. It is at the top. Can you see when the path name is equal, this guy. Now the top here, we set it to zero, and else, we set it to 100 pixels. It would be super amazing if we set it to zero. So when the user click on the menu, it is going to appear from top zero. And else it is also going to appear from top zero. Can you see? It is walking. Perfect. So let's go back home. We have to test it out. Okay. Let's click on this guy. Take a look, it is working. Then it is working Pavel the fine. On a mobile device, it is also working on iPad Mini. It is working. This is super clean, super amazing. All right, we are done with the head. And now we have the expected behavior. Good. In the next lecture, we are going to correct the card on mobile device. Let me show you on mobile device. Can you see? The text at the bottom of the card disappeared. So that exactly is what we are going to fix in the next lecture. It is actually a very quick fix. See you then. 76. Slider Fix on Mobile Device: Welcome back to class. In this lecture, we are going to correct the behavior of the card on mobile devices. After that, we will go ahead to correct the phones. As we a mobile device, you will no longer see the P tag. Do you see? So we don't want it like that. Go back to VS code, open up the components, within the components, open up the slider card, and then slider card to S. Scroll to the top R here, where we have this D. Let's make the height to be 280 pixels. When you save, on the browser, they are the. Everything is working perfectly fine. Now we have corrected the behavior on mobile device. Okay. Let's quickly go back to where we have the P tag, which is the title over here. What we should do. Let me show you here we are supposed to do font, but pypographically, we made a mistake and we did front. So this is font. When you save the browser, now, it appears like this. Can you see it's not too bot. This is the standard. I like it. Again, take it out of mobile device. Everything is well aligned. Take a look. All right. So for the testimonial on mobile device, I do not want them to appear. By the way, that is my opinion, so you can do it at your end anyhow you want it. So for me, I'm just going to take off the testimonial on mobile device. The way we can do that is actually very simple. Okay, testimonial testimonio. Within this df, I'm going to do heating, but on medium device. We are going to have a display block. When you save, check it out. Now we have it on larger device. But on more by device, it is going to disappear. Everything cool here. All right. Looks nice. Let's check it out on iPad. We have it on iPad. On iPad A. Half the thing appears nicely. Oops. I think we should Okay. All right. Take a look. This is professionally and expertly designed to work in all devices. Amazing. This is off now. Make sure to read and review the scores. Goodbye, and holistic care.