1
00:00:04,040 --> 00:00:09,465
Es hora de tu primera misión en este curso.

2
00:00:09,465 --> 00:00:10,975
En la primera asignación,

3
00:00:10,975 --> 00:00:18,605
vamos a proporcionarle la página aboutus.html sin estilo.

4
00:00:18,605 --> 00:00:22,130
El archivo zip que contiene esa

5
00:00:22,130 --> 00:00:25,670
página aboutus.html está disponible en las instrucciones de asignación.

6
00:00:25,670 --> 00:00:30,530
Por lo tanto, debe descargar la página y luego mover esa página a su carpeta con Fusion.

7
00:00:30,530 --> 00:00:33,060
A partir de entonces, aplicará

8
00:00:33,060 --> 00:00:40,970
clases de Bootstrap y la cuadrícula Flexbox de Bootstrap para

9
00:00:41,110 --> 00:00:47,780
darle estilo a la página, luego moverá la página a la carpeta Con Fusion,

10
00:00:47,780 --> 00:00:52,095
luego puede ver la página en su navegador escribiendo

11
00:00:52,095 --> 00:01:01,810
localhost: 3000/aboutus.html y su servidor de compilación de servidor ligero hasta la página aboutus.html,

12
00:01:01,810 --> 00:01:05,310
así que esta es la única forma en que puede llegar a ver la página.

13
00:01:05,310 --> 00:01:06,545
Así que para empezar,

14
00:01:06,545 --> 00:01:08,775
la página se verá así,

15
00:01:08,775 --> 00:01:12,520
una página completamente Unstyle que solo contiene contenido.

16
00:01:12,520 --> 00:01:20,165
Ahora su trabajo es pasar por tres tareas para dar formato a esta página.

17
00:01:20,165 --> 00:01:23,245
Veamos las tres tareas con más detalle.

18
00:01:23,245 --> 00:01:26,890
Su primera tarea es aplicar

19
00:01:26,890 --> 00:01:32,850
las clases Bootstraps CSS y Javascript a la

20
00:01:32,850 --> 00:01:42,415
página aboutus.html para que esta página se transforme instantáneamente en esta página,

21
00:01:42,415 --> 00:01:48,470
donde tan pronto como agregue las clases Bootstraps CSS y JavaScript,

22
00:01:48,470 --> 00:01:54,115
el encabezado y el pie de página se formatearán automáticamente correctamente,

23
00:01:54,115 --> 00:01:59,170
porque simplemente he copiado el encabezado en el pie de página de la página index.html en

24
00:01:59,170 --> 00:02:05,140
esta página y dejé todo el formato de Bootstrap como tal,

25
00:02:05,140 --> 00:02:10,955
pero el contenido real de la página todavía no tiene estilo.

26
00:02:10,955 --> 00:02:14,580
Así que ahora, como segunda tarea,

27
00:02:14,580 --> 00:02:19,580
va a aplicar la cuadrícula Bootstraps Flexbox incluyendo el contenedor,

28
00:02:19,580 --> 00:02:23,190
las filas y las clases de columna a

29
00:02:23,190 --> 00:02:28,430
este contenido o a la página para que pueda darle un estilo adecuado.

30
00:02:28,430 --> 00:02:30,345
Ahora, cuando aplique las clases,

31
00:02:30,345 --> 00:02:36,430
va a aplicar las clases de fila y columna al aboutus para simplemente dejarlo como tal.

32
00:02:36,430 --> 00:02:40,390
Luego va a aplicar las clases de fila y columna a

33
00:02:40,390 --> 00:02:45,445
este contenido para que este contenido ocupe sólo la mitad de la pantalla,

34
00:02:45,445 --> 00:02:48,740
y luego va a aplicar las clases de fila y columna a

35
00:02:48,740 --> 00:02:53,245
este contenido para que tenga ocupa todo el ancho de la pantalla.

36
00:02:53,245 --> 00:03:00,300
Por lo tanto, elija las clases de fila y columna correctamente para aplicar a esto.

37
00:03:00,300 --> 00:03:05,220
Puede utilizar las clases CSS personalizadas que ya hemos

38
00:03:05,220 --> 00:03:10,510
implementado para el index.html agregando el archivo style.css,

39
00:03:10,510 --> 00:03:14,765
también para darle estilo al contenido de esta página.

40
00:03:14,765 --> 00:03:18,010
Por lo tanto, cuando complete la segunda tarea,

41
00:03:18,010 --> 00:03:21,990
su página terminará teniendo este estilo.

42
00:03:21,990 --> 00:03:27,290
Así que puede ver que la página de aboutus existe en su propia.

43
00:03:27,290 --> 00:03:31,505
A continuación, nuestra parte Historia,

44
00:03:31,505 --> 00:03:37,800
observe que en un tamaño de pantalla pequeño a grande,

45
00:03:37,800 --> 00:03:43,815
nuestra historia ocupará sólo la mitad del ancho de la pantalla.

46
00:03:43,815 --> 00:03:51,850
A continuación, la parte Liderazgo corporativo ocupa todo el ancho de la pantalla en este caso.

47
00:03:51,850 --> 00:03:56,000
Esta es la segunda tarea que debe completar en su asignación.

48
00:03:56,000 --> 00:03:59,660
Para la tercera tarea como puede ver,

49
00:03:59,660 --> 00:04:05,380
este diseño de contenido se ve bien para tamaños de pantalla más grandes,

50
00:04:05,380 --> 00:04:13,240
pero cuando va al tamaño de pantalla extra pequeño especialmente como este,

51
00:04:13,240 --> 00:04:20,415
observa que el contenido es demasiado en esta sección.

52
00:04:20,415 --> 00:04:27,670
Entonces, lo que nos gustaría hacer es usar otra clase de Bootstrap proporcionada para nosotros llamada,

53
00:04:27,670 --> 00:04:31,615
[inaudible] y bloque DSM.

54
00:04:31,615 --> 00:04:37,865
Hay un vínculo a las clases receptivas en los recursos de asignación,

55
00:04:37,865 --> 00:04:44,550
por lo que puede comprobar la documentación del bloque [inaudible] y DSM.

56
00:04:44,550 --> 00:04:49,440
Debe aplicarlos para que esta descripción se

57
00:04:49,440 --> 00:04:54,400
oculte en los tamaños de pantalla extra pequeños.

58
00:04:54,400 --> 00:04:59,955
Así que cuando las clases a esta parte de liderazgo corporativo,

59
00:04:59,955 --> 00:05:06,040
el mismo contenido ahora se presentará sin la descripción,

60
00:05:06,040 --> 00:05:10,465
por lo que se ocultará en el tamaño extra pequeñas pantallas.

61
00:05:10,465 --> 00:05:14,170
Pero cuando se va a la pequeña el tamaño de la pantalla grande,

62
00:05:14,170 --> 00:05:16,335
el contenido se hará visible.

63
00:05:16,335 --> 00:05:21,200
Así que puede notar que para el tamaño de pantalla extra pequeño,

64
00:05:21,200 --> 00:05:23,760
el contenido está oculto,

65
00:05:23,760 --> 00:05:26,170
pero para el tamaño de pantalla pequeño,

66
00:05:26,170 --> 00:05:30,475
ese contenido de descripción se mostrará claramente.

67
00:05:30,475 --> 00:05:35,310
Así que esta es tu tercera tarea en tu misión.

68
00:05:35,310 --> 00:05:40,175
Mientras esté en ello, también puede aplicar las mismas clases a

69
00:05:40,175 --> 00:05:45,810
las descripciones de nuestra página index.html

70
00:05:45,810 --> 00:05:51,480
para que las descripciones detalladas de los elementos de contenido también se oculten en

71
00:05:51,480 --> 00:05:57,645
la página index.html cuando se vea en tamaños de pantalla extra pequeños.

72
00:05:57,645 --> 00:06:02,090
Esto completa tu primera tarea.

73
00:06:02,090 --> 00:06:04,965
Además, cuando envíe su tarea,

74
00:06:04,965 --> 00:06:14,460
tome una captura de pantalla de página completa de su diseño

75
00:06:14,460 --> 00:06:19,615
tanto en tamaño de

76
00:06:19,615 --> 00:06:25,930
pantalla pequeño a extra grande como en tamaño de pantalla extra pequeño,

77
00:06:25,930 --> 00:06:29,230
y luego incluya eso como parte de su envío.

78
00:06:29,230 --> 00:06:32,420
Para tomar una captura de pantalla de página completa en Chrome,

79
00:06:32,420 --> 00:06:36,000
puede usar una extensión de Chrome que está disponible para nosotros,

80
00:06:36,000 --> 00:06:39,305
el enlace a la extensión de Chrome se proporciona en

81
00:06:39,305 --> 00:06:45,325
los recursos de asignación que siguen la descripción de la asignación.

82
00:06:45,325 --> 00:06:48,555
Después de completar su tarea,

83
00:06:48,555 --> 00:06:52,610
en caso de que esté guardando sus cambios en un repositorio de Git,

84
00:06:52,610 --> 00:06:55,750
no olvide confirmar los cambios en

85
00:06:55,750 --> 00:07:00,090
su repositorio de Git con la asignación de mensajes uno.