Saltar navegación

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

Back end Vs Front end - Vídeo 19 - 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 24 de julio de 2024 por Mario S.

48 visualizaciones

Empezamos a utilizar clases de Tailwind

Más información Transcripción

Descargar la transcripción

Well, in this video we are going to start to see how to work with Tailwind. I already told you in the 00:00:02
previous video that here I am going to make a kind of impasse to create a series of videos 00:00:09
so that you can see how to work with Tailwind and you can start exploring and 00:00:17
to do interesting things, I have put the visual studio screen and here in 00:00:24
small I also have the one of the browser, okay, I have the typical world, we go to the page of the taiwin 00:00:32
Timewind.css to the main Timewind page. Remember that we go to getstart, 00:00:42
here to see the initial configuration that we have to do, we are going to enter the installation 00:01:03
and here you have all the steps that this first one we have already created, it is worth as long as you have 00:01:14
the client folder, you already have it, it is worth following it, which is what I explained in the previous video 00:01:19
and that's it, well, what is a framework? Well, it is nothing more than a space, a web server that 00:01:28
provides us with some classes created for CSS, for style sheets, then we can use them, 00:01:41
then we can work as we have installed with the npm, the tailwind in our project, okay, 00:01:50
we can work with the cdn, which is in the cloud, we can work in various ways, okay, in principle 00:01:56
we are the only thing we are going to do right now is to start calling classes, what difference 00:02:04
between tailwind and bootstrap, for example, or any other framework that you can work with, 00:02:09
with the way they work, they are different but within that they are all frameworks, so it is a 00:02:20
bit like programming, it has its differences depending on whether we program in python or in java or in 00:02:28
cessar vale pero no son unas diferencias que una vez que tienes los conceptos base te vaya a 00:02:34
costar mucho o nada pasar de uno a otro vale porque vamos a usar el time wind porque me 00:02:42
deja trabajar más sobre las o sea no me lo da todo tan hecho entonces me deja personalizar 00:02:50
bastante más sobre las hojas de estilos vale que vosotros las habéis visto en primero entonces pues 00:03:00
me parece buena buena opción para trabajar con esto que veáis cómo funciona el framework cómo 00:03:06
vamos a crear el from a partir de este framework o podríais hacerlo a partir de cualquiera utilizando 00:03:13
solo clases vale entonces tenemos aquí los diferentes pasos que hay que dar vale aquí me 00:03:19
put on the app jsx that is the one that we are going to be playing all the time 00:03:26
because an example is worth with the world with the world hello they put it on h1 well the first thing 00:03:32
to say is that when you are working with with the wind the classes that are from the 00:03:39
browser they do not work ok they are deactivated then if you see here I have the world but it is 00:03:48
an h1 and an h1 gives a size ok if I put here that is, you already know that in html h1 h2 h3 h1 is a 00:03:57
large size h2 is a slightly smaller size test h2 for example ok then notice that 00:04:06
how to be working now with time with those classes that are by default from the browser, it is 00:04:17
worth that the browser should detect the html, that everything is deactivated, it is worth then we have 00:04:28
to start working with the tailwind classes that is why we have configured it to use it, I am going to 00:04:34
delete this, we are going to put this a little bigger, we are going to see 00:04:41
this, then I have the world here, then we are going to put, for example, a class, 00:05:02
ok you know class the same quotes quotes ok then for example we are going to put the same 00:05:11
example that is telling us that here it puts the flash name says the text 3 xl fom ball and underline 00:05:24
text x 3 xl is the font size put it in black and underline because it is underlined ok we are going to 00:05:30
going to see one of these classes, okay, then we are going to put the one with good, okay, look at how 00:05:40
when I write I get the self-completed complemented here, okay, well, that 00:05:52
I have loaded the extension of the tailwind so that it recognizes me so that it makes me that 00:06:00
so that it makes me that help then and to put the extension of the wing css and that's it, okay, you're 00:06:12
going to have it, it's interesting and it's fine, okay, you have it, okay, then we have 00:06:21
put this class, it was a ball, so what does it do that it has already put that text in black, 00:06:30
it is worth the hello world, it is worth and I have only put this class, I have not done anything else, we are going to put another 00:06:37
the other class that is the underline, it is worth 5 more or nothing, it is worth underline, it is worth then I already 00:06:44
I have it underlined and these two classes are working for me and the text and a 3 xl is worth that 00:06:55
only what it does is put it on me, it is worth it, it expands that size of that text much more, then 00:07:04
look at how only working with these classes 00:07:12
Well, it works for me, it works for me, okay, what else can we see, even if this is more or 00:07:15
less fast, well, we are working with text, so if we come to the help of the 00:07:25
tailwind and we go down here you have all the options 00:07:30
what we can use is worth then we have good this of the containers such is 00:07:33
great I have some that is the text good or the font look here the test with which the test color 00:07:45
test a link is worth because for example the test color then I click on what I want to do 00:07:58
then it starts to tell me ok it starts to show me the help that is with which you have to work 00:08:06
because in the end this is a framework they are updating it constantly then you have to 00:08:10
be seeing it is worth constantly then here it begins to show different colors then 00:08:16
if you go down it is putting the colors here ok it is putting you here what kind of colors 00:08:22
for example if I want for example this orange 300 is worth then if I put the text class here 00:08:28
now 300 00:08:40
is worth because it will show me the text with that color is worth then notice that it is very easy to 00:08:45
use that I want 00:08:54
here is that it has to be inside a container we are going to try it but it is not going to 00:08:59
do the test center case for example it is worth for me to center it he has done it to me he has 00:09:04
taken as a container look at the web itself the body itself is worth then I 00:09:11
have it centered I already have it there well well we continue looking at things 00:09:17
The smooth inside, decoration, etc. 00:09:24
Let's see the font family. 00:09:38
For example, the font-sum, font-series, font-mono. 00:09:49
We have different families here that will take one or the other depending on the server. 00:09:56
that is, forgive the browser that you are using, then we are going to put, for example, here the font 00:10:03
font 6, then we are going to put it in, we are going to see so that as soon as the change is made 00:10:09
with 00:10:18
value, then here I already put that source that we have chosen, okay, let's see what else we can 00:10:22
put it here that more is leaving us is worth the over the focus and other states it is worth that this is also 00:10:30
interesting because you say well look at this example it is fine we are going to put it instead of in h1 we are going to 00:10:37
put it as a paragraph I am not going to leave h1 and I am going to put it to see if it takes me directly and that's it 00:10:45
ok then what it is telling it is in the example you say you have the font sand and when I pass with the 00:11:01
young man the young man is when you pass the cursor over it then the letter changes ok then 00:11:09
well here we are going to put the young man when you go over it you are going to put it as a font 00:11:14
because in this case they are ok then here when I go over you see it already takes me 00:11:21
and that text changes me, that source is worth it, so this is also interesting when 00:11:34
making the pages more striking when making a button that changes my color, it is worth 00:11:40
if we put here, for example, we are going to continue to see the example and so I am doing it according to 00:11:47
we are seeing the documentation that I think this is the interesting thing, it is worth then, for 00:11:59
example, here I want to give a color and here I have several background colors, it is worth the same 00:12:03
than with the text, so I want to put a background to this div, so I am going to put the 00:12:09
class here and the class is important that you remember that the classes always go without the quotes, okay, 00:12:17
well, let's play a little bit with this, then we are going to put, for example, a color, 00:12:34
the letters are in orange we are going to put it for example come on let's put the 700 red yes 00:12:38
ok then I'm going to put it here let's see it here bg red 700 ok and he puts it all in red ok 00:12:50
we are going to put it also I am going to lower this size a little and I am going to put it because also 00:13:09
for example 00:13:29
there is another class that is the round that you see that it rounds the little corners you are then 00:13:32
at the time of making a button, they also noticed how easy it would be with the link, we could also put 00:13:43
the jover here, it is worth telling him hey if it is when you go over it, put the color instead of in red 00:13:49
because put it in pink pink 300 is worth then because those things are worth that we can go 00:14:02
playing with all of this and then for example here because with the pink one because it puts me 00:14:09
when you pass with the young man also put the text color with a color for the pink one because 00:14:18
it is worth two when we pass because it is already valid and I can play with it in this way you see that 00:14:42
change the young man for now, that is, with knowing what is young, knowing what the text is, the font is good 00:14:47
and especially with the help we can continue doing many, many things, you have 00:14:55
all these classes here, well now I come up and here I have some options 00:15:03
there is one that interests me now I am going to see if I find it the breakpoints break 00:15:14
this has to be in the configuration 00:15:52
is here this in response and it is worth at the end that it is a web page because it has to 00:15:59
also respond to a web page because to certain points of rupture is worth what that means 00:16:14
if you are doing the front for one that goes against a back in which we have also done 00:16:22
we already know that people can see that front from a pc from a tablet from a mobile phone and each 00:16:29
of those devices has its resolution is worth then that is what we can control with these 00:16:40
surnames, the sm which is up to 640, the md, the lg, the xl, the 2xl, with these resolutions all this 00:16:54
can be changed, what happens is that we are not going to change it, but it could be done and your 00:17:02
dao colleagues do it, so in fact they make their own framework, well, for example, 00:17:08
I have this example the hello world is worth it I am going to put it 00:17:19
to a normal size and that's it hello world ok what I want is 00:17:27
to not be playing with the guy 00:17:53
and I don't want to be playing with him with the width and all this I'm going to leave it like this I'm going to 00:17:55
play only with the text this I'm going to give control z as we were then what I want is that 00:18:12
when the screen has a certain resolution the text is smaller ok then I'm going to change 00:18:22
here instead of 3xl we are going to put it 00:18:31
good now until where it leaves us 00:18:41
ok then I'm going to say well if I have the text or I'm in a resolution 00:18:48
because the one that the laptop has right now is worth because it is high I want the text to look 00:19:05
big, these are the breaking points, it is important that you remember that they inherit from the 00:19:11
smallest from the smallest resolution to the largest resolution, that is important 00:19:19
because because what you will have to control you will have to do the page thinking about the smallest 00:19:26
smaller one to the one that is directed and then go controlling those changes of resolution to 00:19:33
higher ok then of course what happens let's go to the development tools ok I 00:19:41
here I start to change resolution I start to go up ok I'm going to go down I don't care then you see 00:19:52
here there is no change ok there is absolutely no change at all ok I am changing the 00:19:59
resolutions and nothing happens ok then what we are going to say is good the smallest one that is sm 00:20:05
ok then I am going to put it good if here the text is 9 xl I am going to say put me when it is in a 00:20:15
resolution sm two points ok I'm going to say the text the text I want it to be smaller so I'm going to 00:20:25
put it at 2 xl for example ok this when it is in the sm resolution then look at how I am 00:20:38
in right now we are going to put it I am lowering resolution resolution resolution ok and here 00:20:49
we have said 640 which is what has happened of course until it has not reached the resolution of 00:21:05
sm it has not put this size on me ok the resolution sm we have left that it is 640 then 00:21:15
en el momento en el que yo cambio la resolución y la pongo a 640 ya me lo pone en chiquitín vale 00:21:25
entonces esta forma de trabajar es interesante vale entonces aquí lo que tendría más sentido 00:21:30
es al menos todo el tiempo pequeño y cuando llegues a la resolución por ejemplo vamos a 00:21:37
put 768 md ok because when it is half you are going to put it to me well 4 xl and when it is 00:21:44
tex we are going to put the 6 xl when it is md it is worth then and sorry when it is the axis the axis 00:22:02
so it is worth then this makes sense because because we have controlled first when you are 00:22:21
smaller, that is, when the resolution is smaller, it has the text in 2 xl, okay, okay, if it starts to go up 00:22:29
38 39 now it changes md 4 xl 00:22:42
ah no sorry md are 768 ok then we go to md 768 well well well well ok we are in 767 now we enter 00:22:52
md it has already made it a little bigger ok and when we enter the axis that is 1024 ok we are going to put 00:23:19
1023 we are in the resolution 1023 at the time when I get to 1024 I am already doing it 00:23:31
more in such a way that we are making that page be responsive, it is worth responding to the 00:23:39
different sizes, these points are very important, very very important, okay, well then you 00:23:47
veis cómo funciona un poco the wind es usar clases es usar los puntos de ruptura ahora en los 00:23:57
siguientes vídeos os sigo diciendo más cosillas vale pero bueno veis que a nivel de dificultad 00:24:07
no es más que empecéis a jugar con toda la documentación vale pues para hacer las diferentes 00:24:14
the cards, which is also interesting, let's see if I can find it, let's see 00:24:23
the interactive course, for example, let's see if I can find them, 00:24:48
then because that is not what we were saying to make cards that I was looking at here it 00:25:08
does not come as such but you do the search, it is worth putting the card that is a very typical way 00:25:47
of showing information when you are reading it from a database, for example, hey, I have made 00:25:54
an app and a backend to manage different articles and now I want to show them 00:26:00
or I ask one to the database and then I show its particularities etc. 00:26:07
ok then you see here it shows me different options it puts me the get the code and well 00:26:12
sometimes they are paid others not all ways this 00:26:22
we can we can do it we are worth in the next video so that this is not done very very long 00:26:30
because here I have gone to take just one that will not let me take any example in the next 00:26:46
video we are going to make a card so that you can see how it is and how from your 00:26:52
css knowledge we are going to create it, it is good a greeting so far 00:26:58
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
48
Fecha:
24 de julio de 2024 - 14:51
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 12″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
73.90 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid