1
00:00:01,240 --> 00:00:04,800
OK, sigamos adelante y creemos este blog desde cero.

2
00:00:04,920 --> 00:00:06,620
Así que siéntanse libres de seguirlo aquí.

3
00:00:06,630 --> 00:00:11,530
Voy a pasar de crear un nuevo archivo hasta terminar este blog aquí.

4
00:00:12,000 --> 00:00:13,880
Entonces, lo primero que querremos hacer.

5
00:00:14,070 --> 00:00:18,540
Voy a mantener la solución abierta solo para poder hacer referencia a ella y asegurarme de que tenga los colores

6
00:00:18,540 --> 00:00:19,750
correctos y los tamaños de fuente.

7
00:00:20,040 --> 00:00:25,690
hacer es configurar nuestros archivos para que tenga dos archivos, un blog que HMO y hasta

8
00:00:25,730 --> 00:00:33,870
ahora no tiene nada, excepto el blog del título y está vinculado a una hoja de estilo llamada Blog Dotsie SS. Está vacío. .

9
00:00:33,970 --> 00:00:35,990
Pero lo primero que realmente queremos

10
00:00:36,030 --> 00:00:38,760
Entonces, solo conoces los dos archivos que vamos a necesitar.

11
00:00:39,090 --> 00:00:41,170
Y ahora continuemos y complétalos.

12
00:00:41,790 --> 00:00:44,950
Entonces, tenemos que decidir cuándo estamos haciendo algo como esto.

13
00:00:44,970 --> 00:00:46,540
Donde empezamos.

14
00:00:46,560 --> 00:00:52,440
Y creo que la mejor solución es comenzar con algo de este marcado en nuestro correo electrónico de la edad y diseñar algunos de ellos,

15
00:00:52,440 --> 00:00:57,060
pero no tenemos que hacer que todo sea su palabra perfecta por palabra antes de que realmente elijamos las cosas.

16
00:00:57,780 --> 00:01:04,290
Así que comenzaría poniendo un párrafo o dos y uno de estos encabezados en nuestro cuerpo.

17
00:01:04,290 --> 00:01:11,700
Y para hacer eso, este es el texto de Lorem Ipsum, excepto que es bacon ipsum, que simplemente agrega tocino ipsum dot com.

18
00:01:14,130 --> 00:01:17,340
Haga clic en "darme tocino" y simplemente copie uno de los párrafos.

19
00:01:17,610 --> 00:01:24,000
Solo voy a usar lo que tengo aquí, pero las palabras no son tan importantes en tanto sean palabras allí.

20
00:01:24,660 --> 00:01:26,840
Entonces, si quieres usar tocino ipsum, adelante.

21
00:01:26,940 --> 00:01:32,550
Pero si no lo hace, si se opone al tocino, puede elegir cualquier otro ipsum o simplemente inventar sus propias palabras o

22
00:01:32,550 --> 00:01:34,520
poner allí su propia publicación en el blog.

23
00:01:34,560 --> 00:01:35,810
Eso sería ideal.

24
00:01:36,030 --> 00:01:41,400
encabezados aquí y una nota que podría tener sentido hacer que estos dos sean uno de H1.

25
00:01:41,400 --> 00:01:44,070
Y luego voy a poner solo uno de los

26
00:01:44,070 --> 00:01:49,800
Pero, en general, la regla es que si desea tener un H-1 en la página, debería ser lo más importante

27
00:01:49,800 --> 00:01:50,820
en su página.

28
00:01:50,850 --> 00:01:55,420
Entonces, debido a que tenemos múltiples de cada uno, tenemos múltiples títulos aquí, múltiples títulos de artículos.

29
00:01:55,500 --> 00:02:00,840
Voy a ir con H-2, pero al final del día no importa en absoluto porque vamos a estilizar todo al

30
00:02:01,200 --> 00:02:05,760
respecto vamos a cambiar el tamaño de la fuente vamos a cambiar el el color y todas

31
00:02:05,760 --> 00:02:11,090
las cosas que se establecerían haciéndolo un H1 frente a la naturaleza a esas diferencias se eliminarán de todos modos.

32
00:02:11,640 --> 00:02:19,830
H-2 y voy a decir que este es mi primer artículo, no el título más creativo, sino que lo guardo.

33
00:02:19,830 --> 00:02:22,210
Así que voy a ir con

34
00:02:22,410 --> 00:02:24,220
Y vamos a tener una vista previa para comenzar.

35
00:02:24,630 --> 00:02:27,300
Entonces ábrelo.

36
00:02:27,360 --> 00:02:27,870
DE ACUERDO.

37
00:02:27,930 --> 00:02:30,090
Así que está nuestro blog hasta ahora.

38
00:02:30,960 --> 00:02:33,100
Entonces, tenemos un montón de decisiones que tomar.

39
00:02:33,120 --> 00:02:38,620
El primer lugar que podría comenzar es conseguir que este cuerpo tenga este borde.

40
00:02:39,180 --> 00:02:42,110
Así que proporcioné los colores en el último video.

41
00:02:42,120 --> 00:02:47,850
Voy a copiar este color aquí y voy a dar el cuerpo de agua para que

42
00:02:47,850 --> 00:02:56,240
seleccione el cuerpo y luego todo lo que tenemos que hacer es decir borde y es 20 píxeles sólido de este color gris.

43
00:02:56,370 --> 00:02:57,930
Y veamos eso.

44
00:02:58,560 --> 00:02:59,090
DE ACUERDO.

45
00:02:59,220 --> 00:03:04,410
Por lo tanto, no se ve del modo que quisiéramos que pareciera, pero está llegando al límite.

46
00:03:05,580 --> 00:03:08,350
Hagámoslo a tamaño completo para que podamos compararlo.

47
00:03:09,120 --> 00:03:13,740
Entonces, otra cosa que notará es que nuestro límite allí es un problema que va hasta

48
00:03:13,740 --> 00:03:16,390
el final, el cuerpo entero ocupa toda la página.

49
00:03:16,560 --> 00:03:19,500
En este caso, el cuerpo solo ocupa una parte de la página.

50
00:03:19,560 --> 00:03:21,890
Y luego hay espacio en cada lado.

51
00:03:21,930 --> 00:03:27,180
Luego también está el espacio en el interior que no tenemos porque nuestras palabras en nuestro texto

52
00:03:27,180 --> 00:03:28,550
van directamente al borde.

53
00:03:28,590 --> 00:03:31,820
Comencemos resolviendo ese problema y arreglando eso.

54
00:03:31,860 --> 00:03:33,520
Por supuesto que necesitas relleno.

55
00:03:33,630 --> 00:03:35,930
Así que esto es 20 píxeles de relleno en todos los lados.

56
00:03:35,970 --> 00:03:40,430
Usted puede ver que hay un relleno en la parte inferior y la izquierda y la derecha también.

57
00:03:40,470 --> 00:03:50,560
Entonces, en el cuerpo, vamos a asignar un relleno de 20 píxeles en los cuatro lados y obtenemos esto bien.

58
00:03:50,580 --> 00:03:52,510
Así que eso está un poco más cerca.

59
00:03:52,530 --> 00:03:58,230
Lo siguiente en lo que deberíamos trabajar es en obtener el ancho correcto y no solo se

60
00:03:58,230 --> 00:04:07,350
trata de hacer que el ancho sea del tamaño correcto cuando se trata de una pantalla completa, sino que a medida que se encoja, verá que se

61
00:04:07,350 --> 00:04:14,730
mantiene en 700 píxeles. se mantiene en 700 píxeles por un tiempo y luego se encoge y se contrae y escala.

62
00:04:15,360 --> 00:04:17,730
Entonces queremos asegurarnos de que podamos lograrlo.

63
00:04:17,820 --> 00:04:19,660
Entonces vamos a usar un truco.

64
00:04:19,830 --> 00:04:24,220
Y luego, la otra cosa que quieres hacer es asegurarte de que esté centrado en este momento.

65
00:04:24,360 --> 00:04:25,330
Bueno, realmente no podemos decirlo.

66
00:04:25,350 --> 00:04:28,210
Pero no está centrado va a estar en el lado izquierdo.

67
00:04:28,230 --> 00:04:30,850
Así que vamos adelante y agreguemos el primero.

68
00:04:31,700 --> 00:04:41,310
Digamos que con 700 píxeles y guardar y esto es lo que estaba hablando de eso a la izquierda y queremos centrarnos en el medio y

69
00:04:41,310 --> 00:04:47,250
para hacer eso podemos usar el auto o el truco automático de margen del que había

70
00:04:47,250 --> 00:04:49,660
hablado en la caja video modelo.

71
00:04:50,100 --> 00:04:54,920
Así que vamos a establecer un margen y vamos a usar el atajo.

72
00:04:55,050 --> 00:05:01,190
Así que vamos a hacer cero píxeles arriba y abajo y luego Otto a la izquierda y a la derecha.

73
00:05:01,230 --> 00:05:03,900
Recuerda cuando hacemos dos aquí en lugar de cuatro.

74
00:05:04,020 --> 00:05:06,640
Esto es arriba y abajo y esto es a la izquierda y a la derecha.

75
00:05:07,230 --> 00:05:14,100
Así que eso nos centra automáticamente pero luego notarás que al darle un cero en la parte superior e inferior ahora está

76
00:05:14,100 --> 00:05:15,740
justo en la parte superior.

77
00:05:16,020 --> 00:05:17,870
Y este aquí no es.

78
00:05:17,880 --> 00:05:18,720
Tenemos algo de espacio

79
00:05:18,720 --> 00:05:20,950
Hay 20 píxeles justo allí.

80
00:05:21,210 --> 00:05:22,630
Entonces esa es una solución simple.

81
00:05:22,770 --> 00:05:26,350
Solo la misma línea cambia eso a 20 P x.

82
00:05:26,370 --> 00:05:27,490
Necesitamos la x.

