Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¬ŅQu√© es el Frontend?

3

¬ŅQu√© es Backend?

4

¬ŅQu√© es Full Stack?

5

P√°ginas Est√°ticas vs. Din√°micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura b√°sica: head

8

Index y su estructura b√°sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im√°genes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¬ŅQu√© es CSS?

22

¬ŅC√≥mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M√°s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr√°cticas y ejemplos de responsive

50

Im√°genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem√°ntica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Display Flex

40/55
Recursos

Aportes 325

Preguntas 52

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Les comparto para que practiquen con Flex:

Flexbox es una herramienta fundamental ‚̧ԳŹ dejo este juego que te ayuda a entender y diferenciar cada una de las propiedades que ofrece: https://flexboxfroggy.com/#es

Flexbox junto con CSS-Grid son lo m√°s importantes y √ļtil de todo CSS

Cuando aprendes por primera vez Flexbox

Mini guía de flexbox:

Propiedades en contenedores padre:
display:flex;
flex-direccion: row | column | row-reverse | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
Esta siguiente propiedad es un atajo para escribir el flex-direccion y el flex-wrap en una sola línea de código
flex-flow: Primero escribes dirección | Luego escribes flex-wrap
Posicionar horizontal
justify-content: flex-star | flex-end | center | space-around | space-between
Posicionar manera vertical
aling-items: flex-star | flex-end | center | stretch | baseline

aling-content: flex-star | flex-end | center | stretch | space-around | space-between ‚ÄúAling-conten solo se utiliza varias filas de elementos, pero si es una sola l√≠nea usamos aling-items‚ÄĚ

Propiedades en elemento hijo

order: ; Esto se utiliza para cambiar el orden de nuestros elementos sin cambiar el orden real semantico y correcto de html. Sencillamente colocando n√ļmeros.

aling-self: aling-items: flex-star | flex-end | center | stretch | baseline ‚ÄúMuy importante, si en el padre del elemento tiene declarado flex-direccion:row; esta propiedad lo acomodara verticalmente. Y si es flex.direccion: column lo ordenara horizontalmente‚ÄĚ

Flex es un tipo de display que permite que el contenedor padre sea flexible a los cambios que puedan tener los elementos hijos en su alineación.

Una vez tengamos el elemento padre con display flex tenemos otras propiedades que podremos usar para nuestro beneficio.

  • Flex-direction: Te permite elegir la alineaci√≥n de los elementos hijos sea en vertical (column) u horizontal (row), esta alineaci√≥n viene por defecto.
  • Justify-content: Esta propiedad nos permite alinear el contenido de forma horizontal
    • Valores:
      • Flex-start: Alinear items del flex desde el comienzo.
      • Flex-end: Alinear items desde el final.
      • Center: Alinear items en el centro del contenedor.
      • Space-between: Distribuir items uniformemente, el primer items al inicio, el √ļltimo al final.
      • Space-around: Distribuir items uniformemente, estos tienen el mismo espacio a su alrededor.
      • Space-evenly: Distribuye uniformemente el espacio entre los items y su alrededor.
  • Flex-wrap: Permite que un elemento cuyo tama√Īo sea mayor al de la p√°gina haga un salto de l√≠nea sin salirse del contenedor, pues este se agranda.

Un peque√Īo resumen

Me pone nerviosa que la pantalla no se ve completa xD

Creo que muchos ya jugaron el Flexbox Froggy. Pero pocos conocen el Flexbox Zombies. A mi opinión este otro está también super cool y muy didáctico. :wink

Chicos en Visual Studio Code, tenemos el shorcout para crear el contenerdor con su clase.
De esta forma:
Escribimos el nombre de la clase que le queremos colocar y luego presionamos la tecla tab.

.nombre-clase

Y este nos crear√° el contenedor directamente con la clase que le quisieramos colocar.

<div class="nombre-clase"></div>

Paso un tip de Pro-Gamer Developer, por si a alguien le interesa. Utilizando el plugin de Emmet se pueden abreviar estructuras repetitivas y complejas que a veces resultan molestas de escribir ‚Äúa mano‚ÄĚ o incluso copiando y pegando una y otra vez.

Esta herramienta ya viene instalada por defecto en VS Code y es muy fácil de instalar en otros editores de texto, sugiero leer la documentación. Con algunas pocas reglas de sintaxis sencilla se puede ahorrar mucho tiempo y esfuerzo.



Escribiendo:

(div.box$.box>p{box$})*6

Se genera la siguiente estructura HTML:

<div class="box1 box">
    <p>box1</p>
</div>
<div class="box2 box">
    <p>box2</p>
</div>
<div class="box3 box">
    <p>box3</p>
</div>
<div class="box4 box">
    <p>box4</p>
