No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Agregando estilos al Header

7/18
Recursos

El resultado anterior era bastante simple. 隆Es hora de aplicar dise帽os a la cabecera de nuestro proyecto! Pero antes, recordemos un poco algunos conceptos que vamos a utilizar.

Tipos de etiquetas HTML

Existen dos tipos de etiquetas en HTML:

Contenedoras

  • header
  • nav
  • section
  • div

Estas etiquetas contienen a otras y ocupan un espacio.

De contenido

  • p
  • a
  • li
  • h1
  • img

Estas etiquetas contienen elementos visibles como texto o v铆deo dentro.

Saber manejar una buena arquitectura de etiquetas contenedoras nos permite acomodar las de contenido con mucha m谩s facilidad.

Tipos de display

El display es la forma en que las etiquetas contenedoras se comportan entre ellas y posicionan su contenido. Existen tres tipos:

  • layout: El elemento expone su contenido utilizando el dise帽o de flujo (dise帽o en bloque y en l铆nea).
  • grid: El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadr铆cula.
  • flex: El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de flexbox.

Aplicando estilos

Le aplicamos estilos al body, al header y al nav.

Estilos al body

Lo primero que haremos es abrir nuestro archivo CSS enlazado a nuestro html del proyecto y resetear los espacios dentro de la etiqueta body.
7.png

Eliminamos el margin y el padding. Cambiamos el tipo de fuente y su tama帽o.

En caso de que quieras aplicar estilos a todas las etiquetas del proyecto, debes hacer anteponiendo un asterisco.
7.1.png

En el ejemplo se elminina el padding y margin de todas las etiquetas, sin embargo, para nuestro proyecto esto no es necesario.

Estilos al header

Lo primero que tenemos que contemplar es que queremos que nuestro header ocupe el 100% del ancho de la pantalla.
7.2.png

Ajustamos el height para que tenga 60 pixeles de alto.

Estilos al nav

Para ser espec铆ficos (ser muy espec铆ficos est谩 bien) aplicamos los estilos a las etiquetas nav dentro de una etiqueta header.
7.3.png

  • Usamos display: flex para alterar sus dimensiones y llenar el espacio disponible.
  • Usamos justify-content: flex-end para que mande el contenido a un extremo de la p谩gina. En este caso el derecho.

Contribuci贸n creada con aportes de: Jos茅 Miguel Veintimilla.

Aportes 150

Preguntas 17

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

Es bueno siempre estar repasando. A pesar de estar trabajando como frontend, he decido continuar y culminar la carrera de 鈥淎rquitectura 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

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

* {
}

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.

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 鈥渉eader nav{ }鈥 no pasa lo que ocurre en el v铆deo. En cambio, cuando quito 鈥渉eader鈥 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

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.

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

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.

En vez que usar pixeles es una buena practica usar en medida 鈥渞em鈥, 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

Resumen:



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

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

Yo para definir la parte del tama帽o del proyecto us茅 la siguiente

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
<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鈥檙e interested. Reset styles quite often appear in CSS frameworks, and the original 鈥渕eyerweb 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鈥檚 Go!

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

Excelente clase , todo claro!

Yo intent茅 hacer todo el nav con estilos鈥ero tengo problemas con el background del icono de menu鈥e 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;
}

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.

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

(

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

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)

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

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 鈥渁 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

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

codigo html:

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Document</title>
<link rel=鈥渟tylesheet鈥 href=鈥渃ss/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 鈥渕anejable鈥 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

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