1
00:00:00,180 --> 00:00:05,090
Vamos a continuar con nuestro diseño y vamos a crear una copia de nosotros y vamos a crear una Chuquibamba

2
00:00:05,120 --> 00:00:13,930
dos cursos uno HTML que esto ya lo definimos en nuestra navegación pues apuntamos a cursos HTML eliminar

3
00:00:13,930 --> 00:00:20,290
todo lo que está en el main editar lo escribimos desde cero nuevamente y por lo tanto abrimos aquí vamos

4
00:00:20,290 --> 00:00:24,840
a darle click en cursos que tenemos Jader y Fuhrer.

5
00:00:24,850 --> 00:00:31,720
El siguiente paso vamos a crear de nueva cuenta el Main main con una clase contenedor y un HD2 con una

6
00:00:31,720 --> 00:00:39,960
clase de central texto que vimos anteriormente y nuestros próximos cursos y talleres.

7
00:00:41,420 --> 00:00:48,080
Nuestros próximos cursos y talleres y anteriormente habíamos creado los cursos era lo que vendría siendo

8
00:00:48,080 --> 00:00:49,660
por ejemplo aquí la página principal.

9
00:00:49,710 --> 00:00:54,920
Aquí esto era una lista pero en este caso voy a utilizar un artículo o un artículo es un elemento de

10
00:00:54,920 --> 00:01:01,430
nueva cuenta que se explica por sí solo sin depender de lo demás y lo que viene siendo un curso va a

11
00:01:01,430 --> 00:01:05,260
contener toda la información no va a requerir de nadie más.

12
00:01:05,630 --> 00:01:12,080
Si abrimos el Index por ejemplo un poco de scroll puedes ver que agregué aquí la clase de curso por

13
00:01:12,080 --> 00:01:18,230
lo tanto debido a que son clases puedo ponerle ãrtico y luego cursos y eso me va a dar todos los estilos.

14
00:01:18,290 --> 00:01:22,940
Ahora también voy a mezclar lo que viene siendo mi Grit y tengo las dos clases heredo de ambos lados

15
00:01:23,710 --> 00:01:30,110
voy a utilizar una clase llamada columnas 4 no lo hemos creado pero básicamente lo que va a hacer es

16
00:01:30,110 --> 00:01:36,460
tomar cuatro de las 12 es decir una tercera parte y este va a tomar 8 de las 12 entonces va a darnos

17
00:01:36,470 --> 00:01:45,970
un diseño como éste MG y MG diagonal curso 1 punto JPG que vas a poner imagen curso en caso de que la

18
00:01:45,970 --> 00:01:51,090
imagen no cargue por algo nuestro texto alternativo.

19
00:01:51,100 --> 00:01:56,870
Después vamos a colocar columnas ocho estas clases aún no existen las haremos en este mismo video una

20
00:01:56,880 --> 00:02:06,680
CH4 con no margen porque ya vimos esa clase y vimos lo que hace con técnicas de extracción de café y

21
00:02:06,680 --> 00:02:11,690
damos Enter y muy importante si abrimos el Indec si recuerdas ya tenemos estos párrafos aquí definidos

22
00:02:13,440 --> 00:02:17,910
por lo tanto los voy a copiar puede ser que tienen el párrafo con la clase no márgen los Spanx y toda

23
00:02:17,910 --> 00:02:21,300
esta parte se los vamos a utilizar.

24
00:02:21,350 --> 00:02:30,070
Por ejemplo antes de estos párrafos voy a colocar uno más eliminó uno de estos que va a decir fecha

25
00:02:31,730 --> 00:02:38,960
y vamos a poner aquí por ejemplo 20 de agosto de 2019 si guardamos cambios y abrimos el proyecto puedes

26
00:02:38,960 --> 00:02:40,090
ver qué queda de esta forma.

27
00:02:40,160 --> 00:02:41,380
Hay cosas buenas.

28
00:02:41,420 --> 00:02:47,390
De momento puedes ver que se está aplicando correctamente lo que son dos las clases similar a lo que

29
00:02:47,390 --> 00:02:53,340
tenemos en la página de inicio pero la imagen es muy grande no hemos creado lo que viene siendo las

30
00:02:53,340 --> 00:03:00,060
columnas así que por esa parte estamos un poco con trabajo que hacer y también por ejemplo nos hace