83
00:05:27,510 --> 00:05:30,580
No lo hicimos antes, porque cuando es cero puedes dejarlo en cero.

84
00:05:30,720 --> 00:05:33,970
Pero cuando hay un número, necesitamos el siguiente.

85
00:05:33,990 --> 00:05:36,110
OK, así que se ve bastante cerca.

86
00:05:36,120 --> 00:05:46,440
Lo único es que, a medida que disminuimos, queremos que permanezca 700 píxeles hasta que ya no pueda decir 700 píxeles.

87
00:05:46,470 --> 00:05:52,440
Y queremos que se reduzca y es bastante fácil hacerlo; en realidad, todo lo que

88
00:05:52,440 --> 00:05:59,400
queremos hacer es cambiar esto para que sea el ancho máximo y luego le asignaremos un porcentaje.

89
00:05:59,700 --> 00:06:03,760
Y lo que esto dice es que sea un 80 por ciento cuando lo necesites.

90
00:06:03,900 --> 00:06:07,540
Pero en un máximo de 700 píxeles.

91
00:06:07,620 --> 00:06:09,780
Entonces te mostraré cómo se ve cuando actualizas.

92
00:06:09,780 --> 00:06:16,410
Nada cambia porque se agrega a un máximo de setecientos píxeles, por lo que se comprueba si el 80 por ciento sería más

93
00:06:16,410 --> 00:06:19,180
de 700 píxeles, lo que sería en este caso.

94
00:06:19,200 --> 00:06:27,840
Por lo tanto, permanece en 700 y se mantiene en 700 hasta aquí donde comienza a reducirse.

95
00:06:27,840 --> 00:06:31,250
Ahí es donde el 80 por ciento ahora es menos de 700 píxeles.

96
00:06:31,770 --> 00:06:32,030
DE ACUERDO.

97
00:06:32,040 --> 00:06:35,370
Entonces ahora tenemos nuestro cuerpo básico configurado.

98
00:06:35,370 --> 00:06:39,330
Lo siguiente que me gustaría hacer aquí es poner en marcha nuestro Funt.

99
00:06:39,330 --> 00:06:49,300
Entonces, de nuevo, si vamos a las notas que tengo del último video, la fuente se llama Source sense pro.

100
00:06:49,320 --> 00:06:54,370
Así que vamos a ir a Google phos y buscar fuentes de envío Pro.

101
00:06:54,540 --> 00:07:00,540
Así que lo tengo abierto aquí, pero de nuevo, solo se trata de las fuentes de punto com de Google com

102
00:07:01,530 --> 00:07:06,860
y solo hago una búsqueda de un pro enviado por la fuente, aquí agrego el uso de la colección.

103
00:07:07,140 --> 00:07:09,990
Y ahora tenemos una opción que pesos de fuente queremos.

104
00:07:10,250 --> 00:07:15,540
en el video original, pero esta es solo la cara de fuente normal del peso 400 de la fuente.

105
00:07:15,540 --> 00:07:17,390
Y, de hecho, no te dije esto

106
00:07:17,520 --> 00:07:19,220
Y este es un peso más pesado.

107
00:07:19,230 --> 00:07:20,050
Esta doblado

108
00:07:20,100 --> 00:07:22,090
Así que vamos a querer los dos.

109
00:07:22,440 --> 00:07:26,970
Tan normal en negrita 400 700 y eso es todo.

110
00:07:26,970 --> 00:07:29,700
Bajamos aquí y copiamos este enlace.

111
00:07:29,700 --> 00:07:37,180
Podemos deshacernos de las fuentes de Google ahora y vamos a ir a nuestra HMO y simplemente pegar ese enlace en.

112
00:07:37,950 --> 00:07:41,530
Y ahora tenemos la capacidad de usar el sentido de origen.

113
00:07:42,180 --> 00:07:51,100
Así que asignemos ambos párrafos y edades de dos años y también queremos que esté en estas fechas.

114
00:07:51,270 --> 00:07:58,620
Entonces, lo que podríamos hacer es seleccionar un párrafo y decir font source source sense pro y podríamos hacer

115
00:07:58,620 --> 00:08:00,290
lo mismo con H-1.

116
00:08:00,990 --> 00:08:03,640
Pero ese no es un buen uso de nuestro éxito.

117
00:08:03,780 --> 00:08:07,950
Nuestro código va a ser un poco repetitivo en cada elemento sobre el que queremos usarlo.

118
00:08:07,950 --> 00:08:10,230
Tendríamos que ir y agregar esto.

119
00:08:10,770 --> 00:08:15,140
Entonces, lo que hacemos es aplicarlo al cuerpo.

120
00:08:15,690 --> 00:08:19,420
Y al jugar dentro del cuerpo, todo dentro de él lo heredará.

121
00:08:19,470 --> 00:08:30,360
Así que la fuente de la familia fuente y pro y guardar actualización y allí vamos H-1 usándolo o H-2 y

122
00:08:30,360 --> 00:08:32,100
tenemos un párrafo.

123
00:08:32,810 --> 00:08:34,560
Así que eso se ve bastante bien hasta ahora.