En este capítulo extremas poniendo en práctica todo lo que hemos visto.
Si te fijas desde antes de este video hemos visto que todo por separado pero vamos a saber cómo poner
todo junto.
Creando un solo proyecto iba a ser un proyecto sencillo para ir tomando nuestro ritmo y aprender un
poco más sobre HTML CSS.
Este es el proyecto que vamos a construir pues el que tenemos la imagen aquí arriba tenemos una barra
de navegación con diferentes Links no nos llevan a los otros links solamente estaremos construyendo
esta página y tenemos algunas entradas que simulan entradas de blog.
Puedes ver que tenemos el nombre y luego tenemos una imagen un poco de texto y tenemos otra entrada
y abajo tenemos otra entrada tenemos tres entradas del lado derecho un Sippar con diferentes entradas
y diferentes enlaces un layout muy similar al que vas a encontrar en muchos blogs y en la parte inferior
tenemos lo que viene siendo el Führer con información a la izquierda un menú de navegación también y
lo que viene siendo el copyright en la parte inferior.
Primero vamos a por cierto este proyecto vas a encontrar una carpeta con un archivo zip.
Una vez que lo descomprime vienen dos carpetas.
Uno es el finalizado que viene siendo éste y otro es el de inicio que es el que vamos a utilizar pero
el de inicio lo voy a pegar en mi escritorio de nueva cuenta voy a estar utilizando Visual Studio para
este proyecto.
El estudio ha mejorado mucho últimamente y la verdad del autocompletado es mejor que cualquier otro
editor hoy en día puedes ver que solamente tenemos cuatro imágenes entonces primero vamos a comenzar
creando un nuevo archivo en esta parte aquí archivo índex HTML siempre la página principal debe llamarse
índex.
Es una regla.
También existe el punto HTML pero es una convención ya llamarlo índex HTML.
Después creamos una carpeta nueva que voy a nombrarse CSS y dentro voy a crear un archivo que voy a
nombrar estilo 2.0 es ese archivo llamadlo como tú dices al final recuerda tú lo enlazas en el Index
muy importantes que voy a dar clic en este último botón.
Si no tienes instalado una extensión que se llama Live Server desequilibre Server esta que está aquí
lo vamos a utilizar solamente dar clic en Instalar.
Reinicia la IP Server y ya la vas a tener lista aquí es donde estoy en el índex doy click aquí abajo
Golijov si te aparece ya este botón ya está instalado leur server o botón derecho Open Wildlife Server
cualquiera de las dos opciones hacer lo mismo y eso nos va a crear un pequeño servidor en esta parte.
Ahora un pequeño truco que podemos hacer aquí es poner lo siguiente que voy a cerrar esta parte es poner
un signo de exclamación y luego presionar tap y eso nos va a crear la estructura del HTML 5.
Puedes ver que incluso vienen las etiquetas para lo que es responsive design y también el meta el aquí
no vas a poner blog de viajes y también voy a enlazar hacia esa carpeta de CSS que tiene el estilo es
ese equipo tengo un link link y lo Borrel está allí para que sepa qué es una hoja de estilos y el logo
Ruff para lo que viene haciendo el enlace que pone CSS diagonal y teito completa la hoja de estilos
estilos .12 S.S. que puedes ver está vacía.
Acabamos de crear cerrar esto de aquí entonces la ventaja de utilizar Live Server es que si pones a
quien H1 que diga hola y abres lo que es tu proyecto.
Aquí me equivoqué pues soy el que dice hola.
Entonces te va a permitir que cuando vayas guardando cambios ya sea en el archivo de CSS o en el html
te vayan mostrando lo que vas realizando de vuelta en el código.
Podemos eliminar este H1 y puedes ver que tenemos la parte superior del sitio web tenemos esta imagen.
Entonces al ser el encabezado del sitio web va a estar dentro de un Getter Séder con una clase que voy
a nombrar 7GB y cierro ólger y dentro voy a colocar la imagen en medio de la imagen del logotipo que
aparece en diagonal logo punto PNG.
Siempre es buena idea ponerle un texto alternativo que va a decir logotipo y cerramos el recuerdo de
la imagen no tiene no tiene etiqueta de cierre como otras nada más es una etiqueta que tiene apertura
pero no tiene cierre guardamos cambios abrimos el proyecto y el que aparece lo que viene siendo el logotipo.
Después tenemos esta barra de navegación y después del Jaider voy a colocar un Dib dives por mucho elemento
de estructura que seguir utilizando más hoy en día en estudio.
Tiene algo que se llama Emet.
Por lo tanto puedes poner como punto barra y presionar Tab y te va a crear un Dib por default crear
un dip siempre y después voy a colocar un Nav con dos clases una que se llama navegación principal para
seleccionarlo con CSS y un contenedor ahorita explico porque el contenedor dentro de la navegación y
no por fuera ya que estemos dando el estilo CSS lo veremos y puede ser que tenemos cinco enlaces de
nueva cuenta podemos utilizar Emet por cinco y eso nos va a crear cinco enlaces que podemos llenar.
Van a estar vacíos por lo tanto los selecciono y dentro pongo enlaces hacia un signo de gato o un numeral.
Obviamente en un proyecto más grande pues aquí en las áreas hacia otras páginas pero de momento solamente
vamos a crear la página principal y para que simule que son enlaces le tengo que poner el signo de gato
que va a poner inicio y el segundo se va a llamar nosotros.
Secciones muy comunes en la mayoría de los sitios web de hoy en día un blog una tienda virtual y finalmente
un contacto.
Si guardas cambios y abres el proyecto puede ser que de esta forma muy importante es que se dice que
hoy en día si ya utilizas la etiqueta Nav ya no es necesario utilizar un ordenarles y luego un link
y luego una inquer.
Voy a explicar mejor si utilizas un huele Lehi y una.
Esta era la forma tradicional de crear menús utilizando HTML.
Hoy en día si tienes un menú de solamente un nivel como éste y utilizas la etiqueta NAB se recomienda
tenerlo directamente Nav y los enlaces.
Si tu menú es de múltiples niveles sigue siendo recomendado utilizar esta técnica para eliminar esta
parte.
Vamos a comenzar a darle un poco de estilos hacia nuestro proyecto vamos a abrir estilos puntos CSS
y aquí primero voy a colocar lo que viene siendo el selector para el Getter puedes ver que le puse Seifer
por lo tanto copio este selector y ponemos la clase siempre es recomendable que utilices clases.
Si recuerdas el hoy día es exactamente lo mismo si le pones oiría todo pero los Heydi son más lentos
a la hora de mostrar el HTML hacen un poco más pesada la hoja de estilos desde siempre se recomienda
utilizar clases y puedes ver que si vemos nuestro proyecto el proyecto final tiene un poco de separación
aquí arriba y un poco aquí abajo estos están muy juntos por lo tanto vamos a poner un Pauling Badín
de 20 pixeles arriba y cero hacia los lados ahora podrías ponerlo así como Padín Top 20 píxeles Padín
Boron 20 pixeles pero recuerda esto funciona como las manecillas del reloj.
Por lo tanto Badín 20 píxeles 020 píxeles cero.
Esto lo aplicaría de nuevo poniendo el ejemplo de las manecillas del reloj el 20 pixeles el primer valor
sería a las 12 del día es decir arriba el padre arriba este cero a las tres que vendría siendo el padrino
a la derecha.
Este otro espadín abajo el reloj.
Esto sería como las 6 y este 0 sería espadín a la izquierda.
Entonces este sería como las 9 en un reloj pero como puedes ver que tenemos 20 píxeles y 20 píxeles
se repite puedes ponerlo de esta forma y va a funcionar correctamente.
Entonces a pesar de que tenemos un poco de separación aquí ahora puedes ver que este texto está como
un poco centrado aquí está alineado en esta parte la navegación se expande pero está alineado aquí por
lo tanto aquí voy a colocar otra clase que se llama contenedor dentro del mismo Gelder y vamos a poner
aquí punto contenedor y voy a ponerla con Max with de 1200 píxeles es decir toma todo el espacio que
haya disponible pero máximo 1200 píxeles y de ahí no te pases.
Eso es lo que hace el Mac Swett.
Puedes ver que queda del lado izquierdo por lo tanto aquí ponemos margen cero auto sigue siendo esto
es la técnica recomendada para centrar tus labios.
Esta técnica ha estado por muchos años y sigue siendo hoy en día válida.
Después tenemos esta barra donde se pone el selector de la barra que vamos a poner navegación en comentario
nada más para que nos diga que estos son los estilos de la navegación.
Punto barra y ponemos un Bagram color y aquí vamos a poner el siguiente valor 0 0 8 de entonces guardo
cambio si puede ser que me coloca esta barra que se expande a lo largo de todo el proyecto y entonces
ver qué queda por ejemplo la barra se expande a todo y el enlace o los enlaces quedan centrados.
Es por eso que le puse este contenedor.
Si eliminas el contenedor va a quedar hasta la orilla los enlaces y personalmente yo preferiría que
quedaran centrados como éste.
Entonces si abrimos el proyecto y muy importante el contenedor debe estar aquí porque si lo pones en
la barra no se va a expandir el color hasta las orillas.
Entonces puedes probar y ver que no se va a expandir por lo que queda por fuera porque por default un
dip va a tomar todo el espacio disponible entonces lo creamos un día que tomé todo el espacio disponible
y de esa forma le aplicamos un color de fondo y después entramos con el contenedor.
Por eso está o por eso creamos dos elementos diferentes.
Puedes ver algo aquí por ejemplo si yo abro Kronk puede ser que la barra no llega hasta la orilla y
eso pasa porque por default si le hace inspeccionar todo proyecto toda navegación en el body tiene este
margen lo que viene siendo siempre que veas esto que user está el 7 esto es la hoja de estilos que es
por default en cada navegador cada navegador aplica estilos por default y en este caso puede ser que
le aplica un margen de 8 pixeles y por eso queda esta zona naranjada y por eso la barra no se expande.
Hay dos formas en las que lo puedes solucionar voy a abrir este puntos CSS.
La primera es aplicar el selector universal es decir asterisco y ponerle aquí margen cero.
Y abrir el proyecto y eso lo va a eliminar.
Otra es debido a estas inconsistencias que aplican los navegadores.
Existe una librería que resetea que pone que todos muestren lo mismo al menos en su parte inicial en
sus defaults y esa se llama normalitas en esta página si das una búsqueda por norma CSS te va a parecer
un enlace Kidjo que es como éste si el nombre de la versión cambia no te preocupes cada día hay nuevos
navegadores versiones más nuevas incluso salen teléfonos y dispositivos móviles que tienen selectores
que antes no eran soportados por eso está esta librería va cambiando de versión en versión entonces
siempre descarga la más nueva darle clica quien downloads y selecciona todo el contenido copiado.
Y ahora quien CSS darle el nuevo archivo y crear uno nuevo llamado normalizaron CSS lo puedes pegar
y ya no guardas y muy importante debe estar enlazado antes de estilos porque si recuerdas cómo funcionan
los estilos el que esté hasta el final va a ser el que se va aplicar.
Por lo tanto este es el reset.
Por lo tanto debe ir antes los amos a Norma la disputo CSS y eliminé el selector anterior y puedes ver
el resultado si abrimos el proyecto va a ser exactamente el mismo pero va a ser mucho mejor utilizar
normalismo vamos a finalizar la barra de navegación ya para determinar este video.
Si recuerdas el día que una clase que dice navegación principal quiso ponerle punto a la navegación
principal no lo voy a explicar estilosas NAB solamente a los enlaces.
Por lo tanto pongo una lección en los enlaces ya quiero poner un color cada texto o mejor dicho cada
enlace va a tener un color blanco que de momento eran azules cuando lo de guardar ya aparece os aplicaste
color blanco también lo voy a cambiar la fuente pero lo voy a cambiar la fuente a todo el sitio web.
Por lo tanto aquí va a poner Bodhi Font Family y vamos a seleccionar alguna fuente digamos ya tengo
una seleccionada que es verdad nadie ni va Cajoma etc..
Si guardamos cambios es que esta fuente se aplica hacen falta algunos detalles lo que viene siendo los
enlaces.
Vamos a continuar.
Por ejemplo puedes ver que tienen esa línea bajo los enlaces.
Nunca me ha gustado se ve como los sitios web de los 90's la quitais de correction para que les quite
esa linea en la parte inferior y también puede ser un poco más grande la fuente de esponsales y voy
a ponerla aquí 22 píxeles una fuente grande y que se vea este sitio web va a ser responsivo y va a utilizar
un enfoque de móvil fieles.
Por lo tanto voy a inspeccionar aquí y en Crom por ejemplo parece hacer más pequeña la navegación o
mejor dicho el sitio web puede ser que si lo hago por ejemplo de este tamaño la imagen no es responsive.
Tengo este scroll hacia los lados siempre vas a ser una imagen responsive y lo voy a poner aquí en los
electores más globales arriba con CMG IMAX Wit de 100 por ciento es decir máximo 100 por ciento y nunca
te pases de ese tamaño.
Entonces si guardas cambios pues el que se va a lo que viene siendo el scroll hacia los lados y nos
falta la parte de la navegación.
Por ejemplo si dejáramos el menú como está sería muy difícil de acceder a los enlaces quedarían muy
juntos y con los dedos podríamos presionar diferentes enlaces que no queremos voy a hacer lo siguiente.
Voy a ponerle aquí un display vlog display Block lo que va a ser es que por ejemplo por default los
enlaces tienen un display inline lo que hace display inline en estos casos es que los coloca uno frente
al otro.
Yo los quiero uno debajo del otro para que sea más fácil para dispositivo móvil.
Por lo tanto le cambio el display Block al que se colocan uno debajo del otro de esta forma cada enlace
toma todo el espacio que hay disponible.
Gracias a este display blog puede ser que si lo regreso a inline tengo algo como esto y hay otro que
se llama Block que ahorita lo veremos por qué es diferente a inline.
Eso lo va a colocar uno debajo del otro.
También me gustaría que estuvieran centrados en másfácil no tan a la izquierda al encender parezcan
de esta forma y también me gustaría que tuvieran un poco de espacio entre ellos.
Voy a ponerles un Pallín también para que sea más fácil de presionar el enlace cuando esté en un dispositivo
móvil.
Eso me va a dar un poco de separación aquí.
Y puedes ver que se ve bastante bien lo que viene siendo la navegación en un dispositivo móvil.
Ahora si cierro esto y vuelve a su tamaño normal esto ya se ve un poco extraño no se ve así como la
navegación como está mal hecha.
Por lo tanto aquí le vamos a aplicar un acuerdo y recuerda el cuerito lo aplicas en el tamaño que tú
creas que se ve bien el contenido.
En mi caso lo voy a poner UIT-T 7 6 8 pixeles.
Algunos ejemplos de lo que hicimos anteriormente se pone on screen y Ant y eso le va a aplicar los estilos.
Puedes remover esto ya hoy en día no es tan necesario tener ese es otro texto y recuerda vamos a reescribir
únicamente esta parte.
Entonces pegamos aquí no es como que tengas que reescribir todo lo que está aquí.
Los estilos al utilizar el enfoque de móvil se van a ir heredando de aquí hacia este medio y si lo das
guardar aquí puedes ver que se sigue viendo igual y escribes únicamente lo que necesitas.
Por ejemplo puede ser que aquí Ice display Block aquí lo quiero cambiar a Display inline para regresar
como estaba si vas a guardar cambios puedes ver que se colocan bien uno frente al otro pero puedes ver
que el padre que le había aplicado ya no se aplica es porque por default en inline no va a funcionar
con lo que viene siendo el padre.
Si va a funcionar en algo por ejemplo si lo inspeccionamos aquí puedes ver que se ve esta área verde
muy grande pero no nos ayuda a hacer la navegación un poco más grande.
Nos gustaría que la barra fuera un poco más grande podría yo aplicarle un selector a lo que viene siendo
este NAP pero la opción más fácil es cambiarã Block Block Siva aplicarle el Padín y lo va a aplicar
bien como esperamos.
Entonces puedes ver que tenemos nuestro media QWERTY y no es necesario reescribir todo se hereda hacia
lo que viene siendo de acuerdo utilizando el enfoque de móvil first.
Por eso me gusta utilizarlo más y solamente escribes lo que requiera reescribieron ya si lo haces pequeño
puedes ver que se muestra de esta forma más grande de esta forma así que puedes jugar con los colores
y los valores que estás pasándole.
Si te gustaría tener un poco de separación entre cada uno de ellos aquí te puedes poner un margen right
digamos de 20 pixeles puede ser una opción agregar un poco de separación aquí pero bueno depende del
diseño que estés queriendo crear.
Después voy a crear a copiar éste y quiero poner a dos puntos Joubert porque cuando ponga el cursor
sobre estos enlaces me gustaría que se viera algo algún efecto o algo similar.
Aquí voy a ponerle un background color y vamos a utilizar el otro color que es importante en este diseño.
Cero cero ocho cuatro es este color un poco más claro cuando dijo ver que de esta forma se va viendo
bien y por ejemplo también funciona aquí.
Con eso esta lista ya esta navegación se va viendo bastante bien muy similar al proyecto que estamos
construyendo y en el próximo video vamos a comenzar a crear estas dos secciones principales el contenido
principal y el sidebar así que veamos cómo hacerlo en el próximo video.