1
00:00:00,780 --> 00:00:06,390
Así que, a continuación, sigamos adelante y simplemente dupliquemos este marcado, que es todo lo que hice aquí.

2
00:00:06,720 --> 00:00:12,690
Utilicé palabras ligeramente diferentes ligeramente tocino ipsum entre estos párrafos.

3
00:00:12,810 --> 00:00:19,310
Así que simplemente voy a copiar estos dos en el h t m l Pero de nuevo ese no es el foco aquí.

4
00:00:19,350 --> 00:00:26,340
Entonces, lo que queremos de nuevo, asegúrate de tomar esto desde cero, así que la clase div es igual a las publicaciones.

5
00:00:26,850 --> 00:00:32,880
Y algunos de ustedes se estarían preguntando por qué me molesté en poner div un div con clase igual a publicar

6
00:00:32,880 --> 00:00:33,870
alrededor de todo.

7
00:00:33,900 --> 00:00:35,710
Esto funcionaría bien sin eso.

8
00:00:35,820 --> 00:00:37,880
Realmente se trata de agrupar cosas.

9
00:00:38,100 --> 00:00:42,810
Prefiero tener un lío gigante donde una publicación de blog se desangra en otra.

10
00:00:42,810 --> 00:00:48,570
Me gusta tener las cosas un poco contenidas para que sepa que esta es una publicación y termina aquí, así que,

11
00:00:49,020 --> 00:00:52,910
en mi opinión, se trata más bien de mantener el código un poco limpio.

12
00:00:53,340 --> 00:01:05,530
Entonces queríamos tener un div llamado fecha o fecha clásica y esa fecha es el 11 de diciembre de 2015.

13
00:01:05,820 --> 00:01:07,750
Salva eso.

14
00:01:07,830 --> 00:01:12,640
Luego tuvimos un H2 y ese H-2.

15
00:01:12,720 --> 00:01:18,510
Este es otro artículo que es otro artículo terrible.

16
00:01:18,840 --> 00:01:19,950
No recomiendo que lo leas.

17
00:01:19,950 --> 00:01:21,490
Solo se trata de tocino.

18
00:01:21,780 --> 00:01:25,500
Así que solo voy a seguir adelante y copiar esta cita nuevamente.

19
00:01:25,830 --> 00:01:26,990
Que es un párrafo.

20
00:01:27,060 --> 00:01:30,490
La clase es igual a la cita pegar eso en.

21
00:01:30,630 --> 00:01:32,870
Y luego tenemos dos párrafos más aquí.

22
00:01:33,130 --> 00:01:40,800
Uno y finalmente el último fragmento de marcado que necesitamos.

23
00:01:40,800 --> 00:01:42,000
El segundo párrafo.

24
00:01:42,000 --> 00:01:43,950
Aquí vamos.

25
00:01:44,640 --> 00:01:49,000
Entonces veamos cómo se ve esto.

26
00:01:49,080 --> 00:01:54,910
Así que una cosa que noto es que tenemos un poco menos de espacio entre las publicaciones aquí.

27
00:01:54,960 --> 00:01:56,760
Entonces, este acaba de toparse con esto.

28
00:01:56,760 --> 00:02:02,670
La fecha del 11 de diciembre definitivamente queremos un poco de espacio allí, como podemos ver en la parte izquierda de

29
00:02:02,670 --> 00:02:05,220
eso podría ser porque la HRR que nos falta.

30
00:02:05,220 --> 00:02:09,020
Aunque creo que lo que tenemos que hacer es agregar un margen entre las publicaciones del blog.

31
00:02:09,150 --> 00:02:11,780
Así que empecemos por hacer esto.

32
00:02:12,570 --> 00:02:15,690
Entonces, realmente no hemos visto realmente el elemento H R en la práctica.

33
00:02:15,690 --> 00:02:19,410
Es muy simple de usar, se ve así.

34
00:02:19,410 --> 00:02:24,810
En realidad, es de cierre automático, no necesita nada, es que no tiene ninguna etiqueta de cierre o

35
00:02:24,960 --> 00:02:27,540
cualquier contenido interno, solo una regla horizontal de char.

36
00:02:27,540 --> 00:02:30,200
Si actualizamos lo que verá

37
00:02:30,210 --> 00:02:35,940
Entonces eso nos da esta línea y eso normalmente está bien.

