Vamos a continuar con nuestro proyecto y vamos a comenzar con esta parte de los dos contenedores principales.
Este va a ser el área principal.
Esto va a ser un saiba abrir el estudio y vamos a abrir el Index de colapsar aquí es más fácil de ver
después de la barra vamos a darle enter y voy a crear un Dib QUE VA A SER EL CONTENEDOR DE AMBOS entonces
primero puede ser que tanto el contenido esté aquí está centrado está alineado a lo que viene siendo
el logotipo y esta parte habíamos utilizado el contenedor lo va aplicar aquí para que se centre.
Estamos utilizando las clases un poco mejor y después va a crear un main y voy a colocar una Seid.
Recuerdas el main define el contenido principal en la serie.
Va a agregar contenido relacionado al principal volvemos al código.
Voy a poner aquí una clase para poderle dar estilo CSS contenido principal y lo que viene siendo la
serie va a tener la clase desaguar nombrarlo obviamente como tú dices pues vamos a la esquina interna
y puedes ver que tenemos esto que simula entradas de blog Las entradas de blog bien pueden ir en un
DIP pero recuerdo hoy en día ya tenemos los elementos más semánticos que cabe muy bien en lo que viene
siendo una entrada de blog es el ártico el ártico tiene la característica de que es contenido independiente.
De cierta forma del site uego obviamente pertenece al sitio web pero que por sí solo se explica por
ejemplo viajar a Londres es una entrada de blog que el mismo texto lo mismo que está aquí en la imagen
explica su contenido.
Y ahí es donde cabe bien un artículo recuerda ãrtico se utiliza para entradas de blog para noticias
para comentarios o lo que vienen siendo las entradas en un foro son contenidos que se explican por sí
mismos y bien puede ser un artículo entonces le pongo ãrtico un punto y una clase que voy a nombrar
de entrada para darle estilos con CSS y después va a colocar un H2 el H2.
En este caso se va a utilizar primero porque no hay como un H1 no hay así como un contenido importante
y el que sobresalga y no podemos tener múltiples H1 vacunará H2 algo muy importante es que siempre se
utiliza el H2.
Cuando introduces un tema nuevo es decir tú entras al blog de viajes y comienzas a leer ves la navegación
ves este texto que dice viajar a Londres y esto ya es un tema nuevo o es algo diferente a lo que era
o lo que estabas viendo.
Siempre se recomienda utilizar los Jedis de esa forma cuando algo es nuevo.
Por ejemplo está centrando un sitio web y dicen nuestros servicios eso debe ser un Jedi porque eso nos
va a introducir una nueva sección.
Si das un poco de scroll vienen nuestros clientes portafolio etcétera.
Siempre que se introduce una nueva sección Debes de ir con un Jedi.
Aquí va a tener el texto que dice viajar a Londres y lentes vamos a colocar la imagen y M.G. ese reserva
sería Megía de diagonal y tenemos imagen 1.ª JPG la vamos a poner en el texto alternativo imagen viaje
a Londres algo así nada más recuerda el alternativo.
Se va a mostrar cuando la imagen principal no cargue después si vemos el diseño tenemos dos párrafos
con un poco el ipsum.
Vamos a crear párrafos por dos diciendo Hammet y tengamos el contenido del primero y copiamos y pegamos
el contenido del segundo.
Entonces vamos a dar clic aquí y tenemos los dos párrafos.
Finalmente vamos a tener un enlace hacia la entrada y eso va a ser con inquer poner el signo de gato
porque no van a ningún lado pero va a simular que enlazar y voy a poner una clase que voy a reutilizar
que se va a llamar botón.
Entonces este botón no voy a seleccionar con CSS para darle estilos que podemos leer más si guardamos
cambios.
Esto nos va a crear la primera entrada de momento obviamente va a tomar todo el espacio disponible.
No le hemos dado estilos para que se divida la pantalla en dos.
Lo haremos enseguida pero queda de esta forma vamos a copiar este artículo porque vamos a tener otras
dos entradas.
Puedes tener cuántos ãrtico requieras en tu diseño no hay ningún problema pero puedes ver que cada entrada
es bueno el contenido habla por sí mismo entonces cada una tiene que ir Supén su propio artículo.
Aquí vamos a poner la segunda que ser el puente de la torre
así se llama.
No es que lo haya puesto yo por mi apellido este sí es un nombre que va a poner dos imágenes.
Vamos a poner un puente de la Torre
y finalmente tenemos el metro de Londres metro de Londres y aquí vamos a poner un 3 que va a decir imagen
metro de Londres.
Lo demás se queda igual que viene siendo el Ipsum y el enlace.
No hay ningún problema hacer que aparecen nuestras entradas de esta forma.
Ahora si vemos lo que viene siendo el salvar tenemos otros post tenemos algunas entradas aquí vamos
a abrir el proyecto y aquí tenemos el aceite.
Puedes colocar este parte dentro de un DIV digamos algo así como DIV las próximas entradas próximas
entradas otras entradas o también puede ir dentro de un section dentro de un section.
Por qué.
Porque tenemos este encabezado introduce una nueva sección de contenido por lo tanto una de las reglas
de los sections es que se utiliza cuando el primer elemento es un H2S.
Ahora tal vez si es bueno para que haya un H2 y utilizaste un artículo bueno.
Recuerda el artículo se utiliza en entradas de blog en lo que viene siendo noticias o también en comentarios
de foros section utilízalo siempre que tengas un H2 H1 o el primer hijo sea siempre un Jedi cualquiera
del 1 al 6 si queremos ponerle otros post y de nueva cuenta.
Aquí puedes ver que tenemos estas entradas no son una navegación porque es más bien contenido relacionado.
No es una navegación por lo tanto no iría una pero puedes ver que son contenidos iguales y esto bien
puede ser una lista entonces una lista no ordenada y luego una ley y inquer vamos a ponerle el signo
de Caprica de entrada.
1 ahora puede ser que se huele leí Linker puedes siempre utilizar voy a cortar esto.
Emmett huele el signo de mayor que el Lehi y luego ponerle por 4 luego mayor que luego el enlace te
va a crear restructura una Lehi.
4.
Mejor un mejor dicho aún huele.
4.
Leí con cuatro enlaces y aquí puedes seleccionar todos estos siempre los puedes seleccionar con comande
controlde.
También poner el signo de gato y aquí vamos a poner entrada a los números 1 2 3 y 4 guardamos cambios
abrimos el proyecto y el que aparece en otros post.
Ahora ya tenemos la parte del HTML.
Vamos a darle estilos para que se vea de esta forma tenemos lo que viene siendo el contenido principal
del lado izquierdo el contenido secundario el salvar del lado derecho así que veamos cómo hacerlo.
Puedes ver que si damos un poco de scroll el main se llama contenido principal así que aquí vamos a
aplicarle un poco de CSS y vamos a ponerle contenedores principales que son el Main y el saiba el que
va a poner el contenido principal que va aplicar sus estilos.
También voy a copiar la clase del Sidebar que vendría siendo esta cada uno va a tener estilos en algunos
casos similares en otros no tanto primero vamos a empezar con un contenido principal aquí lo voy a aplicar
un ancho UIC y podremos ponerle si recuerdas por ejemplo el contenedor dice Max Weed de 1200 píxeles.
Vamos a ver distintas formas de hacerlo.
Mide 1200 píxeles.
Digamos que yo le pongo 800 píxeles y Alcibar le pongo un width de 400 píxeles si guardo cambios y abro
el proyecto.
Puedes ver que el principal se queda de 800 pero el contenido el otro queda como acá abajo no se coloca
a un lado y para colocarlo junto hay muchas formas muchas formas en realidad existe algo que es display
tablet que ya no se utiliza mucho esta lo que existen o lo que se conoce como float que es la que tiene
más soporte hoy en día pero poco a poco ha ido quedando atrás gracias a nuevas tecnologías como Flex
Box y como sé ese seguir los siguientes dos capítulos vas a tener un proyecto con Flex Box y uno después
de ese 1 con CSS Grit para que puedas ver las distintas formas.
Este proyecto va utilizar floods opponent aquí float LEF es decir flotado hacia la izquierda para parecer
que lo tengo hacia la izquierda pero este otro se sigue quedando aquí abajo porque este debe tener puedes
tener un float leve también no hay ningún problema lo va a colocar aquí o float Rik cualquiera de las
dos opciones está muy bien la idea es que tenga un float para que el contenido flote es decir se coloque
junto al otro pero muy importante no puedes ponerle digamos 500 píxeles porque de contenedores de 1200
y aquí estás utilizando un número más grande entonces tienes que ver muy bien cuánto mide tu contenido.
Ahora voy a regresarlo a 400 y voy a mostrarte algo si le damos 400 en este caso creo que no se ve no
es tan obvio.
Voy a eliminar la imagen no tienes que hacerlo pero quiero mostrarte algo esta primera imagen lo voy
a eliminar.
Puedes ver que en esta parte queda como muy junto al contenido incluso si yo le aplico este Cyber hacerlo
un poco más dramático con los Red puedes ver que choca esta parte de aquí están muy juntos.
Si quieres ponerle un poco de separación en esta parte tendrías que ponerle en páginas y a la derecha
puedes ponerle Patil Right y digamos que quieres tener una separación de 40 píxeles aquí me hizo falta
el background color.
Ya lo había eliminado y todavía no mostraba lo que quiero hacer.
Puedes ver que se va esta parte ahora se va por qué.
Porque recuerdas el padre tiene este Willett de 800.
El contenedor tiene 1800.
Este tiene 400 ya nos da los 1200 del contenedor pero yo le agrego otros 40 como Padín y esto se incrementa
a lo que viene siendo el tamaño del contenido principal.
Ahora este ya no mide 800 ya mide 840.
Entonces de esta forma el Padín suma a lo que viene siendo el ancho.
Aquí tendrías que hacer ajustes digamos 3 60 para que se vaya viendo bien y si alguien te dice no pues
no me gustó como se ve ponle más o menos 60 y luego aquí 3:40 llega a ser como muy muy complicado.
Para ello existe algo que se llama el box Isshin y el box siempre va a permitir que cuando aplicã espadín
o bordes no afecte el tamaño del elemento principal.
Este es un snippets que comparte el trabaja el desarrollador de Crom.
Las personas que le agregan nuevas funciones a Crom entonces él recomienda o comparte este snippets.
Así que vamos a copiarlo y lo vamos a poner antes antesdel body lo único que hace es habilitar algo
que se conoce como el block 6000 Border Box y eso es lo que va a ser que aunque le ponga espadín digamos
a este elemento que aquí ya me dirá 860.
Gracias a este snippets queda de los mismos 800 que tú has definido aquí entonces es una snippets que
va a evitar que estés haciendo estas operaciones extrañas puedes ver que si abro el proyecto queda de
esta forma puedes ver que queda muy separado aquí pero eso pasa porque tenemos el Padín y además este
tiene 341 Fullbright en realidad aquí hay una separación de 60 más otros 60 aquí ya puedes retornar
a 400 y continuar haciendo las operaciones como las harías normalmente si les defines un width de 200
píxeles y le pone espadín con ese snippets no vas a tener ningún problema entonces esto ya lo puedes
quitar.
Puedes ver que se va viendo bastante bien uno junto al otro.
Hay dos cosas que quiero mostrarte primero si hago esto pequeño se pierde totalmente lo responsivo casi
nunca ya no se recomienda tanto poner el ancho en píxeles más bien se recomiendan porcentajes en lugar
de tener aquí por ejemplo 800 y 400 puedes ponerle 70 por ciento y tomar el resto para el Zaibat que
sería 30 por ciento.
Cual es la ventaja de esto es que si por ejemplo tu contenedor lo haces un poco más grande esto se va
a ajustar correctamente y no tienes que hacer ningún otro cambio.
Entonces vamos a abrir el proyecto puedes ver que queda de esta forma y si lo vas haciendo pequeño se
ir ajustando correctamente.
Ahora por ejemplo entra un punto en el que está muy pequeño y se sigue viendo de esta forma podrías
aplicarme un media query para esta parte de aquí podrías ponerle así como en media 1000 UIT-T 7 6 8
pixeles para que este código que está aquí solamente aplique cuando tenemos suficiente espacio.
Entonces si lo haces más pequeño puedes ver que en esta parte aquí entra como que el cambio y aplica
lo que viene siendo el media Cuadri y es muy común que por ejemplo un sitio web cuando entras desde
un teléfono se ve así todo el contenido principal tomando todo el espacio y en la parte inferior el
Shabbat o al revés primero Alcibar y después el contenido pero puedes ver que fluye bastante bien el
diseño y el responsivo entonces puedes aplicar lo que vienen siendo los MIDI Aquaris y definir el tamaño
de esta forma si es como lo hacen muchos frameworks hoy en día si haces esto pequeño voy a mostrar algo
puedes ver que queda muy pegado a la orilla en el teléfono entonces aquí puedes ponerle por fuera un
contenido principal contenido principal y poner una coma y Alcibar a los dos no va a poner un Pauling
de 20 píxeles eso me va a dar un poco de espacio aquí para que se vea mejor un poco el contenido centrado
pero si luego grande el Pauling se sigue aplicando aquí por lo tanto aquí voy a resetear el Padín aquí
lo estoy aplicando 20 píxeles aquí lo va a poner Padín sincero para que no lo publique pero este tiene
Padín WD 60.
Por lo tanto aquí voy a eliminar esto y empiezo de nueva cuenta quiero ser arriba 60 la derecha está
bien 0 abajo y cero a la izquierda y reseteo lo que viene siendo el pan se lo renuevo y solamente aplico
el padre cuando esté en un tamaño pequeño para que quede esta separación y se vea un poco mejor el texto
en un dispositivo móvil obviamente si no te gusta como se ve pues se lo puedes quitar aquí no hay ningún
problema pero va viéndose el diseño de esta forma si recuerdas mencioné que eran dos cosas las que quería
mencionarte y la segunda es lo que viene siendo la parte inferior.
Quiero mostrarte arcos abrimos el índex y ya fuera de este contenedor si por ejemplo pongo aquí un párrafo
que diga hola IDEY guardar cambios puedes ver bueno aquí está el párrafo antes del cierre del body puedes
ver que se coloca aquí a mí me gustaría que estuviera aquí abajo es el Führer y esto pasa o queda aquí
arriba en lugar de quedar abajo por lo que vienen siendo los floods.
Ese es un problema que ha existido con los float.
Si bien dije que tienen más soporte que Flex Box y que Grit esa es su desventaja que por ejemplo si
yo inspeccionó aquí digamos este Main puede ser que toma esta parte izquierda y el aceite toma la parte
derecha pero lo que viene siendo si me pongo aquí sobre el contenedor puede ser que su altura es de
cero se ve como si estuviera yo digo que desinflado pues pero no tiene nada de altura.
Aquí existen varias formas de que lo puedes solucionar.
Vamos a verlas la másfácil es por ejemplo puedes ver que aquí se contenedor le puedes poner aquí en
el contenedor un overflow que va a decir Ato y guardas cambios y ya va a estar lo que viene siendo el
hola aquí abajo y si inspecciona este día puedes ver que ya se ve como con altura ya se ve que tiene
contenido.
Tenemos este Main y tenemos este aceite entonces esta es una forma que también puedes utilizar.
Esto se le conoce como bueno el problema es causado por el float a la izquierda float a la derecha y
eso hace que el contenedor quede como por así decirlo vacío se arregla con el overflow.
Existe otra que se conoce limpiarlos float.
Para ello le quitas aquí el overflow y usualmente se recomienda crear una clase nueva.
Vas a encontrarlo si lo buscas así como Lemper limpiar floods.
Vas a encontrar muchos ejemplos la clase tú la nombras como desees pero por ejemplo algunas personas
de los Mammana como c.f..
Otros nombres como Clear y otros los nombran lo nombran como el Clear Fix porque soluciona lo que viene
siendo el problema de los float utilizamos un pseudo selector after es decir después de que tenga esta
clase el siguiente elemento que se va a crear tiene que tener las siguientes reglas de CSS siempre que
utilizas after Clifford es un contén en este caso observacion o vamos a ponerle nada después le ponemos
la propiedad de Clear y la propiedad del valor de Bobet y existen dos display le puedes poner Block
y puede ser que nuestra clase sea más Clear Flix.
Además copias esta clase y la utilizas donde sea necesario es decir por ejemplo si yo recargo aquí puedes
ver que puede inspeccionar el mail tiene su altura se ve bien el aceite también pero cuando estoy en
el contenedor se ve esto que yo digo desinflados se ve sin altura.
Ahí es donde aplicaría el Clear fix que vendría siendo aquí es fácil pegás la clase y puedes ver que
la próxima vez que inspecciones aquí ya tiene toda la altura.
Crea este after y este after aplica estas reglas y limpia lo que es el float puede ser que el LOL haya
queda en la parte inferior.
Cualquiera de estas dos técnicas que decidas utilizar está bien.
Este Clear Fix con el after en algunos casos lo vas a encontrar así como está aquí.
Display Block también display Trebol los dos van a ser lo mismo no hay ninguna diferencia en realidad
en caso de que tengas dudas.
Existen dos formas para limpiar los flats y ese es un problema que tienes cuando utilizas float Leff
o float Rift salvo que no tienes si utilizas Box lo veremos en el siguiente capítulo.
Tampoco es necesario que se utilizase ese Grit ya para finalizar vamos a darle los estilos a cada una
de las entradas que tenemos esta clase son suponerle aquí escorar hacia abajo y tenemos entradas de
blog y voy a ponerle primero un selector muy genérico o muy genérico para los H2 en color y el color
que voy a utilizar es el color que es el azul y un margen Boron de 20 píxeles quiero tener un poco de
separación entre cada uno de estos textos y la entrada entonces por eso le pongo un margen hacia abajo
para que me quede un poco de separación y después como entrada este si ya voy a utilizar punto entraba
y también lo va a poner un margen top de 30 píxeles.
Por qué margen de 30 si aquí inspeccionamos por ejemplo puedes ver que una vez que inspeccion aquí cada
ãrtico va a tener un Mallén hacia arriba como tener un poco de separación ahí y cada una de las entradas
también va a tener su separación y esa forma van a quedar así como un poco separadas cada una de ellas
puedes ver que en este caso borré la imagen hace rato y no la volví a colocar voy a copiar este aquí.
Bueno creo que podemos darle y deshacer de deshacer aquí y poner el Clear fix
que vuelve la imagen y por ejemplo si hago pequeño este diseño puedes ver que la imagen en este punto
toma todo el espacio disponible pero un poco más grande se hace más pequeña y queda de ese tamaño fijo
siempre son los tiros hasta imagen seleccionamos PUNTO DE ENTRADA Y el MG le va a poner en un display
vlog por default todas las imágenes son display inline.
Entonces si abrimos el proyecto pues el que va a ser Blok y va a tomar todo el espacio disponible y
aquí puedo poner otro de Cuadri roba mi idea para que cambie su apariencia y recuerda Yo dije que en
cualquier tamaño o en cualquier tamaño tú puedes explicaros media Cuaresma hay una regla que diga tiene
que ser de esta forma o tiene que ser aquella donde tú creas que se ve bien.
Yo lo voy a poner como 480 píxeles voy a copiar este aquí y aquí voy a poner un float Leff
porque por ejemplo puedes ver que en el diseño que tenemos aquí el texto debe de fluir sobre la imagen.
Bueno primero voy a poner aquí un web 200 300 creo que va a ser más fácil de explicarlo si le pones
un 300 es que la imagen queda más pequeña pero me gustaría que este texto fluyera sobre la imagen.
Ahí puedes ponerle un float left es decir floto la imagen hacia la izquierda y ya queda como separado
del contenido y el contenido detecta estos espacios vacíos y fluye sobre esa parte en el diseño final.
Tenemos un poco de separación aquí y hacia abajo entonces podrías ponerle un margen iba a ser cero pixeles
arriba hacia la derecha van a ser 30 píxeles hacia abajo 30 píxeles y cero a la izquierda pues de esta
forma igual este 30 creo que podría ser 0 también ver que de esta forma igual al resto lo solucionamos
puedes ver que por ejemplo este párrafo es un poco interlineado es mayor.
Vamos a agregarle como un selector para todos los párrafos de la escalada hacia arriba en la parte superior
siempre pongo como que lo más global apenas seis de 12 píxeles vamos a guardar cambios creo que no tan
pequeño tal vez 16 es un buen tama��o 14 es el tamaño de este diseño y después un linfoide o interlineado
para que sea más fácil de leer de dos nos va a dar un poco más de interlineado.
Igual puede ser que la cantidad de texto de hecho sí es la misma que vamos a poner de 16 creo que se
va a ver mejor si definitivamente se ve mejor.
Mucho mejor que el otro y puedes ver que fluye lo que viene siendo el texto sobre la imagen y si lo
haces pequeño como le aplicamos este cuerpo hacia la imagen este de aquí tiene display Blok cuando es
pequeño y va a tomar todo el espacio disponible.
Y después viene entre de acuerdo y tenemos ese cambio sabiendo bastante bien en el siguiente video ya
vamos a finalizar este proyecto nos hace falta la parte del botón la parte del Zaibat y también el Führer
así que vamos a finalizar ya en el próximo video.