</div>
<div class="box5 box">
    <p>box5</p>
</div>
<div class="box6 box">
    <p>box6</p>
</div>

D√©jame un ūüíö si quieres que escriba un Tutorial de estudiante sobre esta herramienta para este curso.

En flexbox tenemos lo que se llama MAIN AXIS (eje principal) y CROSS AXIS (eje secudario) los elementos se mueven SIEMPRE en el MAIN AXIS que por defecto es de forma HORIZONTAL porque esta el FLEX-DIRECTION: ROW pero nosotros podemos cambiar que ya no este de forma horizontal con FLEX-DIRECTION:COLUMN asi el main axis esta de forma vertical y el cross axis de forma horizntal

ç

Creo que no hay mejor guía para aprender Flexbox como lo es Flex Cheatsheet
No olviden que la Practica hace al maestro.
Asi que no se preocupen si no entienden a la primera.
Es cuestión de estudiar unas tras otra.
Hacer muchas paginas y cuando menos vean, ya seran unos expertos.

Otra forma de practicar es con el maravilloso juego de Flexbox-Froggy

![](

Reci√©n entr√© al mundo del desarrollo y vaya que se me ha hecho dif√≠cil este reto. ūüė¶

property justify-content alinea elementos horizontalmente, valores:

  • flex-start: Alinea elementos al lado izquierdo del contenedor.
  • flex-end: Alinea elementos al lado derecho del contenedor.
  • center: Alinea elementos en el centro del contenedor.
  • space-between: Muestra elementos con la misma distancia entre ellos.
  • space-around: Muestra elementos con la misma separaci√≥n alrededor de ellos.
  • Space-evenly: Distribuye uniformemente el espacio entre los items y su alrededor.

property align-items alinea elementos verticalmente

  • flex-start: Alinea elementos a la parte superior del contenedor.
  • flex-end: Alinea elementos a la parte inferior del contenedor.
  • center: Alinea elementos en el centro (verticalmente hablando) del contenedor.
  • baseline: Muestra elementos en la l√≠nea base del contenedor
  • stretch: Elementos se estiran para ajustarse al contenedor.

property flex-direction define la dirección de los elementos en el contenedor. / Permite elegir la alineación de los elementos hijos sea en vertical (column) u horizontal (row). Viene por defecto.
valores:

  • row: Elementos son colocados en la misma direcci√≥n del texto.
  • row-reverse: Elementos son colocados en la direcci√≥n opuesta al texto.
  • column: Elementos se colocan de arriba hacia abajo.
  • column-reverse: Elementos se colocan de abajo hacia arriba.

property order para agregar un orden a elementos individuales

property **flex-wrap ** especifica si los elementos ‚Äúhijos‚ÄĚ son obligados a permanecer en una misma l√≠nea o pueden fluir en varias l√≠neas

  • nowrap: Cada elemento se ajusta en una sola l√≠nea.
  • wrap: los elementos se envuelven alrededor de l√≠neas adicionales.
  • wrap-reverse: Los elementos se envuelven alrededor de l√≠neas adicionales en reversa.

property flex-flow es una combinación de flex-direction y flex-wrap. Acepta un valor de cada una separada por un espacio. Permite establecer filas y envolverlas.

property align-content determina el espacio entre las líneas, mientras que align-items determina como los elementos en su conjunto están alineados dentro del contenedor. Cuando solo hay una línea align-content no tiene efecto.

  • flex-start: Las l√≠neas se posicionan en la parte superior del contenedor.
  • flex-end: Las l√≠neas se posicionan en la parte inferior del contenedor.
  • center: Las l√≠neas se posicionan en el centro (verticalmente hablando) del contenedor.
  • space-between: Las l√≠neas se muestran con la misma distancia entre ellas.
  • space-around: Las l√≠neas se muestran con la misma separaci√≥n alrededor de ellas.
  • stretch: Las l√≠neas se estiran para ajustarse al contenedor.

property align-self permite los mismos valores de align-items. Se usa para un elemento específico

Nota que cuando estableces la dirección a una fila invertida o columna, el inicio y el final también se invierten.

La guia en formato imagen tomada de la pagina css-tricks.com para tenerla de referencia:

.

Ayer hice el reto del layout y me tardé horas. Me costó sangre, sudor y lágrimas. Ahora que me muestran flexbox, lloro de igual forma, pero de alegría. No puedo, sin embargo, evitar sentirme en el fondo, algo traicionado como si de mi se hubieren burlado el día de ayer. :p

ūüėÖūüėÖ
.

The Complete Flex Layout Editor & Source Code Generator

CSS Flexbox Cheatsheet

Orale… y muchos profes se la complicaban explicando esto… y pum llega el profe degranda y en 15 minutos me voló la cabeza.

En el editor hay opciones flex o flexbox e inline-flex o inline-flexbox. ¬ŅHay alguna diferencia pr√°ctica?

Con flex.

Notas de la clase

En el inspector te da la opción de modificar flex

Hay Flex, lo que te extra√Īe la clase anterior, jaja.

Les comparto unas lecturas complementarias para entender mejor FLEX

Click aqui para consultar una guía de flexbox

Guia flexbox en Espa√Īol

Obviamente el juego de la ranita ūüźł

Cosas a considerar para aprender mejor flexbox: diferenciar entre el elemento padre y el elemento hijo.

  • El elemento padre tendr√° hijos flexibles y tiene sus propias propiedades para establecer la distribuci√≥n (de izquierda a derecha, de arriba a abajo, etc.) de los elementos hijos en su interior.
  • Los elementos hijos tienen propiedades diferentes al padre y estas s√≥lo los afecta a ellos mismos, es decir de manera individual.
    Al momento de declarar un elemento con diplay: flex; los elementos hijos se alinean por defecto en fila (de izquierda a derecha). Y los elementos hijos se ajustar√°n para rellenar el espacio.
    Y lo m√°s importante:
  • El modelo flexbox trabaja en dos ejes, el principal y el cruzado. Imagina un plano cartesiano con dos ejes: x, y. En base a esos ejes es que se distribuye todo el contenido dentro del elemento padre. Por eso es importante diferenciar el padre del hijo. Ya con eso tienes mucho camino recorrido.
    Espero le ahorre tiempo a alguien.
    Más info aquí

Reto cumplido!!

Flex-Box

Funciona para que los hijos tengan un comportamiento diferente, pese a tener un display:block . Se usa con la propiedad y valor display:flex en el padre.

Justify-content

Es una propiedad que permite alinear elementos horizontalmente. Acepta los valores:

  • flex-start: Alinea elementos al lado izquierdo del contenedor.
  • flex-end: Alinea elementos al lado derecho del contenedor.
  • center: Alinea elementos en el centro del contenedor.
  • space-between: Muestra elementos con la misma distancia entre ellos.
  • space-around: Muestra elementos con la misma separaci√≥n alrededor de ellos.

Align-items

Es una propiedad que alinea elementos verticalmente. Acepta los valores:

  • flex-start: Alinea elementos a la parte superior del contenedor.
  • flex-end: Alinea elementos a la parte inferior del contenedor.
  • center: Alinea elementos en el centro (verticalmente hablando) del contenedor.
  • baseline: Muestra elementos en la l√≠nea base del contenedor
  • stretch: Elementos se estiran para ajustarse al contenedor.

Flex-direction

Define la dirección de los elementos en el contenedor. Puede tener los siguientes valores:

  • row: Elementos son colocados en la misma direcci√≥n del texto.
  • row-reverse: Elementos son colocados en la direcci√≥n opuesta al texto.
  • column: Elementos se colocan de arriba hacia abajo.
  • column-reverse: Elementos se colocan de abajo hacia arriba.

Order

Sirve para reordenar los elementos, por defecto tienen un valor de 0, pero podemos utilizar valores enteros negativos y positivos.

Align-self

Se utiliza para elementos individuales, acepta los mismos valores que align-items

Flex-wrap

Se usa para la distribución de elementos. Puede contener estos valores:

  • nowrap: Cada elemento se ajusta en una sola l√≠nea.
  • wrap: los elementos se envuelven alrededor de l√≠neas adicionales.
  • wrap-reverse: Los elementos se envuelven alrededor de l√≠neas adicionales en reversa.

Flex-flow

Es una propiedad que da facilidad para el uso en conjunto de la propiedad flex-direction y flex-wrap , los valores para cada uno est√°n separados por un espacio. Por ejemplo flex-flow: wrap column

Align-content

Se usa para establecer como las m√ļltiples l√≠neas est√°n separadas unas de otras. Valores aceptados:

  • flex-start: Las l√≠neas se posicionan en la parte superior del contenedor.
  • flex-end: Las l√≠neas se posicionan en la parte inferior del contenedor.
  • center: Las l√≠neas se posicionan en el centro (verticalmente hablando) del contenedor.
  • space-between: Las l√≠neas se muestran con la misma distancia entre ellas.
  • space-around: Las l√≠neas se muestran con la misma separaci√≥n alrededor de ellas.
  • stretch: Las l√≠neas se estiran para ajustarse al contenedor.

Esto puede ser confuso, pero align-content determina el espacio entre las líneas, mientras que align-items determina cómo los elementos en su conjunto están alineados dentro del contenedor. Cuando hay solo una línea, align-content no tiene efecto.

para los que no les quede claro de ahora en adelante siempre va a tener una etiqueta contenedora y a esta se le agregaría display Flex gracias a esto los elementos contenidos en la etiqueta contenedora obtendrán la propiedad flexible

Comparto los apuntes de la clase ūüėÉ

Una herramienta util es la propiedad flex-basis.
Esta propiedad nos ayuda a que los elementos se distrubyan parejos.

<code>
p{
flex-basis: 25%;
} 

Es importante que los elementos no tengan height ni width para que funcione la propiedad.

Les comparto una p√°gina que hice explicando este tema gr√°ficamente.

https://codepen.io/yair-lira/pen/LYZVJdd

Me tom√≥ mucho hacerlo, hay muchas cosas que debo mejorar e interiorizar. A√ļn asi, el haberlo conseguido es una gran victoria para m√≠.

Cuando tienes a la vista como se acomodan los elementos con la propiedad justify-content, empiezo a entenderlo mejor.

Lo logré el froggy.

¬°comparto este sitio muy bueno para practicar flex!
es muy bueno, se llama flexbox froggy
https://flexboxfroggy.com/#es

![](

resultado del desafío anterior, costo un poco estuve cabezon xD

Chequen este juego colegas!

Actualmente en chrome, se cuenta con una herramienta para probar las distintas propiedades de flex, esta aparece en el inspector de elementos una vez definimos un display flex

En las versiones m√°s recientes de chrome, ya podemos encontrar directo en la consola de inspect una forma bastante √ļtil de manipular las distintas opciones de flexbox con el efecto que provocar√° en el container donde se est√© aplicando:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>   
        <h1>logo</h1>    
        <nav class="header-nav">
            <div><a href="">Home</a></div>
            <div><a href="">Cursos</a></div>
            <div><a href="">instrucciones</a></div>
            <div><a href="">Blog</a></div>
        </nav>
    </header>
    <main>
        <aside>
            <nav class="aside-nav">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </nav>
        </aside>
        <article>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed possimus nihil voluptate. Voluptatem et, culpa aut qui atque dolores sequi commodi ipsa doloribus asperiores autem quidem aliquid accusantium velit consequuntur!</p>
        </article>
    </main>
</body>
</html>

CSS

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

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

header {
    background-color: grey;
    display: flex;
    width: 100vw;
    height: 12vh;
    justify-content: space-between;
}

main {
    background-color: coral;
    display: flex;
}
aside {
    width: 15vw;
}

nav a {
    text-decoration: none;
    padding: 1rem;
}

/* clases */

.header-nav {
    display: flex;
}

.aside-nav {
    height: 100vw;
    width: 15vw;
    background-color: rgb(255, 0, 140);
    display: flex;
    flex-direction: column;
}

.aside-nav div {
    background-color:rgb(153, 148, 148);
    padding: 3rem;
    margin: 1rem;
    justify-content: center;
    width: 18rem;
    height: 14rem;
}
  • display flex, permite crear dise√Īos m√°s responsivos, es el√°stico responsive.
  • flex-direction, puede ser row (default), row-reverse, column, column-reverse.
  • flex-wrap, se acomoda al espacio del navegador
  • justify-content, alinea el contenido de forma horizontal, puede ser flex-start, center, flex-end, space-around, space-evenly.

| 10px=1 rem

Por si le ayuda a alguien
En el inspector de elementos hay la opcion qure puedes ir provando varias de las propiedades de DISPLAY-FLEX
Puedes probarlos uno por uno para ver como se modifican.
A mi me ayudo mucho.

Cuando Diego al inicio habla de los problemas que pudimos haber tenido en el desaf√≠o anterior me sent√≠ super identificado, quise llorar. ūüė™

Amigos si conocen inglés les dejo esta página como referencia para flex, muy buena y muy visual

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Layout 1 con display Flex…bendito display flex

Clase 40 - Display Flex


¬ŅC√≥mo se le conoce al display flex?

  • Display box.

¬ŅPara qu√© nos sirve el display flex?

  • Para hacer un layout m√°s flexible o responsive.

¬ŅQu√© necesitamos para poder usar la regla display:flex?

  • Un contenedor principal.

¬ŅCu√°l es el comportamiento de los elementos hijos cuando le ponemos a su elemento padre la regla display: flex?

  • Esto har√° que sin importar que los elementos hijos tengan un display block, estos se puedan posicionar uno seguido del otro, adem√°s de ser necesario el ancho de sus elementos hijos se reducir√° de ser necesario.

¬ŅPara qu√© nos sirve la propiedad flex-direction?

  • Con esta propiedad podemos manipular el posicionamiento vertical u horizontal de los elementos hijos de un elemento padre.

¬ŅCu√°les son los posibles valores que puede tener la propiedad flex-direction y que hace cada uno de ellos?

  • Row:
  • Sintaxis:
flex-direction: row;
  • Funci√≥n: Este valor es el que tiene por defecto el display flex, y nos permite ubicar de manera horizontal nuestros elementos hijos.

  • Column:

  • Sintaxis:

flex-direction: column;
  • Funci√≥n: Este valor nos permite ubicar nuestros elementos hijo de manera vertical.

  • Row-reverse:

  • Sintaxis

flex-direction: row-reverse;
  • Funci√≥n: Este valor nos permite ubicar nuestros elementos hijos de manera horizontal pero en sentido contrario, es decir primero nos renderizar el √ļltimo elemento hijo que est√© dentro del elemento padre.

  • Column-reverse:

  • Sintaxis:

flex-direction: column-reverse;
  • Funci√≥n: Este valor nos permite ubicar nuestros elementos hijos de manera vertical pero en sentido contrario, es decir, de arriba hacia abajo primero nos renderiza el √ļltimo elemento que est√° dentro de nuestro elemento padre.

¬ŅPara qu√© nos sirve la propiedad flex-wrap?

  • Esta propiedad nos permite hacer que nuestro elemento padre sea mucho m√°s flexible, lo cual hace que los elementos hijos que nos puedan caber en el espacio disponible, se rendericen debajo.

¬ŅCu√°les son los posibles valores que puede tener la propiedad flex-wrap y qu√© hace cada uno de ellos?

  • Wrap:
  • Sintaxis:
flex-wrap: wrap;
  • Funci√≥n: Nos permite hacer que los elementos hijo se ubiquen debajo del otro en caso de que el espacio disponible les impida ubicarse uno al lado del otro.

  • Nowrap:

  • Sintaxis:

flex-wrap: nowrap;
  • Funci√≥n: Este es el valor por defecto de la propiedad flex-wrap, y su funci√≥n es hacer que los elementos no se rendericen debajo de los dem√°s en caso de que su elemento padre sea m√°s peque√Īo y no permita que se ubiquen correctamente todos sus elementos hijo.

  • Wrap-reverse:

  • Sintaxis:

flex-wrap: wrap-reverse;
  • Funci√≥n: Este valor nos permite hacer que los elementos hijo se ubicar encima de los dem√°s en caso de que el espacio disponible les impida ubicarse uno al lado del otro.

¬ŅPara qu√© nos sirve la propiedad justify-content?

  • Esta propiedad nos permite alinear los elementos hijo de manera horizontal.

¬ŅCu√°les son los posibles valores que puede tener la propiedad justify-content y qu√© funci√≥n tienen?

  • Center:
  • Sintaxis:
justify-content: center;
  • Funci√≥n: Este valor nos permite centrar de manera vertical los elementos hijo dentro de su elemento padre.

  • Flex-end:

  • Sintaxis:

justify-content:flex-end;
  • Funci√≥n: Este valor nos permite ubicar de manera vertical los elementos hijos en la parte final de su elemento padre.

  • Flex-start:

  • Sintaxis:

justify-content: flex-start;
  • Funci√≥n: Este es el valor por defecto de esta propiedad y nos permite ubicar a los elementos hijo al comienzo de su elemento padre.

  • Space-around

  • Sintaxis:

justify-content: space-around;
  • Funci√≥n: Este valor nos permite darle a los elementos hijo un espacio hacia los lados, pero se debe de tener en cuenta que los elementos hijo del comienzo y al final tendr√°n un espacio menor hacia el lado izquierdo y derecho respectivamente, esto es porque los espacios dados a los elementos hijo se suman y no se superponen.

  • Space-evenly

  • Sintaxis:

justify-content: space-evenly;
  • Funci√≥n: Este valor nos permite agregar un mismo espacio a los elementos hijo en sus lados para poder separarlos uniformemente.

Recomiendo esta paina, me ha ayudo mucho…
https://www.w3schools.com/css/css_display_visibility.asp

Aaaaa! Siempre ay que tener un container principal que tenga display flex para que nos ayude a cambiar las cosaaas! aaaaa era asi!

Encontre este otro juego que es muy entretenido para flexbox
https://codingfantasy.com/games/flexboxadventure/play

Reto completado con Flex :3

<!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>Desafio Layout</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <figure class="Logo">Logo</figure>
        <nav class="container">
                <ul class="container__nav">
                    <li>Home</li>
                    <li>Cursos</li>
                    <li>Instructores</li>
                    <li>Blog</li>
                </ul>
        </nav>
    </header>
    <main>
        <aside class="Main__aside">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </aside>
        <div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus magni minima laboriosam dicta sed cum aliquid aliquam! Aliquid laboriosam illum dicta vero similique assumenda alias enim voluptatibus eos odit? Inventore!
            Ipsa, molestiae minima. Magnam eum explicabo ipsum dicta voluptas impedit a, error pariatur odio laborum aperiam ipsa nulla ratione in rerum iusto ab ullam debitis distinctio possimus fugiat rem tenetur.
            Rerum fugiat numquam ipsum nulla voluptates? Natus, nostrum obcaecati id excepturi explicabo quisquam dolorum minus ipsam impedit neque rem sequi vel quam delectus sunt quod illum! Autem magni obcaecati laborum.</p>
        </div>
    </main>
    <footer class="Footer">
        <div class="Footer__div">Fax: 666-4785</div>
        <div  class="Footer__div">Facebook</div>
        <div  class="Footer__div">Instagram</div>
        <div  class="Footer__div">Telefonos: 8661478 - 26637846</div>
    </footer>
</body>
</html>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
header {
    display: flex;
    background-color: rgb(213, 195, 230);
    justify-content: space-between;
}
.Logo {
    padding: 1rem;
}
.container {
    display: flex;
    
}

.container__nav {
    display: flex;
    width: 20vw;
    list-style: none;
    padding: 1rem;
    justify-content: space-evenly;
}          


main {
    display: flex;
    background-color: rgb(184, 179, 179);
    width: 100%;
    height: 100%;
}
.Main__aside {
    background-color: salmon;
}
.box {
    background-color: rgb(231, 175, 231);
    width: 20rem;
    height: 12.2rem;
    margin: 3rem;
}

footer {
    background-color:rgb(250, 157, 146);
    display: flex;
    justify-content: center;
    height: 6vh;
}
.Footer__div {
    padding: 1rem 1rem;
} 

Flex ayudar√≠a mucho en el reto haha ūüėÖ

Las horas que me hubiera ahorrado con el flex jajaja, pero ahora a aprovecharlo

Me falta el stretch. Alguien que colabore

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 2</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main-container">
        <div class="container-item container1 ">
            <div class="item itemA"><p>A</p> </div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container2">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container3">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container4">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container5">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container6">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container7">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container8">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
    </div>
</body>

</html>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html
{
    font-size: 62.50%;
}

body {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}

.main-container {
    display: flex;
    flex-direction: row;

}

.container-item {
    display: flex;
    flex-direction: column;
    border: 0.2rem solid black;
    height: 40rem;
    width: 10rem;
}

.container1 {
    justify-content: flex-start;
}

.container2 {
    justify-content: flex-end;
}

.container3 {
    justify-content: center;
}

.container4 {
    justify-content: space-between;
}

.container5 {
    justify-content: space-around;
}

.container6 {
    justify-content: space-around;
}

.container7 {

    align-items: stretch;
}

.container8 {
    justify-content: space-evenly;
}

.item {
    margin: 0.8rem;
    padding: 0.1rem;
    background-color: cadetblue;
    border-radius: 0.3rem;
    text-align: center;
}

.itemA {
    height: 4rem;
}

.itemB {
    height: 10rem;
    width: calc(100% - 5rem);
}

.itemC {
    height: 5rem;
    width: calc(100% - 3rem);
}

.container6 .itemB {
    height: 3rem;
}

En vez de utilizar:

html {
            font-size: 62.5%;
        }

Les recomiento usar:

html {
            /* 10 pixeles */
            font-size: x-small;
        }

x-small equivale a 10px y es m√°s f√°cil de recordar.

Desde que comenc√© este curso siempre ten√≠a el problema de que al hacer el header, los textos se juntaban (al momento de probarlo con una dimensi√≥n peque√Īa) y daban un resultado raro, pero gracias a esta clase pude solucionarlo y aqu√≠ est√°n unas pruebas que acabo de hacer:

Bajo la vista de una PC:

Bajo la vista de una celular peque√Īo (iphone 5)

Me siento feliz ūüėĄ

Flexbox es un conjunto de propiedades que nos permiten distribuir nuestros elementos de una forma flexible para mejores layouts / plantillas o dise√Īos mas facilmente

Para utilizar flexbox necesitamos un contenedor padre que tenga elementos hijos. Ya que a estos son los que se haran flexiblex.

Flexbox se divide en 2 grupos de propiedades:

  • Propiedades para los elementos padre
  • Propiedades para los elementos hijo

=================================
Propiedades del contenedor padre:

  • display:flex;
    Nos permite habilitar que los elementos hijos sean flexibles

  • flex-direction:;
    row | row-reverse | column | column-reverse

  • flex-wrap:;
    no-wrap | wrap | wrap-reverse

  • flex-flow: <flex-direction> || flex-wrap;
    Es un atajo de flex-direction y flex-wrap.

  • justify-content:;
    flex-start | flex-end | center | space-between | space-around

  • align-items:;
    flex-start | flex-end | center | stretch | baseline

  • align-content:;
    IMPORTANTE: Esta propiedad solo funciona cuando hay mas de una linea de elementos.

    flex-start | flex-end | center | stretch | space-between | space-around

=================================
Propiedades de los elementos hijo

  • order:;

  • flex-grow:;
    Acepta un numero que servira de proporcion para hacer crecer el elemento en relacion a los otros.

    Si todos los elementos tienen flex-grow 1 el espacio restante se distribuira entre los elementos.

  • flex-shrink:;
    Define la habilidad de un elemento para hacerse mas peque√Īo.

    Por defecto todos se pueden hacer mas peque√Īos pero si le ponemos flex-shrink 0 el elemento no podra ser mas peque√Īo que su ancho especificado.

  • flex-basis:;
    Nos permite especificar el valor inicial que tendra un elemento.

  • flex:1 1 auto;
    Es un atajo para flex-grow, flex-shrink y flex-basis

  • align-self:;
    auto | flex-start | flex-end | center | baseline | stretch;

Recomiendo estas paginas, ayudan a complementar conceptos. la #2 ayuda a comprender mejor la din√°mica de cada una de las propiedades.

  1. Flexbox properties
  2. Flexbox css

Me fue mal en el desaf√≠o. Intento hacer todo lo que ac√° ense√Īan pero no doy.

xD después de horas de frustración con el desafió pasado la respuesta estaba en el siguiente vídeo

Flex: Nos permite distribuir el espacio entre los elementos/contenedores de nuestra p√°gina web, por el contrario que grid, flexbox es unidimensional, trabaja con filas o columnas, pero solo una de cada una. Para usar flex siempre debemos tener un contenedor padre el cual usar√° el display flex.

La configuración inicial de CSS que debemos poner siempre que queramos usar REMs como 1 REM = 10px es: * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } body { font-size: 1.6rem; }

The Flex Space-Between

The Flex Space-Around

The Flex Justify-Content center

Nmms, creo que me hubiera ahorrado casi la mitad de css si hubiera visto esta clase antes T-T

Así quedó mi reto, tuve que complementar con videos de youtube.

primero nos hacen sufrir con un reto y luego nos dan la herramienta para hacerlo de la manera sencilla :’)
estresante, pero igualmente efectivo, creo que pude aplicar bastante bien el tema de position e inline-block