38
00:02:35,940 --> 00:02:40,830
A la mayoría de las personas les gusta diseñarlas un poco, así que esta es muy tenue.

39
00:02:40,950 --> 00:02:46,710
No sé si puedes decirlo, pero básicamente se está volviendo un poco más grueso y luego se está desvaneciendo en

40
00:02:46,710 --> 00:02:52,310
los bordes y hay algunos recursos geniales y cosas en línea que puedes usar para dar estilo a cualquier char.

41
00:02:52,410 --> 00:02:57,960
Y la razón por la que agregaron esto aquí es que quería forzarte a buscar algo y tratar de

42
00:02:58,530 --> 00:03:00,840
encontrar algunos estilos que no escribiste tú mismo.

43
00:03:00,840 --> 00:03:04,830
Así que les mostraré exactamente lo que haría para encontrar algunos estilos H R.

44
00:03:04,830 --> 00:03:09,170
Simplemente buscaría el estilo de HDR en Google y vería lo que obtenemos.

45
00:03:09,390 --> 00:03:13,320
Y puedes ver que ya hice clic en dos de ellos antes.

46
00:03:13,890 --> 00:03:20,280
Así que tenemos estilos simples para cada frasco y puedes ver que hay algunas opciones aquí.

47
00:03:20,460 --> 00:03:23,290
Entonces ellos piensan que este es el que hice aquí.

48
00:03:23,550 --> 00:03:25,980
Pero probemos uno como este.

49
00:03:25,980 --> 00:03:31,440
Haga clic en el código y todo lo que tenemos que hacer es copiarlos.

50
00:03:31,440 --> 00:03:36,780
Estos son dos estilos y copia esto y nosotros no.

51
00:03:36,900 --> 00:03:41,970
No quiero pensar que necesites entender todas las líneas aquí porque estas son algunas cosas bastante

52
00:03:42,180 --> 00:03:45,460
avanzadas y algo hacky como puedes ver, dice esta persona.

53
00:03:45,480 --> 00:03:50,280
En realidad, no se supone que funcione, pero lo único que queremos hacer es asegurarnos de que van

54
00:03:50,280 --> 00:03:56,910
a seleccionar nuestra H R y, por lo tanto, lo que está haciendo es dejar a la HRO con la clase de estilo 7 que

55
00:03:56,910 --> 00:03:57,600
no tenemos.

56
00:03:57,870 --> 00:03:59,760
veamos cómo se ve esto.

57
00:04:04,020 --> 00:04:06,670
Así que seleccionamos un char y

58
00:04:06,690 --> 00:04:08,120
Recarga la página.

59
00:04:08,150 --> 00:04:09,270
De acuerdo, ahí vamos.

60
00:04:09,360 --> 00:04:11,400
Entonces, personalmente, no me importa eso.

61
00:04:11,430 --> 00:04:14,700
Voy a usar este aquí que se apaga.

62
00:04:14,700 --> 00:04:17,240
Siéntete libre de hacer lo que quieras y jugar con él.

63
00:04:17,610 --> 00:04:23,280
Pero una vez más, el punto era que quería que intentaras encontrar algo externo que no escribiste

64
00:04:23,280 --> 00:04:25,420
y quiero mostrarte que está bien hacerlo.

65
00:04:25,560 --> 00:04:27,100
Así que solo estoy copiando esto.

66
00:04:27,270 --> 00:04:29,220
Yo no escribí esto.

67
00:04:29,500 --> 00:04:34,520
Necesita deshacerse de estos estilos aquí y poner esto en.

68
00:04:35,400 --> 00:04:42,870
Entonces, lo único que hacen es mirar, parece que están fijando un borde en el HRO, por lo que no hay una altura de borde que sea de solo

69
00:04:43,200 --> 00:04:46,370
un píxel y luego esta imagen de fondo que es un degradado.

70
00:04:46,550 --> 00:04:48,870
Y así es como obtienen ese efecto degradado.

71
00:04:48,870 --> 00:04:51,970
Entonces, si actualizamos ahora, ahí lo tienes.

72
00:04:52,110 --> 00:04:55,710
Aquí tenemos este agradable efecto degradado y si quisiéramos.

73
00:04:55,710 --> 00:04:59,530
De hecho, prefiero este, así que solo voy a seguir adelante y mantener este.

74
00:04:59,760 --> 00:05:00,350
Más allá de esto.

75
00:05:00,350 --> 00:05:05,380
Podría cambiar el color un poco para que sea un gris más claro, pero mantengamos eso por ahora.

76
00:05:05,580 --> 00:05:11,250
Pero todavía tenemos este problema, que es nuestra nuestra próxima publicación de blog está comenzando demasiado pronto y tenemos

77
00:05:11,250 --> 00:05:13,090
que agregar algo de espacio allí.

78
00:05:13,410 --> 00:05:17,940
Entonces, todo lo que tenemos que hacer es agregar un poco de margen.

79
00:05:18,360 --> 00:05:25,680
Así que esta es una buena y agradable coincidencia que tenemos esta envoltura de publicación de blog en cada publicación porque simplemente

80
00:05:25,950 --> 00:05:31,090
podemos agregar un margen en la parte inferior de cada publicación para que agregue espacio aquí.

81
00:05:32,220 --> 00:05:34,210
Entonces todo lo que tenemos que hacer es seleccionar.

82
00:05:34,230 --> 00:05:36,560
Déjame mostrarte la publicación de la clase.

83
00:05:36,630 --> 00:05:37,810
Esa es una publicación.

84
00:05:38,160 --> 00:05:39,580
Entonces, solo vamos aquí.

85
00:05:39,670 --> 00:05:50,370
Es como margen de publicación y hagamos 20 píxeles y no solo margen.

86
00:05:50,490 --> 00:05:59,600
Solo hagámoslo en la parte inferior, por lo que solo se actualizará en marzo y en la parte inferior y se verá bastante cerca.

87
00:06:00,210 --> 00:06:06,000
es que tenemos un poco más de espacio que aquí y es porque esto o aquello que

88
00:06:06,000 --> 00:06:13,050
agregamos está fuera de la clase de publicación por lo que no se ve afectado por ese margen que agregamos.

89
00:06:13,050 --> 00:06:15,140
Entonces, el último pequeño problema aquí

90
00:06:15,150 --> 00:06:19,490
Entonces, si lo hicimos, simplemente movemos el char A.

91
00:06:19,500 --> 00:06:20,160
Donde es eso.

92
00:06:20,160 --> 00:06:25,510
Aquí vamos al final de la publicación y estamos frescos.

93
00:06:25,590 --> 00:06:27,960
Puedes ver si tenemos el espacio que queremos.

94
00:06:28,600 --> 00:06:36,210
De acuerdo, entonces si quisiéramos experimentar y obtener este exacto, simplemente volveríamos a ese H. R. estilos y prueba algunos

95
00:06:36,300 --> 00:06:37,730
de los otros.

96
00:06:37,890 --> 00:06:41,970
Pero lo que realmente quiero mostrar de nuevo es que podemos incorporar otros estilos en.

97
00:06:42,010 --> 00:06:46,770
Realmente no tenemos que saber exactamente cómo funcionan, aunque es una buena idea ser curioso

98
00:06:46,770 --> 00:06:48,080
y tratar de resolverlo.

99
00:06:48,930 --> 00:06:53,790
Así que afortunadamente disfrutó haciendo de este proyecto un buen blog minimalista simple y por ahora.

100
00:06:53,790 --> 00:06:56,430
Obviamente, en realidad no funciona como un blog.

101
00:06:56,430 --> 00:07:01,390
No hay comentarios que no podamos agregar en una nueva publicación con ningún tipo de interfaz.

102
00:07:01,470 --> 00:07:06,600
a javascript y cuando en particular llegamos a la parte de atrás y tenemos una base de datos y

103
00:07:06,600 --> 00:07:11,670
tenemos un servidor en un marco llamado Express, de hecho vamos a tomar este blog y conviértalo en un

104
00:07:12,050 --> 00:07:17,610
blog real donde podamos agregar una publicación usando un formulario que podamos comentar y podemos hacer otras cosas como votar.

105
00:07:17,970 --> 00:07:20,840
Realmente tenemos que editar el él mismo, pero cuando llegamos

106
00:07:21,060 --> 00:07:22,410
Entonces eso va a ser realmente emocionante.

107
00:07:22,410 --> 00:07:24,350
Usaremos esto para evaluarlo.

108
00:07:24,360 --> 00:07:28,540
Es relativamente agradable en busca de relativamente pocas líneas.

109
00:07:29,040 --> 00:07:31,200
OK, te veré cuando cubramos javascript