OK, sigamos adelante y creemos este blog desde cero.
Así que siéntanse libres de seguirlo aquí.
Voy a pasar de crear un nuevo archivo hasta terminar este blog aquí.
Entonces, lo primero que querremos hacer.
Voy a mantener la solución abierta solo para poder hacer referencia a ella y asegurarme de que tenga los colores
correctos y los tamaños de fuente.
hacer es configurar nuestros archivos para que tenga dos archivos, un blog que HMO y hasta
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. .
Pero lo primero que realmente queremos
Entonces, solo conoces los dos archivos que vamos a necesitar.
Y ahora continuemos y complétalos.
Entonces, tenemos que decidir cuándo estamos haciendo algo como esto.
Donde empezamos.
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,
pero no tenemos que hacer que todo sea su palabra perfecta por palabra antes de que realmente elijamos las cosas.
Así que comenzaría poniendo un párrafo o dos y uno de estos encabezados en nuestro cuerpo.
Y para hacer eso, este es el texto de Lorem Ipsum, excepto que es bacon ipsum, que simplemente agrega tocino ipsum dot com.
Haga clic en "darme tocino" y simplemente copie uno de los párrafos.
Solo voy a usar lo que tengo aquí, pero las palabras no son tan importantes en tanto sean palabras allí.
Entonces, si quieres usar tocino ipsum, adelante.
Pero si no lo hace, si se opone al tocino, puede elegir cualquier otro ipsum o simplemente inventar sus propias palabras o
poner allí su propia publicación en el blog.
Eso sería ideal.
encabezados aquí y una nota que podría tener sentido hacer que estos dos sean uno de H1.
Y luego voy a poner solo uno de los
Pero, en general, la regla es que si desea tener un H-1 en la página, debería ser lo más importante
en su página.
Entonces, debido a que tenemos múltiples de cada uno, tenemos múltiples títulos aquí, múltiples títulos de artículos.
Voy a ir con H-2, pero al final del día no importa en absoluto porque vamos a estilizar todo al
respecto vamos a cambiar el tamaño de la fuente vamos a cambiar el el color y todas
las cosas que se establecerían haciéndolo un H1 frente a la naturaleza a esas diferencias se eliminarán de todos modos.
H-2 y voy a decir que este es mi primer artículo, no el título más creativo, sino que lo guardo.
Así que voy a ir con
Y vamos a tener una vista previa para comenzar.
Entonces ábrelo.
DE ACUERDO.
Así que está nuestro blog hasta ahora.
Entonces, tenemos un montón de decisiones que tomar.
El primer lugar que podría comenzar es conseguir que este cuerpo tenga este borde.
Así que proporcioné los colores en el último video.
Voy a copiar este color aquí y voy a dar el cuerpo de agua para que
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.
Y veamos eso.
DE ACUERDO.
Por lo tanto, no se ve del modo que quisiéramos que pareciera, pero está llegando al límite.
Hagámoslo a tamaño completo para que podamos compararlo.
Entonces, otra cosa que notará es que nuestro límite allí es un problema que va hasta
el final, el cuerpo entero ocupa toda la página.
En este caso, el cuerpo solo ocupa una parte de la página.
Y luego hay espacio en cada lado.
Luego también está el espacio en el interior que no tenemos porque nuestras palabras en nuestro texto
van directamente al borde.
Comencemos resolviendo ese problema y arreglando eso.
Por supuesto que necesitas relleno.
Así que esto es 20 píxeles de relleno en todos los lados.
Usted puede ver que hay un relleno en la parte inferior y la izquierda y la derecha también.
Entonces, en el cuerpo, vamos a asignar un relleno de 20 píxeles en los cuatro lados y obtenemos esto bien.
Así que eso está un poco más cerca.
Lo siguiente en lo que deberíamos trabajar es en obtener el ancho correcto y no solo se
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
mantiene en 700 píxeles. se mantiene en 700 píxeles por un tiempo y luego se encoge y se contrae y escala.
Entonces queremos asegurarnos de que podamos lograrlo.
Entonces vamos a usar un truco.
Y luego, la otra cosa que quieres hacer es asegurarte de que esté centrado en este momento.
Bueno, realmente no podemos decirlo.
Pero no está centrado va a estar en el lado izquierdo.
Así que vamos adelante y agreguemos el primero.
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
para hacer eso podemos usar el auto o el truco automático de margen del que había
hablado en la caja video modelo.
Así que vamos a establecer un margen y vamos a usar el atajo.
Así que vamos a hacer cero píxeles arriba y abajo y luego Otto a la izquierda y a la derecha.
Recuerda cuando hacemos dos aquí en lugar de cuatro.
Esto es arriba y abajo y esto es a la izquierda y a la derecha.
Así que eso nos centra automáticamente pero luego notarás que al darle un cero en la parte superior e inferior ahora está
justo en la parte superior.
Y este aquí no es.
Tenemos algo de espacio
Hay 20 píxeles justo allí.
Entonces esa es una solución simple.
Solo la misma línea cambia eso a 20 P x.
Necesitamos la x.
No lo hicimos antes, porque cuando es cero puedes dejarlo en cero.
Pero cuando hay un número, necesitamos el siguiente.
OK, así que se ve bastante cerca.
Lo único es que, a medida que disminuimos, queremos que permanezca 700 píxeles hasta que ya no pueda decir 700 píxeles.
Y queremos que se reduzca y es bastante fácil hacerlo; en realidad, todo lo que
queremos hacer es cambiar esto para que sea el ancho máximo y luego le asignaremos un porcentaje.
Y lo que esto dice es que sea un 80 por ciento cuando lo necesites.
Pero en un máximo de 700 píxeles.
Entonces te mostraré cómo se ve cuando actualizas.
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
de 700 píxeles, lo que sería en este caso.
Por lo tanto, permanece en 700 y se mantiene en 700 hasta aquí donde comienza a reducirse.
Ahí es donde el 80 por ciento ahora es menos de 700 píxeles.
DE ACUERDO.
Entonces ahora tenemos nuestro cuerpo básico configurado.
Lo siguiente que me gustaría hacer aquí es poner en marcha nuestro Funt.
Entonces, de nuevo, si vamos a las notas que tengo del último video, la fuente se llama Source sense pro.
Así que vamos a ir a Google phos y buscar fuentes de envío Pro.
Así que lo tengo abierto aquí, pero de nuevo, solo se trata de las fuentes de punto com de Google com
y solo hago una búsqueda de un pro enviado por la fuente, aquí agrego el uso de la colección.
Y ahora tenemos una opción que pesos de fuente queremos.
en el video original, pero esta es solo la cara de fuente normal del peso 400 de la fuente.
Y, de hecho, no te dije esto
Y este es un peso más pesado.
Esta doblado
Así que vamos a querer los dos.
Tan normal en negrita 400 700 y eso es todo.
Bajamos aquí y copiamos este enlace.
Podemos deshacernos de las fuentes de Google ahora y vamos a ir a nuestra HMO y simplemente pegar ese enlace en.
Y ahora tenemos la capacidad de usar el sentido de origen.
Así que asignemos ambos párrafos y edades de dos años y también queremos que esté en estas fechas.
Entonces, lo que podríamos hacer es seleccionar un párrafo y decir font source source sense pro y podríamos hacer
lo mismo con H-1.
Pero ese no es un buen uso de nuestro éxito.
Nuestro código va a ser un poco repetitivo en cada elemento sobre el que queremos usarlo.
Tendríamos que ir y agregar esto.
Entonces, lo que hacemos es aplicarlo al cuerpo.
Y al jugar dentro del cuerpo, todo dentro de él lo heredará.
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
tenemos un párrafo.
Así que eso se ve bastante bien hasta ahora.