Flex-> flexible

Flexbox Froggy < Flexbox Zombies

  1. usando flex-box
.parent{
display:flex;
justify-content:center;
aling-items:center;
}
  1. usando margin
.child{
margin:auto;
}

sufrí mucho con reto pasado ya que no se colocaba el mamin a la derecha pero ahora lo intente con el display flex y funciono perfecto

En resumen flexbox es una propiedad de CSS que nos permite controlar los elementos html de una manera flexible.

Requiere de un contenedor padre (contenedor flex) y sus hijos (items flex) que se puede modificar.

Adem√°s al trabajo con elementos padre e hijos, existen propiedades especificas para cada uno de ellos

RESUMEN CLASE 40:
DISPLAY FLEX

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>Flex</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main class="container">
        <div class="box1 box">
            <p>box1</p>
        </div>
        <div class="box2 box">
            <p>box2</p>
        </div>
        <div class="box3 box">
            <p>box3</p>
        </div>
        <div class="box4 box">
            <p>box4</p>
        </div>
        <div class="box5 box">
            <p>box5</p>
        </div>
        <div class="box6 box">
            <p>box6</p>
        </div>
    </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
.container {
    border: 0.3rem solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.box {
    width: 10rem;
    height: 10rem;
}
.box1 {
    background-color: blue;
}
.box2 {
    background-color: blueviolet;
}
.box3 {
    background-color: burlywood;
}
.box4 {
    background-color: cadetblue;
}
.box5 {
    background-color: coral;
}
.box6 {
    background-color: salmon;
}

Les dejo este peque√Īo pdf con una chuleta sobre css
https://drive.google.com/file/d/1WqIw3tPS6gNhEnma7iHl-PEfByKSIYGK/view

partiendome la cabeza con el reto anterior y vemos que existe display flex…Dios y lo que falta

que hermosa es la tecnolog√≠a ūüėć

Super Esta Clase, El reto anterior estuvo muy fuerte. Creo que esta bien aprender todo para los que se quieran dedicar al Front, pero este tipo de clases si nos sirven a los que nos queremos dedicar al backend

¬°Es importante saber dominar flex! Comparto mis apuntes:

Cuando implementamos display: flex en un elemento contenedor, los elementos hijos adquieren otro comportamiento, logrando posicionar cada uno de los elementos en forma lineal (fila / row), independientemente si estos elementos hijos esten implementando display: block.

Adicionalmente podemos cambiar el comportamiento de flex (flex-directiom: colum/row) para que pueda organizar los elementos en forma de columna, como tambien el orden de los mismos.

flex-wrap:wrap, Nos permite adquirir un comportamiento adaptable (responsive) respecto al tamano de la pantalla (viewport).

justify-content: center, nos permite centrar los elementos.



Mi versi√≥n del Inspector del Google Chrome pone una etiqueta ‚Äúflex‚ÄĚ en el main.
Y en el .container un botoncito con un men√ļ con opciones de flex. Qu√© maravilla:

ūü§Įūüėģ

<!DOCTYPE html>
<html lang="es">
<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>Layout Flex</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <figure class="header-logo">
            logo
        </figure>
        <nav class="header-nav">
            <ul> 
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="aside">
            <div class="aside-element"></div>
            <div class="aside-element"></div>
            <div class="aside-element"></div>
            <div class="aside-element"></div>
        </div>
        <section class="main-principal"></section>
    </main>
    <footer>
        <section class="footer-section">
            <span>Redes Sociales</span>
        </section>
    </footer>
</body>
</html>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    font-size: 62.5%;
}
header {
    background-color: crimson;
    font-family: monospace;
    color: white;
    font-size: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0.2rem 0.2rem 1rem black;
    position: relative;
}
.header-logo {
    margin: 2rem;
}
.header-nav {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    margin: 2rem;
}
.header-nav li {
    display: inline-block;
    list-style: none;
}
main {
    width: 100%;
    height: 100%;
    display: flex;
}
.aside {
    width: 25vw;
    height: 100vh;
    background-color: rgb(206, 206, 206);
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;
    min-width: 25rem;
}
.aside-element {
    width: 15vw;
    min-width: 15rem;
    height: 20vh;
    min-height: 12rem;
    background-color: white;
    background-image:url(./img/paisaje.jpg);
}
.main-principal {
    width: 75vw;
    height: 100vh;
    background-image: url(./img/website.jpg);
}
footer {
    display: flex;
    width: 100%;
    height: 100%;
    display: flex;
    background-color: rgb(100, 100, 100);
    justify-content: center;
}
.footer-section {
    font-size: 4rem;
    color: white;
    font-family: monospace;
}

40.-Display Flex o Flex Box

Nos ayuda a poder hacer un layout de manera m√°s responsive (m√°s flexible). SIEMPRE debemos de tener un container principal para usar flex.

Con flex wrap si no tienen espacio se van moviendo de manera autom√°tica.

Justify-content: nos ayuda a alinear el contenido de forma horizontal.

Aqui dejo mis notas de la clase :3

  • flex-direction (valor por defecto: row): Esta propiedad define las direcciones del eje principal, es decir, hacia donde se mover√°n los Elementos - Flex, tanto horizontalmente como verticalmente.

       **Horizontalmente**: flex-direction: row || row-reverse;
    

    Verticalmente: flex-direction: column || column-reverse;

  • flex-wrap (valor por defecto: nowrap): con la propiedad flex-wrap controlamos si el contenedor flex mueve sus elementos - flex en l√≠neas individuales o m√ļltiples.

    Valores de flex-wrap:

    nowrap: Los elementos - flex se muestran en una fila y se pueden encoger dependiendo de su contenedor - flex.

    wrap: Los elementos - flex se muestran en varias filas (si es necesario), de izquierda a derecha y de arriba abajo.

  • justify-content (valor por defecto: flex-start): alinea los elementos - flex a lo largo del eje principal de la l√≠nea actual.

    Valore de flex-wrap

    flex-start: Alinea los elementos flexibles al lado izquierdo del contenedor padre.

    flex-end: Alinea los elementos flexibles al lado derecho del contenedor padre.

    center: Alinea los elementos al centro del contenedor padre.

    space-between: Los elementos - flex tienen la misma distancia entre ellos, pero el primero y el √ļltimo elemento - flex est√°n alineados con los bordes del contenedor - flex.

    space-around: Los elementos - flex tienen la misma distancia entre ellos, incluso el primero y el √ļltimo elemento - flex.

    space-evenly: Los elementos - flex tienen la misma distancia entre ellos, así como con los bordes del elemento padre.

Aqu√≠ un aporte desde mi punto de vista: Soy muy tesudo, muy cabezota, tanto as√≠ que a veces me quedo horas en un desaf√≠o. Lo que hay que hacer es ver los comentarios de los compa√Īeros, aprender un poco y pasar a la siguiente clase. Si desean realizar todos los desaf√≠os, vuelvan una vez terminado el curso con todas las herramientas que les entreguen. No sean como yo y optimicen!

Con esto ya no me matar√© la cabeza haciendo mis headers ūü•ļ

Fue demasiada información valiosa en poco tiempo.
Tremenda clase!