Adobe XD Web App UI/UX: Design a Portfolio Website From Zero

1. Introduction: Welcome to this course. My name is yesterday, Chelsea, and I'll be the instructor in this course. In this course, you are going to learn how to design a complete portfolio web app UI UX, using Adobe XD. You will design this portfolio web app UI UX. You, we're going to learn all the features of Adobe XD. For instance, you will learn how to make group component character style color. It says prototyping, animate shown plugins and many more things. At the end, you're going to learn how to export your design and different performance. Int of this course, you will have a complete real-world project that you can add to your portfolio and it will help you to get your dream job. This is a complete portfolio app that you are going to design in this course. You can see that we have a nice maybe cushion bar with some header and a picture here. And write up that we have our carrier objects where I am showing the emails of the parson and Dan appear objects. Some icon here also ten right up at that we have our education section. And you can see this nice design and shared with the gradient and box-shadow and tin box options here. And then we have these projects sections. In the project section, we have right now chip bowls. And now if I click on these few detests and it will move to the detail space where we have our different beers for showing our details post information here we have fear, our navigation bar, and then you can see the emails and then we have this inflammation. And at the bottom we also have these more projects section. Here you can see a couple of more projects in different designs. And at the bottom we have our footer. And now if I wanted to go back to the homepage, I just need to click on the homepage. It means that up with the piping in our application. So here you go. You can see that we are now informed pace. And after this project six shown, we have another section for Kathy skills. And here you can see different kinds of design here you're gonna learn, gave to the style color. It says color gradient when you will design the sexual, then we have another section which is going to be the tool section. And after that, we have these feedback section in our portfolio where we can see some information, some feedback in a card up Sean. And then we have this scroll optional, so sweet one. Then you can simply scroll it in a horizontal way. You will also want to learn how to make a scrollable and how to perform different kinds of scroll. Here you can see that we have fully gentleness both. And then we have our contact form options here. Here we have a nice contact form or contact with a person. And then we have this bottom, which is our footer in web app. So this is the complete app and that you are gonna design in this course. And after finishing this course, you will have a complete real-world project. Therefore, I will highly encourage you to enjoy this course. See you in the course. 2. Create Art Board and Navigation Design: Welcome to this lecture. In this part, we're going to start working on our Adobe XD project. So I have opened my Adobe XD software. So when you open your Adobe software, you will most probably able to see this kind of user interface. And over here we have option for iPhone, which is going to be for mobile app UI design. Then we have wave Instagram story and the custom size. For me, I'm going to use this whip 19201880 pixel. Alternatively, you can also add this hydrogen in white here, an upper selecting this custom size. I'm going to click on this width, 1920 and N1 and two pixel. And it is going to give us an artboard. This is our art board for a web app design. Alright, so we'll have to design our application over here. In the left side bar, in the left side corner we have, let me increase it. In the left side corner we have all the tools. This is our slip tool, our rectangle tool, our Ellipse Tool, polygon tool line tool, pen tool takes tool, and this is our art board. And over here we have two more icon. One is for our art board and another one is for our asset. So if we can create our color, is it characteristic components and so many things? And the bottom one is for our Our plug-in. If you have already installed. If you don't have any plugging yet, I'm going to tell you that I will use this icon for design plugin. And they didn't give us a couple of icon that we might need to use. You can simply install it. So how can you do it? If you don't know, then you can simply click on plugin and then you can click on Discover plugin is gonna give you user interface here. And from here you can click on this browse and then simply you can search icon for design. So let me show you if I started here icon. So we can search their icon for design. So most probably you will be able to see this. Our plug-in. Nothing done in this part is not fast enough. There are studies on it is not showing any way to show here. I will show you. From here you can install your plug-in n in the right sidebar, we have other property dependence. So when we select any of the tools, we can customize it to the right side corner. Something we enjoy. Alright, this is dark, I will show you. It should appear here. I think because of the intensity speed isn't showing. You need to install icons for design. I will show you later. Let me tell you first. So we have over here we have our decent tool, then our prototype tool. This is our share to right now, we are going to start working on our portfolio project. So in this part we will start designing by adding the navigation bar. On top of a replication, we will have our navigation bar. So for adding a navigation bar, we can simply take half of this rectangle tool and I'm going to drag, I'm going to drop it. I'm going too fast. You need to slip the rectangle tool. Then you can drag this thing this way. And in the right side corner you can see the height and white it is showing over here and I'm going to adjust it to this one. Here we have the white, which is 1920, and height is 75. From here you can also increase the height. Let's say I'm gonna select AT, then it is going to increase the height. Teary go. Now we can add our background color for our navigation bars. So for adding a background color, there is a color palette here. You can see the field by default it is white. And if you click here, then we will be able to see a color palette. From here, we can select our color, whatever color we want. Alternatively, you can also use your color codes, so simply you can copy your color code from anywhere and then you can simply paste it there. This is how it is going to work here, but for me, I'm just going to select any color from here. Maybe. This color. Perfect. This is our navigation color. In the navigation, we are going to have a couple of things. We will have our navigation bar, navigation item. Here. We will have some texts, maybe portfolio, maybe local. We can say you can just give a name. So for adding a text here, I need to take help of this text tool. I'm going to click on this text tool and I can say M white. And just for an example, once you will write your text, you will have to modify it from here. You can see here this is 20 years the font size of our text. Fast, let me change the color. Again. We need to slip the text and we can change the color from here. Let's select to white. And from here we can increase that farm size against tardy. Here you go, it has increased. And here you can also take a couple of options. So this d, d means uppercase, and this d, d means smaller than smaller and lower. You can adjust this this way. So I'm gonna take this one and we don't need to add this one. It means that it is going to create a little bit of a smaller size. And you can change that text font family here. We can say any color, any fun family name here. I'm going to choose this one. Now over here we're gonna have a couple of ticks. So I'm going to add D here. And let's say here. We can have here. We can have our dx, we can say home. And we will need to have a couple of more items here. So we can do, I can simply repeat. I can take help of this repeat grid. This stupid grip gives us an option to duplicate our data item. Alternatively, you can simply select the item and press Command D, and I can simply add items here. And if I need to have a little bit of space in-between these items, then I can simply increase it, and then I can also decrease this item here. Now let me ungroup this one. And here, after this home, we may need to have an option for this one we can say then you can say irrigation. Then I can remove one-by-one. I just wanted to show you that how this repeat grid work. And then another way is that just need to select the item and press Command G if you're using a Mac and I think it's Control D to duplicate it. So slipped item fast and then press Command D, and then it is gonna duplicate your item and then you can drag it. And you can see that from here you can also adjust the distance between these two items. You can see it's 46 by 46. For both of these are flipped and here we can have gold project. We have another option. Let me duplicate it. Project then we will have project, then we will have skills. Can say, instead of East keys, I'm going to add skills. Then we will have, I'm going to duplicate this one. And then I can add skills and then we will have tools option here. And after that we will need to have anhedonia condition ended the nav item, let's say for contact between each item we have 46. And then I can say the name is called contact. Here it goes. So we have designed our nav item. We will make it a bit of changes here. For example, we need to have our underscore of at the bottom of this item. It means to select item, select this one. Then we're gonna show this thing here. So I'm going to add under this line here whose there'll be able to underscore. And after selecting this one from here, this line size is important. So this highest by increasing the size. So you can increasing the border height obvious one. And then to change the color, I can simply click on this color palette. And here we go. We can see, and if you want to have some other options like dash and gap, but we don't need to have this one. Now, let me run this one. And here you go. We can see our project, our navigation buddies looked like this, but we're going to make little bit of changes. We will make little bit of changes, but the thing is that we need, we can change we can change the font size of this one, I think all the texts. So I'm gonna select except this N, Y, which is our logo. We will add a logo or the company name or the flipped full UNM anything. Rest of the text? I'm gonna change it up. I'm gonna change the size. I'm going to select control, then select all of these items. After selecting all of this item, we can change the target to 25 maybe. Again, now it looks good or you can use 25. There's all for this part and we will continue from the next lecture. See you in the next lecture. Bye bye. 3. Header Section Design: Welcome back once again. In this part, we will make little bit of changes of our navigation bar and we will add few extra things. So how can we do with now this is our navigation bar and we have defined the height of our AT. So now I'm going to increase this one because we are going to have the same navigation bar and the heater section here. So it is going to be 500. Let me run this one so that we can exactly see how must split is, cannot take, so we can add a little bit more here. You can take little bit of more, little bit more space here. Here we go. Now I think it's enough to have and to increase the artboard size, I can simply select the artboard Double-click and then from here you can increase it. After this amount of plot, this line, we will have an option to scroll. It is going to automatically add a scroll option. So let me show you this is our home screen, and now then we can see the scroll option here. No problem at all. Now we have this option. I can see we have little bit of options here. So note this one I was thinking to drink, to select this one only after selecting this one. Now you can have, you will have this. You can see this dot here, note and do double-click here. Once you wanted to double-click here, you will have an option to add this, this dot, which is a kind of path tool. So I'm gonna select on it. So if you double-click again after selecting, then you will have another two dot where you can. Let me know. If you double-click it. It is not coming. Let me select it again. This is our pot and if we double-click here, then we will have this kind of options to Jackie to make, to make changes. We can do this thing. We can add this kind of design option here because I'm going to undo it. And then I'm gonna select this one again. And from here we can add this kind of design issue. You can see we can simply drag this one and we can have this option here. But we don't need to have these two, but at the same time we just need to have one option here. Therefore, I'm going to unselect everything. And then this is the fresh one. And double-click and click on this one, double-click here. And then from here I can simply add this kind of design. You can see this is what I wanted to have. You need to select one time and then do double-click on the dot, then these two dots is going to appear. Then you can just drag it and you can make changes of it, either this side or this side. You have a lot of options to do it. It is your choice to select it. I think it is perfect. Or we can add a little bit of this. Perfect. Now, I run it, now it looks pretty good. We can add a little bit more changes here. So I'm going to add a gradient here. The colors to select the color again, we already have this color here. And then one thing that you can do here, if you need to use the same color again and again, then there are two ways you can simply click on it, and this color is going to appear here. Or alternatively, you can make our color components. So how to make a color component? So click on this now it is selected. Now if I right-click, then we will have this option you can see at color to asset. So we're going to add this color to our asset folder. And here you go, this is our color. And we have these two options because we have got this default. The border that is happening. I'm going to unselect this one from this one, there is no more than now that there's a reason it was selected, but it's not a big issue here. So in this way you can simply do it. Now, I'm going to add, I'm going to have our cycle here where we will add a profile picture. Maybe if you are a developer, you would love to add your profile picture here. To do so, we can simply add the circle here. Click on this ellipse tool and make it cycles. How to make it circle? How can you make sure if it is Sokoloff not? The easiest way is you need to define the same height and white. You can see why the two W4 and hardest 337, it means that it is not properly circle. I'm gonna change it to TI W4. Now it has same size, height, and white now. It is circled. Now, I can simply add the e-mails here. So I have downloaded couple of images here so you can add any images. So I just downloaded our EMS. I'm going to add these images here. Erica, we have in these images here. If you want, you can simply, you can simply add a border here. We already have water if you don't need to, we can remove it. And then if I slip this border and then you can change the height, change the size of the border, and then change the color. This one, change the color of this border to white so that we can see, now it looks quite good and I can increase a bit more size. You can say maybe five, maybe more than that. Seven. It looks good. Now if I run it, we can see these things here. We can see these things here. Perfect. I'm just adding an image. Just for an example, if you want, you can change any emails. Let me check if I have any other images. No, I don't have any other image so far. I'm going to keep this here for now. And we will change it later if it is required. I think it is fine. No problem at all. And now over here, we will have to add the name. We can add the name and little bit of a description. So I'm going to click on this Text tool and I can add, we can say the name is, I can add. What can I add? I can add any name. I can say John Doe, just for an example. Here, I can define again. First, let me change the tick size of this text. So this is instead of 25, I'm going to select party five. More than that, maybe 45. And here we can add a little bit of defense of farm size here. Let me try something. So there are many size of the data, several font, family name, you can choose any of these. We can add. We can add this one, and after that, we will need to have another text. Here. We can increase this one, and here we can add. And over here, we can add our little bit of information, maybe the parson, getting this portfolio website about his professional, you can say UI, UX designers. Then maybe he has more than one profession. Then we can say, I'm sorry, we need to add capital minus stock. State. For this font size, I can add smaller size, maybe 35. Now let me run it. John Doe, UX, UX designer and minus stock. We can simply, we need to select this 1 first. We can adjust it here bit more closer to John Doe, the name. And instead of this Cat5, I think I can do it 25, then it will look more better. This way. Here we go. Over here, we can have again, a little bit of design here. And how can we add a little bit of design here? So I'm going to click on this. I'm going to add, I'm going to take half of this Ellipse tools. Click on this ellipse tools, then I can simply draw some circuits. Let's say 15 by 15 height and y is 1515. And how it looks, it looks good. Now I can change the color, change the color to this. Here we go. We have this option. Then we can simply minimize the space between these two and make duplicate. We can do this team. Now if I click outside, then we have got this 12. Okay, so now we can do one more thing here. First and foremost, we need to ungroup this one. Then I'm going to press Command D to make it group. To make it grow. We just did just link entire thing and then you can press Command G. Now it should be here we can see this is the group and instead this group, we have the salon and we can change the name. We can say design ellipse. Inside this we have this. We have all these ellipse. You can see we have this amount, this number of one. And if you want to disability one, you can do so by clicking. You can see you can lock this one by clicking on this log button. Then it is not gonna remove anywhere. It is going to stay over here. I'm sorry, it has not this one. I need to press Command Z because the anonymous, okay. If you lock it, then it is not going down. You won't be able to remove it. You won't be able to move it from here. I'm going to unlock it here. And then if you wanted to use it a little simpler, you can click this one. And this item is disabled null. So we cannot undo, you can add it this one, then you have this one here. I'm going to make it this way. And then I can jog it here. Or maybe here. We have this option here. Alright, now we have this design. Now if I run it, I think it looks pretty good. No problem at all. Everything is fine here. And let me add a little bit of shadow. So if I click on this ellipse and here we have an option to add, to add this shadow because it, for this one it is not adding. I'm sorry, we need to select, we just need to select this ellipse. Here. We can add, I'm sorry, for this. For each item we can add a shadow here. I think there isn't any required to add shadow here because they did not want to visible here because the size is very small and we have added so many ellipse tool. I'm going to remove it here. So whatever we have, it is okay. And this is for this part. And in the next part we will start working for our next part that is gonna be appear here. So see you in the next lecture. Bye bye. 4. Design Career Object: Welcome back once again. In this part we'll start adding our career objects section in our project. But before that, I just wanted to make it a little bit of changes. So I want to change the MS. So instead of the semester, I'm going to add a directly different images here. You can simply remove the previous one and then add this one or you can simply drag it here. It's just a normal emus. Nothing news. I just wanted to chance it. Now it looks this this is the EMS. Everything is fine here. So I hope that it is not difficult for you. What I did, I just simply drag a new miss on this circle. Alternatively, you can simply delete the whole thing, this whole image. Then you can add it. It is going to replace this way. And we have the height and watch same exactly the same thing. Now if we look at this artboard background color, it looks very white. So I wanted to have a little bit different color. I'm gonna change this to grade type color. Maybe in this color. You can add your own grid color. And now if we run it, then I can see this color. Now it looks pretty good, no problem at all. Now another thing is that I need to select this art board fast, and then we have this layout option here. We need to click on it. If we click on it, then we will be able to see these kinds of his world is we have this column and we have this RO system here. You can see this disk layout system is going to help us to adding our item so that we can have the same height and wide from both sides. You can see we have column number 12. If you want, you can simply change it to 15. It is your choice. You can also make the white and hide on the gutter and column wide, column height and so many things you can just simply use it. It was 12, I'm gonna keep it with 12. And now from here we can simply adjust this one so we will make our application from this one to this one. Whatever item we're gonna create, we will start from here to here, that we can have the same distance from this left on the left side and from the right side. It will also help us to design our item. Let me show you now we need to add our career object to adequately or object. We can fast. I'm going to add an image here to do so, I'm gonna select this thing from here, and maybe from here from these four column, and then do this amount. Now, I can add these images here. This is the semi myths that we have here. Over here, we will get at a little bit of a space, and then from here we will add our carrier objects section. So I'm gonna take half of this rectangle tool again. And from here you can see it is going to give us a lot of options to add from here to this column, to this size. I'm going to get to this one. This way we can define homeless hide and white. We are living from both sides, from left side and from large size. So this is the best way to do, and we have this option here. Now I'm gonna chance, okay, So now the thing is that now if we need to have a little bit of border-radius here, so I can do so by adding this one here in this way, a little bit of this one. And then we can add these shadows. I'm going to click on this shadow and maybe I can add Hardy by 30. Here we go. We've got this shadow, so we will fix it. Let me run it. How it looks now. We can see it looks like this. Another thing is that you can see from the right side we have the same space. From this side we had the same space if we didn't use the layout and it'll be very difficult for us to understand. Homelessness basically are leaving from left-sided homeless, living from the right side. There's a reason we are using these, selecting this layout and then we can do it. We don't need to have this tardy vitality within 20 by 20 is enough. Now we don't need to. Now we can move to the previous option. So I'm going to click on it. I'm going to click on it. And then I'm going to unselect this layer. Now we have this option. When we need it again, we will do it. And now here we need to add, we need to add our text. So here fast, don't need to write carrier object. I'm going to click on it. I can add here. I can say the thing is that it's look, we can see it because the color is white here. So we need to write it to black. And then I think we can let me type something here. Then I can change the color to black. Need to change the color to black. Now we can see, now here we need to write. Somewhere here when you can write it. Gettier object. So here we will have these carrier object options. And I think I can change the font size to 30. And we can add a little bit of different font family. Maybe these options or maybe the better one. I don't know exactly what one is better, but we can juice. You can select maybe this one, not a big issue. And another thing is that I have removed the border. No, I didn't remove the water yet. So I'm going to you need to add the slip tool. So select this carrier object and from here remove the border. We don't need to have any board here. Alright, now after this, we can add a little bit of text to edit text. Here we can just add Laura full-text, some dummy text from Loren Ipsum. You can use any texts, whatever you want. But for me I'm just going to use some dummy text. I'm going to copy this text and I'm gonna paste it here. When you do, first thing is that you need to select Text tool and then you need to select the text text area. What is the text? I'm sorry, we need to select this. The thing is that we need to look at this area here. We can select this little, this way. We can slip that this text area in this size. Instead this, we will have to paste that text so that it appears only within this text area. And now we will definitely change the font size to 20. Okay, We will do it now. I think is better. We will fix it anyway, no problem at all. Now let me show. Okay, so we have this query objects, so we can take help of this layout again to adjust this theme. We can click on this one and we have this option. You can see that now we can do one thing. Yeah, we have this one. Perfect. And in the same size from this line, we can add our carrier object here exactly in this way. Now if i and we can simply this thing here. And if I, Ryan eat, we should be able to see our care of. You can see that now we have that takes the study from the same size, from the front, the same space. We have this one here. Here we go. And now we have this note here. We will add a couple of more things. Now we don't need to have this layout option. I'm going to slick this thing. Again. I'm going to remove this layout barred from here. We will add a couple of checkbooks here. We will have an icon here, then we will have a text icon and text, it means that what type of care object is use your hair. So he is gonna write a little bit of description then some point mark here. So we will do it in the next spot. And I'm going to stop this video right here. Seem the next lecture. Bye-bye. 5. Design Career Object and Uses of Plugin: Welcome back once again. In this part, we will complete our carrier object section. To do so, we need to add our circle here. Then we will add text, circle and texts. How can you do it for that? We need to have. We can add fast-twitch Ditech half objects, Ellipse tools. You can see this line here from here I think we can start. Then I can add a circle here. Make sure that the cycle hadn't already send maybe 5150. I didn't White. It's bigger writing let me run it. It's quite bigger. I can at 40 by 40. So chance to hardened white 40 by 40 here. And then we will have, we will have to change style, background color of this one. We can change some thing like this. Obviously we don't need to have any border here. Red. Now, we can add our icon here. So as I told you that I have installed this icon for plugin, you can simply install this thing from this plug-in option here we can say in this undiscovered plugging indigenous Galileo because of the initial hoop this time we will be able to see it. You just need to click on this plug-in option and then you can simply browse it here you will be able to search so many plug-in. Here you have the option to manage your plugin. Can see that I have installed couple of plug-ins so I can forward. You can just simply install it here. And you will have other options here as well. Now I'm going to search. So you can say maybe the icon name is done. You can see if I click done, then I can see this down icon. This is selected. And if I click here, and it should be up here somewhere to displace and I'm going to I'm sorry, it should not be there. Okay, so we need to add this icon here and we can select this bit difficult to slit when we select an icon from here. Because I'm selecting this icon, I'm gonna put it here. Now if we run it, let's see what can we say. We can see this looks good, not bad. Okay? So now we have this one. We can simply what can we do? We can make it out components so that we can use it again and again whenever it is to quit. To do so, we have this icon and we have this ellipse. This ellipse for this icon. And the illustration is elites discontinuity C-loops. So we can have these too fast. We can make them a group. We can, we can name it. We can name it are done iconic, intimate and down icon. Just put an example and then it is group now. And let's make it component. If we needed a letter, we can reuse it. So right-click and click on Make Component. And it should be appear. It should be appeared here you can see this is the component. If I want, I can simply add this one here. So this is the beauty of components. So we don't need to drag it from there. So now we have to add, we need to add a text here so we can edit text here. We can say what type of object we have. We can say we can simply copy some text here from this Loren ipsum just as some dummy text. Because they don't have any idea of what right here. So obviously when you design your own real-world project, you will write your real our object and we need to adjust it in this size, 5959. It looks perfect. Now let me tell you container and down icon. And now we can select this both. Then make them a group. And we can take help of this repeated create. And then we can duplicate it a couple of more times. K, Perfect. Here we go. Now let me see how it looks. It looks pretty good, but we can add a different kind different text here. To do so. We can copy different texts from here, this text, and then we can add some more other texts. From here. We can add this text here. I have copied the same text, I think, because we already used this one. Let me check the different one. We have this option here. So in the rest of the part we can leave this way. Just need to select this one and we can paste it at a fully stuff here. And we have this thing. We need to change a few more because it'll look good if we have at our different text here. This thing and another two, we can simply add this thing from here. It was popular. We can select this one. It has some more texts. I'm going to remove this thing here. Now it looks pretty good. Everything is fine till here. So we have this option over here, and this is our carrier objects. We have executed the same height and width from both sides. And in the next part we will start working on our education section. Alright, now I'm gonna stop this video right here. We will continue with from the next lecture. See you in the next lecture. Bye-bye. 6. Design Education Section: Welcome back once again. In our previous part, we have finished our career object six shown in this part, we will start working to add one more section, which is going to be our irrigation section. To do so, first and foremost, I am going to enable the layout view. So I'm going to select this one and then click on this layout so that we can see these layout view. From this side to this side. I'm going to add another artboard, another rectangle here. So click on this rectangle tool. And over here, I think here I can draw our new rectangle, this one. Okay? So this column to this column, actually we need to have a little bit bigger size. I'm going to click on the Select tool so that I can increase this, this height of this main artboard. I'm going to increase the height of this mean artboard. Here we go. I think I can increase it a bit more here. Alright, so we have this option here. And we can, now we can also use to the normal view. And let's see for now, we can move this layout view. Now we have these one over here. We need to add border here, let us say add mortar 20. Then I'm gonna remove this water. We don't need to have this border. So we have added 20 water ideas, but we don't need to have any border. If I click here, you can see the board of ideas we used for this item is 26. So I'm gonna add one to six for this one also. Now we need to have a shadow here. So I'm going to check what kind of a shadow pillow we have given for this one. And there's 20 by 20. Then I'm going to add it, 2020. That's it so that it looks sim for all the part. Alright, so far it looks good and it's still, I'm going to add little bit of height and then I'm going to click double-click so that I can take, I can click, double-click on this dot so that we can add a little bit of reason here. I can simply make this thing done this way, or this way. I'm going to take it in this way. When you double-click it, you can get this kind of chef. You just need to make double-click. Then these two things are going to appear here and then just hold one and then simply drag it. And according to your wish, you can do it. And here you can also see that that's the hallux is gonna change in here over here. The x squared when y value, you can also dive it, but it is much more easier here to use it. Here we need to add a title here. So the title is going to be education. So I'm going to again see the layout view. And then I can add the text, one text here. I can start it from here. I can just start it from here. I think it is going to be the center over here. And I can say here I can add education. And obviously we need to change the size of this one so I can change it to 50. We need a bigger size here, and I can do here. I think a little bit. Okay, let me run it so that I can see how it looks exactly. This is our web-based and I think it is okay, it looks good, but it's still, we can do little bit of changing of our font family at a different font family. Not in this one. We can choose this one and I'm going to add a line under this allocation. So I'm gonna draw a line here and here. And then we need to change the size of the border because line is a border. So I'm gonna change it to three. I think it just going to be good if I add here five. And it is okay Now the center. And now I am going to change the color of this border. This is what I can choose. So it is okay, and now I am going to change this layout view. This one. Here you go. We have this education and we can see this underlined here. Everything is fine here. Now here we need to add two things. One is our maybe university degree and other one is our college degree. We can add here. To do so, I'm going to add here immediately we need to add a line. So for that, we can again take help of this layout so that we can see the middle. So we have this. Four, and here we have 12, we have four, then 4810. So we can take it from this four and this two and this force. So we can give our line in the middle. We have five by five. So in the medial we can add this line. So you can see from here, in the middle, you can see this is the middle of this one. We can draw a line here in the middle. Okay, so now I can adjust this one. Now I think it is in the middle. Now I'm going to change the size of this water to two. And here you can see this dash option dejection means it is going to give us a desk border. You can see we've got this dashboard unknown. And then I'm going to change the color of this one. I can change any color. Let's say this color. Right now we can add a title of this two item here in the education. In the left side, we're going to have our university degree. And we can say here, call this our school degree. So I'm gonna select this text tool here, and I'm going to write it here. We can say university degree. One thing is noticeable here is that if you don't change the form side, it is going to always take the previous, previous attacks size. So we have used 50 for this education. Taking their site, it is, is still taking the same size, so we need to chance it. So instead of 50, I'm gonna say 3030. And here in the center, I think here I can add this university degree and I'm gonna make a duplicate. So press Command D and I'm going to make it here. Also. You can see two hundred and five hundred, one hundred and five is the equal space we are taking from both sides. And I'm gonna say it here is cool and call this school. And now after that, we can simply add lines. So what I'm gonna do, I'm gonna simply duplicate this one because we already have this one here. And then I'm going to put it here, then make another copy. So Command D, and obviously if you want, you can simply choose a different one. And if you hold it this way, then you can see that the line is coming in the same in the same line. Now it looks good, no problem at all. Everything is fine. And here we will have to write the university name and in adversity name and the subject and the year maybe to do so, what can I do here? You can remember that we met a component of this icon, down icons. I'm going to drag this one here. We will use this one. So I'm going to drag it here. Here we have, we can simply write one. We can simply write, or we can simply write in a text, or we can simply draw rectangles. So I'm gonna draw a rectangle here, and then I'm gonna write it here this way. Alright? I'm going to drag this one over here in the middle of this box. And here we will write the name of the university, name of the university and the subject and the year. I'm going to write some example here. And let's say, I'm gonna say here. I can say here, Oxford University. Just for an example. The subject is BSC in software engineering. And then the passing year, maybe here is going to be 2015 to 2018. This is what I am thinking to add here. Now, you can see that it is in the same format, so it's still if we want, I think we can simply, they can simply minimize this one a little bit. Again. Decrease the font of the text size. Now if I run it, let me take how it looks. It's looking pretty good here. Everything is fine. I'll explain. University BS in software engineering year 2015 to 2018 is fine. No problem at all. And now we have maybe a bachelor degree, then we have maybe master's degree. So I'm going to make it a duplicate. So instead of making a duplicate, what can we do? We can simply make them a group here. Then this is the text. And we have this option. Then we have these option. We can select these altered. One thing is that I have added a one text here. So if you want, you can click Tick three times and then you can do it. So I'm going to select it all these things and make it group. And I can rename the group. We can say that Education degree. It can give any name of your group. And now I'm going to click on this repeat grid and I can simply make it duplicate it. Perfect. And now I'm going to ungroup it. And here we can say MAC, just simply change the text to MSC in software engineering. Then maybe here is 2019202120192021. And it goes same for these same four. Same for the college degree also. So I'm gonna use, I'm gonna, I'm gonna copy this group. And then I can use this one here. This is the group that we're having, so we need the same type of things. And then I can simply make them a group. So I can say command G and group two. And I'm going to paste it here. I can simply duplicate. I can do it. Okay, so I can simply do it from here. I'm gonna make it command D because it is group here you can see it is becoming a group. Now, I can simply add this theme just over here. And then I can add Repeat Grid again here for this one. And then I can make it duplicate. Now, it looks same and we have in the same size. It's like ln two perfectly. And we can say that. Let me change the text here. So instead of inverse city, we can say getting scholars. Then you can say subject is maybe science. Can say the year is maybe 12th, 2014. And for this one, I'm going to change the name is I'm gonna give you the unnamed school. The time maybe, and the subnet is maybe also signs. There's the background, so I'll play school. You can add anything relative to your name. You can say science and the year is going to be 2 thousand to 2012. That's it. Now if I run it, I should be able to see. I did a mistake here. What happened here? No, no, it is. Okay. I thought that maybe I have removed this one. Now if I run it, I can see that everything is fine here. And this is the education here. And we have these option. It looks good, Perfect so far, I'm happy with that, but we have some issues here. We need to solve it. Now if I spot out, then you can see that in the home we have this one is bigger than the text. I didn't notice it earlier. So we can simply solve this one. And this is the line. We can simply minimize this one. Owned, right? We can simply minimize this one. White is instead of 86, we can say 75, maybe 55. Then we can simply drag and simply add just this one. We can simply chance to know so we can simply adjust this one. I think it is okay now. It is okay now, perfect. I'm going to stop this video right here and we will continue with from the next lecture. So I hope that you have understood how to work, how to design these kind of things using Adobe XD. And in the next part we will add here work experience and other stuff. So see you in the next lecture. Bye-bye. 7. App Project Section Design: Welcome back once again. In this part, we will design our project section. So we're gonna add our projects section where we will be able to showcase our project. To do so, we need to add, first and foremost, I'm going to increase the height of this main artboard. I'm going to increase the height bit more. Maybe this, because we will have to add few more things here. And here we go. Now, I'm gonna select this 1 first, then click on this layout so that we can see this layout view that will help us to help us to add our artboard and design. So first and foremost, we will have to add our title here, which is going to be our project, project and then underscore. So what I'm gonna do, I'm gonna click on this one and this one. This and this. Okay, So this line two and this education, I'm going to make them a group and I'm going to say them title. This is now a group and I'm going to press Command D so that we can make it duplicate and drag it here and now adjust the line. You can see that it is studied from this side for education and it goes same for this one. I can take a little bit of space here. Perfect, Now I'm going to change the name. So instead of Education in this thing is going to be projects here. And here we will have to adjust the underlined here because the text is little bit. Nobody's few. Then integration. Now it looks good, Perfect. Now we need to take help of this rectangle tool here. We can add this thing here. We can drag this one from here to here because we're going to add a couple of projects. So I will try to take a little bit more space for this one. So it is started from this column to this column. And now we can adjust it from the project. Okay, So another thing is that, so we can add the similar design like this one. So I'm gonna double-click it and then here it can double-click. Once it will double-click, you should be able to see this line. And then you can simply draw or adjust this one. We can simply add just this one this way. Here. Another thing is that we also need to add these modern ideas for this one. So fast, I think we are done with this layout tissue. We don't need to see layout anymore here for now. But we will need to upload a file, then we will do it again. So I'm going to remove this one, I'm going to click on it, then remove this one. And now we have these projects, these projects here we need to add border. I'm gonna remove this border here. And I think we need to add the shadow fast. So add shadow 20 by 20. Here we go. We have this 20 by 20. Now we don't have, let me make them. Make it undo fast. Now, click on it. If I click on this text here, it should be moved from here. I'm going to untick this 1 first. And then if I click on it, then I'm going to draw it again. I don't know why this border of Sean is not showing here. It should show here. So where is this? Okay, So it has counted at spot. There's no reason it's not showing. I'm gonna remove from this 1 first and adjust this longitude grid here. I think instead of directly doing this one, I have added this 1 first. So let's try it again. Now. I think I can see this border option here. And at the same time we can simply have this option. I'm going to select this one, then I'm going to add just this 1 first. And then here you can change the border to 26, and then click on this, then double-click here, Stuart, and then make it. A little bit of designing stuff here. Perfect. Now we can simply move this layout. We need to have these are shed off shown here. We can add this shadow. Shadow is 20 by 2020 from x and from y site. Okay, So perfect now is still we can see this border, but we don't need to have this border here. So I'm going to remove this border from here. Perfect, Now it looks pretty good. Now we need to add our here, we need to add our border again. I'm going to take this rectangle tool here. So here we're gonna, we're gonna add our project. So we will have a title, the description, and then two buttons. For this one I'm going to add just to this site here. From here to here. I'm going to have another, we're going to have another rectangle here. And this rectangle will be for the e-mails. And we need to adjust this one with the size. And in this rectangle, we will add our emails. And here we will have our title and the description, and we will have two button. To do so. I have downloaded already couple of images. So I'm going to use those images first. So I'm going to drag this image directly to here. You can see it is going to automatically adjust according to the rectangle. There are studies when I was created this rectangle on top of this rectangle, and I can simply increase it or decrease it here. This leads to is fine. And now we can add our title and description. To do so. We can, we need to take health for, for this text tool here. Let me double-click here and add the layout so that we can see from where we can add our title. We can add this title from here, or we can adjust this one little bit here. We can add it from here, and we will add our text from here. We can add a text here, the center. And this is going to be the title of our text. We can copy some text from our Loren Ipsum. I can say you can add this one. Can add this one here. We can add some against him to copy this line from here, you can get at any text, just put an example, I'm using this one. And you, alternatively, you can also use some kind of plug-in for the text. First reason it's not showing here. Let me I think it's still didn't work. I need to copy it first. Then I can add this one here. So this is our text tool is selected. Here I can. This didn't know. Here you go. The thing is that 12 standard to install font size because it's 50, so it should be 20, little bit bigger. I think 25 would be nice. Here we go. So we can add our text here. And alternatively we can, let me check it, how it looks, how the size is going to look. For this one. It looks good, is fine. Non-polar metal. This is going to be able to title and we need to add our description to add a description here, what can we do here? Or we can click on this, the next, and then we can draw it. It means that if I'm going to draw it in this way, then it is going to adjust the text within this box. Within this box it is cannot add. Now I'm going to miss the size. I'm going to, I'm sorry, what happened? I click this 1 first and faster, need to add the text here. So I'm going to draw it from this site to here. Then inside we need to paste in the text. So I'm going to copy some texts from here. I'm going to copy it and then I can paste it here. Here we go. Now we have this option here. Now we can simply, simply adjust this one this way. Then they can also adjust it with that, with this detail, so forth. For the description, it should be 20. We don't only need to add the same height and weight, same farm size for title and description. It looks pretty good, no problem at all. Now, we can, one thing that we can do here, we can decrease them. It one thing here we need to remove this one. We can have justice ON because we don't need any more space for the detail. And another thing is that we need to adjust the EMS as well as this one because we don't need to have much more space for this one. So in this way we can adjust it. And here we are going to add two button. So we don't need to have this layout fuel now. We can add two bottom here. One is for beauty tests and other one is poor life view. To add a button, I'm going to take help on this rectangle tool. I'm going to click on this. I'm gonna make a design here. Here. Then I can add a bit of border radius for this one. And inside this one can add our text so you can say Bu details, view details and we can make it center. I think we can also increase the font size to 30, and then I can adjust it in the center. And let me change style, font style. We can add our different from the standard for this one. Maybe not this one, maybe some other. Not this one also. We can choose. This one looks good. I think looking chosen this one. Now if we run it, hopefully we will be able to see it. So here we go. We can see this thing is showing here. I'm gonna stop this video right here and we will continue with it from the next lecture. See you in the next mix here. 8. Project Section Complete Design: Welcome back once again. In this part, we will finish our projects section. We have descended IS or button in our previous part and this e-mail send this thing. But the thing is that I think the bottom size is a bit beaker saw or we can simply minimize the form size as well as the bottom size. Instead of tardy, we can tie it with 25. Then we can also try a little bit different on different font family. And denote this one. Smaller one, not this one. This is gonna be adjusted with this one. We can choose these different one. Do we can have this view, we can see details, but it has a chance to share proper her detail. But you can definitely try the other one. And we can have this one perfect. Saw. I liked this, the font family. And then we can see, it looks pretty good, but we can adjust the bottom syscall. We don't need to have bigger one. I can adjust it according to the text I think. Then we can adjust it to center. Just quiet center. You can see that Hardy by Tarde and tidy for biotite it chisel it is okay, here's kind of center. Now. We need to make it a group so that we can duplicate it. So build details and this rectangle solvent, you will slip the ticks and the rectangle. You will be able to see the highlight of it here. So you can see if I click on View Details, then it's going to highlight a few details. And if I click on this rectangle, then it is going to be correct angle. For. Another thing is that when you vote you create any new component in the New button and a new text, it is going to always show up on the top. So it is gonna be very easy for you to identify which one is you need to make group, okay, so I'm gonna select this one here. You can see Board has been selected. Now I can press Command Z. I'm can say make it, I can rename it. I can say button. Here we go. Now, click on this repeat grid. This is the easiest way to make duplicating n. Here we call View Details. And then I'm going to ungroup it n instead of this view details. So we can simply, we can say it live view. Maybe if a user wants to them directly. And predictably take the live view of this project. We can say life bu. I think we need to adjust at this one again because we have changed so much that you can see tardy by Tarde. From top. It has taken tardiness space and then from the bottom interesting and Tarde and from both sides 484988 is okay right here equal. And now if I run it, we should be able to see our design. All right, It looks perfect. And we did this one and we can again, we can simply minimize this one. And another thing that we can, if you want, you can also add little bit of border or water radios or you can change the color of this one, but we can change the color of the button. This is the thing that we can do. Now. So chance the background color of this pattern. What has happened? I have selected a different one. Okay, let me see this one. It is going to show us here. The live view. We need to add chest is fine, so we need to select the rectangle. It is not going to do this thing here. We can fast are defined a background color of this button. And then I'm going to show you what is going on exactly here. So we can simply make it in this way. We can make, we can clear the shelf here. And you can see that now the next is reasonable. So what do we do? We can simply say that now bring to front. Then we can simply advance the color of the text. We can simply change the color of the text is still, we can still text is not visible here. We have these option. Let me now if by chance it twice, we can see the color is white now, so it is visible now. Now if I run it, then we should be able to see this thing. Okay, So it looks pretty good now. Live few. And then for this button we can keep this one. Alcohol, background white. No problem at all. Now, always still we have a very bigger space, so we can simply decrease the space. And also, for this one, you can see the border is selected here. So what can I do? I can simply uncheck this button so that we don't see any border for these emails. And then if I am going to slow down, I can already move the size of this image. We have finalized our project section, and now we can duplicate this project. To make a duplicate. What can I do? We got another issue here. The underlined has gone from this project. I don't know what is the reason. It is actually here. But we can't, we can't see this. But we can't see or it is not there. Let me see. Let me see project text where it is positive. Whereas this line, we need to select this select this color because it was removed to unfortunately, anyway, now it is showing here. So now we have these few things to make it a duplicate. So how can we do it? We have one title and description on this thing. And this thing is so many things we have fast. We have this rectangle, three, then we have this text, then we have this one. Or we can simply neglect, can we do we can simply copy all this thing, but sometimes it creates an issue here. So what is the name of the main one? We need to make them a group is too long, then it's too long. These two, we have this pigtails, then we have the rectangle. We have this rectangle also here. Then we have in this one. And for this view details, we have this button over here. I'm gonna select this button and this button, this takes this option, and this team and this one as well. I think I have selected all these now I can make it a duplicate. So I forgot to slave this one. We also need to select this view details. Now I can make them a group. So press Command Z and till again rename it. We can say, we can say projects. Now, let us click on the repeat grid so that we can make it duplicate easily. Here we go, we can see we got all these things and now we can duplicate this one. It is okay, and if you want, you can also make changes between this space, but I think that is basically got it is okay. Now I'm going to ungroup this one. And now thing is that we can simply change the e-mails from here. So instead of these emails, what can I do? I can I think I can remove this image from here. And then instead of removing this, we can simply replace this image here. We have our different units again. We have this one. I'm going to add this one here. Ramus has been replaced. And from here, we can add, you can add another one. I have only this one. I think I can do this one here. And I don't have any other images here so far. I don't have any other. It is it is ok. Now if I run it, I can simply see these things. So we have fixed this issue, we have this one also. And it is okay, then we have career object. It also perfect. You can see all the sides are matches, so no problem at all. So we have education section, which is also good. We have protic section where we have this live view and the view details and View Details live view. So you can see the thing is that you can see the size, height wide, and the distances in the perfect size. There isn't any issue with that. And we have these options over here also. We have done it now in the next part, we will do, we will add demo section. And another thing is that we will have to add prototyping. So when you use it, we'll click on this View Details. We will send them to a different place where we will add a couple of details of the project may be news to add this one, maybe you are publishing this one on this project. So you need to add a little bit of description on the project. We will do it. But now I'm going to stop this video right here and we will continue with the next lecture. See you in the next lecture. 9. Tech Skills Design: Welcome back once again. In this part, we will add one more section in our portfolio project, which is going to be a tech skill. So you can, so that user can show their tech skills and the tools, what kind of ticket skill they're working. So this portfolio of studies based on our developer or a parson who has working on, who is working on web dev, low-power, or any kind of software engineering. There's a reason I am adding these tech skills or tools section. But if you are targeting two different kinds of audiences and you can add different kinds of sexual according to their profession. The other main part posts to T-cell you. This thing is how to design these kind of things and how can you use all the tools of Adobe XD? I hope that you were learning. First and foremost, we need to increase the height of this main artboard. So double-click and then increase the height. I'm going to add a little bit more. It is going to be a single-page application. There's a reason we are going to increase it. Now I'm going to double-click it so that I can see the layout. So when you double-click the main artboard, you should be able to see this layout options. So click on this layer. Now we have this view. Now we have the, so previously we met group of this education I think I'm going to make it a duplicate. So paste Command D, and then we can simply drag it. I can simply drag it to the bottom of this project and we can adjust it. Here. They're the same size. You can see at the same position. Projects and this one is going to be taking skills. I'm just cannot change that text. So I can say it takes skill skills. Here we go. I think we don't need to chance the underline. And now I'm going to add this rectangle here. Here we go. From here we need to draw a rectangle on this column. And here we go, we have these option. We can add a little bit more space here, and if we don't need it, we can change it. I'm going to add border-radius 26. Then make a double-click, and then click on it. Then simply we can do it. We can simply add little bit of this design issue. Now, we don't need to have this one anymore. It looks OK. And now we can remove this border. We don't need to have this border at all. Here. We need to add our shadows. Shadow is going to be 20 by 20. Here, I'm going to add another rectangle where we will show our circle. I think we can take help of these layout. So double-click and click on this layout. And it is starting from here, so we can start it from this side, from this column. Okay, so I'm gonna, I'm gonna take this one from here, this two. And do we need to add another circle on top of this one? The circuit is going to be between these column and this column. We can adjust it from this to this. And to make it circle, we need to make sure that we're giving the height and white is exactly the same, 150 by 150. You can see that the circle is established from this, from the end of this column and it finished from the end of this column. In the middle of this one. We are giving this circuit here and here we go. Perfect. This way. We can do it and I think it is okay, and we can adjust it in this way also. Now we don't need to have this layout anymore, so I'm going to remove it. And now it looks this, we have this, the same space from this side to this side. Now here we can add our ticks and we can edit text here. So the text is going to be, we can say, the biggest kid is going to be instead of the biggest skill, you can say maybe JavaScript. Javascript is going to be that. And here I'm gonna change that takes not this one. What texts we have used for this one, we have used coconut. I'm going to use the same text of same font family is going to be co corner and this one, perfect. Now we can adjust this one so we don't need to have this bigger space here. We can simply minimizing this one. We can also adjust the text and it should be in the center. You can see. You can see easily, we can make it center. You can see it the one by 8076 specific D6. This is the best possible thing that we can do here and now we can adjust this one so we don't need to have, I think we don't need to have the border here, but we can add this shadow here. So shadow edge, shadow 20 by 20. Now it is going to look good on writing. I can also add the border so that it can easily feasible. Let me run it and how it looks. Slower takes skill is going to be like this project. Take a scale, and this is called JavaScript. Okay, so it is going to look good and we can At, do, we can keep this one or we can simply minimize this one a little bit more, then we can simply have this one. Perfect n here. We can simply Jen style. You can seem to change the background color of this one. We can add different color for the different one. And we can add linear gradient. And then we can simply adjust this theme from here to here. Then we can simply add just this one in this way. We don't need to have this border from here. Now. It has the same height and white. It looks pretty good. We can keep the border for JavaScript. We don't need to have any other things here. I can say take his castle alternatively, what can you do? We can simply, you can simply add a logo or any other images may be put out on product for the logo of JavaScript. But for me I'm just going to add the color. It is going to be okay with that. No problem at all. So now the thing is that we need to do, we have, we need to make them a group. So we have JavaScript, we have this rectangle. We have this one, then is the path. We have this part, so it has become a part. We don't need to do this thing. So these are the three things that we need to make a group. So I'm going to press Command D or Control and JavaScript. And this rectangle in this tree has been selected, then I'm going to make them a group. So press Command G on your keyboard or alternatively, you can press right-click and then you can say Ungroup. Or if you were in Windows, then you can simply press Control Z, I think for the Mac is Command C. I'm going to press Command G, and it has a group now and I'm gonna change the group name2. We can say tech skills. We're gonna say take a skills. Now, we can easily make them duplicate. Here we go. We can simply make them duplicate. So if we want to add just a G, then I'm sorry. Then we will have to rearrange it. This one. We can take it a little bit in this side, and then we can fulfill this one. We can also add just eight from both sides. And then we can have this on, I think I think it is okay, but to get more confirmation, we can simply click on this layout. Then we can adjust it now. First let me ungroup. It is coming from the middle of this one and it is not coming from the medial and this one should be. There. It is. Okay, I think it is in the center. Perfect. Now in the bottom, we can also make another group. I think two group is enough depending on the person is closed set. We can, we can simply do this thing. We can make a little bit bigger space. We can create a space between them. Then we can see we have this space from the side and the sum of those spaces from the side. So it is okay, completely perfect. And now if I ungroup it, now double-click on this main art board and remove this layout view. And here we go. We have this option here. So simply we can change that takes two. So instead of JavaScript, we can save this term. We can say Adobe XD. I can say Adobe XD. Then we can change that takes two. We can change that takes two knocks. Gs, say no oxygens, I'm just adding some programming technology. Ux design. So then I can say Figma for this one. For this one. Instead of JavaScript, I'm gonna say a React js. I'm going to react JS. And for this one I'm gonna say save villages or notches. Perfect. So whenever you are designing something instead of showing the same tags, always stayed to add a different texts. It looks pretty good when you will give any kind of presentations. It is going to look really good. Now we can simply change the background color of this, of each and every item because we need to show the different ones so that it looks good. And instead of this thing, it is showing the linear gradient. Let's just take the union first, So I'm gonna change it to a different color first so that we can make it. We can simply this linear gradient here. We can simply add this thing. Okay, so for this one I can choose r, Another different color. So if you have any other color code, so what can you do? You can simply paste it here and then you can use it. So fast, I'm gonna make it a solid color gradient. Then I'm going to make this one, keep this color. For this one, I'm going to choose a different one. So remove this thing. And then I can add a linear getting a little bit dark one. For this one I'm going to choose the other one that we already have. And for this one, let's make it a little bit lighter or this way. Okay, so now if I run it, then we should be able to see our color, our tech skills. And here we go. We have these tech skills. Perfect. It looks pretty good, no problem at all. In the next part we will add our tools. It is going to be the similar design, but we will see it how to do it. I'm going to stop this video right here and we will continue with from the next lecture. See you in the next lecture. Bye bye. 10. App Tools Section Design: Welcome back once again. In this part, we will design our another section which is going to be our tools section to section of this similar to our techies cross-section. So we will add these background images and then we will add the tools, maybe any other tools that a developer has. So for that, I'm gonna, first, I'm gonna fast interval data layout view so that we can simply see the column. So this is our layout view now. And then I'm going to, we have meta Group of this education. I'm going to make it a group again. I'm going to press Command D and then I can drag this one to the bottom after this up at the stickiest section so that we can add one more section here. We could do it component instead of dragging it again and again, but it's fine. We can also do it this way. And here we can organize it this way. So this is going to be our tools, so we can leave it here. And I'm going to change the text fast. The text is going to be only tools. The text is going to be tools. And here you go. We can, we need to add it here. And then we need to rearrange this one. We need to decrease the white of this border on this line. Perfect. We have this option here now, doors is okay. Now we need to increase our height of this main art board a little bit more. And then we can take help Bob this rectangle tool, and from this column we can adjust our rectangle. Right? So this time I'm going to do any bend tool. I'm then going to use any pen tool. So directly I'm going to use the border-radius to indeed a six. Then I'm going to remove this border size from here. Then we need to add a shadow here to click on the shadow and add 20 by 20. Perfect. So we have these options here. Now, I think we can adjust it here. And denial, I'm going to remove these Layout View. Okay, so now we can do one thing. We can simply make them a group. I think it's already a group which is going to be taking skills. I'm going to select this one or icons. I'm going to select this one and press Command D. And then I can duplicate this one and drag it here to paste it on top of this one. What I will have to do, I will have to do with Bring to Front. And we can see it now here. Here are equal adjust, eat. With this one, we can again enable the layout view so that we can see what's going on. And from here we can add this one so we can simply you can simply adjust it with discipline, I think. Yes, this is what do we can see here? For this one? It does also 14, okay, perfect. X2, 397299. So we can change it to 307. Now, from here you can also do it minimally. So if I click this one, you can see the eggs and is not from the left side. It has expressed from a space of t 07 x position. And that's why I have added expedition three through seven for this so that it can align at the same. All right, Now I can take it a little bit bottom here. Instead. It has chance to against what I'm going to add it to 07. Now we have these options here, so we can now move, we can remove this layout view now. And then it has happened. So it has taken the size of this one. Let me check it again or you can simply drag it. This is what it should be. Now we can see that 307. But here we think, I think that we did a little bit of mistake. Let me check it one more time if it is the size, so no, it is not in the perfect size. So it should be it should be started from here. So I didn't notice it to that time. That was the reason. Here. You can see now it looks same. And if I remove this layout from here, then you can see now it looks same. Alright, so instead of Figma, we will change that text later. But before that, let me use this Repeat Grid tool so that we can add a few more tools here. Maybe. Perfect. We have three. Here we go. I think three is enough for this one. Then I'm going to ungroup this grid. And then I'm going to do, I can simply decrease this one. So here we can, we can change the text. So I'm going to add, you can say tools. I'm going to add GitHub or get for this one. So I'm gonna say dy dt and I adjusted in the center because the smaller one. So now I think we can adjust it in this way. So a 163 by one hundred and sixty three and seventy five percent to six. So it's in the center. Now we can change the color of this one so we can select a different color. I think this one is perfect. And now for this one, we can add darker. We can add here darker. Again. We need to adjust in this and darker. The center. Here's a 124 by 23, so it is in the center. Now Jen style background color of this one. We can choose this color here. Perfect. And for this one, I think we can choose. We can choose, we can say whip pick. You can choose any name, whatever you want related to your requirement. So here we have to adjust it in the center. So a 123 is not in the center. Perfect Webpack n Here we have this option. We can change the background color on this one. Okay, so now if I run this one, I should be able to see these tools section here. We have this project pew, we have this sticky skills, and then we have these tools section, so it looks pretty good, no problem at all. One thing that not everything is fine here. And up at the tool sexual, we will add our feedback section so that we can share our own, so that we can share other person opinion about our developer. We will do it in the next lecture and I'm going to stop this video right here. See you in the next lecture. Bye bye. 11. App Feedback Section Card Design : Welcome back once again. In this part, we will start working on our feedback section, where we will add some feedback and then we will add to our horizontal scroll view. So to do so first and foremost, I'm going to increase the size of domain artboard so that we can add our section here. Now, what can I do here? I'm going to make it up component fast because we are, we need to copy this one several times. So let's make it a component. I'm going to add mike component. So this one has become a component and you can see that the icon has been changed, and it should be here. Now, we can use this one here so fast. We need to add this thing here. Let me inabilities layout view. And from here, now I can drag this one. Here. You can see this one here. Here again. Here I can change it, education to feedback. Feedback and then we need to adjust this one a little bit. I think in the middle. It is. Okay. Now let me check. This education is only there, okay, It's fine. No problem at all. Now here we will show our feedback. To do so. Now in this part we are not going to add any, we're not going to need to add. So I wanted to add to our full screen showing the feedback. But for this one might put the feedback. For feedback, I'll scroll view we will do with from this column what I mean by that. So I will add a background color, and on top of this background color, we will add the feedback. Let me draw our rectangles. Click on this rectangle and draw a rectangle here. Maybe this amount. Okay, perfect. So first and foremost, what I will do, I will remove this border from here. We don't need to have any border. And now we need to obtain stop background color. We can add, you can add a custom color. Or if we want, we can also add the gradient here. Now we can simply intro, we can simply change the gradient. Now if I run it, we should be able to see descent. So this is our country, the application that we are designing, our Until we have these tools and then feedback, and then we have this option here. Here. We will add our feedback. I think we don't need to have this much of height. We can simply remove this, hide it a little bit more. This amount. We will fix it, no problem at all. And now what can I do from here? I will try to add this feedback. For that I'm going to add or I can add this amount. And then another one is from here. We can add these two from here to here. I can draw this one. I can not from this set, I can take this one because we need to have it a little bit bigger size. We can take it here, and we are taking our five column here, 12345, and here we will take five, okay? So we will take three to five, okay, So we can take it did here. So we take into G6. We will take a little bit in the middle of this one, and another one is in the middle of this one. Then we can dig the hole from this right side. Okay, so now we can adjust this one so we can now take the height and a weight. So the height is 401 and the height is 381, so it should be 401401. And the heart, why these seven double-throw and 51755. So it should be seven W5. It should be here. Perfect. Now, what do we will do here? We need to make it a little bit. We can add the border first. So first add border-radius 20, and same goes for this one also. So add border radius 20. Here. First we will edit text in the bottom, we will add, we will add our emails, it will add a profile picture, then the name of the person who has given the feedback. First and foremost, I'm eating, I don't need to have this layout right now, so I'm going to remove this one. What can I do now? Now I can click on the Text tool and now I can draw out text option so that we can add text here. We can paste some text here. And I'm going to copy some post forum a Loren Ipsum. Some dummy post. The Simon I'm sorry. I can I can copy this one. I don't know. And now it is working, so I'm going to copy this one, right-click copy here. And then I can simply paste it here. And let's see. Okay, so that's farm size is 50. That's the reason. So I'm going to do it again. Now. It should be 20 here and not 20 exactly. Maybe 25. Maybe 25 is good. And I can add it in this way, in the center or in the left side? Or is it simply remove the space like looking this one, this is going to point this and this is going to be the area of the text, plain text and area takes this thing. We can keep it in the middle. You can see text-align center. And we can change stuff on distal to this one that we used for our in this one, we can use this one here. And after that over here, we will have to add this thing. What we will have to do this thing over here, I want to add our profile picture and then the name for that. We can take help of this ellipse tool. So I'm going to draw this ellipse tools here to drag it here and we need to fix the hardened white, maybe 95 by 95. I didn't know what should be same so that we can see if circle. And again it's quite beak 9895. So we may check for 85 by 8575 by 7575, by 7575 by 75. And here, right up at that, I'm going to remove this border fast here. I shouldn't remove the border of us because we don't have anything on it. So what can I do? I can simply add a profile picture here, so I have some dummy picture. I can simply drop it here. Now it has adjusted. Now I don't remove the border rather I want to add our water size here, maybe five. And then I'm going to change the border color so that I can see it in this way. Or I think it will look good in a white color we can take and then we can add our text here, and text is going to be here. And we can save the name of the parcel, maybe just for an example, John Doe. Do we need to adjust this text here? We can increase the text size to 35 so that it can be visible easily. And let me check it how it looks. Now, we have this option here, project degli, skills and tools. And this is the feedback that we are showing here. And it looks good. But here I wanted to add our icon here. To do so, we can add, we can take health of our, of our icon plugin that we have installed. We have it, I already have it. I can say that forward icon. Let's see what can I see? You can see all if I tie forward, then I can see this kind of icon is showing here. Now I'm going to select this one. Omega, it has API here. I don't know. I don't know why. We need to do select this 1 first. So let me go back again. So we are working out here. So first, let me select this first. And then I'm gonna select this one. Now it has a period here, still, still better than the previous one. Now we can select, can't hold this one. Okay. So we need to hold this one. So it is not I'm sorry, let me remove this one fast. Then select the text so that it can appear here, and then click on this one. This time it is coming here. I don't know. Sometimes it happened here with that icon plugin, so we need to fix it. I'm going to click this one and then I'm going to drag it here. No, we can't drag it here. We have to take it here from I'm sorry, it's not working. And this way maybe other icon. We can select the meat arrow icon. Okay, so it has a period here. Let me drag this one. Okay, so now I can hold this one and let me make it component first so that we can use it from there. Okay, that's nice. Now, we don't need to have we can think we can. We cannot remove this one, but we can. From here, I can remove this one. But it is inside our components, so we can simply use this one. Now, here I can drag these component and then I can paste it here. So this is our component and here I can paste it. Here we go. So we have this icon here. And here we go. For the icon, I can increase the white again at 4545, I can add 35. So if I am going to increase disease and it is going to look very bad, okay, Now it looks pretty good. I think we don't need to have on this one in this way because we're going to add a couple of more item here so that we can have our horizontal is called View. So I'm gonna remove this one here. And in the next part we will add more items here and then we will add the horizontal is compute. So I'm going to stop this video right here and we will continue with the next lecture. See you in the next lecture. Bye bye. 12. Feedback Card and Horizontal Scroll View: Welcome back once again. In this part, we will finish our feedback section. So first and foremost, we need to duplicate this one so that we can add a couple of more. And then we can add our horizontal scroll few. To do so, first and foremost, we need to make, make it a group. So we have this option here, so we need to click on this of this NGO first. So here we have this rectangle eight, and then we have this text. Then we have this big cells. Then we have John Doe on this icon. It means that from here to rectangle eight, all these in our cart. So I'm going to press Control and then I'm gonna select all these. And here we go. Now I can make it a group. So Command Z and I can change the group name just to understand. So we can say, we can say, I'll feedback cart and now hit Enter. Now I can click on this repeat grid. So click on this repeat grid. Now we can make it a duplicate. You can see that we can make it duplicate. The first and foremost, I wanted to have a little bit of space in-between these two things or we can grab. Okay, so first I just don't want it to. So the thing is stopped in without a scrolling. I just don't want it to show to win is I don't call it. We will show them where to stop the car. So maybe we have for feedback, we can now call it, we can now duplicate it at the outset of domain artboard. You can see this one. We have this one here, so we have 1234. Now. Here you can see these are the two icons. One is for horizontal scroll view, one is for the vertical scroll view. So for this, we need to have a horizontal scroll. Horizontally scopy means in the horizontal way. Now if I click on this one, it is going to adjust with domain artboard size. And now we will be able to see this icon has API. So this is the icon that is, that is because of what we have selected it for horizontal scroll view and an NTD showing that from this to this, it is going to stay here. And after that, it is gonna show scrolling. So let me run this one. Now. If I run it, now if I scroll down, we should be able to see our feedback here. So we have this feedback section over here and now, so here it is. It's still, you can see a little bit of it. Now what can I do? I can simply scroll it in this way. No problem at all. And another thing is that that we need to fix it here. So if we are in the homepage, then we have this option here. You can see this one, we need to remove this and we can see it's still a little bit of each silver can we do we can simply remove it. I think these or we can remove it. Or we can simply increase the let me see if it has solved now. It's still, we can see this one. Okay, so first I need to unselect this scroll view because it is for this space, not for the schooling. So we need to add a little bit of more space. And then we can select this scroll view. Now if I run it, we should be able to see this one over here. We can see now we can see it from this side. So another thing is noticeable here. Maybe for this, we can now scroll it so it looks pretty good. And now we can add on more thing here. Let me check if we have bought a no, we don't have motor here. Over here. We need to add one icon so that user can understand that. And the right side we have few more things to do. So what can I do? I can simply take home health of this ellipse tools. And in the middle, I can simply add a circle here. And it should be the same size so that 55 by 55. Here it goes. And now in this one we have this icon. You can click on this iOS icon. Then we can simply put it in the center. I can put it in the center. Right now, it looks pretty good, but we can make them a group so that we can make it duplicate and make again, make it again at this ellipse and this arrow. I'm going to press Control and then we can make them a group first and then we can duplicate it command D. And here you go. We can't, but we need to have a different icon for this one, but we can keep the but let me adjust the height leg in the same line. Okay, So now it is in the same light, it is in the same line. It is in the same line, I think. Perfect, but we will change the icon of this one, so we don't need to have this icon here for that. What can we do? We can remove this icon from here. We're going to delete this icon from here. But it is not working. I'm sorry, we need we just need to remove the icon. Now it has removed. So select icon and press Delete. Then we need to add to another icon for the left side again. So instead of forward, we can add, we can start there backward. We can say B is seek backward, and we have this couple of icon here. But we should take the same icon that we caught. Luckily we have this one here. I can select this one here, and then I can drop it there. And then again, again, the same problem. So this is the icon. Let me remove it fast and then select this one. And again add this one here. I'm going to make it a component so that we can easily access this one. Now I can drag this icon over here. We don't need to have this one from there, but we can simply drag this icon here. And it is not in the center. So first let me remove this one. I'm going to remove this icon first and then we can simply drag this one in the center. Perfect, now let me run it, how it looks. We should be able to see this small icon. Now, if I scroll down, then we can simply see this feedback and this is how it looks. And it has this option now we can simply scroll it this way. So everything is fine here, no problem at all. And then the next part we will add our, what I will add. So now we will add, we will simply add a contact form here. I'm going to stop this video right here, and we will continue with the next video. And before that, I think it is not in the center. It is in the center edit adjusted with this one. The thing is that we can still, okay, so we can add this one here and then we can simply, we can simply drag this one to center. It says it shows that it is interest inside the center, but we can still, this icon is not a can't just select this icon. Now. Now it seems it is in centre, but it has to be moved in this way. We can keep it in this way, but the thing is that we can add our box. We can add a shadow here. We can add a shadow for this one. We can maybe we can add ten by ten for this one. And for this one also we can add, it does automatically selected in the shadow because we, again, all is not here, so we can add ten by ten. At ten by ten. Here we go. Alright, so perfect. How I'm gonna stop this video right here and we will continue with from the next lecture. 13. Contact Form Design Input Field and Button: Welcome back once again. In this part, we will design our contact form. To do so fast, we need to increase the size, increase the height optimists of main art board, and then so forth. That for the contact form, I don't want to add any background colors. We will use this kind of background color so fast. We need to let me chance. They'll layout few first and then we can take the, we can take the text component that we had earlier here. You can see this is the advantage of making outing component if you are going to duplicate the same thing again and again. So instead of Education, now, I'm going to write here contact. Now we need to adjust on this line here. Now conduct and tools feedback Deck execute, everything is fine. And now after that we need to add a rectangle here. The thing is that I can add this one from here, from this to this. I think we have added the same. I think we have added it the same for all these. Because we have two columns, one column from left and one column from right side. Now first I'm going to add our modern radius 26, and we can add a shadow here. So add shadow by 30, by 30, and we can remove the border size. We don't need to have the border size here. And now over here, we will have to add three input fields. Is for name, one is for email, and one is for message box. So we can start from here. I'm going to draw this rectangle first. I'm gonna draw it here. Here. We don't need to have this amount of space for this text box. We can add it this way. Then we can add just this one from here, I think, from the end of this one to this column. Okay, so now we need to add a bit of water radius here. So at D, and then inside this one we can edit text. We can say, we can say name, then we can add double dot. But the farm size should not be like this. It should be 20, little bit bigger, maybe 25. Then we can change the font, font family. We can add any other whatever we want to have. Maybe this or this. Let me see how it looks. Then we can add it here. Feedback. After this feedback, we have this contract, okay, So the sizes bit too beaker, I mean the input field size. So we can, we can change, we can change the height of this one. We need to first click on the Select tool so that we can select it. And then we can simply minimize the height, maybe 70. Then we need to adjust the text in the center. It is in centre. Now we can make it a group and then we can duplicate it first. So the thing is that we need to click here and then we need to click the name and the rectangle that we have here. So this name and this rectangle and then make it a group. So press Command D and I'm going to change the group name2. We can say input field. And then I can take help of the stupid, great, and I can simply duplicate it silicon add a T1 is for e-mail, one is for phone number. And I can take some space in between this one. And then I'm going to click on this ungroup grid. Then we can change the name. So the second one is going to be email. We can add e-mail here, add t dot. And then for the last one we can add phone number. You can add for number. Now. So from here to here, we need to have an adult or input box for our message option. We can again take help of this rectangle and from here or maybe from the medial. We will adjust it later. No problem. So first I'm going to draw this one in this way. I think from here we can take it or we can, I think this amount is okay. And now we can simply add a border-radius to 20. Let me see how it looks, but we can see it in this way, but it is the height and the weight is not adjusted. I think it is. Okay. It is. Okay. Okay, perfect. Now we need to add our text here. Let me around this one so that we can see it. Here you go. So we have this contact form here. But the thing is that we have a very big space from here to here so we can fix it. Another thing is that here we will write out text and then in here we can add a button. To do so. We can have. So first let me add the text here. I'm going to add the text in the center, and I'm gonna say your messages. We can add this one here and make sure that it is incentives. So how will you define it in center, you can see it is going to give us our line. We can simply it is in the center, but it should be in the left side. Perfect. No, it's not here in this. Now after that, we can have this bottom rectangle option. Click on this rectangle and then we can simply, what can we do? We can leave, we can take these four columns for creating our bottom. I mean these four column and then medial. And then we can leave for, we can leave to form left side and two from right side. We can add a little bit of this n. For this one, I think we can add our unique design for this one. Let's see. We can add a different kind of different kinds of border for different corner. So let us say Part D for this one, then for this one, and then 64 this one, and then 55 for this one. Okay, so if I click here, I think we should see our masses here. I can see top-left corner radius. Top left corner radius is tardy. Let's make it 60. Let us make it 80. This one make it 2520. Now, this one make 80 because each cell, bottom right corner writing, I think it's bottom-right. Let me take it. Not showing now. It should show us. You can see the bottom right corner radius. That means that this one, it should be the same size. Now we can adjust this one. Lucky solver, say new design, just to show you how can you use a different kind of corner if you need to use? And I think now we don't need to have these layered view. We can remove this layout view now. Then we can add just the color. I think we can use this color, I like this color, so I'm gonna click this color and then we can simply add this color here so that we can use it. Now click on this button, and then click over here and then click this color. Here we go. We got this color. Here. We still, we can add a little bit of more linear gradient. We can simply adjust this one in this way. We can add a text and one icon here for adding a text here I'm going to click on it. We can say cent, and then here we'd call, and then we can add one icon. And you have these icon here. We need to add. We can add our icon here, we can say Sant icon. Then we can get this one here. Where we've got again, we got it on top so we can drag it here. And then I'm gonna make IT components so that we can use it for easily, make a component. And then I'm gonna move it from here. And then we can use it from here. I'm going to scroll down. And over here we have this one here. We can have this one. So I can drag this one. Here we go. We can add just in this one here. Okay, so now it looks pretty good, but the thing is that it is not showing in the center, not the bottom. We should adjust this, this one. I think we can do it now. It looks good. It is good now. So now if I run it, we should be able to see our contact form. Now. We can scroll down here and here we go. This is our contact form, so we have the scent, but we need to change this or fonts, font family, I don't like this one for the bottom. And we can say, this one is far better now, oh, what can we do? We can simply, the thing is that it is going to change. The whole thing is gonna chance. For this one. I'm going to press undo. Then I'm going to, okay, So it has also changed, so we can add again here. So the thing is that though we have this option here, so this is the rectangle button. Then we have these, all these input field. We can copy all these. Click and copy all these and then make them a group. Once. If the group, then we can we can see it altogether. And just this one. And I'll just do contract that we have used the same size here. So I'm going to show, I'm going to add the integral of view of this layout view. Now we can see that it is perfect. It is just that with this column and this one also. Now, let me run it again so that we can see the final output of this one. And here are equal. We have this send icon, and this is our contact form, so perfect. And we have this origin to the scroll view here. So I'm gonna stop this video right here. And in our next part we will start working for our car. We will just add a little bit of design in the footer. So we will continue with from the next lecture. See you in the next lecture. Bye bye. 14. Footer Section Complete Design: Welcome back once again. In this part, we will design our footer section. So to add a footer section, we will have to draw it in the footer and the last part, but we have every bigger size, so I'm going to remove this size from the main artboard. I think this amount of space is okay for the footer. Now I'm going to draw our rectangle here. We will just add a basic footer. Before that, I think we can. Now we can simply draw our footer section here. We will just add some icon here because we don't need to have mass more things on our portfolio project. Now what can we do? We can click on this one, and here we can add background color. We can add our background color, I think this light one and then another one, the orange one. And then we can click on this linear gradient. We can round this one. Alright, this one here. So here I just wanted to add a few icon, maybe few social media icon, Facebook, instagram or Twitter. So I'm going to click on this 1 first. Before that, let me check if we have a very big space in-between. The residue is going to be difficult to change it after that, the contact form and this one, it is fine. So we will add a few icons over here. We can still, we can, we can simply change this one. We can adjust this one. And also I'm going to remove the height a little bit more to adjust with this one and we don't need to decent amount of space. You can also decrease this space. And now for adding an icon here, okay, So the only thing we can do is we can enable the layout section so that we can see from where we can add our allele up. So we have this one. From here. We are working. We can do one thing, so 34, and then we can lift Aquaphor, and then we have another four. So from this third, we can leave fall and from this side we can leave for, then we can work on these two sides, on this two column, or maybe from an industry columns, so forth. Then we can do this thing. It's not a big issue here. We can take t and then we can take three, and then we will have these four. From here we can, instead of working, we can add this option over here. We can do so we can move fast. Let me do move this allele or two. Don't need to have this layout here. Here we need to add have the same size. Haydn white is going to be 80 by 80. Here we need to add the icon. To add the icon. I'm going to add it here to add an icon. What can I do? I can take health of this icon tool we can save first book. You can see there are so many Facebook icon. So we can click one for this one. And then I'm gonna, I'm gonna make it component. And then I'm going to remove this one because we will copy it from component. And then I'm going to add our Instagram. Then click on an Instagram icon. I'm going to make it component. Then I'm going to remove it from here. And then we will have one more item. We will have one more item, maybe Twitter. Let's add Twitter icon again here. So I'm gonna make it component. Then select this one and remove this one. We got C icon for this footer section. So now we can edit. Now I'm gonna open this component here, so we have this book one, so I can drop this one here. I can adjust it in the center. Okay, perfect. Now we can add, so let me see. It looks pretty good. Till we can do, we can. Just for this one, I can make a duplicate Oregon take help of this repeat grid. Obviously this damage is not going to duplicate the Facebook icon because we didn't make it a group, so we just duplicating the cycle. Okay, So you can also learn from here. And then I'm going to ungroup this one. Then I can add these Twitter option here. Then I can adjust it in the center. This is the center for this one, I think. Okay, perfect. It is in the center and then we have this Instagram option. So I'm going to copy these Instagram here. Then I can put it in. I'm sorry. We need to drag it. We need to drag this one here. Okay, so the thing is that let me draw it again here. We need to make it center. I think it is in the center. Everything is fine here. And now I'm going to run this one and hopefully we will be able to see our footer properly and our feedback, this is our contact section and this is our footer section, so it looks pretty good. Another thing is thought or I will do, I will make it a component, that entire footer. I'm going to make it a component because in our next base that we are going to design for our, for our details base of this project section. We will also need this footer so it is better to make it our components so that we can reuse it. And T are equal. We have this, we have this bot. It is, it is counting as part and then we have this all districts. So we have this one and make them our group. Then we can make IT component. You can see it is now a component. Now if I go over here, then if I drag it here, then you can see we've got this whole, this entire team. Then we can reuse it in our detailed space. This is the beauty of making it a component. So what do you need to do? You just need to make a group, the whole thing that you want to make a component, then simply write creep, right-click, and then you can make it a component. So as it is a component already, then you can either say I'm seeing that ungrouped component because I have already emitted component. One thing is that once you make it component, you will be able to see here the default is steadies going to be your owl component and the icon has been changed. You can see this is the beauty of this one. So I don't need to have this one here because we already have it here and we can copy it as smart as we want. As much time as we want to copy. Everything is fine here. I'm gonna stop this video right here, and we will continue from the next lecture. 15. Details Page Navigation Design: Welcome back once again. In this part, we will start working on our project details section. So when either double-click on this BU details, we will send them to a new artboard where we will show the details of the project. To do so first and foremost, we need to create, we need to create a new artboard. So I'm going to click on this art board icon here. Now in derives that corner, we should be able to see them all down artboard that is available within Adobe XD. Alternatively, you can also split the customer board where you can define your own hide and white. But for, for me, I'm going to expect this width 1920 because it's the web 1920. I'm going to click on it. Here we go. And we call these new art board. So first I'm gonna change the name of this one. I can simply say, What can I say? I can simply say details space. For this one I can select. I can say, can say main piece, I can say, or we can say homepage. Alright, so now over here, if you look at here that we can see that we have this kind of heat out here with this All these are Navigation option here, but here we are going to add our different kind of thing. For that, I'm going to define a new navigation bar here. So I can simply define a new navigation bar here. Here you go. Then I'm going to remove this border. We don't need to have any border. What do we need to do? We need to take the same color that we have here. So I'm going to, I think we already have this color. So I think this is the color that we all have that you already have. Okay, So this is the same color. Now, I'm going to select these new navigation bar and click on this color palette. And then I'm going to select this one so that we get the same color. Here we have a text which is going to be any. Here I'm going to write this one. We can say that they form such should be 50, only 11, so we need to add 50. Let me check what font sizes we have used for our These are for this navigation bar. I think it's not 50 is maybe tardy or something started. So I'm going to give it all tardy here and then we can put it in the center. For this, for all this one, we have used 25. Okay, so we will need all these. What can I do? I'm going to add, I'm gonna die few more name here. So we can simply say takes tier and then we can add. We're going to start back in here. We can say, we need to change the font size to 25. Here we go. Then we can simply we can, this is the center. You can see that Twenty-seven, Twenty-seven. And then we can click on this repeat grid. And here we can add. We have this couple of options here. I don't much more. We have only few. We have only two to six, so we have only six options here. What can I do here? We can do a little bit of a space here. Then we can remove few of these. We need to have three, maybe t. Then I'm going to click on the Ungroup. And then the second one is going to be education. We can say education. And then we can say, then we have this project offshore and we can say project. And then for this one we can say skills. We are gonna say Debbie's skills, skills and then we have tools and then conduct tools. And then we have contact. We need to add contact. These are the navigation item that we have, but we need to have it in the same space. So we can take space this way, we can, now we can drag it and then we can take it this way. We can, we have 59, we have this 59. You can see the first one and the second one is supposes 59, and then this one is going to add, we can drag it to 59. For this one we can still add 59. And then for this one we can still add 59. And it's in the same line. And we will have to add one more dish here. Another thing is that we will have two genes that color, but we will do it but before that. Okay, so now if I go here and then I can simply select all the items that we have created. So select all item, select all the item here. And then I can simply change the color to white. You can see color has been changed to white, but it shouldn't be this white color. Perfect. Now, we just need to add an underline here and click on this on the Blend tool, the line tool here. And then we can change the size of the line tool. Maybe. We need to adjust it in the center. We need to adjust it in the center, the center of this text. And then we can increase the size of this one and simply change the border color to add a different color here. Okay, perfect. So we have designed our new digital space and irrigation bar. And now when you click on this detail space where you'll send them here. But the thing is that we in our details pairs, what we have in our details pairs we have, let me see what we have. So we have emus and we have detailed description and we will add a few more things. So the emails we're gonna show on top of this one, so you miss, I'm going to add the units for this whole area. So I'm going to drag one emus from there. I can say this MS. here. Where is DC Ms. Okay, So it is not here. Do one thing we can simply, for, we can simply make our rectangle and this rectangle, we can simply put this emails and this is the best way so that the e-mails can automatically adjust and we can simply drag it here. You can see image has been adjusted with this one. And we can simply adjusted with this one. I think we can have a little bit of a space. I'm gonna remove this border from this image. We don't need to have any border. Now if I select this piece and if I run it, then only we will be able to see this space. If I run it, then we should see our detailed space here. We can see this is our image, so this is our own navigation bar. Everything is looking good. Now, what can we do? Here? We will have to add the title and the features and the description and the future of this one. Solve for that. First and foremost, what can I do? I can enable the layout view so that we can, what we can see the column, column number. I'm going to double-click it and then click on this layout. Now we have desorption. So from here, I would love to add a new artboard with the card view so that we can add our title and a description. Then we will have our feature and the technology used. I'm going to click on this art board, on this not art board on this rectangle tool. And from here, from here I can add, we can draw our new rectangle. We can draw our rectangle here. And over here. First I'm going to add a little bit of water ideas so we don't need to have any OK, OK. We can add a shadow first to add shadow 20 by 20. Now remove the border. Here we can add our title and then we can add our description to edit title. We can simply start adding title from here. Then we can. But we need to change it to block up the text. Whereas the text. First, let me select this one before. I think we don't need to have this layout view now, we can simply remove this one and then we can add it. So the thing is that the background is white and there's a reason we can't see this shape here. So in here in our homepage, we use two different background for this layout. So the color is in this color, so I'm gonna make it, I'm gonna say up this color here, and then I'm gonna come over here for this one, for the digital sphere. Then I'm going to select this one. Now we can see, we can see, we can see this one here. So here we are going to add our title. So maybe from here we can add a title and a description of this. So first let me change the color to black. So we need to change it to black. Click on this color palette. Not selected. Now, we can change the color to black. Okay, so we can add our title here. I'm going to do MOOC this one and I'm going to copy some dummy ticks from Loren Ipsum. We can simply copy few texts from here. I'm going to copy from here to here. I'm going to copy this one. And I'm going to open this Adobe XD. And this is the text tools. And I am going to paste it here. Then we can, we can add the font size of this tidy little bit bigger. Faster need to select the formed for the text and added that form size. And then I'm gonna remove few texts because we don't need to have lot of text here. I can do move a few text here. Okay, perfect. So now this is going to be able to title, and then we can add font-style for this title. We can say, we can use this color, we can use this one. And now we are going to have our brief description of this project. To do so, I'm going to again click on this text tool and then we need to draw area to show our details post here. So you can see that we can simply do it from here to here. Here we go. Perfect. Now in here we will use our, we would add our description. We will add our description. Then we can simply paste it here. I'm going to change the form size here. We don't need to have 35 and we can change it to 25. There's eight, and this is our title and description n. We can now adjust this one by clicking here. It is as adjusted now so we can simply decrease the size of this one. Now if I run this one and we can have these details description and in the next part we will add a couple of more features like tick use technology. We can use feature and tech used and then more posts over here. But we will do it in the next part. And I'm gonna stop this video right here. We will continue to read from the next lecture. 16. Details Page Feature Design : Welcome back once again. In this part, we will continue working on our detailed space. So this is already dispersed art board, so we have edited our title and description and now here we can add our new field for our feature of this project. So for adding this feature, what I'm gonna do first, I'm going to enable this layout view so that we can see the column from here to here, we're going to add another, another rectangle where we will add all the features. So let's enter a new rectangle here and it'll be a little bit bigger because we're going to add a couple of more options here. For the fetus section. Here you go, we can add water radius 20 and then add our shadow. Shadow is going to be 20 by 2020 and another 20 from here. Now, we can do, we can now remove this. We can remove this view from here. We can remove this layout view, and we also don't need to have this motor here. It looks perfect. Now we can add a title here first, so click on the stakes. And you can see that exactly in the same position we can write. Here it takes, we can say feature, feature of this project. Maybe we can change the font size to 45. Here we go, perfect. Now we can add our least. We can add at least here. We can simply draw our circle here from this cereal from the same line. Or a small circle is going to be a dot. And we can add 15 by 15, maybe 15 by 15. And then we can, you can drag it here. And then we can change the color to black for this dot. This is the bullet point. And here we are going to add the title. I'm going to click on the sticks tool and I'm going to add text here. Maybe I'm going to copy this one. I'm going to press Command, Control C. Let's see if we can copy it from here. And then we can paste it here. Here we go. We can copy this one, but we need to change style. We need to chance style, font size because it is taking off 45. But this one is, I think 25 or 35 is 35. I think it's not hardly five. It is 35. Okay, but let us add 25. We can add 25 and we have this option here. I don't know much more about this particular data item. In that case, we can see I think that we have copied the description, not the title one. That's the reason that it's showing the whole area. So I'm gonna just copy this one. Better. I can make it out component so that I can that I can hear it is that this text and right-click on it. And then we can make it component wise. Button is not working. Now we can make it a component, and it has becoming component and icon has been changed. Now I can click on this one and then I can simply drag this component here. You can see now I can adjust this one from here to here. Okay, Perfect. Now, what can I do? I can simply make a group or this dot and these are components so that we can duplicate it. So this ellipse and this component is going to be a group. We can say command G, press Command D, and then we can name the group. We can say, Can we save, we can say feature. You can say features. There's good. Now click on this lipid grid button, and here we go. We have these couple of options. We can do, we can duplicate it a few more types and then we can add chest and this one. Now if I run it, we should be able to see our features. And here we go. We have this feature option, so we have successfully finish this feature of SHA-1. And this is our title and description, and this is our feature option. We are showing our image here. And what can I do? I think we can add, we can add our title here and the description here to get more ideas. So I'm going to add a title and description on top of this one. So I'm going to click on this text tool and then add a title here. We can say title. You can say title. Alright, now I'm going to add just this one a little bit here. And then this one a little bit done. Now, we need to add another text for description. We can say a description. I'm sorry. Then we can add under script shown on here equal. We have this description option as well. Okay, perfect. So we can change the font size of this title and description just like the feature option we use. So I'm gonna select this 1245. Okay, so we need to adjust this one because it is taking a lot of space. So I'm going to drag it down and then drag it down and target down, load the title one. We need to drag it a little bit and we can adjust it now. For the description, again, it's going to be 45. And here we go. Now we have this description and title, description and the future not if I run this one, we should be able to see our title or description and our features. And I would love to add few more things in our detailed space. For example, I will definitely, we will have to add a footer that we already have in our component. But on top of that, I'm going to add our other projects in other port project in a different way so that when you saw that when somebody is gonna increase it the data space, he would have an access to other posts, then he can click on this. X is not adult projects. We will do it in the next spot. I'm going to stop this video right here. See you in the next lecture. Bye bye. 17. Details Page Card Design: Welcome back once again. In the spot where you will add few more options in our detailed space. To do so, what can we do? First and foremost, we need to increase the height of our details but artboard, so I'm going to increase it a bit more. And here we will add three more projects option here so we can take a little bit more. All right, so first I'm going to add, I'm going to enable this layout view. So click on these may not bored. And click on this layout option. We can see this layout view now from here. First I'm going to add our text here, over here. So first I'm going to add our text. We can say that text is going to be from here. Because everything is coming from the side. I'm going to add here a text and here you can say, I'm going to click, I can say more projects. This is more projects sexual n, Maybe I can add a underlined here. So first let me adjust this text. We can 45. So we need to have 45. Then we can click on it. Let me select this one. We can, we can have 45 and then we can click on it to adjust this one. And now after that we can have our underline on this one. We can draw our underlying vesicle is a line that we're going to draw here. And I'm going to say, let's see, let me change it. I can drag it down and then we can decrease the height to, I think 240 to 40 old bouquet. And then we can adjust it here. Now if I run this one, then we can simply, let's see, we need to select the because we didn't add any. Would you didn't add any prototype option right now, we can navigate to the data space. So this is total retail space. And here we go, we have this mode projects detail. Now, here we will add three more projects. We're going to design it into our defense. We will define, we will design a carte option here. So I'm gonna take help object angle tool, click on this rectangle. And then here, from here, we can, we can draw a guard. Maybe from here to here. We can drag, we can draw this card here. First, we need to add our border radius to add what already is 20. Then the multiple border. We don't need to have the border and we need to have a shadow. So I'm going to add the shadow 20 by 20. Now if I run it, let's see what can we see? And we have this project over here. But the thing is that it is taking a lot of spaces, so I'm gonna remove this one. What can I do? I can simply adjust it in this way. Now we don't need to have this layout view. I'm gonna remove this layer, it will end here. We can add our image files to add an image files. I'm going to draw a rectangle here so that this image can easily adjust with that. And this one will be our image area. So fast we need to add, we have height, we have a wide 636 and for this one, Okay, now we have a high tone. We have white 536 and we have a height five T6. So I'm going to remove the border first, and then we need to add whatever it is 20. And then I think we can adjust it a little bit more. Now. Edit adjusted. Now. It's perfect. Nose is not perfect here because we need to have it exactly in the same size. Now I think it's okay. Now we can graph our image here. We can drop our MA's here, maybe this one. We have these e-mails here and we can see in this image is also got this border radius. And here we can add our title and the description, and we may have little text and the right side corner. So now what can we do? We can make, we can, We already have a component of this. We can simply go over here, and then we can simply drag this component here for the title of this one. Then we can add this title here. Before doing this team. I think it is going to take this way, but it's fine. And then I'm going to double-click on it. And then in the Medial, I'm going to press the Enter so that we can get to line. It looks okay now no problem at all. So we can simply change the font size to 35 for this title. We can. What can we do? We can simply it is taking a lot of his best. You can adjust this one or we can remove few texts. Maybe you're going to be moved few texts from here just to adjust this 135. And now we need to add our description here. To edit description, I'm going to select this text tool and then I'm going to draw the text area. Okay, So we have very less space. So what can I do? I'm going to adjust the title, font size. Study five to party. Then we will have few space. Only. Then we can draw a text area. So I'm gonna take it from here to here. Maybe from here to here. Okay, and now I'm going to copy some text for this, for the description, we have this dummy text option here, and I'm going to copy this one, maybe this. Now, I can copy this and I can paste it inside this text area and then paste it. And obviously we need to change the font size that it can adjust with this one. What happened? I'm sorry. So let me draw it again. So I'm going to draw, I'm gonna drag, draw the text area here. And then I can paste the text here. And then I can simply change it to 30. Okay, So if it is started, then we can have this one, but I'm gonna paste it to 25 or maybe drink it for the description. For this one, we can have this one. We can take a different text, different font families so that it looks good. Now we can just note this one leaving. I can't read this one. Maybe this one. It is. Okay. Now I can click on this one to adjust with that. And just with the text. So it is quite good now and here we can add our text and we can say Bu details or alternatively what can we do? We can simply, we can simply we have a View Details button over here. I think we can simply grab this one also if you want. I think we can grab this one. Let me see. I think we met a group if I'm not wrong. So we have this bottom here. We have this bottom in a group, so I'm gonna make it and duplicate. So press Command D, then I can duplicate this one. You can see I can duplicate this one. Now. Here you go again, simply just put it here. What happened? It's not showing here. Let me duplicate this one, Command D, and then I can drag it here. The thing is that we can't drag it directly here because it's in a different art board. And I'll these things are available within this artboard taxes. This one. What I would have to do, I will just I will have to adjust. I will just have to make it a component so that I can reuse it. But it is not visible here. If I click this one, it is not showing here because we have already edited this one here. Let me remove this one fast. This thing I'm going to remove from here. Then let me see if we have anymore here. And this is the main bottom. So I'm gonna make it a component, may component. So this entire thing is going to be in this component. Now, we can simply drag it here. And this time it is going to work. Again. It is not. I think it is working, but the thing is that one moment, we can simply, we can simply our genes, the background of this one. Now if I run it, we should be able to see this one here. Now it is okay, no problem at all. Now what can we do here? This is what we have here. So we need to make it component, then, we need to make it a component. Then we can reuse in this one here. Now it is inside this one. Do we need to add a few more here? To do so? Can we do, we can make them a group and then we can use this repeat grid to add this repeat grid section. What can we do? We can simply are met all these item in a group. These are the few things that we have here. We have this big cells. We have this component button and this one I think, I think from here we have everything. So I'm going to select all these. And now we can make them a group. Now click on distributed grid. We can add again, duplicate it. I think we can duplicate it three times, but we can't duplicate it three times. You can duplicate it two times because it is going to be outside of this main one. What can we do? We can simply make a space on it. We can make what can we do? We can take mixing on to writing here. We can in the bottom. Let me see if we can take c here. Then I think we can dig under one more. We can take T here, and if we decrease the space, then we can take C. And then let me run it. And let's see. Here. We have these details space here. And my computer is not working properly. It is not. Let me read and this one. Now if I click on this Run button, then we have these details. Okay, so it is selected adult homepage. Now if I click on it, we can see our details piece here you saw our feature, here is our projects. I can, I think it is as fine we can take T or if you want, we can take a few more in the bottom as well. Few more in the bottom as well. You can take three from here, no problem, metal and we can take out three more in the bottom. And we already have this option here, so we can simply drug or drove. We don't need to have mass more here because we have only three project in the homepage. So now I'm going to change the midst of this one. So I'm gonna select different in this. Let us select this one here. Then we need to replace this one as well. So I can select this one here. Perfect. So we have this option here and the next part we will add our footer section, or I think I can add it in this part because we already have this one in the components. So first I'm gonna remove, I'm going to decrease the height of this main output. And then I can simply grab this. I can simply grab this footer because we all live happier than our component. Now, I can adjust this one. I think we don't need to have much more space so we can remove few more space from here because it's already a bigger size. Here we go. Perfect. Now if I click on this of ditches post, we're in the homepage now, so I'm going to select this detail space. I can have this option here. We can see we have all these, we have this more projects sexual, and then we have this footer adjusted. And one thing that I can do here, I can simply I can simply decrease the size of this one because it is very big. Bigger size. We don't need to have this bigger size. And let me first check how it looks without smaller one, if we decrease the I think it looks pretty good and we can remove we can adjust it in this vessel, the height wide is four or 55. I'm going to select these 455. This one also, for this one also select 455. Perfect. Now we can adjust it to hear. Maybe don't do one. And this one also is going to be on this twenty one ninety, one ninety. Now it looks pretty good. I think. Perfect. It looks pretty good. Everything is same here, no problem at all. And we have this BU details option. We have this feature of Sean and we have our footer. So everything is done. In the next spot, we will work on our prototyping. So see you in the next lecture. Bye-bye. 18. Prototype With Animation: Welcome back. Once again. This part, we will complete our project and we will add our prototyping. So we basically have only two art boards in the main output. We have our entire application and in our detailed space we have the details of the project that we were showing in our homepage. So first let me run the homepage. This is our homepage. We have very nice design. We have our carrier objects or education, sex shown project section. And our tech skills are tools. And the feedback, and the feedback we got showing this scroll view. And then we have our contact form as well. Then we have our full-time. Now the thing is that when our user will click on this View Details button, we will send them to the digital space. But now if I click here, nothing is going to happen. It means that we don't count exist our digital space. For this, we need to add prototyping. So now the question is that how can we do it? So it's a very easy way. Nothing to already just need to bleak few times. Now, on top of this one, you can see that there is an option called prototype. You can simply click on this prototype. So if you are in this prototype death, then the right side corner, you are going to have a couple of options. So basically we will have to work on it. First one is trigger. This trigger means that what kind of prototyping we want to have. So it has a couple of options. First, we need to select an item from where we can do these things. So first I'm going to click on this first option, which is going to be this view details effect. Click on this View details here. Now if I click so when you will, if you are in a prototype or protective, so when you will select any of the item, then you just gonna give you a button from here. From here you can add prototyping. Now, if I select this one and then I can access these and you can see depth, drag keys and gamepad and voice. So there are so many things to do with that. But for us, we're going to use this step option so that when you click on this, we will send them loci. So I'm gonna skip this step. And then under these actions and we have different kinds of animation options. So first one is typed. We have transition auto animate overlay. Overlay means if you want to show any kind of a lot, then it's cool to previous artboard audio playback, speed of playback, and these things are also available here. So normally we will have to use most of the time with the transition. So I'm gonna select these on transition. We have the destination. So now we have two options. Either we can directly click on this one and then we can drag it to our detail space. Then it is going to connect this way. I'm going to drag this one. And you can see that it has automatically connected with the detail space. So we can see this is the detail space we have here. Now we have this option, then we also have the loops. Okay, so another thing that is now visible, the stat, we have this, we have another bottom over here. Okay, I'm sorry. That we didn't notice when we did this one because we copied it several times. Okay, so this is the thing that we will have to fix. We will do it later. Now when you will click on it. So in the, in the, in the destination, you will have this option to add. So when you click on it. So our destination is this in detail space. And here we have the animation slide left, slider edge, so we can click on sled right. And then we have easy out and easy in Louisiana, another type so we can select Easy enough. And this is the duration, 0.6 seconds. Now if I run this one, now if I come back to this one, if I click on denial, we can see that this hand symbol when we are on this view Details button, but here nothing is gonna happen. So if I'm going to click on it, we are going to see our detail space. Here we go. We have our detail space. And then we have this option here. The button is visible here. I think that when we copy this one, duplicate copy, we have learned how to do this prototyping here, but this button is here somehow. You do check this one here. I think this is the button that we are talking about. Now I'm going to remove this button from here. I'm going to delete this button from here. I can delete it. Okay, so now it has, the more you can see that now we don't have any button anymore. It is fine. So when we copy it from the component, we duplicated it one more time, I think, but I didn't notice it. Now if I run it again, this is our homepage. Now if I click on this View Details, we are in this in detail space and it is taking a bit more time because I have selected this. Timeframe. Now from here we can't go back to our homepage. So what can we do when we are in the data space, we have this Home button. So from here we can go back to our homepage. To do so what we need to do, we need to follow the same process. So first let me, okay, so now let me chance the duration 0.6 to 0.2 and the default one. And you can also select different kinds of things here, like on top, from the top, I'm going to click on it. We are in the digital space. Now. Instead of slide right? You can say slide down also. If I click the first slide down, then it is going to come off from the top and then there's gonna go down. You can see click and it comes from the top. But it's better to have this one to select the right. And we just need to, we need to have this easy in. We don't need to add easy ease in and out. And we can click now. We have this reduced space. Now we need to add one more prototype from this home. So when you double-click on this home, now there are two things we can do with this. 11 is we can select Previous Artboard. We can see our transition is going to be Previous Artboard. It means that from where we have come, so we come from the homepage to the digital space. So it is going to automatically adjust the detail space. But the problem is that sometimes if you were in the homepage or if you're in any other place, but if you want to, let's say you have 5678 pages. But if you are all the time, if you were using these Previous Artboard, then you will only exist the previous output, maybe from the homepage to you move to the education piece, then education peers to the project-based. Now if you want to go back to the homepage from the project-based, then you won't be able to do is you split the previous artboard because you went to project, project-based from the education phase, you are only allowed to move to the integration paste, not the homepage. There's a reason. So let me show you still, I will show you click on this previous onboard. Now we can see this one. Now if I, now if I directly run this digit space and if I click here, then still I can move to the homepage because I didn't come to the come from the homepage this time. I definitely run these details, but that's the reason it's not working. Now if I select this homepage fast and if I go back to the detail space from here and click on this one, we are in the t-test, but now if I click on Homepage, then we are in the home-based now we're able to do it. Okay, So this is the meaning of previous artboard system, but it's always better to add this one. So instead of adding previous artboard, select the transition and then choose an output. So we are in the detail space, we're going to go to the homepage. Again. It will depend on the project you're working on. So you just need to know how things are going to work in Adobe XD and then you can use it equity into your design. Now click on this homepage is now this time, if I click on this homepage, we will be moved to the homepage. Here we go again, see we are in homepage. Now if I click on this View details, again, we are able to move to this detail space here. This is our description, this is our feature. This is all project and we have this nice footer, so everything is fine. I'm going to stop this video right here and we will continue with from the next lecture. See you in the next lecture. Bye bye. 19. Export All Designs: So far we have finished our web app design. Now it's time to do exporting of our design. We have made this design now is time to share this team with other people. How can I do it to do it is very easy to do, which we have in this option in the file section. So now again, let me show you our project one more time because we did a very good job. We designed a complete web app. And now we have this education section, our project sex showed our tools. Take skews feedback and we can also scroll our feedback from here. Then we have this contract of Sean's and then we have this footer. This is the complete application. Now, if I click on this View Details, we should be able to see our data space here is of a detail space, and I have our title feature and the project option here. And then we have the footer. We have to art board now we need to export it. Now if we click on the homepage, we are in homepage. Everything's fine. To do so we need to click on this file of Sean. And then here you will have an option called export. It means that if we want to export our design, there are many ways to do it. And it says that all art boards or the selected one source liquid on means if I select this one, if I just want to export this particular art board, then I can do so. I can click on this Export and then you can say, it says a selected, it means that only this one, but we want to, do, we want to export all the artboards. If you want to export all not pores at once, then you need to select all artboards. Then you are going to have option to do it. And it is going to give us a pop-up of Shawn here we will have different kinds of options to do. It says that the format, what kind of format do you need? Maybe you need PDF format, maybe you need JPEG format, maybe unique PNG format, so you can do it for me. I'm going to select my JPG format, then quality. You can select different kind of quality. So it's better to have a 100% and export these and select asset will export at one. And we have this option to export for non-linear design option. And all we can only for the web option, which means you can run it. Now designed ad. You can select. We can, now we have exported for this one and we have this option. And we can simply select our destination where we wanted to save it. You can create a new folder or wherever, wherever you want to set, which for me now, I'm gonna slip the desktops and just in the desktop I'm going to show it. Now click on export all on board. And you just going to take few seconds. I think it is done. Now. This is my next off and here we have these 21. So this one is our homepage. Now if I click on it, then it is going to open. Moment. It is now running. It is not opening the application. So here is our application. Moment. Let me see. Width. Few more moments is very slow. Here we go. We have this whole design that we had in Adobe XD code execute the same thing. Now we can zoom in and zoom out and then we can, I think we can make it a bigger size. Now we can zoom in. You can see we have exactly the same design that we had in Adobe XD. So we exported it successfully. Analysis the 100%. So this is our homepage. And we have career object, we have our education, and we have our project and definitely don't try to click on it because after exploiting it is not going to work here. Definitely, because it's just a JPEG format. And this is our tech skill and you can see that there isn't any pixel issues, so everything is fit and fine. Obviously we can't scroll it. Adjust an email. And this is the contact base and then we have our footer. So everything is perfect here. Now let me open these details space. This is our detail space. Now I'm going to zoom in. Now, this is our detail space and we have this option here. We have overheated. We have our navigation bar, we want our emails, then title description features and more posts and our footer and definitely the product promotion will not work here. So this is our homepage and this is our detail space. So we have finished our complete project from its cross to live view. We have exported our design and I think you'd have liked this course. I'm gonna stop this video right here.