Introducci贸n al curso

1

Presentaci贸n y bienvenida al curso de Frontend Developer

2

HTML y CSS: definici贸n y usos

3

驴Qu茅 son y para qu茅 nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatom铆a de un Elemento HTML: Atributos, Anidamiento y Elementos vac铆os

7

Anatom铆a de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML m谩s importantes

9

La importancia del c贸digo sem谩ntico

10

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas

11

Reto 1: Organiza el siguiente bloque de c贸digo de forma sem谩ntica

Conceptos iniciales de CSS

12

Anatom铆a de una declaraci贸n CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS m谩s usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

驴Qu茅 son y para qu茅 nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de c贸digo

Construcci贸n de componentes

22

驴Qu茅 es un componente? Analicemos nuestros dise帽os

23

Estructura con HTML y BEM de un men煤 desplegable

24

Estilizando nuestro men煤 desplegable con CSS

25

Creaci贸n de un buscador

26

Creaci贸n de un carousel de im谩genes con CSS: Estructura principal

27

Creaci贸n de un carousel de im谩genes con CSS: Detalle de cada item

Maquetaci贸n y dise帽o responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetaci贸n de la pantalla de login: Estructura HTML

31

Maquetaci贸n de la pantalla de login: Estilizaci贸n con CSS

32

Estilizaci贸n de inputs y footer en la pantalla de login

33

Media queries

34

Maquetaci贸n de la pantalla principal

35

Reto 3: Maquetaci贸n de la pantalla de Not Found

Preprocesadores

36

驴Qu茅 es un preprocesador, cu谩les existen y cu谩les son sus diferencias?

37

Instalaci贸n de SASS y configuraci贸n inicial

38

Hablemos de variables, herencia, anidamiento, operadores y m谩s

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra p谩gina de inicio

Conclusi贸n

41

Conclusi贸n del curso y paso siguiente

Bonus

42

Visualizaci贸n de un bot贸n usando storybook para HTML

43

Flexbox

Displays en CSS

16/43

Lectura

Todos los elementos en CSS son cuadrados o rect谩ngulos y aparte de eso, estos elementos tienen un comportamiento que se define a trav茅s de la propiedad display. Los display m谩s comunes y usados son: block, inline, inline-block, none, table, flex y grid. Veamos de qu茅 se tratan:

Display en CSS.png

Aportes 307

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.








馃憠馃徑Yo aprend铆 display flex y grid jugando.
Les recomiendo usar estos juegos para aprender y mejorar sus habilidades con estos dos display
馃搶Para display flex
http://flexboxfroggy.com/#es
http://www.flexboxdefense.com/
馃搶Para aprender grid
https://cssgridgarden.com/#es

Estos nos son los 煤nicos juegos, sin embargo si sabes de alg煤n otro, d茅jalo en forma de respuesta a este aporte

Hola, son los mismos enlaces del post, no pude copiar los enlaces asi que鈥
Flexbox
Grid

Display: Block, inline, inline-block

Display: Table

Display: Flex

Display: Grid

Display Block e Inline

Display Flex con Justify Content

Display Grid

https://flexboxfroggy.com/#es
https://cssgridgarden.com/#es
Yo aprend铆 flexbox con estos dos juegos!

Los enlaces que comparti贸 la profesora sobre Flexbox y CSS Grid:

Juegos para practicar (muy recomendados)
Flex : https://codepip.com/games/flexbox-froggy/
grid : https://cssgridgarden.com/#es

Esto les puede ayudar a hacerse una idea visual!

Muchas Gracias por la introducci贸n a los tipos de Display.
Si alguien quiere practicar Flexbox les dejo Este Juego
Tambi茅n si lo que buscan es practicar Grid, les dejo es otro Juego
Si de pronto lo que quieres practicar son los selectores. Esta este juego de CSS Dinner

En los enlaces se puede encontrar una gu铆a completa sobre Flexbox y sobre CSS Grid:

  1. A Complete Guide to Flexbox
  2. A Complete Guide to Grid

flexboxfroggy

Recomiendo mucho este juego, ayuda a practicar de una forma sencilla las propiedades 鈥榙isplay鈥 y 鈥榝lex-direction鈥.

GRID GARDEN
隆Bienvenido a Grid Garden, donde escribir谩s tu c贸digo CSS para cultivar tu jard铆n de zanahorias! Riega solo las 谩reas que tienen zanahorias usando la propiedad grid-column-start.

