1 00:00:01,010 --> 00:00:10,410 Well, in this video, what I want you to see is also with the Tilewind in comparison with 2 00:00:10,410 --> 00:00:18,769 Bootstrap, because in Bootstrap is what I told you at the beginning of this series of videos of the Tilewind 3 00:00:18,769 --> 00:00:26,250 that gives us more components already created, then we only have to load them and 4 00:00:26,250 --> 00:00:31,410 we are modifying ourselves to achieve what we are looking for 5 00:00:32,109 --> 00:00:40,329 here we have to work a little more than that is what web designers say 6 00:00:40,329 --> 00:00:45,030 which is a bit what they like because they have to work more on 7 00:00:45,030 --> 00:00:52,689 classes and that will give you more work but they also have much more degrees of freedom 8 00:00:52,689 --> 00:01:01,689 well then what I want to see with you is that although we have to work with 9 00:01:01,689 --> 00:01:08,250 time with in a certain depth if it allows us to use what the components are, 10 00:01:09,349 --> 00:01:14,849 then there are components that have already been developed by third parties and that we could 11 00:01:14,849 --> 00:01:22,189 take them to see if this wants to load here, then you see I have this of the components 12 00:01:22,189 --> 00:01:32,810 y aquí tenemos diferentes opciones que podríamos con las que podríamos ir trabajando vale pues por 13 00:01:32,810 --> 00:01:43,629 ejemplo testimonios nuevos elementos los que pues los here vale por ejemplo si quiero hacer algo 14 00:01:43,629 --> 00:01:54,629 buttons like this, it is worth that I have a kind of not more not to go and be able to use it, it is worth 15 00:01:54,629 --> 00:02:06,709 putting menus or well, here I have different options, I can take the code, copy and paste 16 00:02:06,709 --> 00:02:14,629 and I am modifying what I need, you have in react how to do it, this is if you are making the 17 00:02:14,629 --> 00:02:21,849 page in html that in class I will tell you to make me a page in html to see it because it is as easy 18 00:02:21,849 --> 00:02:29,389 as copying it and that's it with the front that we are working on that is about bit and then 19 00:02:29,389 --> 00:02:35,569 you see that we are linking several files in this case we are putting all the code in 20 00:02:35,569 --> 00:02:46,009 app.jsx, well there is a little, for example, put the script so that we can read the 21 00:02:46,009 --> 00:02:56,330 add11 listener, the events of the event listener, for example, well there we can or it is 22 00:02:56,330 --> 00:03:01,669 different, but as now the only thing we are seeing is how the timewind works, well 23 00:03:01,669 --> 00:03:07,629 because we are going to work with it, okay, well, I can also take here and look for the 24 00:03:07,629 --> 00:03:19,229 bus here, okay, and then you see I find this page, for example, and here, well, there is code here, if 25 00:03:19,229 --> 00:03:24,789 you let me take the code, this has been developed by third parties, it is worth in all these that 26 00:03:24,789 --> 00:03:27,870 us put the get the code 27 00:03:28,629 --> 00:03:34,569 because these if you click on any of them well here there is already 28 00:03:34,569 --> 00:03:40,349 you have to pay for it but if you are using it professionally because if you 29 00:03:40,349 --> 00:03:44,590 can be worth it obviously in the center because not for then you always 30 00:03:44,590 --> 00:03:50,550 would have to look for something like this that allows us to take the code 31 00:03:50,550 --> 00:04:00,330 then I start to look at the code and I have these options, we are going to put it in html, 32 00:04:00,330 --> 00:04:06,150 I forget about the real, okay, I'm going to put it directly in html and then I see that it starts with a 33 00:04:06,150 --> 00:04:14,110 nap, okay, because it's a pair, I have the tips, I have the buttons, I have the spam so that 34 00:04:14,110 --> 00:04:27,230 which is a kind of container to configure the text I have the images I have the svg which is another 35 00:04:27,230 --> 00:04:36,589 container that this one what it does is give a new coordinate system well there are the 36 00:04:36,589 --> 00:04:42,790 usual labels that are the ones that I understand that you have worked in first value I have the 37 00:04:42,790 --> 00:04:48,069 to hr to go pressing in each of them this would be worth it in principle it would be worth it for what 38 00:04:48,069 --> 00:04:54,250 I want, which is nothing more than doing the front with different values ​​for look, well, I'm going to copy this 39 00:04:57,519 --> 00:04:59,800 until 40 00:05:09,850 --> 00:05:18,129 here, okay, well, we could have given it here, 41 00:05:18,129 --> 00:05:27,189 I'm going to copy it, let's go to our Visual Studio Code, okay, I'm going to paste it here, 42 00:05:31,259 --> 00:05:35,399 give it a good format and then here it starts to see because I get a lot of 43 00:05:35,399 --> 00:05:40,459 errors, these errors are because it does not understand these labels of 44 00:05:40,459 --> 00:06:01,089 of comments is worth then I write it out well with the dmg is because you have to close the img 45 00:06:01,089 --> 00:06:04,569 this out 46 00:06:05,569 --> 00:06:08,970 more this out 47 00:06:08,970 --> 00:06:22,189 and the same thing as before, we are going to do it here 48 00:06:24,550 --> 00:06:29,139 out 49 00:06:29,139 --> 00:06:52,709 well and that's it, that's it, okay, I have my client started, I have it all, look at how here, well, I already have the 50 00:06:52,709 --> 00:06:59,850 navmash and now the only thing we would have to do is start customizing it and that is easy in 51 00:06:59,850 --> 00:07:05,529 the sense in which you know these labels is worth then because instead of the team the 52 00:07:05,529 --> 00:07:17,089 project the calendar because you want here I do not know because we put the initial here we put 53 00:07:17,089 --> 00:07:35,449 because we will have to restart and I am going to put 54 00:07:42,879 --> 00:07:46,339 the good changes that you are making 55 00:07:48,060 --> 00:07:52,180 this is worth it because it has not been taken 56 00:07:52,180 --> 00:08:50,870 I'm going to hide this one now, it's for this one, okay, I haven't modified it, I haven't copied it twice, I don't understand this tip well, he has put it on us twice, let's see, I don't know why, okay, well, 57 00:08:51,490 --> 00:09:18,899 I had not realized, if you see in the div, here below there is a breaking point, 58 00:09:18,899 --> 00:09:23,899 then it tells you that when it is the sm hidden, that it hides it, then it is like it does it again, 59 00:09:23,899 --> 00:09:35,679 as I am not going to play with the breaking points I am going to remove this directly, for example, 60 00:09:35,679 --> 00:09:47,210 this is when and here is where we would put the initial here we would put the team 61 00:09:47,210 --> 00:10:00,539 well the options that were in our case that would be initial to go or rather 62 00:10:00,539 --> 00:10:10,629 we are going to call him we are going to put him here Villablanca and if you remember in the backend that we had 63 00:10:10,629 --> 00:10:48,539 Well, we had registered, we had logged in and tasks, for example, okay, you know, remember that with the tasks we could put new tasks, consult tasks, all one, okay, then, well, I can modify it in this sense, okay, look at how now every time I click on 64 00:10:48,539 --> 00:10:59,539 each of these h red is taking me directly to nowhere, it has everything with 65 00:11:04,480 --> 00:11:12,179 the pillow, it is good and then it begins to look and I say well, I don't know, I have the image and mg 66 00:11:12,179 --> 00:11:17,940 that this one we are going to see is vg 67 00:11:20,240 --> 00:11:26,419 we are going to see the images that so mg there has to be two because there are two images there is this 68 00:11:26,419 --> 00:11:34,740 and this is good because here it would be to modify this image because for example here the one that I am going to put 69 00:11:34,740 --> 00:11:42,299 is the one that I had src 70 00:11:42,799 --> 00:11:48,799 then sign point pn no it is jpg 71 00:11:48,799 --> 00:11:52,659 ok for example and here I am going to put this 72 00:11:52,659 --> 00:12:00,279 ok and here instead of the developer who has created this in a pa because we are going to 73 00:12:00,279 --> 00:12:04,580 put one that is going to be 74 00:12:04,580 --> 00:12:24,480 le vamos a meter pues tengo hay otra que es logo pues ya está pues src src logo punto png 75 00:12:26,279 --> 00:12:31,840 vale y otra vez pues tenemos aquí vamos a hacerlo esto un poco más grande para que lo veáis bien 76 00:12:31,840 --> 00:12:42,720 I have the logo of the Villa Blanca, I have this image that I have downloaded, it is worth a 77 00:12:42,720 --> 00:12:51,600 website that there are around 100, and we could modify the different 78 00:12:51,600 --> 00:12:59,919 options that we have already seen, the rounded, the margins, the sources, the color of the text, 79 00:12:59,919 --> 00:13:06,980 cómo tiene que comportarse con el hover cuando pasas por encima vale o sea que son clases que 80 00:13:06,980 --> 00:13:12,639 ya las hemos ido viendo veis el flex para ir colocando bien todo que es lo que veíamos en 81 00:13:12,639 --> 00:13:19,639 el vídeo anterior como repartimos bien y como juegas siempre con los contenedores con los 82 00:13:19,639 --> 00:13:25,840 bloques vale el jaiden jaiden no lo habíamos visto jaiden lo que te hace es que te oculta 83 00:13:25,840 --> 00:13:35,159 ok then that class from a js we can play with the tool and then it is hidden or 84 00:13:35,159 --> 00:13:41,200 activated as we press a button ok but in this case that we are with bit and that it is a little more 85 00:13:41,200 --> 00:13:50,100 special I am not going to use it ok although it would be easy it would be to make a js file put the 86 00:13:50,100 --> 00:13:59,759 script tag, link it and make it recognize with the add listener, the event listener, 87 00:13:59,759 --> 00:14:06,360 the one that recognizes the event that is being generated on this, in this case, this image, okay? 88 00:14:06,360 --> 00:14:12,759 Playing with the IDs, okay? I understand that you have done it first, if not, well, some 89 00:14:12,759 --> 00:14:21,820 example we do in class ok then this is a way to work good because it could be 90 00:14:21,820 --> 00:14:33,659 proposed and that saves you time when working because well it gives you everything done and you 91 00:14:33,659 --> 00:14:39,519 what you have to do is modify a little what I have been doing ok then those 92 00:14:39,519 --> 00:14:47,259 components that Tailwind leaves us, well, I think they can be used and 93 00:14:47,259 --> 00:14:53,240 they are quite good. Well, that's the video for today. Greetings, see you later.