Agregando estilos al Header

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;

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

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

• 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

* {
}

Resetea todos los estilos del html predeterminados en el navegador

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

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.

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.
  
  

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;
}

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 comparto dos flebox simulators:
♥ juliansci.github.io/css-flexbox-simulator
♥ lokeshdhakar.com/projects/flexitem/

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.

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.

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

<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.

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

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

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

Resumen:

Yo intenté hacer todo el nav con estilos…pero tengo problemas con el background del icono de menu…le puse un pading y se agranda y mueve el espacio de ese icono.

Mi code 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">
    <meta name="robots" content="index,follow">
    <meta name="description" content="Este es un clon de google">
    <link rel="stylesheet" href="estilos.css">
    <title>CLON DE GOOGLE</title>
</head>
<body>
    <header>
        <nav>
            <ul class="nav-list">
                <li class="nav-list__item">
                    <a href="#">Gmail</a>
                </li>
                <li class="nav-list__item">
                    <a href="#">Imágenes</a>
                </li>
                <li class="nav-list__item">
                    <a href="">
                        <figure>
                            <img src="./icons/dots-menu.png" alt="Ícono de menú" title="Aplicaciones de Google">
                        </figure>
                    </a>
                </li>
                <li class="nav-list__item">
                    <a href="">
                        <figure>
                            <img src="./images/me.jpg" alt="Foto de perfil">
                        </figure>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
</body>

Mi code CSS

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-family-google);
}
:root{
    --size-lg:0.9rem;
    --font-family-google: Arial, Helvetica, sans-serif;
    --color-text:black;
    --color-text-footer:gray;
}
/*HEADER SECTION*/
nav{
    width: 100%;
    padding: 8px 0;
}
.nav-list{
    padding-right: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.nav-list__item{
    list-style: none;
    margin: 0 16px;
    font-size: var(--size-lg);
}
.nav-list__item figure{
    margin: 0 8px;
    display: flex;
    align-items: center;
}
.nav-list__item:nth-child(3) figure:hover{
    border-radius: 100px;
    padding: 12px;
    background-color: rgb(241, 241, 241);
}
.nav-list__item:nth-child(4) figure{
    margin: 0;
}
.nav-list__item:nth-child(4) img{
    width: 28px;
    border-radius: 50px;
}
.nav-list__item a{
    text-decoration: none;
    color: var(--color-text);
}
.nav-list__item a:hover{
    text-decoration: underline;
}

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!

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;
}

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

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.

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?.

