Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Agregando estilos al Header

7/17
Recursos

Aportes 144

Preguntas 12

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Solo se utilizan 3 tipos de display, pero existen mas:
/ * Valores <display-outside> * /

display: block:;
display: inline;
display: run-in;

/ * Valores <display-inside> * /
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/ * Valores <display-outside> más valores <display-inside> * /
display: block flow;
display: inline table;
display: flex run-in;

/ * Valores <display-listitem> * /
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/ * Valores <display-internal> * /
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/ * Valores <display-box> * /
display: contents;
display: none;

/ * Valores <display-legacy> * /
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/ * Valores globales * /
display: heredar;
display: initial;
display: unset;

El justify-content y sus propiedades:

Algunos ya lo conocen. Pero para los que no, les dejo un muy buen juego que les explica de forma interactiva flexbox y sus propiedades 😉

Degranda explica supersencillo y superentendible.

Compañeros, algunos atajos.
.
Atajos en VS Code
Ejecutar Live Server = Ctrl + L + O
Comentar/descomentar = Ctrl + }
Duplicar linea = Mayus + Alt + flecha abajo

  • Tipos de layouts (display): forma en la que las etiquetas contenedoras se comportan entre ellas haciendo más fácil posicionar su contenido.
  • Hay 3 tipos de layout:
    • Display layout
    • Grid
    • Flex
  • Para resetear los estilos de todos los elementos se utiliza *** { }** en el CSS

Es bueno siempre estar repasando. A pesar de estar trabajando como frontend, he decido continuar y culminar la carrera de “Arquitectura FrontEnd” de platzi.

* {
}

Resetea todos los estilos del html predeterminados en el navegador

En html5 hay dos tipos de etiquetas:
Etiquetas contenedoras: Son etiquetas de caja como: header, nav, div, footer, main, section, etc.
Etiquetas de contenido: Son aquellas que te permiten poner el contenido que se visualizará en la página web, por ejemplo: img, video, p, h1-h6, etc.

Para los que vimos el curso definitivo, esto ya nos parece muy practico y afianza conceptos…

Breve explicación:
Display es la propiedad de CSS que indica cómo debe ser mostrado un elemento html. Todos los elementos tienen algún tipo de display.
Los valores más comunes que puede recibir la propiedad display son:

  • block: el elemento intenta abarcar todo el ancho posible.
  • inline: reduce su tamaño exclusivamente hasta lo que abarca su contenido, descartando las propiedades width y height.
  • inline-block: combina lo mejor de block e inline, ya que respeta las dimensiones indicadas en las propiedades width y height, pero coloca el elemento en línea (al costado) de elementos hermanos que también tengan display: inline o inline-block.
  • flex: asume algunas propiedades por defecto que favorecen la alineación de los elementos internos.
  • grid: similar a flex, asume algunas propiedades por defecto organizando los contenidos en filas y columnas.
  • none: oculta el elemento.

alineando el menú.

header nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 30px;
}

header nav ul {
    display: inherit;
    list-style-type: none;
    margin-top: 25px;
}

header nav ul li {
    display: inherit;
    align-items: center;
}

Breve explicación:
La propiedad de CSS que nos permite definir la forma en que se alinearán o distribuirán las dependencias de un elemento al que se le ha asignado un display flex es: justify-content.
Puede tomar valores como:

  • flex-start: para alinear todos los elementos hacia el inicio del espacio disponible.
  • flex-end: para alinear todos los elementos hacia el final, a la derecha.
  • center: para alinear todos los elementos al centro del espacio disponible.
  • space-between: para distribuir los elementos con un espacio proporcional e igual entre ellos.
  • space-evenly: para distribuir los elementos con un espacio proporcional e igual entre ellos (incluyendo el primer y último elementos con respecto a los extremos del espacio disponible).
  • space-around: similar a space-evenly pero tanto en el primero como en el último elemento, el espacio hacia los extremos es la mitad del espacio usado entre los elementos.

No sé por qué, pero al poner “header nav{ }” no pasa lo que ocurre en el vídeo. En cambio, cuando quito “header” sí se justifica el contenido.

<code>
Funciona:
nav{
    display: flex;
    justify-content: flex-end;
}
No funciona:
header nav{
    display: flex;
    justify-content: flex-end;
}

Aquí les dejo un enlace que les habla más acerca del display:flex y sus opciones. ⚡⚡⚡

Nuestro nav está del lado derecho? Me imagino que se refiere al ul , él si está del lado derecho , porque él es el único hijo directo del nav y por ende el único que le afecta el display: flex; El nav sigue teniendo su ancho original , mientras que el ul su ancho dependerá de su contenido