31
00:03:00,060 --> 00:03:06,090
falta lo que viene siendo esta descripción de nueva cuenta tomamos un poco de ipsum de cualquier lugar

32
00:03:06,250 --> 00:03:12,480
poco de texto aquí vamos a ponerle un y ponemos la descripción ahora si guardamos cambios y abrimos

33
00:03:12,480 --> 00:03:19,440
el proyecto puede ser que la descripción se pone en negritas eso pasa porque curso P tiene lo que viene

34
00:03:19,440 --> 00:03:21,800
siendo un fondo de 700.

35
00:03:21,870 --> 00:03:28,580
Nosotros le ponemos al hispano un fondo de 400 y bueno tal vez si es bueno poner a quienes sepan todo

36
00:03:28,580 --> 00:03:34,830
esto de aquí y hacer que aplique el FOM Weide un poco más delgado y se vea bien esa opción es una.

37
00:03:34,850 --> 00:03:43,080
Pero también puedes crear una clase ponerla aquí por ejemplo Clas descripción y por ejemplo copiar esta

38
00:03:43,080 --> 00:03:51,270
clase y a quienes es ponerle en el curso punto de descripción y ponerle que sea un fondo de 400 incluso

39
00:03:51,270 --> 00:03:56,280
podrías para no repetir declaraciones podrías cortarlo y ponerle una coma.

40
00:03:58,070 --> 00:04:01,290
Y eliminar estos de aquí creo que esa es una opción mucho más limpia.

41
00:04:01,510 --> 00:04:05,890
Pero por ejemplo si abres tu diseños puedes ver que no se ve ahora si inspeccionamos el código y vemos

42
00:04:05,890 --> 00:04:11,710
cómo se está aplicando el CSS aquí inspeccionar puedes ver que la descripción fondo web dice €400 y

43
00:04:11,710 --> 00:04:16,510
está tachado este dice €700 y se está aplicando.

44
00:04:16,510 --> 00:04:18,330
Por qué pasa esto no.

45
00:04:18,340 --> 00:04:24,840
Bueno esto pasa por una de las reglas de CSS puedes ver que este selector discurso es decir tiene dos

46
00:04:24,840 --> 00:04:29,130
selectores y uno de ellos es una etiqueta eso lo hace un selector más pesado.

47
00:04:29,350 --> 00:04:35,130
Este solamente tiene una clase lo hace un selector más ligero un poco más débil por así decirlo por

48
00:04:35,130 --> 00:04:37,050
lo tanto lo puedes hacer más específico.

49
00:04:37,990 --> 00:04:44,500
Curso y luego p y luego descripciãn es decir que se presente este Dip con esta etiqueta y más específico

50
00:04:44,510 --> 00:04:50,360
con el párrafo tenga esta etiqueta importante que no haya espacio aquí debe ser el mismo elemento y

51
00:04:50,370 --> 00:04:55,590
si por ejemplo abres tu proyecto puedes ver que eso corrige el problema entonces lo habíamos visto anteriormente

52
00:04:55,590 --> 00:05:02,610
que lo podrías aplicar con importan y eso iba a planchar cualquier estilo que hubiera iba a pasar por

53
00:05:02,610 --> 00:05:09,330
encima y aplicar ese pero también si tienes problemas que se está aplicando un estilo puedes escribir

54
00:05:09,330 --> 00:05:16,530
un selector mucho más específico mezclando algunas clases y algunas etiquetas y puedes ver que se va

55
00:05:16,530 --> 00:05:22,810
a corregir ese problema voy a crear un par más de talleres.

56
00:05:22,920 --> 00:05:29,710
Por lo tanto voy a copiar aquí incursos todo este artículo que es bastante grande y vamos a crear un

57
00:05:29,710 --> 00:05:36,140
par de copias más y vamos a ponerle uno y uno más aquí abajo.

58
00:05:37,500 --> 00:05:44,050
Que sean dos el primero ya tiene lo que es el texto así que nos dará un poco escorar el segundo la imagen

59
00:05:44,050 --> 00:05:51,030
va a ser imagen 2 y aquí vamos a cambiar lo que viene siendo el nombre del taller taller para tostar

