1
00:00:00,630 --> 00:00:05,120
En este video vamos a crear el sitio de la cartera de este fotógrafo desde cero.

2
00:00:05,310 --> 00:00:10,830
Y, por lo general, le pediría que intentara hacer esto por su cuenta y luego le daría un video de solución

3
00:00:10,830 --> 00:00:11,550
después de esto.

4
00:00:11,640 --> 00:00:14,050
Sin embargo, esta vez es un código deliberado.

5
00:00:14,070 --> 00:00:19,590
Así que me gustaría que intentes codificar y, si lo prefieres, puedes verlo una vez y luego codificarla

6
00:00:19,590 --> 00:00:20,650
la próxima vez.

7
00:00:20,850 --> 00:00:26,220
Pero el objetivo aquí es que lo hagamos juntos y hay otras dos cosas que queremos sacar

8
00:00:26,220 --> 00:00:26,940
de esto.

9
00:00:26,940 --> 00:00:33,270
El primero es que hay una nueva propiedad que voy a mostrar llamada float y la segunda es que solo quiero que tengas un poco

10
00:00:33,270 --> 00:00:37,190
de experiencia en la construcción de algo de lo que puedas estar un poco orgulloso.

11
00:00:37,200 --> 00:00:41,970
Eso se ve un poco mejor que algunas de las cosas simples que son colores brillantes realmente horribles

12
00:00:41,970 --> 00:00:43,160
que hemos hecho hasta ahora.

13
00:00:43,170 --> 00:00:47,210
Así que este es un blog de fotos realmente minimalista que vamos a hacer.

14
00:00:47,280 --> 00:00:49,160
Entonces empecemos.

15
00:00:49,230 --> 00:00:50,610
Abre sublime.

16
00:00:50,880 --> 00:00:54,330
Tengo un único archivo llamado Photo grid that HMO.

17
00:00:54,960 --> 00:01:00,480
Primero voy a mostrarte la imagen o con la que estamos trabajando.

18
00:01:00,480 --> 00:01:07,410
Entonces estas son imágenes nueve imágenes tres imágenes cada una de tres fotógrafos diferentes que encontré

19
00:01:07,410 --> 00:01:08,390
en Flickr.

20
00:01:08,700 --> 00:01:10,920
Todas las fotos están autorizadas bajo Creative Commons.

21
00:01:10,920 --> 00:01:13,030
Puedes la licencia aquí.

22
00:01:13,050 --> 00:01:19,800
y voy a hacer una demostración rápida para que se 'tengo que codificar junto con esta parte cuando agrego

23
00:01:19,800 --> 00:01:27,180
a los divs uno que dice hola y uno que dice adiós y voy a guardarlos y luego voy a agregar

24
00:01:27,180 --> 00:01:34,360
mi hoja de estilos en la que estoy llamando fotos del SS y luego aquí voy a diseñar mis divs.

25
00:01:34,410 --> 00:01:42,150
Entonces, antes de hacer algo con estas URL de imagen, en realidad me las voy a deshacer de ellas y voy a

26
00:01:43,350 --> 00:01:46,750
agregar mi esqueleto envejecido ad-Din en el blog de fotos

27
00:01:46,770 --> 00:01:53,890
Así que en realidad voy a darles un yo RE. solo llámalo uno.

28
00:01:54,270 --> 00:02:06,810
Y de nuevo, esto es solo para demostrar algo y luego a un lado aquí voy a seleccionar uno y dos y todo lo que voy

29
00:02:06,900 --> 00:02:10,020
a hacer es darles un color

30
00:02:14,040 --> 00:02:25,980
de fondo diferente rojo y luego el color de fondo púrpura y entonces estoy va a darles a ambos todos los divs y un

31
00:02:25,980 --> 00:02:27,630
ancho de 100 píxeles.

32
00:02:27,630 --> 00:02:32,430
Entonces cuando hago esto, lo abro en el navegador.

33
00:02:33,540 --> 00:02:36,970
Tenemos dos divs uno tras otro.

34
00:02:36,990 --> 00:02:39,020
Recuerde que ellos si inspeccionamos.

35
00:02:39,480 --> 00:02:44,280
Básicamente están configurados para que tomen su propia línea su elemento de nivel de bloque.

36
00:02:44,280 --> 00:02:50,400
Entonces, si no quiero que suceda, que es lo que vamos a hacer para la cuadrícula de imágenes, queremos que

37
00:02:50,400 --> 00:02:54,490
nuestras imágenes formen una cuadrícula o que varias estén en la misma línea.

38
00:02:54,540 --> 00:02:59,850
Y si es así, si quiero hacer eso con divs, necesito usar una propiedad llamada float o esa es

39
00:02:59,850 --> 00:03:01,690
una forma en que puedo lograrlo.