Como tema personal, sí prefiero hacer el reset a todos los elementos, además de usar el box-sizing: border-box; siempre, de esta manera, considerando que el mismo profesor De Granda lo enseñó en el curso definitivo de HTML y CSS (que recomiendo al 100% llevarlo):

/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Les pasa que vienen del curso definitivo de HTML y CSS y ven que el profe esta usando medidas absolutas y no relativas como rem como buena práctica. 👁️👄👁️

/* Si queremos quitar todos los estilos
que el navegador nos da a todas las etiquetas
usamos * y nos deja un html 100% sin estilos*/

Muy bien explicado. La idea de usar el * como selector para aplicar a todo el contenido es interesante.

Agregando estilos al Header
.
Displays, es la forma en la que las etiquetas contenedoras se comportan y nos ayudan a posicionar su contenido.
Existen tres tipos de Displays:
• Display Layout.
• Display grid.
• Display flex.

El tamaño de la fuente lo manejaría con rem como nos enseñó en el curso definitivo de HTML y CSS.


html {
    font-size: 62.5%;  /* Aplicamos la equivalencia */
}
body {
    margin: 0;
    padding: 0;
    font-size: 1.3rem; /*Esto es igual a 13px*/ 
    font-family: Arial, Helvetica, sans-serif;
}

estaría bueno que por más sencillo que parezca, siga aplicando las buenas prácticas, por ejemplo utilizando rem en vez de px, etc.

Aquí hay diferentes guías de css que pueden consultar para display layout, flaxbox y grid: CSS Tricks

Es recomendable usar la unidad px?, siempre he tenido esa duda, porque entiendo que los dispositivos varían en densidad de pixeles, entonces no seria consistente usar px. Pero entonces que buenas practicas hay para esto?.

Les comparto dos flebox simulators:
♥ juliansci.github.io/css-flexbox-simulator
♥ lokeshdhakar.com/projects/flexitem/

/* Con * se lo aplico a todos los elementos.*/
body {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    width: 100%;
    height: 60px;
}

header nav {
    display: flex;
    justify-content: flex-end;
}

etiquetas contenedoras y etiquetas de contenido

Yo para definir la parte del tamaño del proyecto usé la siguiente

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

En vez que usar pixeles es una buena practica usar en medida “rem”, a continuación les dejo un link que te calcula por su cuenta la cantidad de rem que equivale a los pixeles que vayan a utilizar.
https://nekocalc.com/es/px-a-rem-conversor

<img src="https://i.ibb.co/931C8Qc/google-clone.png" alt="google-clone" border="0">  creo que poco a poco voy entendiendo la forma que se me hizo mas facil para ver que cosa estoy cambiando es agregarle un background asi miro los cambios que genero en la pagina.

Display: flex Para darle a los archivos una flexibilidad de acomodo, y con justify-content: flex-end para alinear esos archivos hasta una orilla, a la derecha o a la izquierda

¿Alguien sabe por qué mi Live Server no me recarga la página automáticamente a pesar de que ya lo tengo instalado?

¿Qué pasa si en vez de width: 100% utilizo display:block?

HTML5 tiene 2 tipos de etiquetas:

1. Las etiquetas contenedoras (etiquetas de caja).
**2. Las etiquetas de contenido **(se identifican porque ahí va el contenido).
.
Etiquetas de contenido: Las podemos identificar porque es donde va a ir todo el contenido, es decir, lo que el usuario va a ver en el proyecto. Contenido como:

  • Texto
  • Imágenes
  • Videos
    Y cualquier otro tipo de elemento que el usuario vaya a observar en el proyecto

Tipos de Etiquetas

Contenedoras: Etiquetas caja, contienen etiquetas.
Etiquitas de contenido: llevan la información del proyecto.

Display: la forma en que las etiquetas contenedoras se comportan entre ellas. Tenemos el display layout, display grid y flex.

En que momentos o casos es ideal utilizar la etiqueta

    box-sizing: border-box;

Por que el Prof mete le header en el body ? y en algunos sitios dicen que el header y footer va siempre fuera del body ?

Buenas quería dar mi aporte y es que hay un código ya escrito de css llamado normalize que deja toda la pagina limpia para poder trabajar a gusto dejo el link

https://necolas.github.io/normalize.css/

Display: es la propiedad que permite controlar las estructuras. Cada elemento tendrá un valor de display por defecto dependiendo de qué tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea).

