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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Flexbox

43/43
Recursos

Aportes 262

Preguntas 24

Ordenar por:

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

Les comparto un simulador de Flexbox que desarrollé. Es para ir viendo como se comportan los atributos definidos en el flexbox container. La idea es ir modificando los inputs del flexbox-container e ir visualizando el comportamiento en los flexbox-items: https://juliansci.github.io/css-flexbox-simulator/

Olv, aprendí más en esta clase que las 3 horas que me la pase con la chica. Wow eres un crack.

Entre el contenido del curso y la ultima clase salio esto:

Donde estan las ranitas?

Interesante aprendí trucos que desconocía, buen cierre del curso

Yo quisé aprovechar para hacerle un detalle a mi novia

Yo hice esto a base de Flexbox…

Agregué estas fuentes de google.fonts hice la animación en la clase con transición y todo, rellené los espacios con imágen y textos ordenados con flex, y para el footer también ordené los li de una ol y les puse un hover para que al pararse se cambie el color y el list-style-type.


Resultado:

Hay algún curso con este maestro?
Esta clase fue realmente productiva.

Porque rayos no dio todo el curso el edward

Es muy relevante escuchar la explicación de como se aplican y funcionan las propiedades y métodos desde la comprensión de su uso, da claridad y se pueden intuir los resultados. Buen Cierre.
![](

Me llevó varias horas pero este es el resultado!! Espero que les guste…

(

¡Saludos!
Excelente clase y explicación práctica del Flex, aquí adjunto la imagen del Layout que creé.

Uff parce, a practicar y practicar, este crack hace mirar eso fácil, mejor dicho QUE CHIMBA. 🚀

Lo del footer esta impresionante, yo muchas veces batalle en los sistemas donde desarrolle con eso

Me encantó esta clase, me gustaría este tipo de ejercicios en un curso.

Excelente clase, se entiende muy bien todo. ¿Saben si @SrRamos da algún acerca de Desarrollo Web?

Aquí va el reto. Agrego que la clase fue excelente muy bien explicado y facil de interpretar el contenido gracias!

Muy buena clase, resume super bien el uso de flexbox y lo que mas me agradó es que explica el por qué y qué es lo que hace cada propiedad de manera simple y muy entendible.

<header class="header">Logo</header>
<ul class="menu">
  <li class="menu-item">Home</li>
   <li class="menu-item">Gallery</li>
   <li class="menu-item">Contacto</li>
</ul>
<section class="container">
  <section class="content">Content</section>
  <aside class="aside">Aside</aside>
</section>
<ul class="footer">
  <li class="footer-item">Politicas de uso</li>
   <li class="footer-item">contacto</li>
   <li class="footer-item">About</li>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Muli', sans-serif;
}
body {
  display: flex;
  height: 100vh;
  flex-flow: column;
  font-size: 16px;
}
.header {
  background: #668DB7;
  height: 3rem;
}
.container {
  display: flex;
  height: inherit;
} 
.content {
  background: #E7EB90;
  flex: 1;
}
.aside {
  background: cyan;
  flex: 0 0 25%;
}
.footer {
  background: #78B0CC;
  height: 2rem;
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
.menu {
  display: flex;
}
.menu-item {
  list-style: none;
  flex: 1;
  background: green;
  line-height: 3rem;
  text-align: center;
  trasition: flex .7s;
}
.menu-item:hover {
  flex: 8;
}
ul.menu li:nth-child(1) {
  background: #EAEAE8;
  color: black;
}
ul.menu li:nth-child(2) {
  background: #ADADAD;
  color: black;
}
ul.menu li:nth-child(3) {
  background: #928E99;
  color: black;
}```

Qué brutal está clase

Muy buena clase con esto entiendo un poco mejor flex, gracias SrRamos, les comparto la liga del ejemplo que genere

https://49p3p.csb.app/

esta construido en sandbox

https://codesandbox.io/s/ejemploflex-49p3p

Excelente clase de flexbox!

Listo el reto:

Mi resultado

Excelente clase, fue la que mas me gusto del curso, en serio.

Sin duda este bonus es genial porque complementa una parte que a mi parecer fue tocada de forma muy por encima dentro del curso general.

Si señor, este curso pedia una clase de FlexBox y sin duda es un buen broche a este curso. Gracias Edward!

Esta era la clase que necesitaba para entender que hace Flexbox 🤓

Muy buen curso.

Tremenda introducción a Flexbox… recomendadisimo!!!

Genial ultima clase explicando más a fondo y poniendo un ejemplo más real de la utilización de flexbox!

A por el siguiente curso de la Escuela JS 😃

Así hice el reto por mi cuenta y funciona Responsive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex-box</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        display: flex;
        height: 100vh;
        flex-flow: column nowrap;
        font-family: sans-serif;
        font-size: 20px;
    }

    .header {
        background-color: gold;
        width: 100vw;
        height: 4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }

    .item {
        padding: 5px;
        background-color: blueviolet;
        border: 1px solid black;
        width: 25%;
        height: 4rem;
    }

    .main__container {
        background-color: aqua;
        width: 100vw;
        height: inherit;
        display: flex;
    }

    .main-item {
        background-color: greenyellow;
        border: 1px solid black;
        width: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .aside {
        background-color: chocolate;
        border: 1px solid black;
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer {
        background-color: coral;
        width: 100vw;
        height: 6rem;
        margin-top: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
    <header class="header">
        <div class="item">Home</div>
        <div class="item">Gallery</div>
        <div class="item">About</div>
        <div class="item">Contact</div>
    </header>

    <div class="main__container">
        <div class="main-item">Main section</div>
        <aside class="aside">Aside</aside>
    </div>
    <footer class="footer">Footer</footer>
</body>
</html>```

Mi versión del reto.

Practicando un poco, experimentando y probando con las propiedades llegué a este resultado usando solo flex como display 😄, muy buena clase.

Excelente clase!!!
Reto cumplido

https://github.com/roxanaisadora/flexbox_anime

A mi me encato todo el curso. La chica es muy buena y su explicacion fue clara. Muy agradecido por todo el esfuerzo. Edwar tambien tiene un alto conocimiento de desarrollo FE. Un abrazo al equipo que realizo este curso. 😀😀

Les comparto mi resultado de la practica de esta clase, aun me falta por mejorarlo y hacerlo responsive. Se aceptan sugerencias y comentarios.

Solo como comentario, puede ser que a nadie le importe, pero en algún lugar necesito desahogarme jajaja, la experiencia como estudiante se siente muy feo si primero se despiden en el video 40, luego en el 41 me dan un complemento de 4 minutos, y después el último video con un nuevo tema y de 20 minutos!!, tienen que entender que algunos ya llevamos horas desde el video 32 y lo único que queremos es poder terminar y hacer el examen, esto de poner este video al último se siente feo.

Muchas clases resumidas en una

Muy buena explicación de Flex. Habrá que hacer pronto ese curso, así como el de Grid.

WOOWWW
¡No sabia que podríamos hacer ese tipo de animaciones con flex!

Excelente cierre de curso, un gran material de apoyo!

Más clases de este profe. por favor.

Esta debería ser la primera clase del curso…

Esta clase estuvo muy buena para mí fue de lo mejor que he aprendido en el curso a utilizar la propiedad flex en CSS antes pensaba que maquetar con table era la solución

Esta es definitivamente la mejor clase de todo el curso

Esta clase estuvo excelente!!! Muy buen ejemplo para entender FLEX, Muchas gracias profesor Edward.

Aquí dejo mi resultado y logre hace el layout de Platzi 💚💚💚

Super bien explicado. Ya he abordado antes el tema de Flexbox y siento que ayuda mucho a hacer layouts de forma rápida.

No le agregué colores, pero si algunos elementos adicionales para probar el uso del flexbox. Sin embargo, falta mucho para hacerlo responsive.

Gracias, me gusto bastante ese efecto que hacer ver el menu como estirable… xD

Hola!, ¿Alquien sabe como puedo hacer que ese mismo front desarrollado sea ajustable a pantalla móvil? Gracias

Buen día, una pregunta: ¿La etiqueta aside puede ser reemplazada con un div sin que genere conflicto en la maquitación? Gracias

Wow sin palabras…al grano y sin muchos rodeos y para rematar sin usar autocompletado de VSC 😨

Me gusto mucho esta clase

Muy buena explicación de Flexbox… muy importante para los que estamos iniciándonos Muchas gracias…

platzi esta bien ahora. Pero si cada clase de cada curso fueran tan bien explicada y con ejercicios prácticos, platzi sería mil veces mejor

Súper enriquecedora esta clase, ni sentí los 20 minutos que dura y los trucos que nos dio excelentes!!

Esta clase me recuerda como eran todos los cursos de Platzi.
Gran contenido.

uffff.Entendi a la perfección con este profesor

El mejor vídeo de este curso.

que aplicacion usa para programar ?

Excelente clase! 100%… Gracias

Excelente clase, lo hace ver muy fácil. Gracias

Me encantó ésta clase…!! 😄

Demasiado bueno este cierre

excelente!

Increíble repaso de Flexbox!
La mejor clase para el final

La verdad estoy muy sorprendido

Excelente clase

flex-grow

The flex-grow CSS property sets the flex grow factor of a flex item’s main size. It’s similar to the grid fractions

flex-grow: 3;
flex-grow: 0.6;

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

Gracias a esta clase logre realizar esta website tipo E-Commerce😎

Pueden verla aquí 👉 Hueca Manaba - E-Commerce
.

Revise dos veces por esos trucos, muy buen video.
-Truco del margin-top:auto
-Truco del height:inheredetid;
-Truco de flex:0 0 25%; flex:1 0 auto;
-Truco del line-height:parent-height;

cuando aprendes mas en una clase que en todo el curso !!!
xD

Excelente clase! por más clases así!

Ahí va el reto.

Fui muy feliz en esta clase. Entendí varios conceptos que tenia en el aire! 😃


Ahí va 😋

Que clase tan productiva. Excelente ese repaso, super complemento de las clases anteriores.

Les comparto lo que hice en el reto de esta clase, aun me falta hacerlo responsive, se aceptan sugerencias y comentarios.

Que manera tan sencilla de enseñar… muy bueno.

Muy buena ésta clase. Descubrí nuevas cosas.

Desafio

![](

Quise jugar un poco con lo aprendido, más agregar un par de detalles

Excelente demostración de flexbox!!!

genial!!

Súper esa pagina para ir viendo lo que estamos haciendo, esta genial. Gracias!!

Genial!

Muy interesante

woooooooow excelente clase 😄

muy muy practico para entender mas sobre CSS en pocas lineas

Wowwww cuando pensé que lo había visto todo con Stefany… llegó este profesor a mostrarme que en realidad no se nada hahahaha que me falta mucho por aprender me refiero…
Excelente clase!!

Excelente clase, me deja más claro el tema de flexbox, muy buen profesor.