40
00:03:01,740 --> 00:03:06,780
Así que aquí lo único que hago es flotar a la segura y lo que hará.

41
00:03:06,780 --> 00:03:11,390
Eliminará los elementos de todos los divs del flujo normal del documento.

42
00:03:11,580 --> 00:03:14,730
Entonces, actualmente hay montones en cada uno en líneas separadas.

43
00:03:15,000 --> 00:03:22,200
Y lo que sucederá es que flotarán hacia la izquierda para pensar que la gravedad desaparecerá casi en

44
00:03:22,200 --> 00:03:23,090
nuestro documento.

45
00:03:23,280 --> 00:03:26,380
Y entonces este div va a flotar y empujar hacia la izquierda.

46
00:03:26,400 --> 00:03:27,580
Contra esto.

47
00:03:27,990 --> 00:03:32,200
Entonces, si estuviera fresco aquí, puede ver que ahora están en la misma línea.

48
00:03:32,280 --> 00:03:38,190
imágenes para que podamos obtener imágenes que básicamente van una contra la otra y forman una cuadrícula.

49
00:03:38,550 --> 00:03:41,840
Así que vamos a usar este principio cuando estamos usando

50
00:03:41,970 --> 00:03:48,600
Así que me voy a deshacer de todo esto ahora y deshacerme del dispositivo que tenemos y voy a agregar en nuestra

51
00:03:48,600 --> 00:03:49,910
imagen de esta manera.

52
00:03:50,280 --> 00:03:55,770
Así que voy a hacer esta pantalla completa y simplemente pegaré en estos enlaces de imagen que están en ese

53
00:03:55,770 --> 00:03:57,040
archivo incluido con este video.

54
00:03:57,810 --> 00:04:04,920
Y en lugar de hacer nueve etiquetas de imagen como esta, hago una etiqueta de imagen y luego la copio y la

55
00:04:05,190 --> 00:04:08,230
pego nueve veces, lo que debería ser muy lento.

56
00:04:08,490 --> 00:04:15,660
de cada línea y luego voy a escribir fuente de imagen igual y luego moverme al final de la línea.

57
00:04:15,660 --> 00:04:22,530
Voy a usar un poco de magia sublime aquí donde estoy usando el comando de clic para seleccionar el comienzo

58
00:04:22,800 --> 00:04:28,650
Así que utilicé un comando de flecha derecha comando flecha izquierda lo lleva al comando de inicio

59
00:04:28,710 --> 00:04:35,380
a la derecha hasta el final y luego voy a terminar con la cita y luego el corchete de cierre.

60
00:04:35,400 --> 00:04:40,550
Así que esa era una forma muy fácil y rápida de incluir a todos aquellos que son Elfos como etiquetas de imagen.

61
00:04:40,920 --> 00:04:46,340
Entonces, si guardo esto y van al navegador, verán cuándo actualizo.

62
00:04:46,530 --> 00:04:47,960
Ahora tenemos nueve imágenes.

63
00:04:48,090 --> 00:04:49,680
Por supuesto no están integrados.

64
00:04:49,890 --> 00:04:53,890
Están ocupando mucho espacio.

65
00:04:54,060 --> 00:05:01,230
Entonces, lo que vamos a hacer ahora es ir a nuestra hoja de estilos y seleccionar todas las imágenes.

66
00:05:01,230 --> 00:05:05,520
Y lo primero que probablemente queremos hacer aquí es simplemente regalarlos.

67
00:05:06,090 --> 00:05:13,280
Así que vamos a darles unos 100 píxeles para comenzar y esto será demasiado pequeño.

68
00:05:13,710 --> 00:05:21,540
Pero quiero que veas lo que sucede y renueves y notarás que todas estas imágenes están alineadas

69
00:05:21,540 --> 00:05:26,360
pero que hay un espacio entre ellas que no especificamos.

70
00:05:26,430 --> 00:05:29,780
Nunca establecemos margen o relleno ni nada.

71
00:05:29,790 --> 00:05:34,590
Entonces, lo que está sucediendo es que en realidad hay un espacio en blanco que se está agregando y es un poco

72
00:05:34,590 --> 00:05:36,040
peculiar en un búho de vapor.

73
00:05:36,050 --> 00:05:41,850
Pero cuando tenemos imágenes sin otra cosa, hay un espacio en blanco o solo un espacio que se

74
00:05:41,850 --> 00:05:42,870
agrega entre estos.

75
00:05:43,140 --> 00:05:49,710
Entonces, si queremos deshacernos de eso, podemos usar float y recordar que float eliminará las cosas

76
00:05:49,710 --> 00:05:51,540
del flujo del documento.

77
00:05:51,570 --> 00:05:58,170
Entonces, si actualizo Ahora, puedes ver que las imágenes se están uniendo entre sí y básicamente no

78
00:05:58,170 --> 00:05:59,800
hay espacio entre ellas.

79
00:06:00,150 --> 00:06:04,120
Y luego podemos regresar y agregar ese espacio en nosotros mismos.

80
00:06:04,170 --> 00:06:07,020
Entonces, obviamente, no queremos que ocupen este pequeño espacio.

81
00:06:07,020 --> 00:06:13,700
Queremos que pasen tres y queremos un margen entre ellos, pero queremos controlar eso.

82
00:06:14,160 --> 00:06:20,610
Así que al cambiarlos nos deshacemos del espacio en blanco que el navegador agregó para nosotros, de modo que

83
00:06:20,610 --> 00:06:27,320
ahora podemos entrar en nuestro propio espacio personalizado utilizando la propiedad de margen en lugar del espacio en blanco real.

84
00:06:28,920 --> 00:06:33,670
Ahora vamos a cambiar el ancho y comencemos con el 30 por ciento.

85
00:06:33,720 --> 00:06:39,180
Así que recuerda que el porcentaje de Israel es relativo a los elementos padres del cuerpo.

86
00:06:39,180 --> 00:06:41,910
Entonces, cada uno ocupará el 30 por ciento del cuerpo.

87
00:06:41,910 --> 00:06:46,800
Y la razón por la que estoy empezando con 30 es solo para asegurarme de que todos encajen en una línea o que tres encajen.

88
00:06:46,830 --> 00:06:52,120
En mi mente, verás que atrapamos a tres de ellos sin espacio entre ellos.

89
00:06:52,260 --> 00:06:58,370
Y luego tenemos nuestro 10 por ciento aquí porque esto es solo el 90 por ciento que estamos tomando.

90
00:06:58,470 --> 00:07:06,390
Así que vamos a usar ese otro porcentaje para dividir realmente el margen y agregar un espacio entre

91
00:07:06,390 --> 00:07:06,790
ellos.

92
00:07:07,020 --> 00:07:09,460
Entonces ya tenemos una grilla de tres por tres.

93
00:07:09,650 --> 00:07:12,550
Lo que queremos hacer ahora es hacer que se vea así.

94
00:07:12,750 --> 00:07:15,000
O incluso tenemos un espacio entre ellos.

95
00:07:15,180 --> 00:07:17,870
Entonces realmente tenemos que hacer un poco de matemática.

96
00:07:18,060 --> 00:07:18,860
Entonces ya lo hice.

97
00:07:18,870 --> 00:07:26,210
Pero básicamente, si calculamos esto, hay un margen aquí, aquí también hay un margen.

98
00:07:26,570 --> 00:07:28,430
Hay un margen aquí tres.

99
00:07:28,600 --> 00:07:32,400
Y luego en este para eso en este cinco.

100
00:07:32,670 --> 00:07:34,910
Y en este o seis.

101
00:07:34,920 --> 00:07:45,570
Entonces tenemos un 10 por ciento y tenemos que dividir eso por 6 y 10 dividido por seis es un punto seis seis.

102
00:07:45,570 --> 00:07:52,810
Entonces, lo que vamos a hacer es decir margen un punto seis seis por ciento.

103
00:07:52,950 --> 00:07:58,440
Entonces, si volvemos al navegador y miramos el resultado y la actualización, verá que

104
00:07:58,440 --> 00:08:01,900
obtenemos tres imágenes espaciadas uniformemente con espacios entre ellas.

105
00:08:01,950 --> 00:08:04,850
Entonces la matemática solo golpeó eso una vez más.

106
00:08:05,070 --> 00:08:06,570
Cada uno de estos es 10 por ciento.

107
00:08:06,570 --> 00:08:07,980
Entonces dan solo el 30 por ciento.

108
00:08:08,160 --> 00:08:12,370
Y cada uno tiene un margen de 1. 6 por ciento en ambos lados.

109
00:08:12,390 --> 00:08:19,700
Así que tomamos ambos lados de la izquierda y la derecha un punto seis veces dos más 30 por ciento y obtenemos treinta y

110
00:08:19,690 --> 00:08:22,920
tres punto tres por ciento para cada uno de estos.

111
00:08:22,920 --> 00:08:29,330
Así que ese es un tercio exactamente o casi exactamente que estamos redondeando, pero eso es lo mejor que podemos hacer aquí.

112
00:08:29,530 --> 00:08:30,800
Así que treinta y tres punto tres por ciento.

113
00:08:30,810 --> 00:08:35,200
Cada uno de estos podemos inspeccionar solo para verificar eso.

114
00:08:35,670 --> 00:08:36,670
Aquí vamos.

115
00:08:36,690 --> 00:08:39,360
Puedes ver que ocupa exactamente un tercio