Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end Vs Fron end - Vídeo 23 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 30 de julio de 2024 por Mario S.

55 visualizaciones

Utilizando componente Navbars de Tailwind CSS

Más información Transcripción

Descargar la transcripción

Well, in this video, what I want you to see is also with the Tilewind in comparison with 00:00:01
Bootstrap, because in Bootstrap is what I told you at the beginning of this series of videos of the Tilewind 00:00:10
that gives us more components already created, then we only have to load them and 00:00:18
we are modifying ourselves to achieve what we are looking for 00:00:26
here we have to work a little more than that is what web designers say 00:00:32
which is a bit what they like because they have to work more on 00:00:40
classes and that will give you more work but they also have much more degrees of freedom 00:00:45
well then what I want to see with you is that although we have to work with 00:00:52
time with in a certain depth if it allows us to use what the components are, 00:01:01
then there are components that have already been developed by third parties and that we could 00:01:09
take them to see if this wants to load here, then you see I have this of the components 00:01:14
y aquí tenemos diferentes opciones que podríamos con las que podríamos ir trabajando vale pues por 00:01:22
ejemplo testimonios nuevos elementos los que pues los here vale por ejemplo si quiero hacer algo 00:01:32
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 00:01:43
putting menus or well, here I have different options, I can take the code, copy and paste 00:01:54
and I am modifying what I need, you have in react how to do it, this is if you are making the 00:02:06
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 00:02:14
as copying it and that's it with the front that we are working on that is about bit and then 00:02:21
you see that we are linking several files in this case we are putting all the code in 00:02:29
app.jsx, well there is a little, for example, put the script so that we can read the 00:02:35
add11 listener, the events of the event listener, for example, well there we can or it is 00:02:46
different, but as now the only thing we are seeing is how the timewind works, well 00:02:56
because we are going to work with it, okay, well, I can also take here and look for the 00:03:01
bus here, okay, and then you see I find this page, for example, and here, well, there is code here, if 00:03:07
you let me take the code, this has been developed by third parties, it is worth in all these that 00:03:19
us put the get the code 00:03:24
because these if you click on any of them well here there is already 00:03:28
you have to pay for it but if you are using it professionally because if you 00:03:34
can be worth it obviously in the center because not for then you always 00:03:40
would have to look for something like this that allows us to take the code 00:03:44
then I start to look at the code and I have these options, we are going to put it in html, 00:03:50
I forget about the real, okay, I'm going to put it directly in html and then I see that it starts with a 00:04:00
nap, okay, because it's a pair, I have the tips, I have the buttons, I have the spam so that 00:04:06
which is a kind of container to configure the text I have the images I have the svg which is another 00:04:14
container that this one what it does is give a new coordinate system well there are the 00:04:27
usual labels that are the ones that I understand that you have worked in first value I have the 00:04:36
to hr to go pressing in each of them this would be worth it in principle it would be worth it for what 00:04:42
I want, which is nothing more than doing the front with different values ​​for look, well, I'm going to copy this 00:04:48
until 00:04:57
here, okay, well, we could have given it here, 00:05:09
I'm going to copy it, let's go to our Visual Studio Code, okay, I'm going to paste it here, 00:05:18
give it a good format and then here it starts to see because I get a lot of 00:05:31
errors, these errors are because it does not understand these labels of 00:05:35
of comments is worth then I write it out well with the dmg is because you have to close the img 00:05:40
this out 00:06:01
more this out 00:06:05
and the same thing as before, we are going to do it here 00:06:08
out 00:06:24
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 00:06:29
navmash and now the only thing we would have to do is start customizing it and that is easy in 00:06:52
the sense in which you know these labels is worth then because instead of the team the 00:06:59
project the calendar because you want here I do not know because we put the initial here we put 00:07:05
because we will have to restart and I am going to put 00:07:17
the good changes that you are making 00:07:42
this is worth it because it has not been taken 00:07:48
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, 00:07:52
I had not realized, if you see in the div, here below there is a breaking point, 00:08:51
then it tells you that when it is the sm hidden, that it hides it, then it is like it does it again, 00:09:18
as I am not going to play with the breaking points I am going to remove this directly, for example, 00:09:23
this is when and here is where we would put the initial here we would put the team 00:09:35
well the options that were in our case that would be initial to go or rather 00:09:47
we are going to call him we are going to put him here Villablanca and if you remember in the backend that we had 00:10:00
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 00:10:10
each of these h red is taking me directly to nowhere, it has everything with 00:10:48
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 00:11:04
that this one we are going to see is vg 00:11:12
we are going to see the images that so mg there has to be two because there are two images there is this 00:11:20
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 00:11:26
is the one that I had src 00:11:34
then sign point pn no it is jpg 00:11:42
ok for example and here I am going to put this 00:11:48
ok and here instead of the developer who has created this in a pa because we are going to 00:11:52
put one that is going to be 00:12:00
le vamos a meter pues tengo hay otra que es logo pues ya está pues src src logo punto png 00:12:04
vale y otra vez pues tenemos aquí vamos a hacerlo esto un poco más grande para que lo veáis bien 00:12:26
I have the logo of the Villa Blanca, I have this image that I have downloaded, it is worth a 00:12:31
website that there are around 100, and we could modify the different 00:12:42
options that we have already seen, the rounded, the margins, the sources, the color of the text, 00:12:51
cómo tiene que comportarse con el hover cuando pasas por encima vale o sea que son clases que 00:12:59
ya las hemos ido viendo veis el flex para ir colocando bien todo que es lo que veíamos en 00:13:06
el vídeo anterior como repartimos bien y como juegas siempre con los contenedores con los 00:13:12
bloques vale el jaiden jaiden no lo habíamos visto jaiden lo que te hace es que te oculta 00:13:19
ok then that class from a js we can play with the tool and then it is hidden or 00:13:25
activated as we press a button ok but in this case that we are with bit and that it is a little more 00:13:35
special I am not going to use it ok although it would be easy it would be to make a js file put the 00:13:41
script tag, link it and make it recognize with the add listener, the event listener, 00:13:50
the one that recognizes the event that is being generated on this, in this case, this image, okay? 00:13:59
Playing with the IDs, okay? I understand that you have done it first, if not, well, some 00:14:06
example we do in class ok then this is a way to work good because it could be 00:14:12
proposed and that saves you time when working because well it gives you everything done and you 00:14:21
what you have to do is modify a little what I have been doing ok then those 00:14:33
components that Tailwind leaves us, well, I think they can be used and 00:14:39
they are quite good. Well, that's the video for today. Greetings, see you later. 00:14:47
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
55
Fecha:
30 de julio de 2024 - 20:25
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 07″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
50.70 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid