The Ultimate React Js Responsive Portfolio Website

1. Course intro : Hi, Welcome and thank you so much for your interest in my course. In this course, I will teach you how to build a responsive portfolio website using different technologies such as React, js are USGS, Bootstrap, load JS, express JS and minima. And at the end of this course, you will be able to deploy the website on the server, which implies your portfolio website will be accessible on the Internet. Sounds good, right? Beautiful. First two images. 2. Demo of project : On the screen is a suddenly the application that we are going to Butte in this course. And I wanna start by unveiling one of the impotent future of this application which you cannot despise. And this future is the mail-in functionality. So when I hit on the high army aborting, it is going to smooth screw to recontact me component where your potential client will be able to communicate with you and to hire you. So let's give it a try by clicking the high army aborting. Do you see the way it's smooth scroll, I love it. So right here, we are going to proceed by clicking descend bought in to check if the firm is well-validated. Take a look at the top right corner of the screen. You will see the toast message and it says, please feel or the fields with the name fields for email. So before I click on the Send button, I have to show you my inbox for clarity. Here is it? And for sure there is no new message on my inbox. Can you see her onto the website? Let's give it a try by clicking the same boarding. Take a look. Can you see it says, thank you for contacting a helix. Let me take you down to the inbox. And here is it. Click to open. Here's the sender's name. Send us e-mail, and here is the message phrase. This is one of the most important future of the portfolio website. Don't worry, I will teach you how to implement this functionality from scratch. Her onto the website. Her right, So now let's click on the call to action bought in to Smooth Scroll to the home components. Let's check out the gate region bought in roulette. Click on the Get erosion board in. It is going to download my resume. And I'm going to click to open. So here's my resume. You see, right here we have the social media icons. And when you click on any of the icons, it is going to take you down to the corresponding page. And right below the icons, we have the name and the beautiful type effect with different emojis. And now my Hoover and the profile picture, it is going to zoom out to enhance visibility. Now I hover and then I take it off. I hope I again, I take it off. Let's quickly move on to the About Me component. And then when I click on the About Me, it is going to smooth scroll to the other component. Here is the About Me, a component where you would call your potential claims all about yourself. And below is the resume components. This component is very important simply because this is where you will share your experience with your potential clients. You have to show your work history, your programming skill, projects, and interest. So on the waitlist tree, you have to display how long you've been in the industry and the company in you are currently working with. For the programming skill. You have to show your skills based on your ability. And everything here is nicely customized. But projects, this includes the various projects you of what tone you are going to show, the start date and the end date. So here, personal portfolio website, nor by a shop e-commerce website. And over here, we have the interest, which implies your hobby. And down here we have the testimonial component. And we will have the testimonial scrolling from the right edge of the screen to the left it off the screen. And these are what your client says about you. Lastly, we have the contact me component, and this is where your potential clients will be able to get in touch with you by sending you emails. This functionality is indeed fantastic. All right, so let me show you the Fed in animation. And when you scroll down the website right now, and when I scroll down, you will realize that the components will feed DUC, right? So let me reload. Take a look. Again. When I scroll down, the original component will fade in. Do you see the testimonial component? And the component? Okay, So let's take out the more responsiveness. Let's take it out on iPhone five. For 678. With these, I can assure you that the website is 100% responsive in our platforms. So if you want to check out of this portfolio website, at the end, here is the address. You can quickly type on a SET Engine, it Ababa dot herokuapp.com. And then this elegant portfolio website would be displayed on your screen. And now, who am I? My name is easiest and I've got over seven years of experience software development, haven't worked in different companies as a full-stack developer. So I've got the experience it takes to walk it through this course. In this course, I will be your instructor. Don't worry, I will hold your hand to Butte this classic portfolio website from scratch to the final stage of deployment. And at the end, you would be able to deploy the website on a lifesaver and as well push the source code to GitHub. Having said all these, quickly enroll and let's get started. See you then. 3. Ask Questions: Asking question is so important simply because it enables you to ln in the right direction. So whenever you run into trouble, always do well to ask questions before you proceed with the next lecture. However, I clearly understand that you will be Busey Lenin this course. But I deeply appreciate if you could spend a few spare minutes of your time to read a leaf, a harness review about this course. And that way I get a feedback from you and hopefully McManus cause Beta her right. So without further ado, let's get started. 4. Create React App : So now we're going to start building the application. And in the first few lectures, I realized that most of you guys probably know these tabs. Simply because I am locked off with the basic staring from Create React app set up. So please do bear with me because I just want to explain the stoves for the benefit of people who are new to React js. And the reason is I want to take everyone alone. So quickly had on to React js.org. And here's the address. Proceeds to documentation. Here is it. You just have to click on dogs? Alright, so here on Create a New react up. Here is it at the top right corner of the screen? Click. So the first thing we're gonna do right here is to basically generate a boilerplate of a React application, which comprises of the libraries, the initial files and folders to run a simple React boilerplate application. On the screen is the React documentation. And of course, going through that in this lecture is not relevant to the purpose of this course, right? So if you're a newbie, I highly recommend you read up the documentation so as to have a claim knowledge of what a React js is all about. Quickly scroll down unless continuum. Over here, the MAX command that would be used to simply run Create, React app without having to install it on our CCE tail. All right, So let's get started. Go back to your desktop. And over here, we're gonna create a root directory called portfolio Pro. Right-click here on new food. Portfolio pro. Technique phrase. When naming your project, always use a descriptive name that tells the purpose of the project. So you will be able to recognize it in the future. Okay, So the next in line is to open up this directory with the code editor and the perfect code editor I'm going to use in this course, lease. So VS code. Feel free to use any code editor of your choice. But for me though, VS Code is my favorite. And when you look at the top-left corner of the screen, you will see that directory of a hair portfolio Pro. But for some of you, you may not see it over there. So all you have to do is to drag and drop the portfolio directory down into the VS Code. So you just have to drag and then drop. So when you do that, you will definitely see it over here. Now. Maximize the VS Code and then close this down. Open up the VS Code integrated terminal. And on Mac, you can find it here at the top menu. And then new seminar. Right in the terminal. We are going to write the command to install React js. And I'm going to do MDX, create dash, react dash. We will not install the React application in a separate packet. And I'm going to name the package client. You can decide to change the name of the packet at your end. But I highly recommend you stick to the convention client simply because React js has to do with the front end, which implies the UI part of the application. All right, so reactive distillation is ongoing. And these would definitely, I just have to fast forward to the lecture. React js installed successful. To proceed, we have to follow this instruction. Okay, so first we have to cd to the client directory where we installed the React js and then hit the Enter key on your keyboard nest. We have to start up the front end, dev server. So we're gonna do MPM, start. Hit the Enter key on your keyboard to get it fire. On the screen is the London page. And by default, the server is running on localhost port 3000. Here is it. Ok. And now we are done with the installation. In the next lecture, we will begin to unveil the React boilerplate. This is all for now, for this lecture. See you in the next lecture. Stay focused and take care. 5. React Boiller Plate : In this lecture, we are going to unveil the React boilerplate. So quickly open up the client directory. Let's proceed with the package.json file. This is where all the dependencies that concerns the front end will sit on. And over here we have React 17.2 is stored and nest is, they'll react don't though React DOM is used to work with the document object module in the brows up. And here we have the React scripts and the web vetoes. Down. Here is the scripts are OK. And here is the start which we run that in the previous lecture to kick-start the server. Down here is the BWT. So when we do npm run BWT, it is going to build up the static assets for deployment. All right, so in the future, when we want to deploy this application on the server, we will make use of the abuse. And over here we have the test and Egypt. Actually, the eject is necessary when you will eject from Create, React app and customize your web part. Quickly proceeded to the index.html, then head on to public and haze it. Scroll down. So before we proceed, we have to understand what reacts GS is all about. React JS is a JavaScript library that is used to compute a single page application. And here we have a div with the id of root. Quickly, let me show you what happens on daddy food. Proceeds to the source, which is the SRC. Open up the index.js. And at the top we have React imported from React module. And as well the React DOM from React DOM module. And the React DOM has a method called render. And this random method takes in the main component. Here is it. And the Min up component is imported at the top. This is it right here. Okay. Now open up the app js. I'm just going to set it out. Command T or Control T on Windows. So we have to set for AP dot js. Do you see now we have some GSS over here. So the difference between the CSS and HTML is the class name attribute. In HTML, it is a class, but right here in GSS, it is class name because the class is a reserved keyword. Earlier I told you that reacts is used to compute a single-page application. The question is, how does it work? Let me show you quickly. Now, everything here in the ArcGIS is being passed down to the index dot js. Let me show you. Can you see here is the app.js. When the app.js is rendered over here, it is going to pass down to the index.html through this line of code, document.getElementByID of root. So we have to open up the index dot HTML. Now, this is the div with the id of root. When it is passed down to the index.html, then it is going to be rendered over here in between this div with the id of root. So in summary, as head on to the RGS, whatever we render in the RGS, okay. Would be passed down to the index.js sold when the object is rendered, if I hear it, is going to pass through this line of code and then pass all the content in the app.js down to the index.html, right? Into this div with the id route. So the index.html is what is displayed on the web. So quickly, let's clean up the code. Highlight, wipe it off. And then from lines 18 to 26, wipe it off. Wipe it off. And the title portfolio up, screw up to where we have the content. And then we're going to do. So now we have to delete the files that we do not need in this course. We do not need these over here. Hold down the Command key on Mac and the control key on Windows to select. And then we do not need the logo dot SVG, the setup test dot HGS. Right-click, Delete. All right, so Heron to the UP GAS. Here is the missing far. We deleted it in the SRC and we imported it here in the UP GAS. So we have to delete the import as well. Safe. So we have to highlight from the opening head tag to the closing header tag. Wipe it off. Save. Head on to do plaza unless check it out. Her right. So this is the result we are expecting from this lecture. In the next lecture, we will begin to set up the structure of our project. See you in the next lecture. Stay focused and take care. 6. Setting up the project structure : We're going to set up the structure of our project following the best practices. Right-click on the SRC, hit a new folder. And here we are going to create a folder called portfolio container. Right? In this portfolio container, we are going to create another directory called About me. Right-click. New Folder. About me directory will contain the about me. It's CSS file and the corresponding images. That is really fun story about MY component. So we need another one. Right-click on the portfolio container here on New Folder. And this would be called contact me. And of course you should know that the contact me as well and we contain the component, its CSS file and its related images. Right-click on the portfolio container again. New folder. And this will be called home. Okay, you just have to follow my lead. Resume, portfolio, container, New Folder, FUTA. And the nest is testimonial. Now we're done setting up the structure of our project. So in the next lecture, we will start building on this structure. Take care. 7. Profile Component 1: Following the structure of our project, we are going to start with the home component. And as you can recall that in the previous lecture, we created all of these directories right in the portfolio container. Here is it at the left edge of the screen, right in the Explorer. Beautiful. Now the first one we're going to do is to create the profound component. Right-click on the home directory here on new file. And this would be called profile dot js. Technical phrase, when mnemonic component always use the pascal naming convention, which implies you capitalize the first letter of every word. That sounds good, Beautiful. Now we have to create it corresponding CSS file. Right-click on the home directory again. Here on New File. Profound dot css. Her onto the profile GAS and hates it. Here we are going to use the shortcuts to generate the React js functional component. I will have c, and here is it. Hit the Enter key to select. For some of you, you may not have this working. All you have to do is to install a very powerful plugin called the React Native react readers snippet. Let me show you how to install this snippet had on to the Explorer. And if I hear, you have to click on the extensions, then you see right here at the bottom left, click on the extensions. All right, inside the set box, we are going to search for React, Native and haze it already. I have it installed on my machine. So that is the reason you are seeing the uninstall bought. When do you see? But at your end, if you do not have it installed, you're going to see the install boating. All you have to do is to click the Install button and have it installed on your VS Code. And for some reasons, if it did not work for you for the very first time, all you have to do is to restart VS Code. Now unless close it down. Over here, we're going to give this div a class name of profound dash container. And right, in this div, we need another div with the class name of profile parent. Div. Give the class theme profile dash parent. As sadly. Another one, div with the class name, profile dash details. And lastly, we need another div with the class name of cornrows. Perfect. All right, so let's hide the explorer or come to be on your windows. Now, what we are going to implement is the social media icons. Let's get on to the demo project. This is the address of a Hey, it will portfolio dot herokuapp.com. And this is what we want to implement at first, the Facebook, instagram, YouTube, and Twitter. Toronto VS code unless do that quickly. So right in the div with the class name, of course, we are going to have the a tag. Now. We are going to have the I tag. Let's give it a class name of f, a f dash, Facebook dash, square, lambda less than line is to duplicate this code four times. So I'm just going to highlight from laced 9 to 11. Press hold the Shift and Alt and then tap the down arrow key on your keyboard four times. Can you see this is exactly what we do to duplicate code in VS Code. And over here, we are going to change the class name to FA. Google dash, dash squared. And now we need the Instagram icon. F8 dash is the ground. And we needed for the YouTube. And lastly for Twitter. Save. Now let's run the application to see what we have on board had on to the terminal. And then we have to cd client, MPM. Start. Let's wait for it. Right? So if your icons are not showing up, you know why her into VS code? And let me show you over here. We have used the Bootstrap classes, which is the FA, dash, Facebook, Google Plus Instagram, and the rest of them. So for we to use this classes, we have to link the project with Bootstrap. Open up the materials directory. For me. The materials directory is located right on my desktop. And why is it? So I just have to open. This directory is right there in the resource. So check it out and download this directory. It contains all the necessary files that we are going to use in this course. Now opened up the could help her. Hair, is it? And this is the Bootstrap link. Copy heroin to VS Code command P to pop up this little search box at the top. And then we're going to set for index dot HTML. And here's it. Beautiful. Paste it here. Okay, so we have to format the code to look a little bit claim. Right-click. Format document with previa. Okay, now the code looks very clean. I like it. And if you do not have pedia on your VSCode, inherently Explorer again, and let me show you how to install it. Explorer and then click on S. Tension is right here in this sandbox. You have to set for pre-order and haze it. I have it installed already. So click the Install button at the end to have it installed on your VSCode. Close it down. Now we have to render this component in the js P and then set for our app.js right here in this div. Okay, Before we do that, we just have to import import profile, right? I haven't imported automatically than worry, I'm going to do it from scratch. So I just have to wipe this off. Import profile from dot slash profile container slash home slash profile. And here we just have to render the component profile with the self-closing tag. Save her onto the browser and let's check it out. Take a look. It appears right here at the center of the screen. Let's give it a try by clicking on the icon is Facebook, instagram, YouTube and Twitter. The links are not working. You know why Heron to VS code and let me show you. Proceed to profile. And over here, right in the high potassium or friends. We have to copy and paste the corresponding social media link over there. So for the Facebook, can you see I just have to copy the URL of my Facebook pit. Come here, wipe off the pound sign, and then paste. So I'm just gonna do it for the YouTube. Here is my YouTube channel. So here is the icon for YouTube. Please do make sure you paste the link and the corresponding icons. Okay? So I just have to do it for Instagram as well. So you can go on to do this at your end and have everything done. Now for Instagram. Wip of this pound paste saved, had on to the browser. Open up the portfolio, up, reload. To give it a try, Let's click on the icons one more time. Facebook. Can you see? So you just have to go back up. Let's try it on YouTube. And Tierra, right phrase, everything is working as expected. So in the next lecture, we will proceed with the rest details on the profile component, including the reactor typical. See you in the next lecture. Stay focused and take care. 8. Profile Component 2: In this lecture, we're going to implement that type effect. Can see. And also we will implement the short description, the bodies and the profile photo. Toronto VS code. Unless implement that quickly. Before we proceed, we have to do something. Screw up. And let me show you right here this div with a class name of profound details. Can you see? Now I want you to highlight common eggs or Control X to cut it off. And then come here, paste it right here. So this is exactly where it should close. Save her onto the browser. Actually everything looks the same. But if you did not make this correction, and when we begin to stylize it, it is going to affect you badly. So right after the closing div of className, profile, database name, we are going to have another div, give it a class name of profile, details, dash, role. And now we're going to have to implement the type effect. We have to install the React type of goal had on to the terminal and then come to see to stop the current running server. Now I'm going to do npm install. React dash. Installation is ongoing, so we have to wait for it. Installed successfully War. Scroll to the top unless import the pickle. Scroll down. Now we have to implement it, right? Hey, I prefer to use the self-closing tag. So over here we're going to have it loop infinity. The steps, set it to empty object. And then we're going to have an array of items, which is the details to be displayed based on time. And here we are going to have a full plastic Dave, separated with a comma. We want it to be 1 second. So every second we are going to have a display. So this guy would display for a second. And then, okay, highlight, hold on the Shift and Alt and then tap the down arrow key four times. Alright, so here we are going to have full-stack developer horror, right? So what happens here is this, this guy is going to display for a second, and then this guy will display is silicon. So it is more like all of this in the skew is going to wait for every cell current. So when does Guy display a circuit is gonna go off and this guy display a second, it goes off. And just like dad, haha, right, solver Nestor line is to implement the emojis. So to do that or mark is very simple. So please, if you are leaning on Windows, you just have to hold on. So if your mug, follow my lead. Now, place your mouse down here and then go to the top right menu. Here on Edit, emoji and symbols. Here I'm just going to choose this guy. Can you see very simple to implement? And here also, I just have to choose omega dot. Take a look. Okay. So now we're done with it. So if you are working on Windows, only have to do is to copy and paste my code. And you are going to have this displayed on the web. No, head on to the terminal. We have to start the application one more time. Mpm start. Beautiful, I love it. Can you see take a look. Harold, to VS code unless proceed. Right after this closing span tag. We are going to have a lot of span tag. Give the class name of profile, dash, dash, tagline. Head on to the demo project. So we just have to copy this short description of a Hey, copy. Paste it right in between the tag. Save. Check it out on the browser. Can you see, hey, is it now the nest and line is to implement the boat is. So let's do that quickly. Right after this closing div. We're going to have a div profile options. And here we're going to have a boughten give the botnet class name. And right in between the tag, hire me, Save. And here is the bottom, right. So we have to implement the get resume bought in. Let's wrap it all up in an, a tag, the hypothesis or a phrase. All right, so to implement these, we have to import their resume. Have gone to the materials directory. I have it right here on my desktop, open it up, and then open up the portfolio pro client public. So over here we have to copy this resume. Right-click. Copy. Come here, paste Heron to VS Code, wipe off the pound sign, the name of the resume dot PDF because it is a PDF file. So here I'm going to do download. Right here we are going to have a boating give this button a class name of highlighted dash btn. And here, get resume, save. Unless taken out. Here is the get resume boating. Let's give it a try. Click. Can you see that? Now it downloads my resume, obeying and has it. Can you see so beautiful? This is all for now, for this lecture, see you in the next lecture. Stay focused and take care. 9. Display Profile Picture And Corrections: Okay, so now we are going to implement the profile picture. And after that, we will make the necessary corrections. Scroll down. Right after this div. We're going to have another div with the class name of profound dash. Picture. Another one. Profound dash, picture, dash, background. Safe. Screw up unless make the necessary corrections. Right after this div with the class name of Coase. We are going to have another def, give the class name. Dash icon. Beautiful. Let me show you something. So here highlights from lanes 14 to 28 are the a tags. Press hold the Alt key and then tap the up arrow key on your keyboard. Do you see that? This is exactly how to move code in VS code. So if I want to move this code out of this div with the class name of pause icon. All I have to do is press down the Alt and then tap the down arrow key on the keyboard. Do you see that? All right, so let's move it in. The simplest that safe. Can you see now, we have the code right in the div with the class name of Coase, dash icon ANOVA. Alternative to do this is to copy and paste all the a tags, right, in a div with the class name of cause dash icon. So for instance, this is often after this lecture, and in the next lecture, we will begin to stylize this component. See you in the next lecture. Stay for costs and take care. 10. Styling the profile: Let's begin to stylize the profile component elastic. And recall that in the previous lecture, we left it like this. I realized it is not looking beautiful, but though it is not looking AGI either. So don't worry, in the next few lectures, we're going to have it look perfectly fine. Heroin to VS code unless proceed. So the first thing we're gonna do right here is to make the necessary imports quickly open up the explorer. Right-click on SRC, hit on new folder. Let's call it assets. And right, in this assets, we're going to create a new folder. Home. Proceed to the materials directory, Orban, and as well open up the portfolio pro client SRC assets. So I just have to drag these to the side and then copy the font package. So this is the font that we are going to use in this course. Come here, paste it right in the assets. And over here, we have to copy with unnecessary images that is relevant to the profile component. The BDI, the shape, and the profile photo. Select. Copy. Open up the home, paste, close down the portfolio probe. Bringing on opened up the code, how far we need to copy the CSS file. Check it out. Can you see Copy heroin to VS code? Proceeds to the index dot css, highlights, scrub, and then paste it right here. Right? Save her onto the browser and let's check it out. Beautiful. I like it. Can you see? Now we have the boat is looking beautiful. Here is the importin, which is the primary Barton and VCs. They highlighted aborting. Held on to VS code. Let me show you. Scroll down. Scroll down. Here is the primary BTN, which is the high AMI bought in. So all we did is to specify the background, the font size, the border, and the font color. And over here, we made it on Hoover. So when you hover on it, this is going to be the background of the border and every other properties remain the same. Let me show you. Do you see that? When I hover my mouse on it, the border background changes. Okay, so same thing for the highlighted PTEN. Have attain is the same. And here's the style of a hay. So proceeds to the power. Scroll down. And here are the colors that I prepared for the scores. Highlight, copy, heroin to VS Code. And then we have to proceed to our app dot CSS. Also highlight scrub command V to paste. Perfect. Now we are done with the settings. Let's proceed to the profile dot CSS. Close this down, close this down, hide the Explorer, and then proceeds to profile dot CSS. So here we will begin with the profile container. Currently the preferred JS. And let me show you and why is it? So we are going to set it to a flex container. To do that, we just have to display flex. Take notes. And when a container is set to display flex, it expands the items to film available space or shrink the items to prevent overflow. Here is the illustration on the screen. Take a look. Can you see that? Beautiful? Let's align items. To send our best align. Center. Justify contents. Center, the height, 10 percent. The mean height, fit content, and the background image URL. We need to move some steps ahead to the assets, to the home. And here we have to pick the bg dot JPEG, which will save as the background of the profile. But in the future, we are going to take this out of this place. So this is just for teaching purpose. So you can have something displayed on the screen and be happy. Save. Now let's link the components with the CSS file. Proceeds to profile. And here we just have to import profile dot CSS Save. Held on to the browser. And hey, is it now the type effect and a short description is no longer visible. Let's fix that quickly. Just have to proceed to the profile CSS. Then we have to stylize the profile. Parent does have its display flex, align items, center, and the color. Let's make it feel safe. Head onto the browser and haze it. The farm size is 24 pixels. The font-family poppies, semi bold. Now, for the profile did this role. So I just have to highlight, copy. Come here, paste, close up the curly bracket. And all we need to do right here is to wipe off the name. And we are going to have role, the flex direction colon. So this is the direction in which the lines of taste as tapped the margin. So we are going to have it from the top, right, bottom left, from the top for 10 pixels, from the right, 0, from the bottom, 24 pixels, and to the left 0. So next I just have to highlight, copy, paste, close up the curly bracket. And here we have to stylize the head one. And of course you should know that the type effect is right in the stage one. Let me show you the hidden tag and haze it. So we are referring to all of this right tops over, hey, give it a font size of 40 pixels. Font, family, currency you save. Let's check it out. Do you see okay, the primary test. So the color, now we have to make use of those colors. So we imported LAR, white, the highlighted text. So here we want to use the cola we imported earlier on. We have to set for the AARP dot css. And here we want to use the dark orange color be held onto the CSS. It's as simple as that. The profound role tagline, which is the short description. This guy over here, profile, dash, dash. Tagline. Give it a phone size of 19 pixels. Give it a margin. From the top, we're going to have 50 pixels from the right. And 0 on the rest of the sides. And here the font-family poppies light, load, you see code or write something just came to my notice. Screw up where we have the highlighted tests. Okay. All right, guys, We have to spell this correctly. Look guys, we are building a classic portfolio project. So there is need for us to be grammatically exam. So I think now is cool. And over here we're gonna give the margin. So I'm just going to select Duplicate women it for the on-hold. Give the background color. The background is white. So we have to make the color black Save. And before we proceed, let me show you something right in the profile GAS. So do you see right here this div with a class name of profound dash options. So we have to be grammatically EXXAT. Save her on to the browser. Now Hoover on the getter is importin DOC. Actually, we are going to use the profile picture class and the box shadow. So we want to have a circle. For that. We're going to set the border radius to 50 percent. Give it a height of 80 pixels, give it a width of 80 pixels for the margin. So unless take out the frame. Can you see here is the frame at the top right corner of the screen. It appears nicely. I love it. Now we have to sit the profile picture right on the frame. I just have to highlight this copy. Come right here, paste, close up the curly bracket, dash background and give the hide of 92 percent. Give it a width of 92%. Now we have to display the image. So we're gonna do URL, has hit the assets, the home, then we need the profile photo. Safe. Can you see this is not looking nice. Heroin to VS code. The background size. Cover, safe, head onto the browser. Can you see the profile appears nicely? So now let's fix it on the frame. Is quite simple to do that. So all we have to do is to copy the border-radius. Paste it right, hit, Save and go back. Can you see that? Beautiful? Repeat. No, repeat. Background position. Center. Can you see that? Beautiful? So now let's implement the Zoom in effect. Let me show you. You see when I hover the mouse on the profile, nothing happens. So I just have to copy these. Come here, paste, close up the curly bracket. And here we're going to have the UNH over. We have the transform and then give it a scale of 1.07. And we want it to transition 1 second. Ease out. Safe. Hover the mouse on the profile picture. Can you see you? That's perfect. All right, so we have to stylize the social media icons. The pardon, is it pixels of padding left? 0 pixels. So we just have to complete everything on here. So when you hover the mouse on the icons, given the scale of 1.5. And over here we have to specify the I tag, safe heroin to the browser and take a look. Everything is working as expected. This is all for now, for this lecture. See you in the next lecture. Stay focused. And TK. 11. Profile responsivenes: Let's proceed with the profile component. And in this lecture, we are going to work on the mobile responsiveness. Let's check it out quickly. You see on Galaxy S5. Let's check it out on iPad Pro. Okay, cool. Ipad. Do you see for now the application is not responsive to VS code unless proceed. Let's begin with the iPad Pro. The profile picture. Let's specify the margin. The profile details, name, profile dash details. We just have to give it a phone size of 20 pixels. Now we have to reduce the size of the bodies on iPad Pro. So give it a width of 120 pixels. Padding the Z index. Head on to the browser, and let's check it out. Let's try it on iPad Pro. Again as expected. I like it had on to VS code unless proceed on the screen with the max width of 900 pixels. So I just have to scroll up, highlight, copy, comma k, paste, close up the curly bracket. And now we have to change the pixels, which is the screen size. So on this coincides with the max-width of no-one's raw pixels. We have to stylize the profile picture. And what we're going to do is to specify the height to be 320 pixels. The width, 320 pixels, give it a margin. Highlight, copy, paste, close up the curly bracket. And on a screen with the max width of 100 pixels. Then the profile picture. Let's specify the margin. So you should know what the impotent rule, the NCSS doors definitely these over here is going to override this one. Okay. Profound. Dodge, parent. The flex direction column reverse margin from the top 40 pixels, 0 on the arrest sides. We are going to have its display flex. Justify content. Space between the profile details. Details. All we have to do right here is to specify the margin. The profile details name, comma dot. Profound. Did this role. We just have to test a line to Santa. Save. Head onto the browser and let's check it out. It looks good on Galaxy S5, iPhone, iPhone 6, 7, and 8. Beautiful. So let's try it on. I have an x on iPad, An iPad Pro omega. And lastly, now on a smaller screen with the max width of 375 pixels. Again, highlight, copy. Come here, paste, close up the curly bracket, and we have to specify the screen size, 3, 75 pixels. On the screen. We have to reduce the size of the profile picture. Give it a height. 75 pictures. Give the width to 75 pixels. Margin top minus 90 big shoes. The profile details give it a width of 90 percent. Save. Now onto the browser, unrealistic it out. So these should be responsive in all platforms. Do you see? Can you see this is all for now, for this lecture. See you in the next lecture. Stay focused. 12. Profile Footer: We are going to start working on the FUTA right in the home component. Let me show you what I mean by that. I don't read demo project. Can you see this curve over here? Let's implement it quickly. Proceeds to VS Code. Right click on home here on New Folder. And this would be called FUTA. Right here. We have to create the food, our component. Here, a new file, foo dot dot js. Let's create its corresponding CSS file. Outta here on new file, foo dot dot css. We're onto food RGS. Let's generate the functional component. Beautiful. Now, we just have to link the components with its CSS file. So we don't have to do that when we begin to stylize her, right. So with linked, the CSS file with the food IgA is known. We are going to give this TV className of FUTA container. If the class name food R dash, container. And right in this div, we're going to have another div with the class name of FUTA parent. We have to require the image IMG, SRC, open and close curly bracket. Then I'm gonna do require. You have to space it out on the open and close bracket. Let's move some steps ahead to hit the assets. Home slash ship, dash BG dot PNG with the self-closing tag. Right? Beautiful. Now we're going to give it an odd. So this would be displayed if there's a problem with the image. Let me show you the image quickly. Her onto assets, home. And then here are the images. Remember, we imported this image is aileron in the previous lecture. And here is the ship dash BG dot PNG. So this is the image to be used as the FUTA. All right, close it down. And as well, I think we are done with this. We also have to close it down. Now her onto the FUTA CSS. Over here, we'll begin with the food or dash container. Give the height of 17.8%. Phrase, I want you to follow my lead, right, so that we all can achieve the same result. Give it a width of 100%. Overflow. Hidden. Display, flex. Justify content to center, food and dash, parent. And always make sure your class names are spelled correctly so you don't plunge yourself into trouble. The width 100%, give it a height of 100%. And the max width 1920 pixels. Now for each image, FUTA dash, parent, and of course you should know that the image, which is the IMG tag, is located right in the food up here. And let me show you quickly. This div with the class name of FUTA period. And then here is the IMG tag. Give it a max width, 100%, and give it a height of 130 pixels. We want to target the way it appears on iPad Pro. Let's align items. Flex, end, safe. So assuming no, we have to render this component rights in the gs p app.js. And where is it? Now we have to import food from portfolio container slash, home slash slash FUTA is as simple as that. So we just have to run the FUTA with the soft closing tag, head on to the terminal. And then we have to cd client MPM start. Let's wait for it. And as you can see, it displays the art lifted off the screen, says no internet connection. So with this, we should understand that there is something wrong with the image toronto VS code unless fix that quickly. Proceed to foo tag ears and hair. Is it? Alright, so this one thing I want to show you of a, Hey, can you see? Now, anytime you require an image in React JS, you will have to come to the end of a here and then dot default, safe her onto the browser. And let's check out one more time. Do you see it looks like the image is not showing up simply because it falls right in the white background. Take a look. Do you see here is the image. Can you see? I move it to the right and then move it to the left. I move it to the right and then move it to the left. So the image is right here, but you cannot see it simply because it falls down. The white background. Can you see are right? So don't worry. In the next lecture, we're going to have it fixed. And this is often are for this lecture. See you in the next lecture. 13. Display The Footer : Let's get the food are displayed on the screen and have the profile component look as expected. Open up the explorer. Right-click on home. Can you see this home of a Hey? Right-click here on New File. Home js. Let's create it corresponding CSS file. Again, right click on home here on New File, On dot CSS. Let's head on to the home js and then generate the React js functional component. And I know by now you should know how to do these. So quickly. Let's give this defect class name. And we are going to call it home dash container. And right here, we are going to render all the components that makes up the home page. So let's import it over. Hey, let's import profile From profile. And here we have to import the FUTA from FUTA slash foo tag js. For now, we just have only two components. And in the future, we are going to have more components on the home page. So quickly, let's have a trend out over here. First, we have to render the profile with the self-closing tag. And the nest is FUTA. And as well the self-closing tag. That note, for instance, do not swap the components. Let me show you what I mean by that. Highlights. If you move the food at the top, you're going to get a different result. Okay? So you have to render your component in accordance to what you see on the screen, which simply implies you should follow my lead. So I have to move it down. Can you see Okay. Save. Now held on to the home CSS. So right here we have to stylize this container, which is the home container. Justify content. Space between the height is 50 vh and the mean height, 670 pixels. And the nest and line is to proceed to the profile CSS. Here is it? Scroll to the top. All right, In the profile container, I told you in the previous lecture that these will be out of this place. So highlight and then Command X to cut. Now her onto the home CSS listed over here. Save. Proceed to the above G S. And right here we have to wipe off the profile and the food are component because it is already rendered in the home component. So all we have to do right here is to rent that the home component right, in the app g, s. So these is of no use over here. We don't need it. Now we just have to import home from portfolio container slash home slash home JS and come here and then rent ITA safe. Having done this, we have to link the home JS with the CSS file. Quickly had on to homogeneous and then import home dot css. And please take note of these are right. The naming convention of a component is the Pascal naming convention. So I don't know how this came about. Wipe it off, and then the F should be on carob. Save her onto the browser and let's check it out. Can you see that? Okay, So this is the result we got, but this is not pleasant to the eyes. We have to do something here into VS Code. Okay, proceed to the home CSS. I don't think we need this height over here. Highlight and then wipe it off. Save her onto the browser one more time. Take a look. Beautiful. I like it. Can you see that? Also? This is often now for this lecture. See you in the next lecture. 14. Maintain Project Structure And Clean Up The Code: Now we have to clean up the code or maintain the structure of our project. Horizontal VS code unless proceed. Open up the Explorer. I want to show you something over here. Right in the home directory. We have the profile CSS and then the profile JS. And these two files, they are out of place. Okay, so we have to create a separate package for that. Now right-click on the home directory here on New Folder. And this will be called profile. So let's move these into the Profile Package. Click drag, and then drop it over there in the profile. And here is the dialogue box. It says, are you sure you want to move the profunda CSS into the profile? To agree with that, you have to hit Undo, Move boarding, and as well pick up the profile GAS, drag and drop it right into the profile packet. And of course move. So there is some trouble over here in the terminal, simply because now we have a missing Import. First. We have to head on to the home GAS. Here is the profile. Now I'm going to do slash profile J S, Save. And here on the terminal it says countries of you see this. We have to go back to the profile CSS, unfixed, the missing imports. Scroll down. So over here we have to move. Another step ahead. Save. And bone. Problem resolved. If you write application like this, it becomes very easy to read and understand. Okay, So I'm teaching you exactly how to compute application like a pro. Currently browser unless see if everything works good. Everything is working as expected. I love it. All right. Take care. 15. Component Rendering : In this lecture, I will teach you how to render components in a more perfect and organized way so that it becomes very easy to get the screen name and the screen ID when we begin to implement the smooth scroll. That implies we are going to have all the screens mapped in one component and then have only that component rendered on the app. Sounds tricky, right? Okay. Let me show you currently ab.js. As we proceed with the lectures, we are going to have four to five different components. And those components will be rendered in the app.js, like the way you see the home of a hay. Right. So we are going to have the testimonial, the reason the contact, and the rest of them. Now, what we are going to do is to map all the screens in one component and then have only that component rendered on the app.js. Alright, so we do not need to hard-code it like this. So I believe as we proceed, Joel, understand it well enough. Right-click on SRC. Here, a new folder. And this folder would be called utilities. Are right in the utilities. We are going to create a module on utilities here on New File. And we're going to create a module called common t's dot js. So right, in this module, we are going to import from portfolio container slash home slash home. Now we have to get the total numbers of screens as podcasts. And we're going to call it total underscore. Screens. Set it to an array, right? In this array, we are going to have the object. And then we are going to have the key value pairs. Screen underscore name column. The name of the screen is home and the component is home. So in the future, we are going to have all the component stored over here. All right, so let me show you, for instance, let's assume we have the resume component and I'm going to do is duplicate and then the mean is going to be resume. And then the component is going to be resume. So we just have to import it at the top right there. So when you do that, you will have is stored right in this array. Okay? It's a simplest dot. So I just have to undo. Now, we have to perform a titration to get the available screens. So here I'm going to do a spot const, get underscore, underscore index. We are going to take in the screen Nim, screen underscore name. And here we are going to check if the screen name doesn't exist. If the screen name doesn't exist, we have to return minus one, which means there is no such screens taught in the array. Now we have to look through the arrays of screen and get the available screens. For let I equals 0 and I is less than 22 screens dot length. And then we have to increment I by one. So here we are going to check if total screens of I dot screen Nim, screen name, then we are going to return the screen itself. Okay? Here we just have to return laughing. Safe, right? So the nested line is to create a component. Right-click on the portfolio container. Here is the portfolio Container. Right-click new file. Now we're going to create a component called Portfolio container dot js. So here I'm going to do, let's import the total screens. Let me show you on here. Is it underscore screens from utilities slash OTs. So the next in line is to map through the total screens to have it displayed on the screen. Okay, so I'm gonna do is total screens dot, set it to open and close brackets. If screen dot component exist, then we are going to have screen.com. Give it a screen name. Open and close curly bracket screen, dot screen named. Give the key screen dot screen name. Also we have to give it an ID. Screen shot, screen underscore name. Right? So close Europe was self-closing tag. An else if it doesn't exist. So we just have to return an empty div of a here. Give the div a key. Screen dot screen underscore name, then close it down. Beautiful. And lastly, we have to invoke this method. Let me show you this function over here. We're going to call it right here in the UI. So let's give this div a class name, portfolio container. And right in here, taking the curly bracket n, our screens, save her on to the app.js. We wipe this off. So we have to import portfolio container, right? It did it for me automatically again. So I just have to wipe it off. Actually, I'm doing this so that everyone can follow along. And, um, we'll just have to import portfolio container from portfolio container slash portfolio container. And also we have to wipe off the home. And all we need to render over here is the portfolio container. Close it down with a self-closing tag. Save her onto the browser and let's see what we have on board. Reload. Nothing is displayed on the screen. Right? Let's check out her onto the console. And one in functional not valid as a reactor chart. Okay. Toronto VS Code. Then there's her onto common OTs. Everything is cool over hey, portfolio contain says function, are right guys. This is a function so it must have opening and close parenthesis. So this is what makes it a function safe. Again, on to the browser. Are right, beautiful. Everything is working as a spectator. I love it. This is often now for this lecture. See you in the next lecture. Stay focused and take care. 16. Introduction To RXJS. Observables : All right, so in this lecture, we are going to work on the animations and the smooth scroll. But before we proceed with this lecture, it is good to know what an observer is, an observable and is subject in our USGS. And after the species, I will give you the link to the USGS official website in order for you to read more about it and explore. Observer. In arrows G is an observer, is it consumer of value delivered by an observable? And observables are Lizzy push collection of multiple values. The subject is subject in our USGS is a special type of observable that allows values to be multicasting it to different observers. Alright, so it is more like an event and meet us. Of course, you know that event emitter maintains registry of differently sinners. All right, so quickly let me demonstrate it to you so that you can have a clear picture of what I'm talking about. So now when I scroll down, you will realize that the abutment component fits in. Now let's go down. Can you see the original component fits in? Now, the idea is this, this effect, which is the observable, is going to be implemented in one module. And then we will have different components to consume this observable by subscribing to it. Can you see the testimonial, the contact me? Can you see the way it fits in? So all of this effect is created in one module, and then we will consume this effect by subscribing to it. So the idea itself is the observable and the observers are the component consuming this observable. So now we can say that the contact me component is an observer and the fade in effect module is the observable. Sounds good, right? Beautiful. 17. ScrollService : Haven't understood the concept of USGS in the previous lecture. In this lecture, we will proceed with the implementation of the code. So Heron to the terminal and let's install a USGS. We have to cd client, then npm install errors GAS. The installation is ongoing. So we have to wait for it. Installed. Successful. And you just have to ignore these for now. Right-click on utilities here on New File. Then we are going to create a file called cross service dot js. The first unknown we are going to do right here is to import the total screen. Import total underscore screens from common OTA's. And the NES down line is to import the subject from our USGS. And if you can recall in the previous lecture, I told you that the subject is a special type of observable that allows values to be multicast state, which implies this special observable that we are going to create would be consumed in different company and by subscribing to eat. So here we just have to import subject from REXX. Spot, the fourth class, scroll CVs. Now we are going to have this cross service object. Her friends started. Scroll handler semicolon. By the way, I don't think this is necessary. Now we're going to instantiate the subject. So we have to create the object or reference. And now we are going to call it current screen broadcaster. A new subject. And same here we are going to do static, current screen fading, a new subject. Now we're going to have a constructor here and add the scroll events to window. Window dot, add event listener. This dot. Right here. We're going to implement the function call to action boating. And let me show you. Here is the call to action aborting. When you click on this button, it is going to smooth scroll to the contact me component. And the name of this function is going to be scrotal. Hire me, set it to our function. And here we are going to do. Let contact me, screen document dot, get element by ID. Then we are going to get the ID of the contact me screen. In this case contact space. So friends over here, you have to follow my lead. So if you do something like this, it may not work for you simply because in the future, the ID of the screen is going to be like this. Contact space. Are right. And if the screen does not exist, we have to terminate it right here. And if it does, we're gonna do contact me, screen, DOD, scroll into view. And the behavior. It's going to be smooth. So this is what makes it does smooth. Scroll out K, we're making progress and I like it. What I'm going to do right now is to duplicate this method, this guy over here. So we're going to have these for the home component. Let me show you quickly. Can you see this bottom right here? So this would scroll to the home component bone. Can you see that? Beautiful. So we have to give it a name. So this would be caught. Scroll to home. Here is going to be home. We are going to change this variable name to home screen. Now what I'm going to do is to press Command and D. Press it again one more time. Can you see the multicultural editing is very nice. Now I'm going to wipe it off. So we're going to have home screen press the Escape key to disable the multi causal. Nice. Having done this, we are going to check if the element is in view. This simply implies if the document appears fully on the screen or not. So step out of this function. And here we are going to have is element in view LM k. We are going to have a variable called Req equals L m dot. Get bonding client rect, excuse me, the eye of a hair. Cut this off. This method of I here returns a DM direct object providing information about the size of an element and its position relative to the few and the few pots. Simpler phase to the part of the document you are viewing, which is currently visible in its window. And here we are going to have a variable elements top, element top, req dot top. And here we are going to have a variable element bottom, req dot, I guess you know, bottom. So let's see what the element is partially visible. Let's partially feasible element top. So when the element top is less than Windows dot in a height and the element of bottom is greater or equal to 0. It means it is partially visible. All right, so we have to check for the completely visible. Let completely visible. Element top is greater or equal to 0 and element bottom is less or equal to Window dot in a height. Now we're going to have a sweet case. If case is partial, we're going to return partially visible. This guy right here, excuse me, this is coulomb. And if case is complete column, we're going to return completely visible. And here we are going to have the default case to be false. There's an arrow by here, simply because this has to be semicolon to close up this case. Right. Now we're going to check the screen that is currently on the viewport, which means the screen that is displayed fully. So here we are going to have a function. Check correspondent of view port. We have looked at an event to our function. All right, so you just have to type the code along with me so I have to explain everything. So let me show you. This is this case over here. And then this dot is element in view. Then we have to show the case Porsche. This guy right here. If fully visible. Partially visible. So if the screen is partially visible, of which means if it is not fully rendered, we have to broadcast the feed in effect. Now I'm going to do dot current screen fit in dot. Next. Here is a method and then we have to take in some empty object and the nest method. Excuse me. The next method is used to fit new values into the subject and have it multicasts bed to the observers registered to listen to the subject. So in this case, it is going to be from different component. This is quite explanatory so And lastly, if fully visible. So which means if the component is rendered fully on the screen, then we have to broadcast the screen name, dot, dot. And we have to take this on object of a hair. And we're gonna do screen in view coelom, screen, screen name. And then we have to break out of these safe. Screw up her, right? We have done perfectly fine over here. Then worry when we begin to consume this observables job would definitely understand it well enough. All right. Take care. 18. Animations module: In this lecture, we will proceed with the animations. Right-click on utilities here on New File. And then this will be called animations dot js. And then we have to export default class. Animation is open and close curly bracket. And over here we have to instantiate the animation class. And the object's reference would be called animations. Animations semicolon to terminate it. And by the way, varies, optional. Then here we are going to have a function fit in screen. So this function is going to take in the screen ID, which is screen underscore name, set it to our function, and let's head on to portfolio GS. So I want to show you the ID and hairs it. Can you see? Now we are going to have a variable, screen. Document dot, get element by ID. We have to get the idea of the screen. And if I, hey, we have to check if the screen does not exist. So we happen to have and then we have to terminate it. And if it does exist, we have to stylize it. Give it a five. And then we are going to transform. We have to translate Y, which is from the y-axis. One. Pictures. 19. Package Installation and Update screen : Welcome back to the cars. Are right. So in this lecture, we will begin to implement the header component. In the end of this lecture, we will have the home components look like these. As exactly what you see displayed on the screen. Toronto VS code. Unless proceed. To proceed, we have to follow the structure of the project. Okay? So right-click on the home of a hero new folder. And this folder will be called head. Right? In the header packet. We have to create the header component. Then here on new file. And this would be card header. Let's create it corresponding CSS file. Header dot CSS. Js. Generate the functional component. Beautiful. Now we have to install the necessary packages. Proceeds to the materials directory, materials, and then scroll down. All right, so here I have a font that we want to install. Now I'm going to grab a first line copy Heron to VS code. Here we have to see the client. And then npm install command V to paste done her onto the materials and then copy the second line. I'm here, npm install paste. Let's have it installed, MPL installed. And I know most of you are curious why I'm doing it like that. For fault line, npm install, command V to paste. And lastly, NPM install. We are done with the installation. So if you want to install everything at once, all you have to do is to copy like this. And then come here, do npm install and then paste. So I did it at my end, but it did not work fine for me. Let's hit onto the package JSON heavy. Can you see? Okay. Now let's begin with the imports. We have to import total underscore screens. And also we are going to import but gets underscore screen, underscore index from Utilities, sludge, common lattes. So we are getting all of these tabs right here from the common OTs module. You should know that. Let's import the escrow service from. Okay, let's import Awesome Font, Awesome icon from. And as all we have to import. Now let's declare the necessary states variables to be used. And here we are going to have const. Select that screen, set. Screen, set it to use state. And the initial state is going to be 0. Right before we proceed, we have to import the US di dt. So here we are going to use state. We have to set the show, had an option, set it to you, state the initial state is going to be false. Now we're going to define a function to update the screen, set it to our function. And here we are going to pick in current screen. So here we're going to have a variable. Screen index. The screen index. Now we're going to do Koreans queen dot screening view. If screen index is less than 0. And so the next in line is to subscribe to the observable step outside this function. And then we are going to have a variable. Korean screen subscription, scroll service dot, windscreen podcast. So let me show you. Then we have to set four V's. And here is the Casta, the object or friends of the subject class. Let me show you over here. And where is it? Dot. We have to subscribe to the observable. And then we're going to take in the function update current screen, this guy over here. All right, so I don't want this lecture to take too long. In the next lecture, we will proceed with the UI. 20. Header Navigation and Click Functionality: Okay, so let's proceed with the URI. So the Austin we are going to do right here is to display the names of the components as navigation. So you can see the Home About Me resume and the rest of them. But though we haven't created all of these components. So for now, you will see only the home displayed right here at the top as navigation. So we want to do it dynamically. Over here. We're going to have a function to do that. Gets Hara options, set it to a arrow function as usual. And over here we're gonna return open and close brackets. Let's map, drew the total screens Command P. And then I will take you down to communities. And here is the total screens. So wherever components that is taught over here, we will have it displayed at the top as navigation. So what we are going to do right now is to map through that total screens. Total screens dot map. So right here we're going to have a div, give it a key of screen name, screen underscore, screen name. Let me show you quickly. Toronto portfolio container. And here is the key. Perfect. I told you as we proceed, Joel, definitely understand everything. So yeah, it is coming up. Now let's give this div a class name, gets header optional class. So we have to specify the onClick so that it can be clickable. So when you click on any of the name, it should switch to the corresponding component. Let me show you. So take, for instance, I want to click on the About Me. Takes you down to the About mere component. So on click is going to be a core, open and close curly brackets. And then later we are going to have a function called switch screen. So right in the DV, we have to span the name of the screen. Screen, screen underscore name. So these will have it displayed on the screen. The next function we're going to have step-up of the get header options. And then we are going to define a function right here to deal with the header options to create spaces in-between the screen and to mock the name of the selected components would a different color. So that will come when we begin to stylize it. So here we are gonna do get header option class, which is the functional record over here. This function, if index is laid down total screens dot length minus one. And we are going to have classes plus dash, dash, separator. And if elected screen Record Index, then classes is going to be equal. Selected header optional. So right here, if there's more than one screen displayed at the top as navigation, we have to create space between the navigations. Let me show you here you have Home and then the a space between the home and the about me and from the above me to their resume, to the testimonial and then to the contact me. So this piece over here is what we are talking about. And the intention here is to have the name of the component marked as selected when clicked. Can you see right now the About Me is selected when I hit our resume. Screw up. Can you see? Right. So that's exactly what we are trying to achieve from lanes 41 to 42. Okay. So the next in line is to implement a switch between the screens. And now we're going to have a function for that. And I've told you before, the switch screen, switch. Let's screen component. Document dot, get element by ID. We have to get the ID of the screen. Screenshot, screen underscore name. The Scream components does not exist. And if it does, we're going to have screen component dot scroll into view. The behavior is going to be smooth. And you know that. Now we're going to set the selected screen. Alright, now let's begin to implement the UI. I think this should be wrapped up in bracket. Close up this div. Here we're going to have an under def, give it a class name of header dash. And we're going to have a div with a class name of dash, hamburger, and click Show Options. So what we are trying to implement right now, let me show you right here. It doesn't show up an iPad Pro, so it has to show up on iPhone and mobile platforms. So this is exactly what we are trying to implement. Do you see this humbler over here at the top-left corner of the screen. And I hope you can see that the class name, header dash 100 burger dash bars. And then the icon. We are going to make use of this guy. Let me show you these over here. It does have to come here and paste close Europe was the self-closing tag. And go outside this div with the class name of header hamburger. This is the div right here, and here's the closing tag. Right after the closing tag, we are going to have a div, give it a class name of header dash, logo. All right, In this div, we are going to span the logo. So of a Hey, if you have a logo, you can as well use the logo right here. Like you can do something like this. So if the logo is in form of image, you can do IMG, SRC, okay, and then target the location of the image. But for me, I just want to spam the logo. In this case, it's going to be my name. Here. We're going to have I think let's stick with this. Okay, and then this is Giotto's sign on my keyboard close to the bar. So right after the closing div of class name, header, logo, sky, we are going to have another div with the class name. Show had an option. And this time we're going to display it on a condition. So if it does exist, we are going to have here a dash options. Show dash, dash options. So here we are going to call the function get header options. Let me show you this over here. Save less kick-start the application. The header is not displayed on the screen. Come back, and then we have to render it in the home JS. Here, we have to import from. And again, make sure the head is at the top of the profile. Now her onto the browser. Reload. Now the header is on the screen. Let me show you. Do you see that? At the top-left corner of the screen, you will see the logo and the name of the home component displayed as navigation. So here is the component home and here is the logo. So in the next lecture, when we begin to stylize this component, you'll have everything look perfectly fine. 21. Styling the Header Component: Let's begin to stylize the header component. Heroin put VS Code. And before we proceed, we have to do something, opened up Hadar JS. So right here we have to change the class name to head a dash container safe. So having done that, let's proceed to the header CSS. We as it, okay, hey, is it the header container? We are going to have a display flex. Let's justify contents to center. The height, 140 pixels, the color of the font. It's going to be white. And here we have to stylize the head up here and oops, this is supposed to be a dot. Quickly. Let's have it display flex space between give it a height of 100% of 70 percent. And the color of the font. Also it is going to be white, so I just have to grab these paste. Let's work on the logo. The phone size is 50 pixels. The phone family, Poppins, extra bold. So the color of the font is going to be white. Just have to grab these paste safe. And please, you should make sure your CSS file is already linked with the component. We did it in the previous lecture. We had on to the browser and let's check it out. Can you see beautiful? It is looking good. And then here is the Hara hamburger. Don't worry, we will have everything aligned properly. So the MNIST is the header option. Had a dash of shales. Have a display flex. Let's align items to center. And also we have to stylize the header. Option. A is give it a font size of system pixels. So the cost is going to be 0.600. Her onto the browser. And let me show you can you see the header? Let's do something. Do you see here is it at the top-left corner of the screen? We want to show these on mobile platforms. Western line is the header option, separate 0 dot dash. Can grab it from here. Separator, give it a margin of 50 pixels. And here we are going to give it a color. So the color is going to be white as well. It's going to grab, then paste it right here. Now let's dialyze the selected header, option, dot, selected dash, dash option. And then all we have to do is to specify the color. We can actually hardcoded over here. So this is what it is over here. You see? That is exactly what we implemented right now. So you will not have it show up over here simply because we have only the home displayed at the top as navigation. So when we begin to add more components, you are going to see the effect. Let's check it out on mobile platforms. Do you see this is not responsive at all? Can you see that? So in the next lecture, we will meet the head are responsive on mobile platforms. See you in the next lecture. Stay focused. And TK. 22. Header Responsiveness : Let's proceed with the mobile responsiveness. You have to hold on to hire a CSS. And then we're going to begin with the iPad Pro. So at media screen and max width of 1, 1, 1, 0 pixels, which is the size of the iPad Pro. Now, we are going to have the head up here and give it a width of 80 percent. Highlight, copy, paste, close off the curly bracket. And over here we have to change your screen size to 970 pictures. We're going to have a display block. Save her onto the browser. Reload. Can you see now the hamburger appears at the top left corner of the screen or right. Everything is definitely going to be cool. Still on the screen size, we want the header parent. We've 100%. Let's have it position. Absolute, the left, my loss, 100%. The top pixels give it a height of 100 and a width of 100 percent. Let's justify content. Space around. And then the background, which is the slider itself. When it's Clyde scene, we want the background to be 1, f, 22, 35, the z-index, the opacity. Let's make it 0.5. Safe. We are going to have a transition, point it out. And then for the header option separate or DOD. Hey, is it give it a margin of the selected header? Dot, dash, dash, bars. The font size is 30. Pictures should be point. And the margin 0 pixels, ten pictures. Here we just have to borrow this color from here. Paste it here. Maybe we will pay back later. I don't know. Here. Show dash, hamburger, option. Guys. Let's take it out and see if everything is working perfectly fine. Reload Qu Gary's everything is working as expected. Now. Can you see? Perfect, I love it. Do you see? So let's try it on iPhone 6, 7, and 8, 2 x find. On iPad Pro. You see we have the navigation and now the head of a 100 burger disappeared. But when you go on iPad, we're going to have the head, a hamburger. You see? So friends, everything is working as expected. All right, so we are done with the header component earned in the future, you are going to see how we are going to display the names of the component at a top as navigations. So you will have the above me resume testimonial, contact me and all of that. See you in the next lecture. Stay folklorist, and take care. 23. Reuseable Component : In this lecture, we're going to create the reasonable component. A reusable component is a piece of UI that can be reused in a different part of the application to Butte more than one instance. Alright, so let me take you down to the demo project. Scroll down. Here is the reusable components, which comprises of the title, the heading, and the separator, which is this line over here. Can you see beautiful. Now, one thing I like most about the reusable component is it flexibility. So this is used over here in the About Me component to show the About Me title and each subheading, which is the about me and then the subheading ease. Why choose me? Okay. Now, when this would be re-used in a different component, let me show you. So in this scenario, we have the resume. So we are going to pass it different value down to the reusable component. Now can you see the reason I said, reusable components are flexible. Also, mano a mano Microsoft fit in a different components such as the testimonial. We have to change the value that will be passed down to the component. Alright? So in this case, here is the testimonial as title, and here is the subheading. All right, so let's dive into the code and then we will have to understand it well enough as we proceed. Heroin to VS Code of a. Hey, we're going to create a directory called subheading. Now only have to do is to right-click on the utilities. Here is it. Can you see right-click here on New Folder. Now we're going to create the component here on New File, screen heading dot js. Let's generate the functional component. We are going to give this div a class name of head in dash container, excuse me, write right on this div. We need another div with the class name of screen dodge. Head in. And over here, we have to span the title. Span open and close curly brackets. And I'm going to do props dot title. And here this function is going to take him probes. So you can actually change the name of the prompts to something else. But I recommend you stick to the convention probes simply because these is generally accepted. And a lot of people, this is what it do. So what is happening right here is we are just receiving the value, right? So in the next lecture, you're going to see how we can pass down value into this component through probes. The simplest that. And we have to check for the subheading. And over here we're going to have the curly bracket. And then open and close parentheses. We're gonna do props dot subheading. So as usual, we are receiving a value that is being passed down to these components through probes. So in this case, if there's any value that is being passed down over here, we have to display that value. So we are going to have a div, give the div a class name of screen dash, dash heading. In the right. In this div, we have to span that value, which is the subheading. So I'm going to do props, dot subheading, and arrows. If there is no sub-headline that is passed down to this component, we have to display an empty div. So come here, coelom, which is the arrows, we are going to have a div. Close it down. In summary, we are just receiving the data that will be passed through props down to this company and don't worry. In the next lectures, you will see how we can pass values to this company and how beautiful. Now her onto the demo project. Let me show you these over here, which is the separator. So this is what we're gonna do right now. This line over here, we're just going to have This is the Blob. These are kind of north of here. This is the blob. Can you see this guy over here? This is all for the reusable component. In the next lecture, we are going to stylize this component. Okay? See you in the next lecture. Stay focused and take care. 24. Styling Reuseable component : In this lecture, we will begin to stylize the reasonable component. At the end of this lecture, we will have it look like this. Can you see her right? So quickly proceed to VS code unless continue. Right-click on the screen heading. Here a new file. And this file would be called Screen head in dot css. Before we proceed, we have to link the component with the CSS file. Open up the screen heading GAS, scroll to the top. So I'm already there at the top. Now what I'm gonna do is import screen heading dot css. Save her onto the screen here in CSS. And here we are going to start with heading container. Let me show you quickly. So here is the heading contain the screen heading, the screen dash, dash heading, and here the rest of the classes. So let's move on. We have to set this to a flex container. The flex direction column. Let's align items to center. The width, 100% margin. And here we have an half screen dash, dash heading, subheading. Now we're going to have the letter spacing to be three pixels. Margin. As milk eat. It mixes 18 pixels. Font size. Pixels. The color. We have to make use of the colo we imported earlier on in the professor's lecture. And I hope we can recall that. For a screen heading, screen dash heading. Let's give the font size of 32 pixels. The color when f, 22, 35. And by now you should be familiar with this color. The font, family, Poppins, boat, the head and separator, heading, dash. Separator. We are going to have a display flex align items to center. The position relative. The width, 180 pixels, right? For the separator line, DOD, the subtotal line, give it a width of 100%, give it a height of 200 pixels. And the background color, we are going to make use of this color. So I just have to grow up and then paste it right here. So let me show you exactly what we did right now. This is over here, this line over here. I'm not talking of this guy. This is the one I'm talking of, this line of a. Hey, okay. Now, for the separate blob dot, now we have to change it to blow up over here. Give it a height of 10 pixels, a width of 100%. The position absolute. We are going to have a display, flex, justify content to center, highlight, copy, paste, close off the curly bracket. And then we have to stylize the Div. Let me show you this div of a hay. So quickly we have to give it a width of 35 pixels, border radius of 10 pixels. And the background color. For these Heron to the CSS. We have to make use of the dark orange copy. Come back to the screen head in CSS, and then you just have to pay. Okay, So watch over here, close up the space. Safe. Now we are done with the reusable component. And in the next lecture, we will see how we can pass data down to the screen heading GAS through probes are right, this guy right here. So when we render the reusable component, you will have the details displayed on the screen. All right, so this is often now for this lecture and see you in the next lecture. Take care. 25. AboutMe Component Design: Welcome back to the cause. All right, so now we're going to start working on the About Me components. And at the end of this lecture, we will have something so beautiful like these. Take a look. Alright, so go back to VS code. Unless proceed. To proceed, we have to make the necessary inputs. Right-click on the assets. Here, is it? Right-click, hit on new folder. And we will call it about me. Now, open up the materials folder. It is right here on my desktop, so I just have to 0 pain and then open up the portfolio pro client SRC, assets about me. So now we just have to copy the image that is relevant to the About Me components and paste it right here. And here's its right-click. Copy. Paste. Close it down, proceed down, go back to VS code. The next in line is to create the corresponding component, an SCSS file. You just have to open up the portfolio container like this. And then right-click on the About Me. Here, a new file. This will be called About Me. Js creates its corresponding CSS file. About me dot css. Go back to about mu j is generic, the React js functional components. And if we have to import the US effect and nest is to import the reusable component. Utilities splash screen heading, splash screen heading. Let's import those crows have 0s. Let's import the animations. Beautiful. Now the line is to add this components to the screen. Open up the common test.js. And over here, we have to import the About Me components. Let's store it in the constants. So I just have to highlight these. Hold on the Alt and Shift and then tap the down arrow key to duplicate. Beautiful. So we just have to change the name to about me. The component is about me. Command S to save. Now we just have to stop the server. Hey, can you see that the component has been added to the screen? Go back to VS code closed under common law test.js. So if this function is gonna take any parameters, prompts and come down here and give this div a class name of about me. Container are about dash, dash container. We are going to have another div with the class name of about MY parent. So the next in line is to render reusable components. Screen heading with the self-closing tag. And this component has two different attributes. One is the title and we have to give it a value. So I'm going to say. About me. And the other one is the subheading. And here I'm going to do why choose me? Okay? So the intention here is to have this values passed to the screen head in companies and have it displayed on the screen when the component is rendered. All right, so let me show you. Just hit onto screen head in G, S. And if I here you can see that we are receiving the values over here, see prompts dot subheading. So with the help of this prompts, we are assigning a value to this title. And symptom here we are assigning a value to the subheading. So if there's no value assigned, nothing would be displayed on the screen. Go back to the About Me, GAS. Save, run. Go back to the browser, and let's check it out. Beautiful. Can you see that about me and why just me? Everything is working perfectly fine. And I believe with this, you can understand clearly what reasonable component is all about. So the next in line is to subscribe to the observables to enable smooth scrolling and fading effect. So here I'm going to do, let's fade in screen handler, taking screen over here. So we're going to check if the screen dot fading screen is not equal to prompts dot ID, then we are going to terminate it here. Now. We have to implement for fading effect. Now I'm going to do animations. Animations, dot fading screen. So let me show you quickly Heron to the animation gs. And here is the function fading screen. Go back to the About Me j. So we have to take in the ID. Beautiful. So over here we have to subscribe to the observables. La and I'm gonna do const, fitting subscription. Scroll CVs, dot correspond fit in here onto this cross F is component and let me show you cross FSGS. Okay, here is the current screen fade in, which is the object or refrains of the subject class. Alright, scroll down. Let me show you over here where we implemented it. So here's its current screen fit in dot next. And what we did over here is to broadcast the fading effect. Go back to the above VGS. So we are gonna do dots. We have to subscribe to it, subscribe. And here we just have to take into fade in spring handler. Finish been handler. Beautiful. So to check if it is working perfectly fine, we have to come down to this div with the class name of About Me container. So give this an ID. Props dot id command S to save. Go back to the browser and let's check it out. Reload. Give it a try by clicking the About Me. Bottom. Can you see that? Everything is working perfectly fine? Do you see that? When you click on the About Me, it's smooth scroll to the abutment component in fact is exactly what the intention is. Go back to VS code. So here we are going to display some static information on the screen. For that, we have to declare non-static datas and store them in a cons times. So over here, we're going to have constant, let's call it screen, underscore, open and close curly brackets. And here we are going to have the description column. Go back to the browser and let me show you. So this is the demo website and Here is the description. And I'm gonna do right now is copy, go back to VS code and then paste it in between the quotes separated with a comma before the nest and line is the highlights, which implies the list of items. And here the list of items go back. Right now, I'm going to do highlights. So here we are going to have an area of datas to be displayed on the screen. Let's open and close square brackets. And as well here we have to place a column here. All right, The first on the list. Let's take it out. Here we have a full-stack web and mobile development. I just have to copy. Come here, paste it. Separated with a comma, go back. Copy, pasted in-between the court, separately to the corner. To avoid repetition, I just have to fast-forward the video. All right, Now I'm done. Fill in the list. You also have to pause the video at the end and finish it up here. And now we need to have the head in over his head in coulomb. Open the quotes, go back here. Copy, paste. It's as simple as that. The line is to define a function to map through the above data as to have it displayed on the screen. So hey, I think I have to close down the terminal so as to have a full board. Here, we are going to have run the highlights, set it to our function. So we have to map through that data's screen constants, dot highlights. Let me show you. Highlights. Bullets, ok. Dot bullets, dot open and close brackets, and then open and close bracket one more time. Now we have to take into some argument if I set it to our function. So right here, we are going to have a div with the class name of highlights. And we have to give it a key to actually avoid duplicate of values. And here we are going to have another div with the class name of highlighted blog, highlights, dash, blob, plus it down. And lastly, we have to span the value. Beautiful. Okay, So for a key, when you do this, everything is going to work for you perfectly fine. So now we have to display the data on the UI. Scroll down to where we have the UI here. So right after the reasonable component, we are going to have another div with the class name of about me Codd. Give the class name about dash, dash cod. And also we need another div with the class name of about me profile. About Dash me, dash profile. Let me show you. Here is the main profile, this image of a hay. And also we need another div with the class name of about dash, dash details. Please always make sure the class names are well spelled so you don't run into trouble when we begin to stylize it. And here we have to display the description and haze it. So I'm going to give us pound at class name of about dash, dash description. So here we have to display the item. Now I'm going to do screen underscore constants dot description. Screw up on. Let me show you. Here is the description. We need a div with a class name of about dash. Dash highlights, div class name highlights dash, heading. Right here. We have to span the heading. So we're gonna do screen on the scope constants, dot highlight heading, heading, safe. So here I'm going to cd client NPS. Score down. Beautiful, everything working as expected. So here are the description. But I'm so surprised that the heading is not showing up. Go back and let's check it out. Right guys, there's a mistake in the spell in over here. This is supposed to be heading. Save one more time, go back. All right, Here is the heading and you see n. This is the description. Let's display the list of items. So right here, after the closing div of className highlight heading, we're going to invoke the method render highlight. Safe, go back. And here are the list of items. Beautiful. The nest and line is to have the proteins, Hey, go back and have a hay. Right after the closing div of className about me highlights. We are going to have a div with the class name of about dash, dash. So we can now have the bodies. What I'm gonna do right now is to go to the profile component and copy it from the command P hat onto provide g, s. So here the body is copy, go back to the About Me gs and then paste it right here. Command S to save. Go back to the browser and let's check it out. Scroll down. Beautiful phrase, this is a lethal result we are expecting from this lecture. I realized these non looking beautiful, but though it is not looking IDA, but don't worry. In the next lecture, when we begin to stylize this component, we will have it perfectly fine. This is often are for this lecture. See you in the next lecture. Stay focused and take care. 26. Styling AboutMe Component : This is exactly what we got in the previous lecture. And everything is working perfectly fine as expected. Screw up when you heat on the About Me built-in bomb takes you down here. So it means the Smooth Scroll is wagon perfectly fine. Let's look at a gut region bargain. And also the get Resume button is working as expected. Beautiful. So now the next in line is to stylize this component inhabited look like. Go back to VS code unless continue. Open up the About Me CSS. And over here we would begin with the container. Let me show you. Here, is it? So I just have to call b dot, paste it over here, open and close curly brackets. And we are going to have it display flex, flex direction, column, justify contents to send out. Align items to center the margin. So we're going to have 50 pixels. Command S to save, go back to the GS are less link the CSS file with the component. Screw up. And Hey, we're going to import about me, dot CSS, Save. Go back to the browser unless taken out. Can you see? All right, let's continue. Go back to the About Me. Css style is the parent class DOD about MY parents. And we are going to give it a max width of 100 pixels. And the width 70%. The About Me, cod dot about me. Let's have a display of flex. The width is 100%. Box-shadow. Save, go back to the browser. Everything is gradually taking shape. I like it. So for the About Me Profile, about dashed me dash profile. And here we are going to give it a width of 50 percent the background image. Then we have to make use of the image we imported earlier on in the previous lecture. Url. We have to hit the assets. Clash about me. It's clash me dot JPEG. And I hope you can recall when we import at this image the background size. Let's make it curve. Background, repeat, no, repeat the background position. Let's have its center. Save. Go back. And here is the profile. Now go back to VS code. We have to stylize the About me, details about dash me. And hey, we're gonna give it a width of 48%. Test aligned. Let's make its justify. Adding 30 pixels. Save. Check it out on the browser. Is looking cool. Let's proceed. So over here, we have to stylize the About Me description. So just gonna do about dashed me. Description. Here called the bracket. Font size for the description is 12 pixels. For me highlights. Let's give it a margin from the top right. At pictures in here, we're going to have Sarah for a highlight hating Dodd, highlights, dash, heading. So here we're going to have the font family. Poppins, boat. The font size, 14 pixels, margin. And here for the highlight, dot, highlights. Let's make it display flex. Align items to center. The margin. Five pixels, 0. Lastly, for a phone size, let's make it safe. Check it out on the browser. This look awesome, I like it. Can you see that? Let's proceed. So the nest and line is to display a bullet over here, which is the highlight blob. So I'm gonna do highlight dash blob. The height is going to be topic sues the width, 12 pixels, the margin, 010 pixels, and the background color. So we are going to have 5823. Save. Go back. And here is the pool at over here, which is the highlighted blob. But I don't like the way it looks like a rectangle for now. We have to change. It still looks more like a kind of stuff, right? So let's do that quickly. So it is very simple to do that. Now, all we have to do is to apply the border-radius and then make it 50 percent safe. Go back. Here is it isn't this beautiful? Awesome. I liked it. And if I hear you were realized that the bottles are not breathing at all, then you see there's no space between the bodies. Go back and fix that quickly. Here we're going to do about Dash me options. And then we have to target the highlighted BTA. So we'll just have to specify the margin. So from the top right, bottom 0, and then from the left we have it 30 pixels. Take a look. Can you see that? Beautiful. Everything is working as expected. So let's take an atom mobile platform and see if it is responsive. Okay, this is how it appears on iPad Pro. It is not responsive. Can you see the abort is okay. Let's take it out on iPhone. Take a look. Can you see I don't like it like this. All right, Let's take it out. Boom. Everything is working as expected. But for the mobile responsiveness, we have to work on that. So this is all for now, for this lecture. All right, Take care. 27. AboutMe Component Responsive : Let's perfect This company is by making it responsive, go back to VS Code. And over here, we have to start with the iPad Pro as usual. So an iPad Pro, iPad Pro responsiveness. Thus queen for iPad Pro is 11 pixels. So here I'm going to do DOD about dash me, pay rate. We have to give it a width of it yet per cent. So that's all for the iPad Pro and for other mobile platforms. Now I just have to copy these. Copy. Come here, paste, close off the curly bracket, and then come to this place unchanged. The pixels. Here we have it night eight pixels for his queen smaller than the iPad Pro. So when it up, yes, here on mobile platform, we want to disable the EMH. So I'm gonna do this, play, save and run, go back to the browser and bone, the image is gone. Beautiful. So now we have to make the details to occupy the rest of the space. Go back to do that. Hey, I'm just going to do DOD about dashed me details. Let's make the width to be 100%. Save and run. Can you see that core? Go back and let's continue. Now on a very small device, which means on a smaller screen. Now I just have to copy this again. Close down the column brackets. And over here we have to specify the screen size, which is when it appears on a sprain or with the max width off for 66 pixels. So I think that this should be a very small screen. Yeah. So the About Me option is about dash. Dash options. We're going to have it display flex, the flex direction column. Lastly, we have to position the buttons properly. So now I just have to come down here about dash, dash, options, dot highlighted PTA. So we'll just have to give it a merging 24 pixels from the top, then 0 on the rest of the sides. So here I'm just gonna do, okay, Beautiful. I'm just going to copy these listed here. Let's make the width to be 100. This saints save. Can you see that everything appears as a spectator and I like it. So let's take it out on all platforms. Iphone X, okay, nice iPod, nice. Ipad Pro. Beautiful. F15. Awesome. And lastly, on Galaxy S5 are right. This is, as a result we are expecting from this lecture. Now the component is looking so beautiful. All right, see you in the next lecture. Stay focused and take care. 28. Creating The Resume Component And State Variable To Be Used: So now we're going to start working on their resume component. And at the end of this lecture, you will have something like this. Isn't this beautiful? Right? So let's take it out. So here you have the Wacky History, programming skill, interests, education, the projects. And the rest of them. Go back to VS Code. And over here we have to create the corresponding component and add CSS file. So right-click here a new file. And here we are going to call it resume dot js. Let's create its corresponding CSS file. Right-click new file. This will be resumed dot css. Go back to the original component, generate the React js functional components, RFC and bone does have to hide the Explorer. And now we have to make the necessary imports. Here we are going to import the reusable component utilities, splash screen heading, splash screen heading JS. And here we have to import the escrow service from utilities splash, screen, TVs. And over here we have to import the animations. This function is going to take him props as parameter. So here let's declare a state variables to be used. For initial state is going to be 0. And down here, we're going to have const sets, carousel of set style. And the initial states. Here we're going to set it to empty object. So now we have to implement the fading effect on the smooth scroll. So I just have to copy these from the Component Command D or Control D on Windows and then set for years and has it. So I just have to copy everything here like this. Go back to original jeers. And here I just have to paste. Beautiful. Let's run that the reusable component and assign it, it corresponding values to each attribute. So here for this DFF is going to take in a class name of resume dash container, screen dash container. All right, and right here in this div, we're going to have another div with the class name of region contains a div, give it a class name of Resume, dash content. And here we are going to render the screen heading component of the self-closing tag. And here the first attribute is the title. And the title should be resume. And the second attribute is the subheading. And here this should be my form of bio details. And of course by now you should understand properly how reasonable component works because I explained it well enough in the previous lecture. Let's add this component to the screen. Go back to the common OTUs Command P. I just have to set it over here. Common OTs and has it. Let's import the original component. Import. Resume from portfolio containers, clash, resumes, clash, resume JS. And then here we just have two highlights. Duplicate this code or you can copy and paste as well. I think I've taught you how to do this in a previous lectures. So here, you should just change it to the screen name, which is a resume. And here the component name should be resumes, sorry. Okay. Paraffin mixture. Here is the same thing as, okay, it is a satellite the same. Let's run the application to see what we have on board. Come down here to determiner. And then we are in the root directory. So I just have to cd client. And then NPM start with crossovers is not defined. Go back to VS Code. Open up their resume. J is on line 15. All right. There's a mistake in the spellings of a hay. And I think this is coming from the previous lecture. So this is supposed to be Scroll CVs Command S to save one more time. Let's go back to the browser. So here is the region displayed at the top as navigation. Let's click on it. Right? This time nothing happens. Go back to VS Code. And here we just have to give this an ID. Props dot ID are an empty string. Save. Go back and take it out one more time. So heat on the original aborting. Can you see the reusable component is already rendered? So let's begin to work on the original company and quickly. All right, so before we proceed, I think there is need for rows to be chromatically EXXAT of a hair. Only have to do is to go back to the MEG is here is it. And then here we imported scroll CVs. I don't know how to pronounce these anyway, but there is a double eye of a day. Now I just have to take off these and then go back to where we utilized it. Has it we just have to wipe it off. And then here it is, spelled. Says on line 13. Several again, a lessee. Beautiful. So now go back to the browser. Our writes, everything is working as expected. So when you are writing an application like a pro, this need for you to be chromatically EXXAT. The nested line is to create a minor reasonable component. Go back to the visual areas. And of course we are done with the above VGS, so I just have to close it down. And as well, we are done with the common OTs. Close it down. All right, so over here we are going to have some minor reasonable component. So here we are going to have a dy for the class name of region heading, resume, dash heading. We also need a div with the class name of resume dash, dash heading, a div, give it the class name, heading dash, bullet. So over here we are going to have the attribute headings. So if a value is assigned to the attribute heading, we will display that value arrows. Nothing will be shown on the screen. For that, we're going to have a conditional rendering. So here we are going to span. We are gonna do props dot heading as an attribute. And if the heading a z-score, we have to show the head and value prompts dot heading else. Nothing would be displayed on a screen, just an empty string and nothing would be displayed on the screen. So over here, we have another attribute of from date. Let me show you. Here is the from date and then here is the toe date. The simplest that. So if the from date and told it exists, then we are going to display. The date. So over here we're going to have a div with the class name of head in dash. Taken double-quotes, and then underscore over here. Props dot to date. So arrows. If the debtor doesn't exist, then we have to display an empty div. We're going to display an empty div. Beautiful. I have to save and formatted this code harder, right? So right here we are going to have another div with the class name of resume, dash, dash, heading. And please don't match Java class names are spelled correctly, so you don't have trouble when we begin to stylize the application. So here if the subheading exist, we have to display it and nothing will be shown on the screen just AS usual. So here we have the attributes subheading, props dot subheading. If this is z, then we have to show the subheading. And ours. We are just going to have an empty string. All we are doing over here is to receive the data's doubt would be passed from the main component. All right, so here we have the attributes subheading when we ran that is component, the attributes of head. And it's going to take in a value, so that value is specified, then it is going to be shown over here. Else, if there's no value given to the attributes of heading, nothing would be displayed on the screen. It's as simple as that are right over here. After the closing div of class name Iridium Subheading. We are going to have another div with the class name of a resume dash, heading, dash, description. So same thing here. Same thing here. If the attribute description is given a value, then we have to show that value. And nothing would be shown on the screen. Right? So I don't want this lecture to take too long because we have a lot to do. This is all for now, for this lecture, see you in the next lecture. Stay focused and take care. 29. Preparing Resume Static Data 1: Let's begin with the static data's. But before we proceed, we have to make the necessary imports. Opened up the materials directory, open up the portfolio pro client, SRC assets. Then over here in the materials directory, we have to copy this revision package. Let me show you. This contains the SVG is that we are going to use in this component. So I just have to copy. Come here, paste, close it down, close it down. Go back to VS Code. Let's declared as static data has to be used. Screw up. So over here we're going to have a Konstanz, call it a region pullets. These is the best way to name an array. All right, so you can see resume bullets simply because it is a collection of datas. So when I do bullets, it is not a good practice. And actually this is my own opinion, but it is good. You name an area with a plural word. So right here we are going to have the phosphate label. Column. Here is going to be education, comma logo, SRC, colon, education dot SVG. Let me show you quickly. Heroin to the assets. And here is the resume. So this is the education as Vg over here. Alright, separately to the coma. And over here, we're going to have the word history. Here, is it. So same thing. We have to have a label column comma, and then we have the logo, SRC coelom. Then we're going to have dash, history, dot SVG. These indeed will involve repetition. So I just have to fast-forward the video. All right, Now I'm done with it. Also. You just have to pause the video at your end and completed. Everything is the same. All you have to do is to change the label and the SVG, right? Therefore, the less-than line is to declare static data for the skill progress bar. So all is the same process. Here we're going to have programming skills, details. The Fall Scale. Let's take an out. We have JavaScript comma and then give it a rating percentage. So to me, my ability in JavaScript is up to 85 percent fee free to specify your capacity over here, separated with a comma duplicate. And over here we have to change the scale to react JS. The rate and percentage of my React js going to be. Let's leave it at 85 as well. And also, these indeed will involve repetition. So I just have to fast-forward the video. All right, I'm done with it. So all you have to do is to replace the skill and the rate in percentage. So do it for other skills that you've caught and then you're going to have it right. Now of a nested line is to declare static data to show the information is about the project work. So here I'm going to do const protest details. And as you can see, I'm using the pleura word to the climber. So here we are going to have a title. Let me show you. Here is the project, and then here are the details. So we are going to have a title. So here we are going to have a title column. Then I'm gonna do pass the portfolio website. Comma. Then we have the duration. The duration. Let me show you. Here is the duration. Now we have to make use of the firm did. So I'm just going to do 2020 to 2021. Excuse me, that should be a colon here, separated with a comma. And then here we're going to do the description column. Go back and let's copy the description. In-between the court separated with a comma and for the subheading. So here we are going to include another project. Can you see we have a shop, the e-commerce website. Hello, I'm gonna do right now, is to duplicate this code twice. All right, so all you have to do is to fix in the project that you've worked on over here. Maybe you have worked on any project. This should be the title of the project, that debt You started the project and then the end date of the project. So here you should talk about a project which is the description and here is the subheading. And the same thing applicable to all of these types of I here. These indeed will involve repetition. So I just have to fast-forward the video. So same thing that I did over here. I include the projects I've worked on, a date I started the project and the ending date, the description and the subheading. That is exactly what I did over here. And you can also post a video at your end and write mine if you wish to. The static data for the rest of the region details. So here I'm going to do const, resume details. Here we are going to have a div, give it a class name of resume, screen dash, container, and we have to give the key. So if I hear, we have to render the minor reasonable components. Resume, heading, closer up with a self-closing tag. And here it's got an attribute called heading. So let's give this attribute a value. I just have to copy these, paste it in between the double quote. And also of this component is got another attribute subheading. As a subheading, is this. Just after copy? Told you this is gonna take a while because we're going to do everything from scratch. And we have from the ID attribute. So let me say I can't admission into the university in 214. Then I became a graduates in I say to-date to 18. So you can do anything here as it pleases. You write something here. I'm just going to copy this code over here, copy, come here, paste. And then we have to change the values. So here we have on the education. This is another certificate class. Over here we have the National Youth Service. So all of these are my certifications. So you have to replace it with heroes. And here. And here is going to be 2019 to 2020. So highlight, duplicate it one more time. And then here we have the high school. So I think everyone should have these. The high school you attended, the name of the highest cool over here. And also we have to implement these for the work as periods. So come here. Plus a comma here at the end of this closing div class name, resume screen container. So here we are going to have a div with the class name. Though it is going to have the same class name. Class name is going to be the same, does have a copy these from here, come here, and then paste. Now, close up the div. And here we have to change the key. What dash S periods. So probably it is going to be the same. Now, I just have to copy this reusable component. Come here, paste it over here, go back to the browser. Rock history. So here should be the name of the company you are currently working for. Copy. Come here on the heading and subheading. Copy paste. Now, you need to indicate if you are presently working in that company. So maybe I was hired the year 2020 and then here t correctly or working in that same company. So I'm just going to indicate present a very classic portfolio we are dealing with. Now we're going to have that description. So here we are going to have a div, give the class name of experience description. And over here we're going to have a span tag, give the Spanish class name of resume dash, dash tests, right in-between those pound tag. Come here. So here I just have to copy the first line placed. So for here, we are going to have another div with the class name of experienced description, the spelling of the experience. So I think this is not well spelled. So. Alright. So right here we're going to have a span with the class name of resume description test, resume dash, dash, test. And here we have to go back through websites, which is the demo page. And then copy these two lines over here. Paste it over here. All right? And here I just have to indicate with a dash. Utterly, this is optional. Right after this pound tag. We're going to have a break. And here we are going to have another tab. So I just have to copy this simply because it is exactly the same. Beautiful. Come to the website demo. Copy these lines. Come here, paste it. So lastly, we are going to have a think we should use the self-closing tags for these. We also need a span tag. Copy this, come here, paste. Go back. Here. We have to copy the last line, like this and bone. We are good to go. Let's take a break here and continue in the next lecture. Take care. 30. Preparing Resume Static Data 2: Let's continue with the static data's right after this closing div, class name, experienced description. So place a comma here. We have to process the data for the program is we are going to have a class name. Let's give it a key. So I'm going to call the key programming skills to the programming skill details. Let me show you screw up, up, up here. So I just have to copy down here. We're going to do programming DDOS dot. Now we are going to have a div, give it a class name of skill parent. Skill dodge. Give it a key, give it a key. Index. Close down the dv. All right, now we are going to have another div with the class name of heading bullet. And also here, we have no half a span tag here to show. So I'm gonna do is Q dot skill. We need a div here. Q dash. Please always watch the spellings of the class names. So important. So we're going to apply here some inlines, towels. I'm going to do star. Q dot written presented. Give this div a class name of dash. Line is the projects. So we have to map through the project to have it displayed on the screen. Place a comma here right after the closing div of className. Resumes queen container. Give it a class name of a resume screen container, and give it a key. So here we have to map through the project details. Details dot map. Now we have to rent that a minor reusable component. Give it a key. This component has an attribute called heading. So I'm gonna do details dot, title, project details dot, dot, dot. So plus a comma here unless do it lastly for the interest. Right? So it seems the class names are the same. I just have to copy, paste. Change the key to uniquely identify all of the stops. So we have to rent out the reusable component as well. And here, let me show you for the interests. We only have the heading and the description. And previously, the one we did was for the project details. Of course we have the heading subheading description from untold it. Let me show you. Can you see the heading subheading description from the to-date? Our rights. So now someone is struggling along with me and I like it. So here we are going to have the heading, assign it a value just as we have it here. So the nest is the description. Copy these, paste it in between the quote. Beautiful. So now I just have to highlight the third reusable components. Duplicate it twice or copy and paste twice. So over here you just have to change the heading and the description. The heading and the description. Alright, so let me fast-forward the video and do it at my end. Are right, beautiful, they don't. So make sure to change. Over here the head and you can see music, whichever music you love listening to. And then, yeah. So here, competitive gaming can talk about that game. You love most, just as you have it over here. So as well, we can copy from these and copy from these like this. Yeah. All right. So see you in the next lecture. 31. Creating the Ui And Functions to display the resume data on the screen : So now let's finalize the original component. But before we proceed, we have to do these. All right, so I realized that these came on the need the codes, I just have to cut these out of this place. Come to the top of a here, paste it here. Right. Now, scroll down. Now we have to define a function for the Caruso. And I'm going to call it, we're going to have a variable of set height. Let's new Kouros offset, open and close curly brackets. And then we have to give it a style column, open and close curly brackets. Here, we are going to have a transform. Then translate Y, which is what, a y-axis. Now, open and close brackets. And over here we're going to have that double quote. So now we're going to do set carousel offsets. Here we're going to take a new Caruso. And here we are going to set select to the bullet index, then picking index right on your phone. Save. Now we are done with the carousel function. For this function to be called, we have to enable the onclick. Over here. We're going to have a function. So we just have to map through the resume bullets. I'm showing you at the top here at a region bullets comma k and here the icons on the label. The icon on the label. So yeah. All right, So we're okay here is it. Now I'm going to do original bullets. Dot map. Of course by now you should be very familiar with map. Set it to our function and over here, open and close brackets. So here we are going to have a div and specify the onclick. And here we are going to invoke the handle kairos, our function. Now give it a class name. Now we have to condition the class name to enable stylize the selected boating. So I'm less time the code and let me show you. Now I'm gonna do if index, selected bullet, index. And we are going to show this class name selected dash, bullet. And we're going to show bullet 90s. So basically, let me show you, for instance, the education is not click and then it is not selected. So now when I click on the education, you are going to see that the font color is going to turn to white. Can you see these is as a result of the conditional statement to stylize the stoves based on condition. All right, So now here the condition is not click, so you're going to see it, our work history on it, kind of a dark font. So when I click on it, you'll realize that a font has actually turned to white. The simplest data. So it means when the index is equals selected bullet index, we have to stylize this class for the phones to be white. And the line is to give it a key. So here we're going to have an IMG tag with the class name, bullets dash, logo, less closer up with a self-closing tag. Src, open and close curly brackets. And we have to require the E made all the icon sort of say require space, open and close brackets. And then we have to target the asset package. Squash, resume. Here, open and close curly bracket, bullets, dot, logo, SRC, and the art internet connection. So this means if the image is not displayed, we are going to display this test. Now let's move to the region T2 is to have it displayed on the screen. We are going to have a function for that. Right here. We're going to have a function gets resume screens, give it a class name of a resume, dash, details, dash, arrows up. And here we have two true details. Details, dot save. After the screen heading component. We are going to have a div with the class name of resume dash. And here another div class name, resume dash, bullets, bullets, container, bullet, icon, this. And we are going to have an IV, give it a class name of bullets. Now we have no info that get bullet function of S to save, right? Since everything is okay. And lastly, after the closing div, className reason bool it. We are going to have another div with the class name of dodge, bullets, dash details. We have to invoke that get resume screens function S to save. Go back to the browser and let's check it out. Reload. Nothing was returned from render. This usually means a return statement is pacing. Let's check out what the problem is. Let's check out the static data. Over here in the reusable component. K guys. Take a look. Now here it is. Not a well spelled I'm so sorry about that. That is correction. We have to return the UI. And that's where the problem lies. So now I'm just going to highlight these extra cuts pasted here. You just have to wipe off the semicolon. With days will be aright Command S to save. Go back to the browser and check it out. Scroll down. This is exactly the result we are expecting from this lecture. So in the next lecture, we will begin to stylize this application. And indeed, it is going to look extremely beautiful. See you in the next lecture. Stay focused and take care. 32. Styling The Resume Components: Let's begin to stylize their resume component. And as you can see on the screen, there's no space to differentiate between the written component and the component. Here's the middle component. Here is the original component. Another thing I want you to focus on over here. You just have to take a look at the left side of the screen. Can you see the icons are not showing up, which is the SVGs for education, the rock history, programming skills, and the rest of the day. So we have to get all of this stuff's fixed in this lecture. Harold to VS code unless proceed. Screw up. Here, is it? Now whenever you require an image from a package, you have to come here and then do dot default. I think I've told you this in the previous lecture. So to my own opinion, this might be an issue with the version. And by the way, that's my own opinion. So Heron to read them CSS and less proceed. We will begin with the reason container. So I'm going to do dot resume container. Let me show you quickly. Here on tourism JS. Scroll down. And here is it. All right? We're going to have a display flex. And really we have been doing these fossil UNC. And I think now it is good to explain exactly what this does. When a container is set to display flex, it expands the items to fill available space or shrink them to prevent overflow. It's as simple as that. Now let's align items to center. The flex direction. Column. Justify contents center. The mean height. Let's make it fits contents. The margin, 120 pixels. To see the effects on the screen, we have to link their resume with the CSS file. So head on tourism GAS, screw up lava here we have to import regime dot css, save her onto the browser. Fees are gradually taking shape. Reason CSS. And over here we have to stylize the card. The card is going to serve as a container where the arrest information is going to sit on. We are going to have a display flex. Give it a height of physics, the pixels width of 10 a 100 pixels. Save her onto the browser. Can you see now? So let's give this a background color so you can see what I'm talking about. This is just for clarity. Background color. Let's make it tomato. Save. Go back to the browser. Now, can you see, so this will save as the container for the rest of the items. And now the icons over here. When I take off the background color, hair onto the browser. Can you see now it looks like the icon is not in a way simply because the background is white and the icon itself is white. Let's proceed. The reason Booleans, dot region, dash, bullets. Let's give it a height of 100%. The box shadow, 15 pixels. There are nine pixels by 15 pixels, and the color of the box shadow on f, 2 to 3, five, save her onto the browser. And here is the box shadow. Now let's specify the width and make everything clean. With as many kids, 30, 20 pixels, save her onto the browser. And here's it. Can you see the message M line is the reason bullets details. So I think he does have two highlights. Grab, come here, paste, close up the curly brackets. All we need to do is details. And please always match of a class names are welds, Paltz, the flex grow. Specify one over here. The width. This should be a 100 pixels. Overflow, heating and the padding. 0, 0. Safe. Again, head onto the browser and haze it. Now for the experience description, dot experience, dash, description. Be mindful of the spellings are right. We are going to have the margin. Ten pixels from the top. 0 on the rest of the sides. Align. Justify, specify the max width, 100%. Right? So for the reason details Cairo's on her onto the browser and let me show you. Now, click on any of the label. It is going to pop up the correspondent details. So let's try it on work history. Do you see that? Programming skills, projects, education? Alright, though it is showing up fine, but this is not as expected. Hereon to VS Code dot resume, dash details. Dodge. Car rules are when any of the label is clicked. We want it's to scroll to each corresponding details. So I'm going to do transition, transform. Let's make it safe. Heroin to the browser. And now we have to reload here on work history. Did you see that's beautiful. I like IT. Projects education. And now I want to show you something with interest. Can you see there's an empty space over here? Don't worry. As we proceed to stylize this component, everything is going to appear as expected hereon to VS code. Scroll down. And now for the bullet container, dot dash container, we are going to have it display flex, align items to center. Let's give it a height, 101%, 100%. What does again, the position relative, save her onto the browser. Now, everything in the bullet container is inline style as the bullets. Bullets specify the width of 80 percent, position as well, relative. And the Z index. For the bullet itself. I mean, all of these labels, including the economists dot bullets. We are going to have a display flex. Align items to center. The background color. The background color is right. I hope you are familiar with this color. Given the height of 40 pixels. Margin, 15 pixels from the top. The right, Sarah pixels, padding, 0 pixels. Excuse me, this is eight pixels. Border-radius. A border radius is going to be 20 pixels. The width 30 pixels. Transition. Save her onto the browser, and here is the results. Everything nice. Now, can you see what I have focused my mouse on the labels I wanted to show a pointer. So I'm going to do Save again, head on to the browser. Now take a look. You see that are right. Next is the bullets labeled. Bullets dash, label. The font size. 14 pixels. The whitespace up. The font-family, semi bowl. Check it out on the browser. You see, can you see that everything is quarterly taking shape? The nest is the pullets logo. Let's give the high 16 pixels, margin. 0 petty pixels, heroin to the browser. Now can you see the logos are well spaced. Can see, you know, now for the bullet icons, dot bullets, dash, I can give it a width of 34 pixels. Height, 100%. Z index 1. Let's give it a background color. As usual, background color. Let's take it out on the browser. Can you see now this bar over here? But we want the logos two seats right in here. So for that, we're going to have a position. Let's make it absolute. Save her onto the browser. Beautiful, I like it here on top VS Code. And for the bullet icon. Now for the selected bullets, let me show you haven't tourism GAS and down here in the function. All right, So here is it. We just stylized the bullet and we are going to stylize the selected bullet as well. So let me show you when any of the label is clicked. We want it to be highlighted. Haven't arisen CSS. And hey, I'm going to do dot selected dodge bullets. We just have to specify the color. Let's make it white. The width. 100% safe. Beautiful. Now click on Project DOC, rock history, education. Right? Let's proceed with the screen container. So now after that hidden interest, let me show you can you see this? We have to fix this problem. Dot dash, dash container. Let's have a display flex. And the flex direction. Colon. Justify content. Space evenly. Give it a height. 360 pixels. Give it a width. 100%. Safe. Her onto the browser. Now can you see everything is right in the card as suspected? Heroin to VS Code. Scroll up. Now let's specify the background color of this catalogue more time. Nothing is exiting the car. Everything is right in the safe. Scroll down to less than line is the reason the head region dash, resuming heading. Dash, dash heading. Quickly, as happy to position relative. That's how we display flex. Justify content. Space between line is the head and Booleans. Heading, dash, bullet. Give it a position. Absolute, left minus 30 pixels. The height and the width, 15 pixels. Top is 50 pixels. Let's specify the background color. And this time we're going to make it orange. Save that onto the browser and let's stick it out. So here are the bullets taken out on work history. And here the solid line is to make it quite simple, so you just have to do border-radius. Make it 50 percent. Go back to the browser and hear the evidence appears nicely. The MSDN line is the reason so beheading, dot dash, dash, heading. And always make sure your class names are well spelled. A font size, 14 pixels. The font-family course you should know by now, poppies, semi Boulder, the color of the font. So let's dialyze the reason heading description, dot dash, dash, description. Just specify the foreign size of pixels. Align, justify taking shape. All right, so the line is the date of a here, which is the duration. Can you see at the right edge of the screen? Let's highlight that weekly dot, heading, dash, date, right? So, um, let's specify the background color. Of course, we're going to make it to be dark orange. Copy, paste it here. Give it a party. The phone size. It should be 14 pixels. Let's give it a border radius as 14 pixels. And lastly, we want the color, which is the font color, to be white. Safe haven to the browser. And here the beautiful head onto VS code. So let's begin to stylize the skill section, which is this q bar dot, skill dash parent. Let's have it display flex. And the flex direction column. For we've 50 percent. Now for the program in steel container, programming skill container, let's have it display flex. And the flex direction is going to be wrong. Align items to center. Justify content. Space between the flex wrap up. What is the skill percentage? Dot skill dash. So this is going to show the strength of your programming skills. Now, we're going to do position. Let's make it relative. Give it a height of 15 pixels, 70 percent. And of course, we have to specify the background color, so I just have to copy it from here simply because it is going to be the same color. Save heroin to the browser. Right? So we've got this weird resort over, hey, what could be the problem? Okay, hang on to VS code. What's the problem? Let's check all the parents, everything cool over here. The programming skill container. This is our right friends. Let's do these two to wrap, right? So the flex wrap is going to be Rob had on to VS Code. And boom, everything as expected for the active percentage bar. So here I'm going to copy these. Paste, close up the curly bracket. And over here, dot dash, dash. Let's do that quickly. Of course, the height is going to be the same. I'm just going to copy paste transition. And this time the background color is going to indicate your ability. So we have to specify, hey, is it safe? Beautiful. Now can you see everything is working as expected? I like it had until VS Code. And lastly, for the span tag, right, in the skill parent class. So it does have to copy these. Come here. Paste, close up the curly brackets. We are going to have the span tag, the font-family, the font size, 16 pixels. And the color is going to be dark orange. The font color, dark orange. Safe. All right, so let's hit onto the browser and see the final result. Beautiful. Take it out on education. Within Qu, whack, history, programming, skill, project, interest. Everything is working as a spectator and I like it. So when you check it on mobile platform, you will realize that it is not responsive. Can you see the Moire? This would be fixed in the next lecture. So this is all for now, for this lecture, see you in the next lecture. Stay focused and take care. 33. Resume Responsiveness: All right, so now we're going to make the resume components responsive. Heroin, so VS Code. Let's begin with the iPad Pro. Style as very resume card. Resume dash. Give it a width of 80 pixels. Laughing for that. So step down here. Now we have to stylize the original bullet details. Dot radium, dodge bullets, dash details. Specify the padding. Right, so we are done. And for the iPad Pro, now let's proceed under arrest mobile platforms. As highlight these grab Based, close the curly brackets. And here we have to specify the pixels for mobile phones. 1023 dot resume content as how we display flex and the flex direction column. Align items to send out nests for the bullets. Bullets. Okay, so we have to place a dot here simply because it is a class name. And the bullets is going to have the weave of 90 percent. For the region card. The height. Let's make it fit content. We're going to have a display flex. And the flex direction column. The margin, 30 pixels align items. Center. Of course the width is going to be 90 percent, so I'm going to grab paste it here. Now for the resume bullets details, dot resume. Bullet dash details. Give it a height. 360 pixels. Give it a width of Fit Content. Specify the padding, 0. The reason bullet. Of course, this should be read them bullets. Give it a width of 100%. Margin, 30 pixels, 0. Lastly, for the selected bullet dot selected dodge bullets. And let's give it a width of 100%. So I'm just going to highlight, grab, come here, paste it. All right, So if you are following my lead, your definitely get the same result with me. Save her onto the browser. Let's reload. Then, stick it out on mobile platforms. Here is on iPhone five. Score down. Beautiful. Now can you see? Excellent. All right, Let's take it out on iPhone X. Perfect Guys. Let's grit. On iPad Pro. Awesome. I love this on iPad. Take a look. And lastly, less taken out on iPhone 6, 7, and 8 Clause. Everything looks nice as spectate. So this is a suddenly the result we are expecting from this lecture. Everything looks nice and I like it. All right, so this is all for now, for this lecture. See you in the next lecture. Stay focused and take care. 34. Testimonial Component And Owl Carousel: Welcome back to the cars. All right. Let's begin to work on the testimonial component. And at the end, we're going to have a very nice-looking testimonial like this. Take a look. Can you see that? Isn't this beautiful? All right, so let's get started quickly. Go back to VS code. Right-click on the pocket testimonial. Here is it, right-click? And now we're going to create its corresponding component. So here a new file. And this would be called testimonial dot js. Let's create it corresponding CSS file. Right-click on testimonial. New file. Testimonial dot css is beautiful. The next line is to install the OWL Carol is 0. So her onto the terminal. Right here on the terminal, I am in the root directory. So let's head on to the client. For that. I'm just going to do CD client. And here I'm going to do npm install, React dash, dash cruiser. To proceed. Heat on the Enter key on your keyboard. The installation is ongoing. Installed, successful. The next in line is to link this project with jQuery. Factory could help up and copy the jQuery script. Materials. Could help our score down. So here we have the jQuery script, highlight, copy. Go back to VS code. Now I'm just going to search for index.html. I prefer to search for it this way. So you can actually set for it in the Explorer. Scroll down past the jQuery script over here. Save the project. Then close down the index.html, head onto the testimonial, generate the React js functional component. So here we import the OWL Caruso from React dodge OWL kairos. Go back to the code, how power more time. And here we have to copy this Import. Copy. Please do not copy these over here. This is just a headline and various why I've placed that the comment sign over here. So don't copy this line, right? These are the necessary lines. Copy, go back to VS code and then paste. So let's import the screen heading, which is the reusable component. And of course by now you should know how to do that. Utilities splash screen heading, splash screen heading GAS is also import this crosshair viz a viz from utilities clash. And over here we have to also import the animation is the next in line is to implement the smooth screw and the fading effect. Therefore, I just have to copy that from about me. So I'm just going to paste it. Beautiful. Having done that here into Steve, we are going to render the screen heading. And it has attributes title. Here we're going to do testimonial. And of course it has attribute subheading. Here we're going to do here. We're going to have a section with the class name of a testimonial section. I know most of you were actually expecting it to be dv, class name of testimonial section. And here we are going to give it an ID, props dot ID. So this function is going to pick it improves safe. Now we have to add these components but the screen common P. And then I'm going to set for common booties. And over here, we're going to import testimonial from portfolio container slash testimonial. Testimonial. Beautiful. And right now I'm just going to duplicate this code. Here. We have to change the name to testimonial. And here the component is testimonial. Go back to the terminal and I'm going to do npm, starts. Beautiful. Now we've got a testimonial displayed on the screen. And here is the reusable component. Screw up unless check of the nymph appears as navigation at the top. Right here is it can you see so when you click on this testimonial to the testimonial components. Beautiful. Go back to the VS Code. We don't need the common potatoes anymore. Close it down. And also we don't need the about me. Close it down. So right now we are in the testimonial JS. So right, in this section, we are going to have a div with the class name of container. And right, in this container, we are going to have another div with the class name of row and a right in this role. Then we have to call the OWL Caruso. So I'm gonna do OWL and hey, is it beautiful? So here we are going to give the class name for the blue dash arrows. And we are going to give it an ID, ARF testimonial, testimonial dash, carousel. And here we are going to have another div with the class name of. So this is a Bootstrap class name, column dash, dash 12. And here we are going to have a div, give it a class name of this T dash items and write in the test the item. We're also going to have a div with the class name of S T dash comment. And here we are going to have a p tag. This is just for the right job. All right? So right in this p tag, I've got a write-up already. So I just have to go back to the code. And here you're gonna see testimony. Now I'm just going to copy these lines of hey, come here, paste it. Right? So let's format this code with pretty up right-click Format document with. Can you see that? Amazing. We want this to appear as a quote. So what I'm gonna do right now is to wrap up this testimony with an I tag. Then we can specify the icon. And here I prefer to have the self-closing tag. So here we are going to have a className, a bootstrap class of FASFA, dash, dash, left. So this is going to generate the left quote icon. Now I just have to copy this. Come here, paste, change it to court right after the closing p tag. We are going to have a UL tag. Right? In this UL tag. We're going to have the LI tag right here. We are going to have an I tag. Now we just want to implement the rate and icons. Let me show you quickly. So I just have to stop these command C to stop the amino. Alright, so this is what we want to implement. The rating icons over here. And this is the double quotes we just implemented. Can you see so this is exactly how the testimony is going to appear on the screen. So over here, before we proceed with further stuffs, we have to keep this UL tag, a class name, dash. All right, so now let's focus on the I tags. And here we are going to give this a class name, FASFA dash. So I also prefer to have the self-closing tag. Now we're going to highlight the LI tag, copy and paste it. Paste it again and again. So here we are going to have FASFA dy dash, dash out. Thus offering LI tags and scroll down. And here we are going to have a div, give it a class name of clients dash in fall, right? In the client info. We are going to have the photo of the client, the name, and the position of the client. So to do that, we have to import the necessary photos. Be the pop-up, the explorer, replicon public here on New Folder. And this would be called IMG. Go back to the Materials folder open. And here is the testimonial, right? In the testimonial package, we have all the unnecessary images that is relevant to the testimonial component. And here the now open up the portfolio pro client SRC, right? We have to look for the public. And here is the IMG, which was created few seconds ago. And then now I have to go back, copy all of this package, which is the testimonial. Paste it right inside the IMG. Common V. Beautiful. Close it down, close it down. Go back to VS code, and then let's check it out. Here's the IMD. Click to open, and then here is the testimonial. And all of these are the relevant photos. So here we are going to have the IMG tag, SRC. We have to reference the pocket IMG slash testimonial class. Now we want to make use of this photo. Tennessee. So the name is Lady dot PNG. Now, give it an odd no internet connection. The odds would be displayed on the screen when there's a problem loading the image. Save, go back to the browser and hates it. So now let's specify the name of the client. And what we're going to use H5 for that. So I'm going to do they see dominate. Now for the position. We are going to use a p tag for that. So let's assume that this lady is a CEO. I'm gonna do CEO, global. Save, check it out. So here's the name of the client. And below is the position. Beautiful. The nest and line is to duplicate this code three times. Or you can copy and paste three times is all the same. So watch me as I copy from a div with the class name of collage or 12. I have to make it so clear to you so you don't run into trouble. And this div, NCAA from lines 32, lines 67. So watch me as I highlight. Now, I'm going to hold down the Shift and the down arrow key on your keyboard. 3 times 1, 2, 3. And does it save? Go back to the browser, reload. Can you see that folder? For now? We're not going to see in escrow effect simply because we haven't implemented that Caruso. All right, so we are done with the UI. And in the next lecture, we will implement the kairos. I'll see you in the next lecture. Stay focused and take care. 35. Implementing Testimonial Carousel Using React Owl Carousel: All right, so now we are going to work on the testimonial kairos. And at the end of this lecture, you will have the testimonials scrolling from the right edge of the screen to the left it off the screen. Let's get started quickly. Her on to VS code. Over here. Before we proceed, we have to make the necessary changes. Command B to open up the Explorer. And then let me show you over here the testimonial dot CSS. When I went through the previous lecture, I realized that the testimonials, CSS, was not spelled correctly. So now only have to do is right-click on the testimonial CSS, and then click on Rename. Over here. Make sure that what you see on the screen right now is a level same with what you have on your code. So you have to make the necessary corrections. Previously, there was an over here. Let me show you like these. So all you have to do is wipe off the OH, and then heat on the return key on your keyboard. Beautiful. Nest, scroll down. Let me show you. I have added some images of the client. So here is the lady dot PNG. And when you step down to the next client, I have Mike dot PNG. So you can actually change all of these images. And these images are right here in a testimonial package. B, scroll to republic. Here, IMG, and then here is the lady dot PNG. Png and Mike dot PNG. Okay. Close down that testimonial JS. I have to bring your own again. Scroll up. Now let's implement the carousel const options and then set it to empty objects. And here we are going to have the loop to be true. So we can have a constant repetition of the testimonies. For margin. Let's make it 0 separated with a comma and then nerve right here, you can make it true or false. And emit in bounds, right? Unlimited out how Lewis from him but to separate it with a comma and then dots this Boolean operations. So let's make it true. You can disable it at your end by setting it to be false. Autoplay. We want it through a smart speed. So what the autoplay doors is, when you open up the browser, which is the website, you don't need to click any button for the testimonial to start scrolling. So that is going to be done automatically. Versus the speed for which that testimonials will scroll from the right edge of the screen to the left it off the screen. You can decide to increase the speed and as well, you can decide to reduce the speed. Now, it is time to make it responsive. That items, it's going to be one. So I just have to highlight and then duplicate it twice. Over here. Don't worry, I'm going to spin all of these tabs to you. And here we're going to have 768. And lastly we are going to have 100 and displays we want it's three. So if I hear any screen within 0 to 768 pixels, the testimonia is going to appear a column and a row, right? In. On laptop, desktop, and iPad, it is going to appear in three columns. And only smaller devices such as the iPhone or Samsung, it is going to appear just one colon, right? Yeah, so that's exactly what we did over here. Save, scroll down to where you have the OWL Caruso. Now here I'm going to do open and close curly bracket. Now we have to take into the op shares. Save, go back to the browser and let's check it out. Can you see that's how beautiful I like it. Now we have the testimonial scrolling from the right edge of the screen to the left it off the screen. All right, so this is often for this lecture. And in the next lecture we'll begin to stylize this continent and then everything is going to look fine. See you in the next lecture. Stay focused and take care. 36. Styling Testimonial Component: All right. So let's begin to stylize the testimonial component. Heroin to VS Code. Open up the testimonial CSS. And here is it. Close up the Explorer command B. Right here. We are going to start with the testimonial section. Testimonial section. And the padding. It's going to be 80 pixels. There are 80 pixels. The background image URL. And if I hear, we have to import the image we want to use for the background. Now, open up the materials folder. It does have to head onto a desktop where it is located at my end. Down here is the materials, n, here is the testimonial or been open up the portfolio pro client SRC assets. So I'm just going to drag this to the side. Go back. So I'm going to do is to copy the whole pocket. Copy. Come down here right in the assets. I'm just going to paste, close it down, close it down, then head on to VS Code. Double quote over here. We have to move some step ahead to heat the SRC. Src slash assets. Testimonial. N. Here is the background image. Bitty dash one dot JPEG. The background position. Let's make it center. The background attachment. We are going to have it fixed. And the position. Let's make it relates. See you. And for the z-index, Z dash index, let's make it minus one. Save. Go back to the testimonial JS and less link it with the CSS file. Scroll to the top. And over here I'm just going to do import testimonial dot css, save her onto the browser and let's check it out. Reload. Right? Okay, so here is the background. So when I scroll to the top, you're going to see the background being fixed to the screen. Do you see the background is not moving. It is not changing simply because we have the background attachment to be fixed. Now, do you see okay, right. We're onto testimonial CSS nest. We have to do the testimonial section before. So I'm just going to copy these. Paste, close off the curly brackets. And here we are going to have double colon before. And here we're going to have the content to be empty. And the position absolute. The left 0, the top 0, the width, 100%, the height, 100%, the Z index. So I'm just going to have this copied because it's exactly the same team. The opacity will have no Harvard's 0, it five. Now we're going to have the background color to be. Alright, So save her on to the browser and let's check it out. How beautiful are, right? So when you look at it closely, you will realize that the background image is now transparent simply because we have placed another bar grand on top of it and then specify the opacity. Let me show you quickly. Had on to VS Code and here is what made it transparent, right? So when I reduce the opacity to be 0.5, save, come back here. Can you see? Now it becomes more transparent. So I think our zero-point 85 would be cool for that. So you can specify in a value of a choice, is that lethal way? You like it right? Now we are going to stylize are the FUTA dot, foo dot, dash image. With 100%. The height of course, it is going to be 100%, So I just have to copy it from here. And the max we've 1920 pixels. Overflow, heating. We are going to have it display flex, justify contents. Guess you know, center. And then the margin top. We want it Manoj, one non-zero pixels. Save. Let's take it out on the browser. Scroll down. Now can you see that the curve over here is actually showing up but not as a spectator. So don't worry, as we proceed to stylize this component, we are going to have everything perfectly fine. All right, so come back here. Now we're going to do for the image IMG. Now we're going to have the max width, 100%. And the height to pixels. Go back and let's check out one more time. Can you see that? Beautiful? I like it. Now we have the expected results from the full time horizon. Let's proceed with the carousel. And here we have to stylize that tests the ITA. So I just have to copy this. Come back here, and then paste dot dash item. Give it a background color. Let's make it white. Padding, 30 pixels. Save her onto the browser. All right, This looks good, but we have to make it beta. Now go back to VS code. Now we have to give the border-radius course. We want this border of a hair to be a little bit curvy. So now I'm gonna do border-radius. 50 pixels from the top, 50 pixels from the right, 50 pixels from the bottom. And then we wanted 0 pixels from the bottom left. Save, go back to the browser and let's see. All right, so now we've applied the radius to all of the corners except for the bottom left corner. And when you look at it closely, you will realize that the edge is very sharp. And as for the rest of the corners, that urges our own curved right now for the p tag right inside a test equipment. So I'm just going to highlight this copy, come down, paste, close up the curly brackets. And then we want to stylize the p tag. And of course you can always reference that testimonial JS if you are not sure of the class names. Now for the font size, 16 pixels, line height, 26 pixels. The phones we eat a 100, so this will make its aerobic tick. And board. The margin. Margin, we're going to have those error ten pixels. And for the phones town, we want it to appear italic. Save her, right? Okay, Now can you see now the font appears slanted because of these. Alright. So the next in line is to stylize the quote. Now I'm just going to copy this column right here. Paste, close with the curly bracket. And then I'm going to do dot, FA, dash, dash, left. We don't have much to do over here, just the marginal right. Let's make it five pixels. And the color of the eye icon, which is the quote itself. So less Mickey's Commodore. And then before we proceed, this is supposed to be left. So sorry about that. Truly a typographical error. Save, come here. Now, the quote left is in good shape. So I just have to highlight fees and duplicated. So here we have to change it to quote, right? So the color remains the same. And here it is going to be margin-left. K. Now, the quote is in good shape. Now for the rating. So here I'm going to come up here, copy this again and again. Paste, close up the curly brackets. We want to stylize the aerating icons, which is the stars. So here we're going to have tested comment dot stars. So after this, I'm going to copy paste. And now we want to stylize the LI tag. And all of these classes are over here in the testimonial j is. Now these are the LI tags we are dealing with. Toronto testimonial CSS. So for stars, let me show you. You see it the way it appears like this. We don't like it. So we have to make it display, inline-block, Save, check it out. Beautiful, I like it. Everything is almost done. So let's continue. Let's specify the margin rights. All I'm gonna do right now is to highlight and then duplicate this code. Come here, we want to stylize the I tag. Let me show you again. Here are the I tag, right? Which is the icon itself. Can you see? So I'm going to wipe off this. We are going to size the icon. Go to form size of 30 pixels. And the color is going to be tomato. Save As check it again. Awesome. Go back to VS code. The next in line is the client info, dot info. So quickly let's do these. Position. Relative. Pardon left, 80 pixels, padding top 80 pixels, and the mean height is 60 pixels. Right? Before we proceed, a padding top has to be five pixels. So you can head on to the browser to check it out. But for me, I just have to proceed so we can finish up quickly. Now we have to stylize the images. These images over here. Alright, so I'm going to copy everything here. Come here, paste, close up the curly brackets. And then I'm gonna do IMG to target the images. So for height 70 pixels, the width 70 pixels. The border. We're going to have its two pixels, solid, transparent. The border color. Let's make it black. From the left, 0, the top 0. Save your reform. Now, we have to make the border of the frame to be circular, right? So go back and let's do that quickly. So we just have to handle the border-radius. Make it 50 percent. Save. Now can you see, oh, beautiful. I like it here into VS code unless continue. And we are going to have it position. Absolute. Save again, everything is as expected. Beautiful. I like it here onto VS Code. So now we have to stylize the H5 and a p tag. Just going to copy these. Paste, close up the curly bracket. And this time we have to target the hedge five. Give it a font size of 16 pixels. The font we'd see is 100. So this will make it thick. The line height, 26 pixels. Margin. Save. All right, so lastly, we have to stylize the p tag. Let me show you the p tag. This is the hit F5, and then this is the p tag. So the name of the client is wrapped up under age five. And the role of the client is wrapped up in a P tag, right face punishment is clean off, so everyone should have a proper understanding of what we are doing over here. Now I'm just going to copy this again, the p tag this time. So we're going to have the font size. Copy from here, paste and the line height. Also. Copy from here. Paste the phone to we'd copy from here. Paste, but this time is going to be 400. And the margin is 0. Save her onto the browser. Can you see that? Beautiful, I like it. Now let's check it out on mobile platforms. Here is an iPhone S. Scroll down. Beautiful. So iPhone six. Nice. So let's check it out on iPad Pro. And here is it on iPad Pro? It appears very nicely. I like it. And lastly, we have to check on Galaxy S5. Scroll down. So for instance, this is exactly the result we are expecting from this lecture. See you in the next lecture. Stay focused and take care. 37. Creating the ContactMe Component : Welcome back to the course. Alright, now we're gonna work on the contact me component. And the component comprises of two different sections. First is the UI, which has to do with the front end, and the second is the back end. And at the end, you will be able to receive email from a client. Response to that email through this portfolio website. Sounds great, right? Beautiful. Heron to VS code unless proceed. So the first one we're gonna do right here is to import the necessary files, which is the corresponding images. That is really fun story about MY component. Now opened up the materials folder. Materials. Then you're going to see these images pocket over here. Now, open up the portfolio Pro client. Click on sRC. Then we're going to copy this folder over here, and then paste it here. Let's look at what we have. We have the load, which is the GIF that we are going to use. We have the mailing background image. So let me show you what the doors. We just have to close this down and then close this down. Currently browser one more time. And if I hear when I hit on the send button, you are going to see the Lord in Bob. Do you see that? Beautiful. Let's create the corresponding components. Toronto portfolio container. And here is the contact me directory that we created earlier on in the previous lectures. So I'm just going to right-click here on New File. Then I will call it contact me dot js. And quickly we have to create it corresponding CSS file. Contact me dot CSS, right here onto contact me js. Let's hide the explorer. Generate the React js functional component, RFC. Beautiful. Now here we have to make the necessary imports. So here we are going to import. I am debug SRC slash images slash. Now let's check out Yvonne name of the images of are there. Now we have the males dot JPEG. So I'm just gonna do males dot JPEG. And here we have to import the loading bars wall. So I'm just going to call it loop one. All right, in the same directory. So here we have to import the reusable component utilities, splash, screen heading, screen heading. And over here we have to import, Import scroll service from utilities scroll. And as well we have to import the animation is utilities. Animation is. And what is do we have to import? Right? Seems for noun. These will be okay. And then nested line is to implement this smooth scroll and the fading effect. So we have to come here, take him props over here. Now we have implemented these in several components, so I just have to go back to about me js and then. Hello, Okay, It is already highlighted, so I'm just going to okay, for for teaching purposes, I just have to do it myself. Now. Less highlights from lines 92, lines 15, copy. Go back to contact me js. And then over here, we just have to paste. Okay, so before we proceed, we have to add these components to the screen. Now, Heroku common. Alright, so we have to import. Contact me. Can you see guys, this will automatically import these for me when I click here and boom, it is imported. So I know most of you might find it difficult to do these H2 and therefore, I have to do it manually myself. Yeah. So let me import it monogamous off contact me from portfolio container slash, contact me, slash contact me. And now I believe everyone is cool with these. So here we have to add it to constants over here. So now I just have to highlight these. Hold down the Alt and Shift and then tap the down arrow key on your keyboard. Can you see that? Right now we have to change the name to contact me. And here the component should be contacting me. Save. Go back to contact me JS. And right here on the DV, we are going to give this div a class name of mean dash container. So let's give it an ID so that we wouldn't be able to navigate to this components. One, the name of the screen is clicked. So here I'm going to do props. Dot ID. Now. Carefully. So quickly less than that, they're reusable components to have something displayed on the screen. Now I'm going to do screen heading closer up with the self-closing tag. And assuming no, we have been doing this in the previous lectures. Now the subheading I'm gonna do here, less keep in touch. Alright, so I think as you make these, okay, looks better this way. So just make the L just do it any way you want it to appear on the screen, right? So, yeah. Okay. And the other attribute is the title. Now I'm going to do contact me. Beautiful, I think this OK. Save. Go back to the terminal and then CD client. And then we're gonna do npm start. All right, Let's wait for it. Beautiful. Now we have the contact me component on the screen. Screw up and let's see if the name is added. Stood enough. Parfit guys here is compatible. So when I click on Contact me, it takes us down here. Heroin to VS code unless continue. Amanda B, to hide the Explorer. Now, right after the closing tag of the screen heading, we are going to have a div, give the class limb ARF, central dash phone. And hey, another div, class name of coal. So now we are going to have React typical. I think we have done this before, right? In the profile component. So let's head on to profile component. Profile ab.js. Has it come here? So we are going to copy from the hedge one. This headline over here does have to copy. Go back to contact me GS. So before we have this implemented, we have to import the React typical screw up. So following the best practices, we have to do the import of a hey, import from React dash type of call. Okay, So after this, I have to give it a space out like this. And right here, we just have to paste. So all we have to change is the header 1 tag. So I'm just going to highlight and then I'm going to press Command and D. Can you see these two is selected, the opening head tag and the closing head tag. This is called multicasts are editing. Make it H2 and 1000. And here we haven't, I'll give this to a class name of title. Now what I'm gonna do is highlight these and scrub at your end humid choose to display more information. But for me, I just want only this information to be displayed. So let me show the information of a here. Now I'm gonna do get in touch. So here we have to include the MOOG's. I believe you know how to do these. So for those of you who are not using Mac, all you have to do is to copy and paste my code to get this MODS. So now I need this emo kind of symbol over here. Does it for less than line is the social media icons. Let me show you. Here are the social media icons. And as I recall that we did all of this stuff's aileron in the previous lecture when we implemented the profile company. So in this lecture, the profile component is going to be very helpful. Go back to the profile components. Screw up. All right, so we're going to copy everything like this. Highlights copy rights from lines 122, lines 26, and then go back to contact me ds, right after the closing tag of the HA2. I'm just going to paste and visit beautiful MAN S to save. Go back to the browser and let's check out what we've done so far. All right, can you see these other icons at the bottom left corner of the screen? And I hope someone can see that. So I have to zoom this up a little bit. And here's what we've done so far. I don't want this lecture to take too long, so let's have a break here. And in the next lecture, we will proceed to create the contact form. See you in the next lecture. Stay focused and take care. 38. ContactMe Form And State Variable: So now let's proceed with the contact me phone Harrington VS Code. Here, Austin, we are going to do is to declare the necessary state variables to be used. So I think we should do it right here. Okay, let's import the US state. So you just have to place a camera US state and then scroll down. And here we are going to have const. And we have to have the name feud, calmer, setName to use States. And the initial state is going to be empty. Nothing will be in the feed for the first time. So I'll have to do right now is to highlight this and then duplicate it four times. Shift and tap the down arrow key on your keyboard. Okay, so we have to change this to email. And then here we are going to set email. Note. This is uncommon case. So we're going to set it to an empty string, which is the initial state. And over here we have to change this name to message. And here we have the banner. And lastly we have the Boolean right over here. And of course you should know that this is a Boolean operation and it should return either true or false. So here the initial states are going to be forearms. Now let's create the contact form quickly. So over here, right after this closing div, we're going to have a div, give the class name of dash. And also we are going to have a div here, give the class name of IMG dash. And here we're going to have a hedge for IMG SRC. I am debug. So we are going to give it an OT. So I think we should close it up with the self-closing tag. All right. So the next in line is to have the phone score down just after this closing div over here of className IMG back. We're going to have the phone right in here. We're going to have a p tag. Don't worry about these for now because I'm going to show you. So here we are going to have a label. Let's give it a class name. And I'm going to do for the tagline is going to be named. We are going to have the input type is test. And also I prefer the self-closing tag for these beautiful. So what I'm going to do next is to highlight these, like these. Duplicate it twice. Or you can do copy and paste twice. The nest is the email. So here I'm going to change it to e-mail. Change it to e-mail. The type here is going to be email. And these would be used for the message. And the message. Save and run. Go back to the browser and let me show you. Here is the image. Let me show you. Which is the IMG back we imported aileron and we showed it over here. Now, here is the hedge for. So when you look closely, you're gonna see the three input fields. Let me zoom in a little bit. Here is the name, the email, and the message. But I don't want the message box to be as the same size with the other fields. So for that, we have to use the test area as the impaled. Go back to VS Code. And here where you have the imput, we are going to change it to test area. Save. Go back. Now can you see are right, so we have it our peak at under rest of the fields as that. But one thing I want to show you is this, when you type in anything, these input fields is not functioning. Let me show you what I mean by that. So I'm going to zoom out a little bit. I'm going to inspect this. And let's check it out on the console. You see when I make use of the input fields, nothing is happening. Nothing is happening. So it means these fields are not functioning. Alright? So we have to handle the impedance. Now, go back to VS Code. And I think before we do that, we just have to implement the bottom. So let's have the bottom implemented quickly. Right after the test area. We are going to have another div, give the class name ARF, send Dash. And right in here we are going to have a Bolton. So here we're going to do the input type of the Bolton. Of course is going to be solved means for the tag is going to be sent. So we want to display an icon on the bottom. We have to take in the I tag and then give it a class name of FASFA dash p bar. Sorry, paper should be only one P xy plane. All right? And I also like to close with the self-closing tag. Okay, I think everything cool phenomenon. Check it out on the browser. And we have two k. This is the bottom of a here. At the bottom left corner of the screen. Can you see here is the boating. Go back to VS code. So now we have to handle the impedance. So scroll up and let's define a function for that. So now we are going to have a constant and I'm going to call it honeydew name. Set it to our function, and then take an event. Beautiful. So here we're going to do setName events, dots, targets, dot value, highlight these, duplicate it twice. And here we have to change it to email. These will be e-mail as well. Okay. Yeah. And here should be less age. Okay. Everything cooler. Scroll down unless implemented on enclave. So we have to start with the name, which is the name field. And now we have to have unchanged. We are going to invoke the function name and the value should be named. Scroll bar. Let's test it out. We'll have to reload. All right, so here on the console, we're going to see the change effect. So I'm going to type N. Let's take it out on the console. Okay, So when I do, I can see the unchanged over here. You see so this is exactly what the onchange doors. So in a nutshell, the onchange event in React, detect value of an input element changes. Sounds good, right? Beautiful. Go back to VS code unless have it implemented in all fields. And the same thing as Lee we are going to do for the email. So we're going to have on change. And remember, this is on karma case. We're going to call the handle email function. Value, of course, is going to be email. And lastly, we have to do it for the message. So I just have to copy this camera here. Paste. And please do change the function to handle message. So the value we are going to have here is from the message box. Save, go back to the browser. So let's give it a char. Open up the console, scroll down for the name I'm going to do. Mike therefore is where I can find for the email I'm gonna do. Okay, and for the message. So I just have to do HIV a. Hey, what is happening? The feet is not getting the value. Do you see that? It appears here on the console, but the value is not, is not grabbing the value. Okay, go back to VS code and let's have it fixed. Screw up, right? Friends. This is supposed to be set message and hope of obtaining or will be fine this time. All right. Okay, go back to the browser. We have to reload. Now let's try out the message. All right, everything is working perfectly fine. So phrase, this is all for now, for this lecture and in the next lecture, we will begin to stylize this company is, see you in the next lecture. Stay focused and take care. 39. Styling ContactMe Component: So we are going to stylize the contact me companies. And at the end you will have it look like these is in this beautiful. Go back to VS code unless proceed. Open up the contact me CSS. Common P set for contact me CSS. And here is it. Let's begin with the main container, dot mean dash container. So we're going to give it a mean height of 100 vh. For the central form, dot central. Fun. We're going to have the max-width, the padding. Let's have it display flex. And the border-radius of pixels. Margin 0 out. A lot of flex direction is going to be coelom. Justify content center. And for the background color. We're going to have here. Save. Now we have to link the contact me CSS with the contact me components. Opened up the contact me. Scroll to the top. So I think we should do it right here. Save, go back to the browser unless check it out. All right, so now we have the main container. Can see. But there's a problem with this image, which is the IMG bag. We will definitely fix that in the future. So head on to VS Code to contact me. And here Let's continue with the central form H2. Let me show you the history right, and type effect. Where do we have the type effect, I think is at the top. Here. Is it? The page to the color of the font definitely is going to be white. The letter spacing, which is the space in between each layer styles. So we are going to have it to ram the margin bottom. Let's make it's 20 pixels. Save and run it. Here we have to stylize for back fall, back, dash for the max width, 380 pixels. The margin, 0 auto. So now I'm just going to copy these. Close up the curly bracket and we want to target the IMG dash. But of course, you should know all of these classes over here. You should know this is the foam, the IMG back where the hedge for and the image is located. Give it a width of 100%. Margin bottom of 20 pixels. So now we have to stylize the IMD back four. So for that, I just have to copy these. Paste, close up the curly bracket. Then I'm gonna do H4, which is the phones. Let me show you. This is the IMG hit four ways it okay, look at it. It is now showing on the screen simply because of a font itself is black. So here is it. Send your email here. Now first, we have to change the color so we can see it up here on the screen. Let's make it wide save. Can you see now it is very visible. Later spacing. Zero-point. A form to wheat. We want it to be a little bit heavy, so like it appears bodily here. So we are going to make it 400, save, go back. Can you see now it is more board now. So if you take off these now, can you see the difference? The difference is clay. Give it a phone size of 18 pixels. Now we want to hide the stage for a little bit on the background. Give the capacity 0.5. Save. Do you see now? So we have this kind of effect over here, right? Beautiful. All right, go back to the browser. And here the image which is this IMG back over here, it is too large, so we have to reduce the size. So here lies the image. I'm going to paste and then close up the curly bracket. Now we have to target the emit its arm, which is the IMG tag. So the width, let's make it 100% safe. Now, do you see it is gradually taking shape. And the less than what we are going to do is to actually hide the image in the background a little bit. So over here, I'm going to do opacity. A less McKee, 0.5. Save one more time. Do you now see for emit is Heider right in the background? Now let's move on to the fields. Central phone. The phone, It's solve. So we are told we are going to have a display. Flex, the color. Let's make it black. 15 pixels. Justify content center. And they'll flex direction. Column. Now for margin top minus 52 pixels. The background color white, and the border-radius. 12 pixels. Save. Let's take it out. Right? Things are gradually taking shape and I like it. All right, let's continue. Go back to VS code. Now we have to stylize of a p tag right in the phone. Let me show you. Here is the p tag. And don't worry, when we begin to implement the email functionalities, I will show you what these doors, okay, so don't worry about it for now. What is a phone and a p tag? Text align, center, the margin, bottom, ten pixels. And the color, which is the font color. Unless my kids, orange. The letter spacing zero-point for rain. Actually want the functionalities are sets, right? So when you click on the bottom, you're going to see some test on the phone to indicate if the message was successful or not. That is exactly what the ban on doors, which is this p tag of a, Hey, the font-family. Poppies bold, right? So for the form label, the margin bottom is going to be five pixels. The color, Let's make it black. Then the lattice spacing zero-point to RAM. Save. Come back here. Now you see the labels vr well placed. These are the labels. All right, So let's begin to stylize the input fields, which is the name, the name fields, email field, and the message field. Now you should know that the I in the firm and the firm, we have to target the imput coma and that test area. We're going to go with a width of 100%. The border, two pixels, solid, RGBA. Now we have 0, k. Just do this into four times. And the outline, let's make it known the background color. So before we proceed with this, I have to show you what we wanna do is come here, imitate you down to the demo project. And as you can see that the default color of the inputs is a kind of gray. Let me zoom a little bit. See kind of a gray color over here. And when you focus your mouse on it, it is going to turn to white. Can see that with a kind of a blue border. Yeah. Blue outline border. Yeah. So I'm now we have to set the default color of the imputes to be gray. So the color is going to be RGBA to 300, Kolyma to 30 Zara. Zara. Then we're going to have hey, corner, 0.6, save, go back. And why is it? Do you know, see how to write the padding? The font size? M? For margin bottom. Let's make it 22 pixels. Border radius. We want it to be curved a little bit. I'm going to make it 10 pixels. Transition point. Or secret is safe and beautiful. Everything is looking nice, but we still have some certain things to be fixed. Now let's continue. For the test area, for this area, 3000 corner at five comma two, comma 0, 570, save. And lastly, the background itself. What is the background color should be white. Save. Go back. Let me zoom up a little bit. So when you focus your mouse on the message box, I see. Do you see that? Perfect guys. But for now, it is not working for the e-mail and a name field, but you can have it and the message which is the test area, highlight these duplicates it, Shift and Alt and then smash the down arrow key on your keyboard. All right, so now these will be changed to impute. I think it is going to have the same styles. Save, come back, Hey, can you see? Alright, so we have to stylize the bottom margin, top 15 pixels. Padding, five pixels. Outline. The 160 pixels. Save. It looks good. The border. Let's give it a border of two pixels, solid. Orange. The font size, 12 pixels, border-radius, 19 pixels. Background color. All right, let's make it safe. All right, the font is not showing up. We have to give it a font color. So the color should be white. Save, come back. Alright, and the font itself is too small of a font size, so let's make it maybe 18 pixels. Okay, That's fine. Yeah, that's fine. Align items center and then justify content to Santa. Okay, beautiful. But for now the firm is not the way we want it. And you see, this is exactly what we will achieve. So let's work towards achieving that. But before that, we have to make the unholy for the bolting, give the background color of same here. Softer. Transition. One is, which is one, say Aquinas, and the border, two pixels. So lead symptom, Hey, come here and let's try it up. Do you see me zoom? That's fine. For the bottom load. Which is okay for now. I don't think we have to stylize this simply because we haven't actually made it in the contact me G is so in the future, we are going to do that. The IMG buck, buck, flex. Let's make it one. Align items to center. The margin right? Smith heat 20 pixels. Take this off. This should be aligned itself to send, to save. And for the phone. So 0.9. So let's try to fix the icons before we can actually align this folder. So I'm going to do dot the I tag right in the coal. We're going to do pod in seven pixels. The color, more importantly, is wide. Save. Now you can see the icons, right? Very visible. Okay, so we wanna make it just like this. Do you see when you hover on it, it shows this cool effect. Now I just have to copy these. Paste it over here. Close up the curly brackets in here. We're going to do on over. And we will transform and give it a scale of 1.5. Save, go back. Now do you see beautiful how k, So we have to fix this problem simply because of a firm is not well aligned. And this is exactly the end result of a here what we want to achieve. 40. Fixing Contact Me Form (Styling): So we want it to look like this on mobile platform, but we want it like this on a laptop or tablet device. So we have to fix that quickly. I'm going to do ads, screen and min-width of and then we're going to have the bark from the max-width. Let's have it display flex. Justify content, space between the margin, top 30 pixels. Save, go back and let's check it out. And you see that beautiful. This is a suddenly the result we are expecting from this lecture. Go back to VS code unless proceed. We have to stylize The IMDB dot, dash. And here we are going to have it flex. Align it to centre. And the module right? 20 pixels for the form itself. Flex 0.9. I think. Vaso for now. Save. All right, can you see that? It looks extremely beautiful and I like it. So let's take it out on mobile platform. Right? So this is exactly what we've got if I hear it is indeed responsive in all platforms. Let's take it out on Galaxy S5 and iPhone 5. Iphone an iPhone 6. Let's take it out on iPhone 678. You see, everything looks good. Let's take it out on iPad Pro, on tablet device. So this is exactly how it looks on tablet device. So for instance, this is offered a URI, and in the next lecture, we'll, we'll head on to the back end. So for now, this is exactly what we've got over here. It looks so good and I like it. Everything is working as expected. Do you see this is the end of this lecture. See you in the next lecture. Stay focused and take care. 41. Form Functionality : Now we have the form look extremely beautiful. We have to finalize the front end functionality. And by the way, I want to show you something. Alright, so now when I click on the Seine aborting, you will realize that the application will reload. Let me show you quickly. Here is the same board in now I click. Take a look. The application will loads. So you're going to see this effect right under tab, check other tab over here. So let's give it a try again. When I hit on the send button, you just have to forecast over here right on the tab. Do you see the application with loads? So this is one of the stove that we are going to fix her on to VS code. Scroll to the top and let's fix this problem. Right? So here we are going to define a function constant submit folder. And here we are going to pick an event, set it to our function. Now I'm going to do event dot, prevent, default, screwed onto the form unless invoke this function. Here is it. Now I'm going to do Submit, Submit Form, Save, head on to the browser and let's check it out. Reload less smooth scroll to the contact me component. Give it a try by clicking the same boat in DC. Now the application do not reload animal Parfit, harold to VS groundless continued. Scroll to the top. Over here, we're gonna create an object called it data, set it to empty object. And then we're going to take in the force field, which is the name separated with the calmer email, separated with a comma. And lastly, the message. All right, so let's check it out. Now I'm going to do console.log. Let's log data, save her on to the browser, reload. Now, I have to take you to the console for the name. I'm going to do Mike for the email, I'm gonna do em at gmail.com. And for the message, I'm just gonna do HIV. I hear, when I click on the Send button, you're going to see the object on the console. You see. Let me open it up. Here we go. My name is Mike for email at gmail.com and then the message is high. Everything is working as expected hereon to VS Columbus continuum. So I just have to take off this log y pair of sometimes these metro and error. So we have to wrap it up in a try-block. Try. Then you have to select the one with the catch block as well. Okay, So for the catch here, we'll just have to log whatever error we have on the show. And over here, you just have to highlight from Lines 44 to lines 48. Come right here in the try block, paste. So nest, we have to set the boolean to true. Set to true. As we move further, I will explain to you what the Boolean doors over here. So for now, we are going to have a constant rest. Axes, dot post, but tick slash contact data, which is this object right here. So we are bringing it here to take everything in the fields, right? So it's as simple as that. And we have some warning on the console. It says Zeus is not defined. So we have to install axis, come back to the terminal, and then on to C to stop the server. Now I'm gonna do npm install acts use and also we have to install though react to justify. Let me show you quickly. Let's head on to the demo project. Okay, I just have to reload. Now when I click on the Send button, the toast is going to appear at the top right corner of the screen showing either the error message or the SOC sex message. Click. Dsi says, please fill out the fields. So here is the toast message, and this is the banner. Hadn't to VS code and write in the terminal. We also have to install React, dash, justify, installed successful, scroll to the top and less imported. All right, hey, I'm gonna do import from. And also we have to import toast from, React, testify. Scroll down. And here we have to continue. These would definitely return a promise. So we have to await. That program is here. We'll just have to wait. So whenever you are dealing with the await, you have to wrap up the function with a same screw up. So here I'm going to do a saint. All right, so be careful not to import the same from our USGS. Okay. Scroll to the top and let's check it out. Right. Let's continue. So we have to check if the fields are empty. If name dot length is equal to 0. So here, this definitely will involve repetition, which is after copy, paste, change the name to e-mail dot length. And also based change these two message dot length. All right, so if this is empty, we're going to draw a message from the back end. So here we're going to do rest dot data, dot MSG, which is the message. And also we want to use the toast to display the message at the top right corner of the screen. Now, I'm going to do those dot error. So here it is exactly the same thing. I just have to copy. Paste. Then we have to set the Boolean to force an else. If the form is filled and everything is correct, we have to return the success message from the back end. So we're gonna do else if restored status is 200. So I'm just going to copy everything from here like these, from lays 49 to 51. Copy. Paste her right guys, There's a typo over here. This is supposed to be error. I don't know why my keyboard always doing these double. So here we have to change the toast arrow to toast dot sock says, Perfect. Alright, safe. Scroll down and let's implement the load him Bob. So here is the Bertin. The class name of this div is st. So please do make sure that what you are seeing on the screen is exactly what you have at your end on your VS code. So right after the closing a tag, we're going to have a curly bracket. And then if the boolean is true, we are going to show the loading bar. So we just have to wrap it up in a b tag, give this a class name of load. Right on this b tag, we're going to have the IMG sounds. See, load one. Given an odd with the self-closing tag arrows. If it is false, it is not going to display on the aborting. So just an empty string. And quickly let me show you this image again. Scroll to the top. Hey is it? So we just imported the loads two dots GIF and then store it. So when I do Command P, t2. So here is the loading bar. Scroll down to the terminal npm. Start. Let's see the end result. Scroll down and then click on the same board. When do you see beautiful, I like it. So these might not be working at your end simply because you haven't stylized it. Head on to the fierce couldn't. Let me show you quickly. Now, we are going to open up, contact me CSAs. Scroll down where we have the load. Okay? So you just have to stylize this class over here, which is the load. Let me show you. Hey, is it so all you have to do is give it a width of 60 pixels. And then you are going to have it like this. And when you click on the same port in reload. Now the Boolean is sets the force. When I click on the Send button again, the Boolean is set to true and the loading bow would be displayed on a board when this is all for now for this lecture phrase. See you in the next lecture. Stay focused and take care. 42. Call To Action And FadeInScreen Animation: In this lecture, we will implement the call to action Wharton and as well, half the fading effect. Fortunately perfectly fine. For now. When you hit on the high army aborting, nothing happens. You see? And if I hear, nothing happens. When you reload the website, the fading effect is not working perfectly fine. So quickly had on to VS code unless proceed. Alright, so we will start with the About Me component. There is a typographical error over here. This is supposed to be fading screen. I'll please do make sure you make the necessary corrections. And this is the right thing. Having done this, we have to go back to this div with the class name of about me container. And then I'm gonna do fade, dash. Save her onto the browser. And let's see if the fading effect is being applied to the About Me component. Reload. Can you see? Now take a look. Do you see that? So let's do the same thing to all the components. So you have to open up resume js. And then I think we also made the mistake over here. Actually we made this mistake around the company simply because this was copied from the About Me component. So make sure you change these to fit in screen and then scroll down. Right here. Does div with the class name of original container. Then I'm going to do fade, dash, safe. Also her onto the testimonial GS. Guys, you just have to do this. Okay. We're gonna do fit in screen, right in the testimonial. Oh my God. This is a top. Okay. So we are going to implement it on the section tag. Save. And lastly, contact me. And of course, we should do the same pain is that LI save her onto the browser and then reload. So now when I scroll down, the component will fade. Doc, DOC. Perfect. Now it is time to implement the call to action voting. Hadn't really could help are. So right here we're going to copy the onclick copy. Actually, this is so simple and I believe some of you can do it at your end even with that watching this lecture. So now we have to proceed to the profile J. Screw up, okay, over here where we have the Bertin high AMI. So now place your mouse here and then paste the own clique. So here is the onClick method. This cross F is dot scroll handler dot scrotal high AMI. Go to the scroll service. And this is the function to scroll, to hire me. Save. Go back. Now, give it a click. It works perfectly fine. At the bottom right corner of the screen is the CTO action voting to smooth scroll to the home component. And I'm going to leave this as an assignment for you to implement it yourself. But I can assure you the complete source code is right there on GitHub. So scroll down, uh, let me show you over here. You have to do exactly the same pain that I did over here. Okay. You just have to copy the onClick method and then paste it on, right. So let me do it for you. I don't want you to complain. So we are going to head on to our About Me. Place your mouse right here, and then paste, Save. Go back. Click here. Everything is working as expected and I like it. This is often now for this lecture and see you in the next lecture. Take care. 43. Backend Initialization : All right, so let's dive into the back, end. Her on to VS code. The first thing we're gonna do right here is to initialize the package.json file Command B to pop up the Explorer. And then I'm just going to click on the client directory. And here is the root directory. So here is where we will initialize the package.json file for the back, end, her on to the terminal and then do Command C to stop that current running server. And then we have to cd space dot dot to step out of the client's directory. Can you see now we are in the root directory portfolio Pro. What I'm gonna do right here is node package manager initialize, which is MPM needs. And of course you need to accept all the conditions. So we're going to yes, yes. Keep hitting the Enter key. And yes. Now I want to look at the Explorer. You are going to see it the package dot JSON file. And here is it. Doc. Beautiful, still on the terminal. Now we have to install the necessary packages that will be used at the back end. So here we are gonna do npm install concurrently. We also have to install halls and worry after the installation. I'm going to explain everything to you. And of course we need the dot ENV. We also need experts. Load me law. And lastly we need load monitor, which is for node. So I'm just going to pause the video so you can take a look at it. For installation is ongoing and at the end, you're going to have it right in the package.json file for the back end. Alright, can you see here are the perfect. Now let's start with concurrently. The concurrently is a package which can run multiple MPM scripts simultaneously. And for the cars. In a very simple Tim, the cause is a mechanism or which enables control access to resources located outside it given domain, right? So definitely the cause would be used to add middleware to the application. So Nest is the dot ENV. Dot ENV allows you to separate secrets from your source code. All right, so take for instance you are getting an e-commerce website and you wanna share of source code or with your friends like in a public domain, songs like GitHub, right? And you just want to see at a source code with them, but you do not want to share your API key for the payment integration and as well maybe the password to the database. So all you have to do is to hide all of the secret inside the ENV file and then ignore the ENV file. And when you want to deploy the application on GitHub. So the nested line is the x-rays. Actually the Express is a Node.js module which allows for easy routing, right? And we have denoted MLA itself with an applesauce to send a message directly to the e-mail box. And lastly, is the node ammonia tall, which is the node known. So what the Norman doors is to watch the application whenever there's any changes on the application, it is going to help restart the application of dramatically. So right here on the package.json, screw up. So here we're going to set up the scripts. All right, So please a comma here, I think tells the problem. And we are going to have an worry. I'm going to explain everything to you. So we just have to type the code very quickly. Mpm, start, prefix. Client. Always remember to add a coma so you don't plunge yourself into trouble. Half the depth. Concurrently. Backslash. Npm, run server side of the double quotes and another backslash come right here. Also another backslash, MPM, run Clyde's backslash, double quotes. And the nest is to give access to hero called compute our application for deployment. Now I'm just going to do Command B to have a full board. Heroku. Don't worry, I will show you we had to copy and paste this code so you don't lock yourself into trouble as well. Was the BWT MPM underscore underscore production. False? Then I'm going to npm install prefix client, MPM run viewed. Right? So I don't know the materials folder. Materials. Open up the code Hale-Bopp. So I'm going to scroll down. Alright, so here is the back end script. It does have to copy like this. Come here, wipe it off, paste. So this is exactly what you should do. Various unit to be very careful over here because when you make any mistake, Hey, honestly, this will make you, I don't wanna say that. Save this project. Actually, what I'm going to explain the plea is the concurrently, which is the div, right? When we do npm run dev, this will help stop the front end and the back end. All right guys, so this is often now for this lecture. In the next lecture, we will create the saver. Take care. 44. creating The Server : Let's begin to create a saver Command B to pop up the Explorer. So here we are going to create the server module here in the root directory. But I'm going to do is hover my mouse on this file over here, this icon, hope you can see. So you just have to hover on this file, which is the new farming can see. Click on it and then we're going to name it server.js. Another one hover on this icon, which is the new file. Click on it, and then we are going to have dot ENV. Perfect. So now we just have to keep the secret of a here in the dot ENV file, here onto the Materials folder. So here is the lead two secrets that we want to hide in this course. I just have to call B, go back to VS, good, pasted here, save her onto the server.js. So now we are going to require our packages are run our server using the Express JS, require dot ENV, dot config. And here we happen to have a constant, call it express require. We want to require x-rays. So this simply means we are importing expressed from the express module. Let me show you what we did right now. From here, we just require that the expressed from the extras module and then store it in this constants over here. The simplest data. And also we have to do the same for the cause. Excuse me, these have to be constants require we are going to require the cause. So here I'm going to do X-rays. So let me explain to you in a GFP, these will call the express function and put a new application inside this variable up. Do you understand what I mean? So this is calling a new express function and then put a new express application inside this variable. Now we have to tell the app to use calls as middleware. Up DOT, use Express, dot, JSON, app.use calls. So all of these I'm just going to do here, creating the middleware. Now let's create the ports. Process dot ENV, dot plot. We have to use the port 5000. And I'm going to do dot leasing to, we have to listen to a port less console, log the pot that we are listening to. Gonna say server, listening to port 5000, save. So right on the terminal, I'm going to do npm run serve. Duc. Profit guys says several listening to port 5000 and the node one is reading perfectly fine. Everything cool guys. So let me show you what the doors of a Him. Now let's assume I want to do several listening to port 5000 only. So I'm going to save. When I save, when you check on the console, you will realize that it says restarting due to changes and then starting node server.js. So the NADH mom helps to restart the application anytime you make changes to your source code. So this implies that you do not have to come here and do npm run server anymore. This is all for now, for this lecture. See you in the next lecture. Take care. 45. ContactRoute : Having created the server in the previous lecture, quickly, let's proceed with the contact route. Right here on VS Code. All I'm gonna do right now is to navigate to the Explorer. So over here I just have to close down the client. All right, so now we're here in the root directory. So right in the root directory, we're going to create a package called route. Click here, where my mouse is on new folder. We're gonna name this folder route. Right in this folder, we're going to create the route module. Right-click on the routes. Here a new file, dot js. So here I'm going to do require Express router. And the nest is the node Mailer. Constant. Load me law. Require NADH me Le Havre, right? So to implement the node Mailer, three steps are involved. Step one is we have to create that transport our objects. Step two, we have to set the mailing options object. And step three, we have to deliver the message with the send mail method. So before we proceed with those arms steps, we just have to create the route. Now I'm gonna do router dot posts, single slash contact. And here we need to take into pyramidalis request and response technique for is do not swap the parameters, okay, So when you do response here and request here, you may not have it work for you. Set it to arrow function, Command B to have a full board. So here we have to grab the data from the form, which is from the body. Now we're going to have a variable data request dot body because we are making a request from the firm which we created earlier in the previous lectures. If the feeds are MTU, we want to throw back some message over to the client. And I think we've implemented this. And the contact J is so common P, contact me. So it is exactly the same thing we're gonna do. What's few changes. Copy lines 51, and then go back to conduct route, paste. Close up the curly bracket. So right here it is going to be data dot name, dot length, which is this data right here. Variable data. So same thing applicable to the whole of them. Data dot, dot length and then data.dat message dot length. Beautiful. So if they are equal to 0, which means if nothing is in the fields and you click saint boating, we have to return response dot JSON. Taken an empty object, and I'm going to do MSG for the message. So we're gonna do here, please feel, are the fields beautiful? So let's head on with step one. So can someone remind me, what is step one? Haha, right, don't worry, I'm going to help you out. Step one is to create that transporter or object. Let SMTP transporter, load me le dot create transporter. Now we're going to take him some empty object. Right here. We're going to have the service and it's going to be Gmail. And please, you have to place a comma here. The connect ports. Let's make it for 65 comma. And now we have to implement the authentication. The user. Now you have to include your email. Tetanus. This is my personal email. So make sure to fix in your email, right, in the single quote, comma. And here you have to fix in your password as well. So let's say my password is ABC to 23. So please do make sure the e-mail and the password is correct. If you do not have it correct, it might not work for you. Semester online is to define the mail-in option means. Set it to empty object again. So here we are going to have from column data dot email tool. So this is the e-mail of your client, like it is coming from the e-mail of your client to your own personal email, which is the admin email. So I just have to copy these. Paste the subject back tick message from dollar sign over here, open and close curly bracket and then data dot name, comma, HTML, back tick. All right, so here you should not be confused. This back tick is opening here and it is ending here. I just want to do these for clarity so that everyone can follow along. Now we're going to have h3. Close up this history of a here. Informations. Outside the history. We are going to have a UL tag. And here we're going to have an LI tag. Now we're going to have the main coming from data, dot name, highlight, duplicate it. And we're going to have the e-mail, data dot email right now. Lastly, we are going to have it for a message. But for that, we have to move outside the UL tag and techniques. We are still in the HTML right here. We are going to have an h3. So basically what we are doing is we are designing the layout for which the message will assume right, in your inbox, right? So we are creating the layout for the message. It's as simple as that. Message. H3, have a p tag and then close up the p tag. Right in between the tag. We're going to have a dollar sign, open and close curly bracket data.me, right? So this is all for the mailing options. So right after this, our mailing objects, we have to send the message with the same email method. So all I'm gonna do right here is SMTP transporter dot send mail, taken the meal options, and then set it to our function. So these sometimes could throw an error. So we have to wrap it up in a try block. So here we should take in the error as well. Okay? Right, and a card block, we're going to return response dot. So if the response.status is a core 500 dot JSON, we are going to pass on the message. Here. We're going to do a messaging. The IIS server error. And also over here in the try block. Again, one more time. If response.status is 400, we are going to do. Please feel and hear the response. Dot status is 200. So this is a success, which is the message. So thank you for beautiful, right? So what is we have to export this module? Module dot exports, router. Beautiful. All right, so before we wrap up this lecture, we have to do one thing here. Can you see this colony bracket? This is it over here. So this is not supposed to be. So all we're gonna do right now is highlights of screw up. Here, is it? So it should end here. Command V to paste. Can you see, you know, everything cool. Quickly, Let's go to the same ideas and import this module. Let's do it right here. Right? So this is all for now, for this lecture. See you in the next lecture. 46. Configure Gmail : Let's configure the application in half the e-mail, working her onto server.js. Right here. We have to heat the route. Now. I'm going to do up dots, use karma. Contact route. You reform safe. Now open up the package.json file right in the client directory for the front end. So I'm gonna do Command P package.json. And then here is it, this guy right here in the front end, which is the client directory. Having done this heroin to. Scroll down. Here is the proxy, highlight. Copy heroin to VS code, and then paste it here. Save. All right, so if your application is not running already, so now I'm gonna do Control C to stop the server. So I have to start it all over again so that everyone can follow along. Now I'm gonna do npm run dev. Of course you should know that this will start up the front end and Oswald the back end. Let's give it a try by clicking the same bought in DOC that says, please feel are the fields. Let me show you quickly here into VS Code and then contact me EGS. So here is where we had the condition. Here is it. So if the fields are empty, we have to receive this message from the back end and display it on the front end. So let me show you on the back end where we actually throw this message. Open up the contact route. And why is it? So the front end is getting this message over here. So now when we do it on any successful, we are going to grab this message and then show it to the front end as well. Now heroin to the browser unless checkout the mail and functionality. So before we give the mainland functionality a try, we have to do something here in the could help our copy these Heron to the browser and then paste it right here. So here you just have to put it on. Now let me turn it off. Can you see so yes, by default is going to be like these if you haven't done this before. So if it is like this, you just have to put it on. And this is exactly what you need to configure for Gmail. Head on to the portfolio up. And over here. I'm just going to reload. Then let's give it a try. Okay, so before we do that, I have to show you my email right. For clarity. Now, can you see our right, harold to the end here I'm going to have a gmail.com. Okay, so let's give it a try by clicking the same boating. Wait for it. Says thank you for contacting a haze is it means everything is fortunately fine as suspected, heroin to the Gmail. And let me show you. Are right. So here is it. The name is a do baba, the email is adobe.com and then here is the message. Everything is cool guys ever team is working as expected, but something is wrong, so these shouldn't be there. So maybe we have some tipo at the contact route, so we would check that later. Now let me show you something. As you can see over here, you will realize that the toasty fat, which is the react to justify, is not showing up. Heroin to VS code unless implemented. Move on to the corticobulbar. And over here we have low copy, this Import. Copy, further react to justify harem to VS Code common P and then set for our app.js. And over here we just have to paste this import and then wrap up the up with the toast container. What's the self-closing tag? Save. And let's check it out again. Can you see that? Isn't this beautiful? This is indeed amazing. I like it. So let's give it a try one more time now I'm going to do click the Send porting. Wait for it. Do you see that here as the overreacts to justify positioned at the top right corner of the screen. Perfect. Everything is working as expected. So let's head on to the Gmail. Right? We have to see, okay, here is the new message. The name is John, and then the email is D DMU.com. Here is the message. All right, So for now, I just want you to ignore these, Okay? Definitely, or we're going to fix it in the next lectures. This is all from our first lecture. See you in the next lecture. Stay focused and take care. 47. Fixing Bugs: All right, so over here you will realize it says message from data dot name. Obviously there's something wrong on where we have to go back to VS code and fix that quickly. Heroin to VS code. Okay. So you just have to hit onto contact route. Excuse me, I have to check it again. Says message from data dot name. Okay. So this should be in the mail options. We have to check the salts message from data dot name. This should be correct. All right guys, I see, now we have to use the curly brackets k. I think this is the right name. Save her onto the browser, unrealistic and out. Go back to the portfolio, up, reload. Let's give it a try one more time. But client's name is Joe. The e-mail us assume it is Joe at gmail.com. Joe, just want to say, hi, I love your portfolio project. Click on the send port in unless check it out. Beautiful. Can you see that? My inbox and let's check it out. We have to reload. Take a look. Can you see message from Joe? Perfect, I love it. Now, everything is working as expected. Ozone. This is indeed a classic portfolio, currently portfolio up. And let me show you one more thing. When the form is submitted successfully, we want to clear the fields, right? So which means we want to set the fields to its default state. So Heron to VS code unless do that weekly. Contact me VGS. Okay, right, in this function down here where we have the SOC sex of a hay. So here we are going to set the fields to its default state sets Nim. We have to set name to an empty string, highlight duplicated twice. And then over here we have to change these to email. And lastly, we have to do it for the message. Safe. Let's take it out one more time. Relu k. So let's try to enjoy again this time, Joe. And he is going to be joe.com. Can you see No. And when the message is subtexts will refresh. So head on to the inbox. Here is the new message from job. Currently up. Beautiful, I like it. So friends. This is the end of the entire project. Let hope you'll love it. 48. Clean Up The Code And Prepare It For Deployment : The final step before we deploy your application on Heroku. Heroku VS code, unless make the necessary changes. Opened up the testimonial, testimonial JS and has it. All right, harold to the desktop where the project is located. And over here I have it at the top right corner of the screen, portfolio Pro, which is the root directory or been opened up the client public. Right here. I'm going to copy the package, IMG. Copy, go back, proceeds to the SRC, and then paste it here right in the SRC. Go back, open up the public one more time. Scrap heroin to the browser, and let's see if it reload. Scroll down to the testimonial n. Here is what you are going to see on the screen than worry, we are going to have this fixed in a GP heroin to VS code. Okay, So screw up and let me show you right here, we're going to import the images. Okay, so I'm gonna do import, excuse me, let's have it opened as RC IMG. Now, these are the various images that is relevant to the testimonial component. We're going to import is. Let's check out the testimonials. Here we have the lady dot PNG, call it P screw up. And I will name this image lady from once the head, SRC slash IMG. That's the ammonia slash lady dot PNG. Save. Scroll down to the first testimonial and hates it. So what I'm gonna do right in this SRC tag, wipe it off, and then open and close curly bracket. We have to take in the image, lady. Safe, okay. Heroin to the browser, reload. Can you see this is the first testimonial. Plaza. Can see the image has appeared. Go back. Now we have to do it for the rest of the testimonials. And over here we have the image to be myc dot PNG, grab highlight, duplicated four times 1234. Okay, so here we have to import Mike dot PNG. Scroll down first testimonia, the circle and the Fed. Excuse me. Okay, Here's the Fed. Also lady dot-dot-dot AND okay. And we also have man dot PNG scroll up. So I just have to import all the files or images main.py AND scroll down for the very last time. Let me show you. So the FUTA is screw up. We just have to import all the images. Wipe this off. Cool guys. With this, we are good to go. So over here, we're gonna give it a name. This should be my end. These should be and this should be shape. All right guys, this is all for the import. So we have to consume these inputs. Okay? This is what a mike, right in the SRC, wipe this off open and close curly bracket, then take him Mike. It's as simple as that. And also we have to do the same thing right here. And this is for the lady again. Lastly, for the curvy background around to the browser and cold, everything is recognized as spectators. This is all for now. In the next lecture, we will deploy this project on Hiroko. Take care. 49. Deploy To Heroku : All right, It is time for the playmates. And of course, at the end of this lecture, you should have your application live on the Internet. Sounds good, beautiful. Heron to VS code unless proceed, open up the server.js. And if I here, we are going to create a static assets for heroku to put our files. And we're going to do it here. We are going to do it based on condition. If process dots, ENV, dot, load on the score, envy and me show you quickly as heroin to the ENV file. So here Is it. Back to the server. So if this is equal production, which means if we are deploying the application. Now, these are what we're gonna do. Our foster, we have to create a folder. And I'm going to do ABC dot huge. And of course, this is going to be a middleware function. Express dot started right here, right in the client's we're going to create the beautiful order. So basically, the express.static delivers static files such as HTML, CSS, and the rest of them. When we want to use the Butte, we want to save these files in the beautiful order. So if a client makes a request or we want to send the index.html first. And of course, you should know that the index.html comprises of the whole application. Abc dot, get. Okay, corner. Here we're going to take in two parameters, requests and response. And please again, do not swap the parameters. Leave it the way you see today. Now we're gonna do rest dot, send file, path, dot resolve, underscore, underscore, DIR name, which is the directory name, is the client, coma. And then here we have the BWT. And now we have to target the index dot HTML. It's as simple as that. Save her, right? Everything is cool. Now the line is to login to Heroku, heroin to the browser and search for heroku.com. Alright, I'm logged in already, so I just have to log out, so I will just start it from scratch. So this is exactly what you are going to see if you have an account with Heroku, all you have to do is to enter the email address and your password. But if you do not have an account, you just have to create one for yourself. So to do that, come down here and then hit on the sign-up button. When you hit on the sign-up button, it is going to take you to a page where you will fill in the necessary details that is required and then you'll have your account opened. So if you have an account already here, I'm just going to stay in my Gmail account, Gmail and then click the login bonding. Okay, So when you look at the left edge of the screen, you will see some of the projects that I have deployed on heroku. Here. Can you see, don't worry, if you are new to Heroku and you haven't deployed any application yet, thus piece will be empty. So I don't want to panic. And on the right side of the screen is a short description of this application. Do you see that here? The description of the applications are right? So to create a new application, you just have to click on noon, Okay, and then create a new app. It's as simple as that. And here we are going to give it a name. Portfolio Pro. Says portfolio Pro is not available. That means this name is chosen by someone else already. So, okay. So we're going to have here and do portfolio. All right, so this name is available. We have to make use of this name is nice, but yeah, so we have to make use of it. And over here you have to choose where you are located, either in United States or Europe. So I'm going to leave it as United States. And then click on the Create tab. Scroll down and let me show you two have the application deployed on Heroku. We are going to use all of these instructions, heroin to VS code unless proceed with that. Over here on VS code, the first time we are going to do is to initialize the command B. Of course, you know, it should pop up the Explorer. So open up the clients on. Let me show you right in here. You're going to see that guids over here. Do you see that? But for some of you, you may not have to get over there. All you have to do is to come here at the bottom left corner of the screen. And you're going to see the settings icon over here. Click here on two settings. Right in the sandbox, we are going to search for Faust exclude. And these are the excluded files. So if yours is not there in the client directory, it should be here. Okay, so you just have to look for it and then hit this button over here to remove it from SQLite file. So all you have to do is to click this icon over here. Right? So I'm just going to close her kn after the whole of the struggle. I'm so sorry, we're not going to use it and the client directory. Okay, so here is the guids. Right-click, scrap. Close up the client's directory, and then step outside the root directory portfolio pro. Please do make sure you are outside that directory client. And here we are in the root directory. Can be a determiner and then come to see. So we are in the root directory portfolio Pro. What I'm gonna do right now is to initialize the gate and harvests in the root directory. Gets in it. Can you see that? Heat on the Enter key on your keyboard? And here's the good of a hair in the root directory. So the intention here is to add all of this falls into the gate. Alright, let's do that quickly. Again, heroin to the terminal. Now we're going to do git, add space dot. Can you see what I did on the screen? Gets space, odd, space, don't. And this will add all of the files into the gate. The nest and line is to commit these changes. A Heroku, Heroku. Here we have to copy the git commit. And here's it. Copy her on to VS code. Paste it right in the terminal. Again. Go back to here. We have to copy this instruction. Copy. Come here, paste. All right, So heroin to Heroku again. Now we have to push the application to Heroku, copy this command, heroin on to VS code, paste right into terminal and then hit the Enter key on your keyboard. This is going to shoot up the application and deployed on Heroku. And this Butte is going to take awhile. So I just have to pause the recording. Application deployed successfully. Now you can open up this application on VS code onto Heroku and open the application. So if you want to do it on VSCode, only have to do is Heroku. And this will kick start the project life on Heroku server. Let's wait for it. Until before. This is indeed amazing. I like it. The application is live on the internet. Right? I love it. Let's take it out quickly about MY resume. Test ammonia, and contact me. Beautiful, I love it. So let's give the mainland functionality a try. For the 41st time you deploy this application on Heroku and the email is not going to work. You know why? Simply because you have to give access to Heroku machine for Gmail, heroin to the code, how power opened up the materials. Could help our scroll down. And here's it. Give Heroku machine access to your Gmail. Copy this link here onto the browser. And hey, I just have to paste. All you have to do is to click on the Continue button down here onto the application and let's check it out. Portfolio. So VM name is going to be Joe Gmail. Gmail.com. And joy just want to say hi. Hi. Click on the Send button. Here we go. Can you see that everything is working as expected? Let's check it out on the Gmail. So Heron to the inbox. Can you see here is the new message from Joe. And Joe says, hi David. This is the sender's name, the sender's e-mail. And this message is coming from Joe. Isn't this beautiful? Classic? Let's take an atom mobile platforms. Do you see that? Everything is working perfectly fine? And of course, this is already deployed on the lifesaver. You can use your phone to open it up and check it out. Perfect. This is indeed a classic portfolio project. This is often now for this lecture. And in the next lecture, we will push the SAAS code to GitHub. See you in the next lecture. Take care. 50. Deploy To Git : All right, so let's push the project, took it hop Heron to the browser quickly. Then over here you just have to do github.com. Okay, Nice. So if you do not have an account with GitHub, all you have to do is to click on Sign up, filling the necessary details and have your account set up. So I already have an account. I just have to sign a and here I'm going to provide my e-mail. Here is my email and my password. Then signing bone here is my GitHub account. When you look at the left side of the screen, you will see the various projects that I have deployed on GitHub. And here v. So for you, if this is your first time using GitHub, you may not have anything there. So to create a new project, click on this icon right here at the top right corner of the screen. This plus icon, right? Hey, do you see? And then new repository. We have to specify the name of the repository. Portfolio Pro. So here we have to provide the description, but this is optional, but I advise you to always give it a description. Cool. Scroll down. Click on Create Repository. All right, so now we're going to follow these instructions to deploy the project. Heroin to VS Code. Come to see and please do make sure you are in the root directory. So important. And okay, let's close this down. We do not need this anymore. So I just have to scrub again. Scribe. Here in the root directory, we have to initialize the new gate. So here I'm going to do good in it. And hey, is it after initializing the gate, What else do we have to do? Can someone tell me? Alright, don't worry, I will help you out. The next in line is to add the files into the gate. All of these files here, we're going to add it into the gate. So to do that, okay. Let me leave you so you can do that. Give it a try. Right? You simply have to do gets space, dots. Take it out. Don't hold onto Heroku, sorry, heroin to get Rava. And over here we have to copy this command. And of course, this is going to be fest commit. Colby. Come down to the terminal, paste again. But to get, we also have to copy this command. Copy this instruction over here. Come to the terminal, paste, hit on the Enter key. And lastly, we have to push the project to get hop, go back. And now we just have to copy this. Copy. So we have to make some changes here. Smashed into key to get it firearm. Okay, so the operation is successful. We have to check it out on GitHub, harold to GitHub. All we have to do right now is to reload. Take a look. Can you see beautiful. Now we have the project deployed on GitHub. And I hope you've learned something beautiful in this course. Are right.