Vamos a comenzar con nuestro proyecto y estaremos creando primero el feeder desde el que tenemos toda
esta parte por lo tanto vamos a abrir aquí el índex voy a cerrar esta parte preliminar estoy aquí para
empezar desde cero primer paso vamos a crear nuestro jede recuerda siempre de la parte superior debe
tener un jefe y luego ceder.
Puedes ver que en el ejemplo final lo que viene siendo el proyecto tiene el contenido de esta forma
en la imagen se expande por lo tanto vamos a dejarlo de esta forma y aquí voy a colocar el contenedor
este contenedor va a centrar mi texto pero soy Geddes lo voy a aplicar la imagen de fondo y va a ser
que se expanda como este aquí después vamos a crear una barra igual que como hicimos anteriormente una
barra para que podamos aplicar un poco de Flex Box.
Se creará un enlace hacia la página principal y aquí voy a colocar un H1 y voy a poner aquí blog y puedes
ver en nuestro diseño que aparece este texto normal y este negritas.
Por lo tanto de nueva cuenta Spahn Span no le va a dar nada al estilo pero lo podemos cambiar con CSS
y ponemos de café este espacio de aquí no afecta pero se lo puedes eliminar y después vamos a crear
un NAP con una clase de navegación para darle estilos con CSS tres enlaces a tres.
El primero va a enlazar a nosotros punto HTML por lo tanto va a tener un texto aquí nosotros el segundo
va a enlazar a cursos de HTML por lo tanto aquí cursos y el último va a ir a contacto punto HTML.
Por lo tanto aquí contacto después puede por ejemplo aquí agregar un comentario que diga que esto cierra
la barra y que este cierre contenedor para irlos identificando entonces entre barra y contenedor voy
a crear un nuevo dip o sea ponerlo aquí podría ser un sex pero no es una sección nueva.
Por lo tanto aquí un dip con las clases de texto Gebser y H2 puede ser que tenga una H1 definido H2
blocks de café blog de café con consejos y cursos y abajo va a colocar un párrafo que va a decir aprende
de los expertos.
Con las mejores recetas más para abajo esto es más fácil de ver en el video y consejos y consejos si
guardamos cambios y abrimos el proyecto puede ser que de momento se vea esta forma.
Algunos de los estilos que escribimos anteriormente ya entraron y se ven bien.
Primer paso vamos a darle estilos a Zaitsev Derek Jeter voy a copiar aquí un poco de scroll y aquí después
de utilidades vamos a ponerle Séder y vamos a poner el 6GB muy importante es que si vamos a utilizar
un enfoque mobile first más pequeño vamos a comenzar y voy a hacer esto un poco más hacia la hacia la
izquierda que sea más fácil de ver.
Colapsar esto de aquí de esta forma vamos a poner la imagen de fondo va a ir en el Geddes.
Por lo tanto Bagram y Mazz o R.L y luego abrimos paréntesis dos puntos para salirnos de la carpeta recuerda
estamos de momento en CSS tenemos que salirnos y entrar ahí MG entonces 2.2 puntos diaconal y MG diagonal
etc. ponemos banners puntos JPG por default todas las imágenes se repiten por lo tanto plagaron repite
no repite que no se repita.
Si guardo cambios pues de esta forma un poco raro no se ve nada aquí se ve mucho mejor.
Vamos a posicionarla con un Bagram position Center Center.
Guardamos cambio se ve un poco mejor y también utiliza una propiedad más mapa Francis cover esa va a
ser que se llene tanto la altura como lo ancho y que se ve mucho mucho mejor en realidad se va viendo
bien se ve un poco diferente y veremos por qué lo vamos a corregir.
Después ver qué queda de esta forma se va viendo bastante bien.
El siguiente paso es que puedes ver que este género es mucho más grande.
Por eso no se ve bien este como el otro.
Vamos a ponerle un hit va a estar fija la altura digamos 600 pixeles que es igual a 60 Reem guardamos
cambio si vemos que se ve bastante bien la imagen siguiente paso por default lo que viene siendo este
Gedi este párrafo y este acá tienen márgenes.
Por lo tanto se los vamos a quitar.
Voy a escribir una utilidad si es utilizado Bootstrap esa utilidad.
Existen también en un impuesto que se llama margin o MSR o mejor dicho Hakkinen no margin es decir sin
margen ni tenemos margen cero va a ser una utilidad nueva.
Como dije anteriormente este tipo de utilidades están ganando mucho y está bien aprender un Frankfort
ahorra mucho tiempo especialmente si estás en un equipo de trabajo pero si vas a trabajar tú por tu
cuenta yo recomiendo que hagas tu propio framework.
De esa forma te evitas estar aprendiendo Frend Works y luego de la versión 3 a la 4 por ejemplo cambiar
muchas cosas y luego cambian el nombre de las clases de una versión a la otra te evitas todo eso cuando
creas tu propio framework este margen va a aplicarse en una clase aquí en este H1 Class no Margie y
por ejemplo un poco de scroll aquí también en H2 y en el párrafo después ver que nuestra clase la utilizamos
muchas veces y se ve de esta forma el siguiente paso es el que tenemos este H1 entonces tiene un enlace
y luego el H1 por lo tanto aquí vamos a poner y de hecho voy a seleccionar todo el 6GB y todos los enlaces
ponemos puntos Jaider enlaces y todos los enlaces van a ser color blanco entonces queda de esta forma
y ahí también lo voy a remover la linea de abajo tags de correction no que la quite.
Ahora si vemos el diseño final puede ser que esté hecho uno está centrado por lo tanto copio este de
aquí y ahora voy por el H1.
Puede ser que voy escribiendo los estilos conforme se van presentando aquí esa es una forma la otra
es que lo hagas conforme los declara Osaka que es básicamente lo mismo al final pero puedes irlos haciendo
conforme van apareciendo.
Aquí va a ser un Texas Line y va a ser Center para que esté centrado y de nueva cuenta para hacer que
la palabra blog esta con una letra más delgada.
Por lo tanto aquí va a ser full wait 400 eso va a ser más delgada toda la palabra pero si le pones a
X Eiger H1 y luego le Span One 700 se va a corregir y se va a ver bien el siguiente paso es la navegación.
Puedes ver que queda centrada en las fuentes un poquito más grande cualquier cosa.
Entonces vamos a ponerle aquí navegación a poner el punto de navegación y voy a seleccionar todos los
enlaces todos los enlaces.
Primer paso lo voy a centrar con Tex aligncenter pero también cada elemento debe tener su propia línea.
Por lo tanto un display Block que de esta forma vamos a poner un Foncea es un poco más grande 1.8 Rubem
en este caso 18 píxeles por defaults son 16 un poco más grande que se le da bien y nos hace falta esta
parte de aquí que dice el texto joder vamos a empezar con ella aquí vamos a poner espacio Gelder texto
y punto texto joder el color de todo el texto va a ser blanco por lo tanto blanco de esta forma y de
nueva cuenta puedes ver que el dispositivo pequeño es más centrado además de que tiene espacio aquí
separación ex aligncenter sólo va a centrar todo el texto y en Margin top digamos 50 píxeles que será
igual a 5 Reem y queda de esta forma entonces se va viendo bastante bien con pequeñas variaciones entre
mayúsculas y minúsculas no hay problema lo ideal.
Lo importante es el diseño puede ser que tenemos aquí texto Jaider y luego este párrafo no voy a ser
un poco más grande creo que se vería mejor.
Texto Gelber párrafo y no hacemos más grande con un zoom 6 digamos 2.2 Reem creo que de esa forma se
ve bastante bien.
Puedes ver que de esta forma tenemos el diseño se ve bien para un dispositivo móvil pero si lo hacemos
grande puedes ver que hace falta algo de trabajo debe de verse de esta forma.
Por lo tanto en el siguiente vídeo vamos a comenzar a agregar los primeros mini Aquaris.