1 00:00:00,140 --> 00:00:00,770 All right. 2 00:00:00,770 --> 00:00:05,480 And now let's complete our first page, which is going to be the landing page. 3 00:00:05,480 --> 00:00:10,730 So this is the result we're shooting for somewhere here at the top, we'll display the logo. 4 00:00:10,940 --> 00:00:16,329 We'll also have some kind of heading and some text about the application and then two links. 5 00:00:16,340 --> 00:00:24,830 One is going to be to register page and the second one is going to be to the login page, where also 6 00:00:24,860 --> 00:00:27,260 we have a demo user option. 7 00:00:27,260 --> 00:00:35,030 So if somebody just wants to take a look at the application, they can go with the explore the app option 8 00:00:35,030 --> 00:00:36,110 instead. 9 00:00:36,140 --> 00:00:42,650 Now before we start setting up the logic, I want to showcase how we're going to be setting up the CSS 10 00:00:42,680 --> 00:00:47,510 in this application and effectively CSS is going to be optional. 11 00:00:47,690 --> 00:00:49,690 So what do I mean by that? 12 00:00:49,700 --> 00:00:56,780 Well, if we take a look at the assets more specifically wrappers, we'll notice a bunch of files. 13 00:00:56,870 --> 00:01:01,970 And then if I open up the landing page, notice something interesting. 14 00:01:01,970 --> 00:01:07,010 So I have the wrapper, something we just created in the landing page. 15 00:01:07,010 --> 00:01:09,860 And as a side note, that's not what I want to do. 16 00:01:09,860 --> 00:01:13,730 So let me close this one and notice that. 17 00:01:14,470 --> 00:01:15,680 I have the same setup. 18 00:01:15,700 --> 00:01:16,810 I have the wrapper. 19 00:01:16,840 --> 00:01:17,890 It's a section. 20 00:01:17,890 --> 00:01:19,570 So we will return a section. 21 00:01:19,570 --> 00:01:23,590 And then I have all the styles we're going to use in this particular page. 22 00:01:23,590 --> 00:01:25,630 And I'm exporting this wrapper. 23 00:01:25,810 --> 00:01:27,430 So here's what we can do. 24 00:01:27,460 --> 00:01:36,070 We can go back to the landing one, We can import the wrapper from our assets and just return from the 25 00:01:36,070 --> 00:01:37,060 landing component. 26 00:01:37,060 --> 00:01:40,390 And as a result, we'll right away get the styles. 27 00:01:40,630 --> 00:01:43,570 And essentially, here's the approach we're going to take. 28 00:01:44,120 --> 00:01:49,340 If you're not interested working on the CSS, you'll be able to skip the video. 29 00:01:49,370 --> 00:01:55,370 You'll simply import the wrapper with all of the styles and we'll set up together the logic. 30 00:01:55,400 --> 00:02:02,510 Now, if you are interested in working on the CSS, every time we're done with the page, there's going 31 00:02:02,510 --> 00:02:08,419 to be an optional video where we'll navigate to the specific styled component. 32 00:02:08,419 --> 00:02:10,440 In this case, it's going to be a landing page. 33 00:02:10,460 --> 00:02:15,470 We will remove all the styles and we'll set it together from the scratch. 34 00:02:15,500 --> 00:02:17,540 Again, it's going to be an optional video. 35 00:02:17,630 --> 00:02:20,930 If you're not interested, just skip to the next one. 36 00:02:20,960 --> 00:02:23,570 You don't have to follow along with the CSS. 37 00:02:23,600 --> 00:02:26,040 All the styles are already provided. 38 00:02:26,060 --> 00:02:27,950 Hopefully that is clear. 39 00:02:27,950 --> 00:02:31,000 So let's navigate back to the landing. 40 00:02:31,010 --> 00:02:36,640 Let's set up the imports first, including the styled wrapper. 41 00:02:36,650 --> 00:02:40,280 And like I said, after that we'll worry about the actual CSS. 42 00:02:40,280 --> 00:02:48,660 So for now, let me just remove the local wrapper and let me import the wrapper from my assets. 43 00:02:48,720 --> 00:02:50,190 So let's go over here. 44 00:02:50,190 --> 00:02:53,700 Let's say import all of them pretty much have. 45 00:02:54,390 --> 00:02:55,110 This name. 46 00:02:55,110 --> 00:02:55,710 Rapper. 47 00:02:55,740 --> 00:02:57,540 Now, please keep in mind that. 48 00:02:58,760 --> 00:03:01,040 All of them are exported as default. 49 00:03:01,040 --> 00:03:08,420 So technically you can use whichever name you want in the actual component, but again, it's my preference 50 00:03:08,420 --> 00:03:09,770 to use wrapper. 51 00:03:09,770 --> 00:03:11,270 So I have all of these styles. 52 00:03:11,270 --> 00:03:11,760 Let me save. 53 00:03:11,790 --> 00:03:15,230 Notice right away I have a different look. 54 00:03:15,230 --> 00:03:16,160 And you know what? 55 00:03:16,160 --> 00:03:17,900 I want to go to the. 56 00:03:18,830 --> 00:03:21,070 Home layout and I want to remove this nav bar. 57 00:03:21,080 --> 00:03:23,900 Again, this is just for demonstration purposes. 58 00:03:23,900 --> 00:03:30,050 And also I'm not going to set this one up as a div, it's just going to be a react fragment. 59 00:03:30,760 --> 00:03:32,260 And then back in the landing. 60 00:03:32,260 --> 00:03:34,640 One, we want to set up the wrapper. 61 00:03:34,660 --> 00:03:35,740 Okay, we have that. 62 00:03:35,740 --> 00:03:41,470 And then let's go first with the nav and inside of the nav we'll have a logo. 63 00:03:42,100 --> 00:03:47,320 Now in order to grab logo as well as the main image. 64 00:03:48,530 --> 00:03:52,380 We'll need to take a look at the assets and more specifically, images. 65 00:03:52,440 --> 00:03:54,110 I notice we have logo.svg. 66 00:03:55,180 --> 00:03:56,080 That's our logo. 67 00:03:56,080 --> 00:04:02,530 And we also have here this main SVG, which effectively is going to be the image in the landing page. 68 00:04:02,530 --> 00:04:07,170 So I guess let's start by importing those two. 69 00:04:07,180 --> 00:04:08,530 First one is going to be main. 70 00:04:08,530 --> 00:04:18,310 Again, this is located in the assets then images and we're looking for forward slash main SVG and then 71 00:04:18,310 --> 00:04:19,750 the same deal with the logo. 72 00:04:20,930 --> 00:04:26,840 In this case, it's assets, images and then a logo SVG. 73 00:04:27,050 --> 00:04:33,080 And in a few videos I'll showcase where I got the logo as well as the main image. 74 00:04:33,080 --> 00:04:37,760 And then we also want to grab the link component from React router Dom. 75 00:04:37,760 --> 00:04:40,310 But this one I'll try to auto import. 76 00:04:40,310 --> 00:04:42,320 Okay, so we have the wrapper. 77 00:04:42,320 --> 00:04:45,620 Now let's start by setting up our image. 78 00:04:46,220 --> 00:04:47,030 As far as the source. 79 00:04:47,030 --> 00:04:48,830 This is going to be the logo one. 80 00:04:48,830 --> 00:04:55,370 Now for Alternative, I'm just going to type here Java file and let's add a class name of logo. 81 00:04:55,370 --> 00:04:57,590 Again, we'll work on the CSS. 82 00:04:58,340 --> 00:04:59,480 In the following video. 83 00:04:59,480 --> 00:05:01,520 But again, it's going to be optional. 84 00:05:01,520 --> 00:05:03,770 And check it out once we save notice, right? 85 00:05:03,800 --> 00:05:07,040 We have my logo and all the styles are already applied. 86 00:05:07,670 --> 00:05:14,690 Then right outside of the NAV, we want to go here with container and page Div. 87 00:05:14,870 --> 00:05:19,670 And inside of this div we're going to go with div with a class of info. 88 00:05:19,940 --> 00:05:21,980 Then we'll set up a heading one. 89 00:05:22,940 --> 00:05:24,260 We'll go job. 90 00:05:24,500 --> 00:05:32,600 We'll place a span here just because we will add different color to the word here, the tracking one, 91 00:05:32,600 --> 00:05:35,390 and then we'll go with app after that. 92 00:05:35,390 --> 00:05:40,820 We want to go with the paragraph and this is the case where I will copy this from the complete project 93 00:05:40,820 --> 00:05:42,920 because I just don't see the point of. 94 00:05:43,760 --> 00:05:45,320 Typing it together. 95 00:05:45,320 --> 00:05:50,600 And as a side note, I'm getting these texts from the hipster ipsum if you're interested. 96 00:05:50,600 --> 00:05:55,160 So navigate to hip Simcoe and you can get. 97 00:05:56,180 --> 00:05:58,330 These type of hipster texts. 98 00:05:58,360 --> 00:06:03,850 Now, alternatively, you can also set up here a paragraph and you can just use the Lorem text. 99 00:06:03,880 --> 00:06:05,290 That's also an option. 100 00:06:05,290 --> 00:06:08,500 It's just my preference to use those hipster words. 101 00:06:08,500 --> 00:06:10,600 And no, it's not because I'm a hipster. 102 00:06:10,600 --> 00:06:11,920 I just find them funny. 103 00:06:12,670 --> 00:06:20,110 Then after the paragraph we're going to go with Link and like I said, I'll try to get the auto import 104 00:06:20,110 --> 00:06:20,680 working. 105 00:06:20,680 --> 00:06:25,360 So we're going to go with Link and the first one is going to be to the register page. 106 00:06:25,660 --> 00:06:26,980 So two options. 107 00:06:26,980 --> 00:06:32,170 First one is going to be forward slash register and then we want to add some class names. 108 00:06:32,200 --> 00:06:37,090 Now, this is a global class, the button one that is coming from the index, CSS. 109 00:06:37,760 --> 00:06:40,150 And we want to go here with register link. 110 00:06:40,160 --> 00:06:43,490 So these are the styles we'll apply in the style component. 111 00:06:43,520 --> 00:06:45,800 Then let's just type here register. 112 00:06:45,800 --> 00:06:47,330 So that's going to be the text. 113 00:06:47,360 --> 00:06:48,500 So that's our button. 114 00:06:48,500 --> 00:06:49,210 That's our text. 115 00:06:49,220 --> 00:06:55,010 Let me close this one and we want to copy and paste and now we want to set up the login one. 116 00:06:55,010 --> 00:07:02,480 So instead of register we'll type login and it's only going to have the class button. 117 00:07:03,770 --> 00:07:10,280 And then when it comes to text, we'll say login forward slash demo user. 118 00:07:10,990 --> 00:07:15,370 And then right outside of this div, we're going to place an image. 119 00:07:15,370 --> 00:07:18,070 So we're going to go here with image source. 120 00:07:18,990 --> 00:07:21,210 And let's set up the main one. 121 00:07:23,120 --> 00:07:28,910 As far as the alternative, let's just write job hunt and let's add a few classes over here. 122 00:07:30,290 --> 00:07:33,980 First one IMG and then main IMG. 123 00:07:34,190 --> 00:07:35,150 Let's save it. 124 00:07:36,240 --> 00:07:37,020 On a small screen. 125 00:07:37,020 --> 00:07:38,370 We won't see the image. 126 00:07:38,520 --> 00:07:40,110 That's how I set up the project. 127 00:07:40,110 --> 00:07:47,130 And then once we get to the big screen, notice, we'll have the info and the image side by side. 128 00:07:47,280 --> 00:07:48,780 And with this in place. 129 00:07:49,730 --> 00:07:52,940 We're done with the first page, with the landing page. 130 00:07:52,940 --> 00:07:59,230 And if you're interested, you can work on the CSS, which we're going to do in the next video. 131 00:07:59,240 --> 00:08:03,350 If not, you can skip and move on to the next topic.