Grid Garden

Aca pueden aprender jugando, me ayudo mucho https://cssgridgarden.com/#es

Para que no se vayan perdiendo por alla abajo jaja, actualicemos:

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

Guia de Grid
https://css-tricks.com/snippets/css/complete-guide-grid/

Muy buena informaci贸n, gracias. Ya que no se pueden copiar los links de la imagen, dejo por aqui:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/

Resumen:

  • Block: organiza de arriba abajo elementos que tiene por defecto este <p>,<h1>,<section> y <ul>

  • Inline: elementos organizados de izquierda a derecha elementos que tiene por defecto este <span>,<em> y<b>

  • **Inline-block: **es similar al anterior solo que este si respeta el width y el height que se le asigne a los elementos.

  • **None: **ocultar elementos sin eliminarlos por completo del DOM

  • Table: se comportar los elementos como elemento <table>

  • Flex: centra los elementos, alinearlos a la derecha o izquierda, sin embargo felxbox no ayuda con esto pero para que funcione es indispensable la propiedad diplay:flex es el elemento padre que por defecto alinear谩 los elementos hijos de izquierda a derecha, suele acompa帽arse con propiedades (justify-contente y aling-items) trabajar con flebox no basta s贸lo con escribir display:flex (Link para aprender c贸mo se maneja https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
    Grid: el que le sigue al sistema layout y es mucho m谩s poderosos CSS Grid, para implementarlo debemos hacer usos de display:grid en el elemento contenedor o elemento padre. Al igual que flexbox no basta con usar este display (Link para aprender c贸mo se maneja https://css-tricks.com/snippets/css/complete-guide-grid/)

Estar铆a bueno que las explicaciones de GRID como as铆 de FLEX sean mas detalladas, ya que termina escribiendo mucho y diciendo poco. Considero que al pagar por platzi no quiero salir a buscar definiciones ni gu铆as en otros links, quiero que me dejen todo lo mas detallado posible.

You can trying your own this blowmind game 鉂わ笍 ILOVEIT https://flexboxfroggy.com/#es

Un juego incre铆ble para practicar sus habilidades con flexbox froggy.
De hecho tomenlo primero, es genial 10/10

Muy claro los ejemplos de display. Tambien pueden jugar un rato con https://flexboxfroggy.com/

![](

Este juego es para pr谩cticar y mejorar nuestras habilidades con el grid
https://cssgridgarden.com/

Aqu铆 dejo juegos de flex box y grid para que lo entiendan mejor.
Flexbox: https://flexboxfroggy.com/
Grid: https://flexboxfroggy.com/

La diferencia de uso entre Flexbox y Css Grid, es que CSS Grid es para el layout de 2 dimensiones y Flexbox para una dimensi贸n. Es decir, CSS Grid, sirve para aplicar el layout a toda la p谩gina, y Flexbox para aplicar layout a elementos de la p谩gina.

Me doy la tarea de escribir los links
Flexbox
CSS Grid

No debieron poner el texto como imagen. No ayuda a leer la documentaci贸n propuesta.

Este es el link general

https://css-tricks.com/snippets/css/
Estos son los link dejados en la lectura :
Flex: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid: http://css-tricks.com/snippets/css/complete-guide-grid/

aqu铆 les dejo un juego para aprender sobre flex
https://flexboxfroggy.com/#es

Les recomiendo el siguiente juego did谩ctico para comprender display:flex Es excelente!

Aprende como funciona flexbox en este divertido sitio:
https://flexboxfroggy.com/

Adjunto los links de las gu铆as.
Flex: Link
Grid: Link

Les dejo un art铆culo de Freecodecamp sobre 9 videojuegos para aprender c贸digo, est谩n geniales. https://www.freecodecamp.org/news/best-coding-games-online-adults-learn-to-code/

para aprender m谩s sobre css grid y flex anexo este post de alguien de aqui de platzi https://platzi.com/blog/flexbox-vs-css-grid-cual-es-la-diferencia/

Le comparto es enlace https://cssgridgarden.com/#es, para m铆 fue de gran ayuda. Espero que para ustedes tambi茅n los sea.

Este juego es muy bueno para pr谩cticar lo anterior: https://flexboxfroggy.com/#es

Super! Si quieren aprender flexbox pueden hacerlo jugando en esta p谩gina Flexbox Froggy

Siempre me hab铆a rehusado a aprender Grid ya que con Flexbox pod铆a acomodar todo a mi gusto, el 煤nico problema es que ten铆a que crear infinidad de contenedores y l铆neas de c贸digo CSS para lograrlo, al ver la documentaci贸n sugerida por la profe me pude dar cuenta que Grid es b谩sicamente una versi贸n de flexbox much铆simo m谩s mejorada y sin necesidad de quebrarme la cabeza en hacer tantos contenedores 馃ゴ. He aqu铆 la importancia de aprender de todo y nunca cerrarse a ninguna idea nueva.

Tambi茅n encontr茅 este: cssgridgarden, es parecido al de la ranita pero esta vez se usan las zanahorias con el uso de la propiedad display: grid.

Buen resumen y gran ayuda desde que sali贸 Flexbox y Grid, os comparto un par de herramientas que ayudan a generarlo pero recomiendo usarlos una vez lo sep谩is aplicar vosotros/as y solo usarlo para ahorrar tiempo.

CSS Grid Generator
Flexbox Help

Obviamente no puede haber una clase de tipos de display, sin que alguien ponga el mitico flexbox:
https://flexboxfroggy.com/#es

No se puede vivir sin Displays, hay muchos trucos que se pueden hacer 馃槂.

Ac谩 van a encontrar juegos para practicar flex y grid.
https://codepip.com/games/grid-garden/

Aqui la practica que hice:

display en css.css

h2 {
    text-align: center;
}

p {
    background-color: #9B72AA;
    width: 30px;
    height: 30px;
    border: 2px solid #3C5186;
    padding: 4px;
    margin: 2px;
}

.d1 {
    border: 2px solid #3C5186;
    margin-bottom: 10px;
    background-image: linear-gradient( 68.2deg,  rgba(255,202,88,1) 0%, rgba(139,73,255,1) 100.2% );
    border-radius: 10px;
}

.display_block {
    display: block;
}

.d2 {
    border: 2px solid #3C5186;
    margin-bottom: 10px;
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(161,255,255,1) 11.3%, rgba(6,255,255,1) 41.2%, rgba(0,216,216,1) 77.8% );
    border-radius: 10px;
}

.display_flex {
    display: flex;
    justify-content: space-around;
}

.d3 {
    border: 2px solid #3C5186;
    margin-bottom: 10px;
    background-image: linear-gradient( 69.7deg,  rgba(244,37,243,1) 1.4%, rgba(244,87,1,1) 36.2%, rgba(255,204,37,1) 72.2%, rgba(20,196,6,1) 113% );
    border-radius: 10px;
}

.display_flex_column {
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
}

.d4 {
    border: 2px solid #3C5186;
    margin-bottom: 10px;
    background-image: linear-gradient( 102.1deg,  rgba(96,221,142,1) 8.7%, rgba(24,138,141,1) 88.1% );
    border-radius: 10px;
}

.display_flex_column_reverse {
    display: flex;
    margin-bottom: 10px;
    flex-direction: column-reverse;
}

display en css.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="displayencss.css" type="text/css">
</head>
<body>
    <div class="d1">
        <h2>display : block</h2><hr>

        <div class="display_block">
            
            <p>[1]</p>
            <p>[2]</p>
            <p>[3]</p>
            <p>[4]</p>
        </div>
    </div>

    <div class="d2">
        <h2>display : flex</h2><hr>

        <div class="display_flex">
            
            <p>[1]</p>
            <p>[2]</p>
            <p>[3]</p>
            <p>[4]</p>
        </div>
    </div>

    <div class="d3">
        <h2>display : flex + flex-direction: column</h2><hr>

        <div class="display_flex_column">
            
            <p>[1]</p>
            <p>[2]</p>
            <p>[3]</p>
            <p>[4]</p>
        </div>
    </div>

    <div class="d4">
        <h2>display : flex + flex-direction: column_reverse</h2><hr>

        <div class="display_flex_column_reverse">
            
            <p>[1]</p>
            <p>[2]</p>
            <p>[3]</p>
            <p>[4]</p>
        </div>
    </div>

</body>
</html>

Recomiendo estudien la documentaci贸n de Flex y de Grid antes de continuar鈥
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/

Si tienen duda y poco tiempo.
Les recomiendo este v铆deo https://youtu.be/RzU_yqAWxic

Vengo del curso de CSS Grid Layout, hermoso.馃憣


Busque la documentaci贸n de flex para poder alinear el logo y el texto del navegador y lo logre por fin, adicional del curso de Mobile First aprend铆 a usar los gradientes para crear el degradado del fondo


header{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    background: linear-gradient(207.8deg, #73d6c6 16.69%, #BEAEE2 100%);
}

En platzi encuentras un curso especial de Grid

https://platzi.com/cursos/css-grid-layout/

Ser铆a bueno que para los enlaces que est谩n dentro de 茅ste documento(como se encuentra como imagen) se a帽adan en una secci贸n dentro de esta misma clase asi como en los videos hay una pesta帽a con enlaces, o cambiar la visualizaci贸n de esta informaci贸n a markdown o algo que permita acceder a los hipervinculos, muchas gracias!

Para estilizar lo que hicimos en la clase anterior y centrar verticalmente el logo de platzi video utilic茅 display: flex.

<style>
    body {
        margin: 0;
    }
    header {
        background-color: #21C08B;
        width: 100%;
        height: 80px;
        display:flex;
        align-items: center;
    }

    header img{
        width: 200px;
    }
</style>

Dejo aqu铆 la definici贸n literal de los 3 primero bloques como complemento. Pueden ver tambi茅n el curso de Desarrollo web online para complementar este curso. Ambos son excelentes
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.

Podemos encontrar muchos valores para la propiedad display, entre ellos inherit, table, list, flex, initial.

Si quieres profundizar mas en ellos recuerda visitar la documentacion de la W3C

Muy buen post algo que les recomiendo si quieren estudiar mas a fondo como funcionan los displays y como trabajar con ellos en la carrera de arquitectura frontend hay diferentes cursos muy 煤tiles.
隆Saludos 馃憤 !

Los que a煤n no vieron el curso definitivo de HTML y CSS se los recomiendo mucho. En esta clase se explica el tema de Display en CSS: https://platzi.com/clases/2008-html-css/31057-display/

Hay un curso espectacular de CSS-Grid aqu铆 en Platzi. Ya lo hice, se los recomiendo.
Curso de CSS-Grid

Pagina para practicar CSS GRID LAYOUT

El curso que imparte Leonidas es sobre CSS Grid Layout 馃槃

me cuentan como les va con el 煤ltimo reto. http://flexboxfroggy.com/ 馃惐鈥嶐煔

Buen art铆culo para conocer la diferencia entre Flex y Grid: Grid y flexbox

esperaba un video con una gran explicaci贸n sobre esto 馃槮 馃槮
x鈥(

驴Qu茅 recomiendan para poder mejorar en Grid?

Recomiendo el curso de CSS GRID, al principio tiene algo de relleno pero esta muy bueno 鉂わ笍

Gracias por la informacion

Life to CSS Grid!

Flex y Grid son los m谩s importantes para el Responsive Desing 馃枼馃捇馃摫

p谩gina para practicar CSS GRID LAYOUT

creo que los displays que mas me gustan son display grid & display flex

te odio display: grid

El modo de display Flex y grid nunca los he utilizado

Block vs Inline

Si quieres practicar y entender m谩s a cerca del display en CSS recomiendo esta pagina:
https://flexboxfroggy.com/#es

Es aprender CSS display jugando 馃挌

Por los momentos no he usado el display grid鈥 Espero que en el curso lo mencionen

Muchas gracias por el dato ya realice mis apuntes鈥

Gracias

Genial! sin duda flex y grid son los m谩s modernos, y en serio, flexbox ayuda much铆simo, una caracter铆stica de flexbox es que casi todos los comportamientos de los estilos de los hijos se definen en el padre, y de CSS Grid uff鈥 los grid templates son lo mejor!

Apartir de aqu铆 si queremos saber qu茅 propiedades soportan los navegadores tenemos: https://caniuse.com/

Es importante recalcar que el **display: inline **es el comportamiento que utilizan las letras y las palabras, como se escriben las lenguas romances: de izquierda a derecha y con espacios entre cada una. Cuando utilizamos display: block se comportan como bloques en torre: de arriba a abajo.

Truco | Tip.
**display: inline-block **combina ambas caracter铆sticas, por lo que podemos utilizar las reglas aplicadas a las etiquetas de texto a los elementos que se comporten como display: inline-block y *display:inline

Podemos aplicar un text-align: center a un div con display:inline-block, por lo que 茅ste se centrar谩.
Hagan la prueba.

Super recomendado el curso de CSS Grid del Buen Leonidas

css-grid awesome 鈥