¡Hola compañeros! Dos preguntas:
1- Diego dice que el HEADER lleva el valor de display flex, pero en realidad lo puso en el NAV al utilizar el selector así:
header nav {display: flex} ¿Me equivoco? 😕
2. No entiendo cual es la diferencia entre el valor FLEX-END y END.
Aiiiiuuuudaa

/* * {
    margin: 0;  con * ponemos condiciones de estilo a todo el html
    padding: 0;
} */

body {
    margin: 0;
    padding: 0;
    font-size: 13px;    
    font-family: Arial, Helvetica, sans-serif;
}

header {
    width: 100%;
    height: 60px;
}

header nav {
    display: flex;
    justify-content: flex-end;
}```

CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the original “meyerweb reset” found its way into Blueprint, among others.

https://meyerweb.com/eric/tools/css/reset/

Etiquetas contenedoras: Etiquetas de caja, las que contienen el contenido

Etiquetas de contenido: Donde va el contenido que el usuario ve.

Manejando biene sta clase de etiquetas podemos hacer un buen manejo del css.

Cuando pongo el justify-content: flex-end no me da.

body{
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

header{
    width:100px;
    height: 60px;
}

header nav{
    display:flex;
    justify-content:flex-end;
}
  
/*cuando pongo el justify-content:flex-end
no me funciona*/

<code>

Estoy haciendo el proyecto, igual al del profesor y con el mismo plugin ¿Por qué razón no me leen los estilos?

    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

header{
    width: 100px;
    height: 60px;
}

header nav {
    display: flex;
    justify-content: flex-end;
}
<code>

Viendo y probando Live Server en acción es bastante cómodo y práctico la manera en la que de desempeña a la hora de mostrar el resultado del código.

Recuerda que para que el Html tome en cuenta tu archivo CSS, en el head utlizamos la etiqueta <link>, esta te va a pedir un nombre y la dirección de la carpeta del archivo. Para que lo lea, hay que colocar esta dirección así : .(este punto es importante) / (nombre de la carpeta) / (nombre de tu archivo css).css

Porque el punto? Toma el curso de Terminal o de git y github, te lo explican súper. Es para decirle al navegador que en la misma carpeta donde se encuentra el archivo html, busque el carpeta de estilos. Si pones dos punto (…) significa otra cosa, ten cuidado. Te quiero mucho.

CSS Grid layout contiente funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

Diego realmente explica como todo un académico, realmente su forma de explicar es muy limpia y agradable.

Su estructura y forma de hacer código se sigue de forma fácil y sencilla. Buena maquetacion.

Muy bien ahora tenemos más clara la diferencia del uso de * y body como selectores iniciales para resetear las reglas de css. El primero afecta todas las etiquetas del archivo .html y el segundo (body) afecta a sí mismo y a sus hijos directos como en este caso es tenemos a header.

Me agrada porque a medida de que él va haciendo el código va colocando estilos, buena práctica

por alguna razón que aíun no se, no me funciona dando en el htm la dirección del archivo de estilos con css/main.css, solo debí escribir main.css y al parecer el directamente ubica el directorio css.

Por que el aplica el display flex en el nav en vez de aplicarlo directamente en la etiqueta ul?

Muy buena clase, repasando conceptos claves en la alineación de elementos, manejo de propiedades y ubicación.

excelente información,yo personalmente utilizo siempre la siguiente regla

*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}

Existen 3 tipos de layouts:
-Display Layout
-Display Grid
-Display Flex

hola mira yo tengo todo completo tengo todo el código igual que el tuyo y la lista no se mueve al alado derecho no se que pasa

Live Server tambien está disponible para Atom en este link https://atom.io/packages/atom-live-server

Así empezamos ❤️

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    font-size: 62.5%;
}

body {
    min-width: 100vw;
    min-height: 100vh;
    font-size: 1.25rem;
    font-family: Arial, sans-serif;
    color: rgb(12, 12, 12);
}

a {
    text-decoration: none;
}

ul {
    display: flex;
    align-items: center;
    list-style: none;
}

.header-nav {
    justify-content: flex-end;
}
.header-nav ul li a {
    color: inherit;
    padding: .9rem;
}
.header-nav ul li img {
    padding: 1.2rem;
}
.profile-icon {
    margin-right: 2rem;
}

Guía de Flexbox -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

¡Ánimo! La mejor manera de aprender es haciendo y compartiendo.

No es necesario usar width"100%; en el header por que por defecto ya es display: block; y esto quiere decir que va a tomar todo el ancho de pantalla 😃

Let’s Go!

Existen solo 2 tipos de etiquetas:
-Etiquetas contenedoras
-Etiquetas de contenido

Excelente clase , todo claro!

Al asignar a un contenedor la declaración display:flex sus etiquetas hijas se transforman en flexbox-items.

Esto nos permitirá usar la declaración justify-content que nos dirá cómo estarán distribuidos en nuestro contenedor las etiquetas hijas (alineada a la izquierda, a la derecha, centrada, distribuidas uniformemente,etc)

Para entender muy bien como funciona Display les recomiendo leer el articulo completo de Display en fundación Mozilla, les comparto el link abajo.

la mejor manera de apropiarse del conocimiento de todas las opciones que nos brinda Flex es mediante el juego de flex froggy.

sabiendo esto y con mucha practiva van a poder posicionar en la web cualquier cosa.

les dejo el enlace

Me gusta mucho utilizar WebStorm como IDE para programar, ya tiene integrado un LiveServer.

Hola amigos, les vengo a hacer una recomendacion. En vez de resetear los estilos de los navegadores “a mano”, les recomiendo usar un recurso que se llama Normalize.css. Es nada mas que una hoja de estilos CSS que resetea los estilos de los navegadores automaticamente y evita que una pagina web se vea diferente entre algunos navegadores. Cuando la descubrí me pareció una idea genial porque asi no me tengo que preocupar de que los modelos de caja se distorsionen y me puedo enfocar mejor en hacer codigo CSS mas limpio y bonito. Les comparto el Link:
https://csstools.github.io/normalize.css/

PD: Una curiosidad, este recurso es usado por grandes de la industria web como Twitter, TweetDeck, GitHub, Soundcloud, Guardian, Medium, GOV . UK (Gobierno de Gran Bretaña), Bootstrap, HTML5 Boilerplate.

Espero les sirva!

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

Aprendimos en el Curso Definitivo de HTML y CSS que por buenas prácticas usaramos rem, entonces aqui estoy yo, juiciosa usando rem 😃

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    font-family: Arial, Helvetica, sans-serif;
}

Las Dev Tools lo estoy trabajando con Firefox Developer Edition, se los recomiendo.

codigo html:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<link rel=“stylesheet” href=“css/main.css”>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">Correo</a></li>
<li><a href="">Imagenes</a></li>
<li><a href="">Icon</a></li>
<li><a href="">Photo</a></li>
</ul>
</nav>
</header>
</body>
</html>

codigo css:

body{
margin: 0;
padding: 0;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}

header{
width: 100%;
height: 60px;
}

header nav{ /MOVER EL NAV DE LADO DERECHO/
display: flex;
justify-content: flex-end;
}

Pensé que era mala práctica usar px como unidad al definir el font-size

La propiedad display nos permite posicionar los elementos dentro de nuestra pagina web de manera más “manejable” de acuerdo al diseño que querámos implementar.
Existe display layout, display flex y display grid.

A mí siempre me gusta utilizar este código para poder usar mis fuentes en REM y que 1 rem sea igual a 10px para no tener que estar calculando.

html {
font-size: 62.5%;
}
Al igual que me gusta agregar box-sizing: border-box; desde el principio para no tener que después agregarlo a cada uno.

gracias

No tiene sentido dar un padding 0 al body, porque el navegador no las agrega por defecto

https://mastery.games/flexboxzombies/

este es el mejor juego que conozco para practicar flexbox, espero les sirva.

Muy importante, saber distinguir que en html5 hay dos tipos de etiquetas:

  • Etiquetas contenedoras: Son etiquetas como cajas que contienen el header, nav, div, footer, main, section, etc.

  • Etiquetas de contenido: Son las que permiten poner el contenido que se visualizará en la página web img, video, p, h1-h3, etc.

Super genial la manera en que ensenas. Acá aprovechando el platzi+Day Jun2021

Los cursos de diego son lo mejor que le pasó a este mundo! 😃

Interesante jaja. El código va quedando similar al que hice en mi clon de práctica. 🙂

La especificidad puede llegar a romper los estilos de herencia y cascada. De pronto no es tan bueno manejar los estilos por especificad.

Este juego tal vez les ayude a repasar algo de css

hasta ahorita todo bien explicado

Entender el manejo de los displays te lleva a otro nivel al momento de maquetar

Me gusto

interesante práctica.

Excelente la manera de explicar de este profesor, no había visto curso con él, esta genial (y)

Muy bien

Etiquetas contenedoras y etiquetas de contenido muy bien explicadas

Excelente, este curso va muy bien

Con * se puede resetear todos los estilos x defecto

wow, costarin mucho los demas cursos pero cada vez queda más claro-

El correcto manejo de los displays es clave para el desarrollo web.

increíble

Esto lo sabia pero es bueno volver a repasar