60
00:05:51,690 --> 00:06:00,100
y moler granos y vamos a poner por ejemplo otra fecha digamos 24 de agosto gratis 20 personas está bien

61
00:06:00,570 --> 00:06:01,710
y un poco más de scroll.

62
00:06:01,750 --> 00:06:12,920
Aquí por ejemplo el 3 y por ejemplo el nombre de este taller va a ser 4 recetas recetas de café para

63
00:06:12,920 --> 00:06:17,790
principiantes y digamos 28.

64
00:06:17,800 --> 00:06:18,680
29 de agosto.

65
00:06:18,680 --> 00:06:24,130
Creo que es buena fecha si guardamos cambios pues tenemos diferentes imágenes diferentes encabezados

66
00:06:24,660 --> 00:06:28,140
y puedes ver que incluso se aplica lo que es el borde y queda bastante bien.

67
00:06:29,480 --> 00:06:35,400
Ahora por ejemplo cada uno de estos tiene la clase de curso aquí por ejemplo me haría falta un poco

68
00:06:35,400 --> 00:06:42,780
de Padín arriba Badín top 3 para que no quede tan pegado lo que es la imagen con la línea que está aquí

69
00:06:42,810 --> 00:06:48,730
creo que se ve mucho mejor y si por ejemplo volvemos a la página principal pues es que no afecta mucho

70
00:06:49,390 --> 00:06:57,470
mejor dicho no afecta nada se ve bien ahora lo único que nos falta es estas clases nuevas no 4 y 8 así

71
00:06:57,470 --> 00:07:04,380
que vamos a ir a Grit y puede ser que tenemos una de 6 de momento como mencioné anteriormente va a ser

72
00:07:04,380 --> 00:07:10,560
4 de 12 es decir una tercera parte y una tercera parte del 100 por ciento es 33 por ciento.

73
00:07:10,560 --> 00:07:23,320
Por lo tanto poner columnas 4 y esto va a ser Flex 0 0 Calc 33.3 por ciento menos un Greim y tenemos

74
00:07:23,320 --> 00:07:24,180
el otro o el otro.

75
00:07:24,190 --> 00:07:30,970
Si recuerdas las columnas 8 entonces va a ser 8 de 12 columnas eso es dos terceras partes de nuevas

76
00:07:30,970 --> 00:07:42,350
cuentas eso sería el 66 .6 por ciento columnas 8 Fleck cero cero Calc 60 y 6.6 por ciento por ciento

77
00:07:42,350 --> 00:07:44,080
importante menos RAM.

78
00:07:44,860 --> 00:07:50,030
Y si guardamos cambios y abrimos el proyecto puedes ver que lo que vienen siendo los cursos se muestran

79
00:07:50,030 --> 00:07:56,000
correctamente era hasta aquí estaba viendo la anterior puedes ver que funciona correctamente y si lo

80
00:07:56,000 --> 00:08:02,180
hacemos pequeño nuestro Grit no aplica en un dispositivo móvil y hace que se vea bastante bien incluso

81
00:08:02,180 --> 00:08:10,130
con las líneas de aquí entonces funciona bastante bien y pudiste ver cómo mezclamos lo que era el curso

82
00:08:10,220 --> 00:08:14,990
que le daba la apariencia de curso pero también la parte de grit para tener acceso a las columnas y

83
00:08:14,990 --> 00:08:21,160
de esa forma puedes crear un sitio en el que no repitas tantas clases ni tanto contenido.

84
00:08:21,170 --> 00:08:26,000
Obviamente estas cosas vienen con la práctica así que recomiendo que practiques mucho lo que estás aprendiendo

85
00:08:26,510 --> 00:08:32,420
y con eso te será más fácil crear sitios web que no repitan tanto código.

86
00:08:32,420 --> 00:08:37,180
Si abrimos nuestro diseño y vamos a contactos puedes ver que tenemos este formulario en el formulario

87
00:08:37,210 --> 00:08:42,890
tenemos la imagen de esta forma como sobrepuestos se ve bastante bien y en pequeño no está sobrepuesto

88
00:08:43,430 --> 00:08:48,650
tiene el botón de enviar y todo lo demás así que esta será la última sección de este proyecto así que

89
00:08:48,650 --> 00:08:51,020
vamos a crearla en el siguiente vídeo.