/* 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

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>

Clase 7 - Agregando estilos al header

¿Qué tipos de etiquetas de HTML existen?

• Contenedoras
• De contenido.

¿Qué son las etiquetas contenedoras?

• Son aquellas que contienen otras etiquetas y ocupan un espacio.

¿Qué son las etiquetas de contenido?

• Son aquellas que contienen elementos visibles para el usuario, como textos, videos o imágenes.

¿Por qué es importante tener una buena arquitectura en las etiquetas contenedoras?

• Porque esto nos permitirá acomodar las etiquetas de contenido fácilmente.

¿Qué es display?

• Es la forma en la que las etiquetas contenedoras se comportan entre ellas y posicionan su contenido.

¿Qué tipos de display son los más usados?

• Inline.
• Block.
• Inline-block
• Grid.
• Flex.

¿Cómo es el comportamiento de un elemento HTML con un display inline?

• Un elemento con esta propiedad ocupa únicamente el ancho que necesite su contenido, proporcionando este espacio vacío a otros elementos que pongamos seguido de este.
• No podemos usar las propiedades margin y padding en la parte superior e inferior, únicamente podemos usar estas propiedades a los lados.
• No se puede asignar un width ni un height a un elemento inline.

¿Cómo es el comportamiento de un elemento HTML con un display block?

• Un elemento con esta propiedad ocupará todo el ancho que tenga a su disposición, incluso si su contenido no lo necesita, ocasionando que cada elemento seguido de este aparezca debajo.
• Permite agregar al elemento las propiedades de margin, border y padding en todas las direcciones, además de manipular sus width y height.

¿Cómo es el comportamiento de un elemento HTML con un display inline-block?

• Un elemento con esta propiedad ocupa únicamente el ancho que necesite su contenido, proporcionando este espacio vacío a otros elementos que pongamos seguido de este. En caso de que el contenido del elemento no deje colocar otro elemento, este hará que el siguiente aparezca debajo de él.
• Permite agregar al elemento las propiedades de width, height, margin, border y padding en todas las direcciones.

¿Cómo es el comportamiento de un elemento HTML con un display flex?

• El elemento se comportará como un elemento de display block y su contenido se establecerá de acuerdo al modelo flexbox.

¿Cómo es el comportamiento de un elemento HTML con un display flex?

• El elemento se comportará como un elemento de display block y su contenido se establecerá de acuerdo a un modelo de cuadrícula.

¿Los navegadores aplican estilos propios a los elementos HTML?

• Sí.

¿Cómo podemos resetear los estilos de margin y padding que asigna el navegador a los elementos HTML?

• Escribiendo la siguiente regla de CSS:

*
{
   padding: 0;
   margin: 0;
}

¿Qué necesitamos para poder usar la regla display:flex?

• Un contenedor principal.

¿Para qué nos sirve la declaración justify-content: flex-end?

• Esto nos permite posicionar el contenido de un elemento contenedor con display flex a un extremo de la pantalla.

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

En que momentos o casos es ideal utilizar la etiqueta

    box-sizing: border-box;

¿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.

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.

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!

atraves del display podemos definir como sera posicionado el contenido de las tag contenedoras

HTML 5 tiene 2 tipos de etiquetas contenedoras, unas contenedoras y unas de contenido

Aquí está la definición, explicación y ejemplos de algunos de los valores de la propiedad “display” que has proporcionado:

1. Valores <display-outside>:
   Estos valores afectan el tipo de caja exterior de un elemento.

display: block;: Hace que el elemento sea un bloque que ocupa todo el ancho disponible.
display: inline;: Hace que el elemento sea en línea y solo ocupe el espacio necesario.
display: run-in;: Define un elemento que puede ser en línea o en bloque según el contexto.
Ejemplo:

css
Copy code
/* Ejemplo de display: block */
div {
display: block;
width: 100px;
height: 100px;
}

/* Ejemplo de display: inline */
span {
display: inline;
background-color: yellow;
padding: 5px;
}
2. Valores <display-inside>:
Estos valores afectan cómo se formatea el contenido dentro de un elemento.

display: flow;: Fluye el contenido normalmente.
display: flex;: Crea un contenedor flexible para sus elementos secundarios.
display: grid;: Crea un contenedor de cuadrícula para sus elementos secundarios.
Ejemplo:

css
Copy code
/* Ejemplo de display: flow */
div {
display: flow;
}

/* Ejemplo de display: flex */
.container {
display: flex;
justify-content: space-between;
}

/* Ejemplo de display: grid */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
3. Valores <display-listitem>:
Estos valores están relacionados con la presentación de elementos de lista.

display: list-item;: Hace que el elemento sea un elemento de lista.
display: list-item block;: Hace que el elemento sea un elemento de lista con un bloque interior.
display: list-item inline;: Hace que el elemento sea un elemento de lista en línea.
Ejemplo:

css
Copy code
/* Ejemplo de display: list-item */
li {
display: list-item;
list-style-type: disc;
}
Estos son solo algunos ejemplos de los valores de la propiedad “display”. Cada uno de estos valores afecta cómo se renderizan los elementos en una página web y permite un control detallado sobre la presentación visual de la interfaz.

Pues vengo del Curso Definitivo de HTML y CSS y me enseñaron a no usar px para la fuente, asi que seguire ocupando rem jaja

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

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.

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.

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

yo hice el codigo y no se movió nada, no se que tengo malo

https://platzi.com/clases/2467-frontend-developer/40838-tipos-de-display-mas-usados-block-inline-e-inline-/

ctrl + enter nos creara un nuevo parrafo o linea y a su vez nos colocara en ella , ayudara para escribir mas rapido el codigo y no tener que movernos con el mouse o con las flechas

(

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

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

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

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)

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

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

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.

gracias

https://mastery.games/flexboxzombies/

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

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.