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

Nuestro nuevo sistema de layout: CSS Grid

29/43
Recursos

Con CSS Grid podemos maquetar todo el layout/estructura general de nuestro sitio para que se adapten a diferentes tama帽os de pantalla, lo que conocemos como dise帽o responsivo.

Al igual que Flebox, tenemos propiedades diferentes, tanto para el contenedor como para los elementos, y podemos usarlos dependiendo de nuestras necesidades.

Aportes 236

Preguntas 6

Ordenar por:

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

Hay un juego parecido al de flex box pero para grid
https://cssgridgarden.com/#es

Consejo del profesor Leonidas Esteban: "Flexbox para componentes, CSS Grid Layout para estructura"
Diferencias entre flexbox y grid:
https://platzi.com/blog/flexbox-vs-css-grid-cual-es-la-diferencia/

Est谩s aplicaciones son geniales para aprender!

M谩s juegos para aprender CSS aqu铆 -> https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f

Les recomiendo realizar el curso de CSS Grid Layout aqu铆 en Platzi.

Q cvr es aprender con jueguitos xD

Muy buen juego, en este hubo que pensar un poquito mas que en el de flexbox

El shorthand m谩s complicado con el que se van a topar es el
"grid-template".

La propiedad 鈥済rid-template鈥 junta en una sola propiedad, las propiedades 鈥済rid-template-areas鈥, 鈥済rid-template-rows鈥, 鈥済rid-template-columns鈥.

Aprendiendo la estructura 鈥済rid-template鈥 tienen una buena parte dominada del css grid.

Un ejemplo b谩sico:

.container{
	grid-template:
		"header header" 2fr
		"aside main" 6fr
		"aside footer" 1fr
		/ 3fr 7fr;
}

.container header {grid-area: header;}
.container aside {grid-area: aside;}
.container footer {grid-area: footer;}
.container main {grid-area: main;}

Tambi茅n Juan Andres Nu帽ez comparte un tutorial sobre Grid:
CSS Grid Pr谩ctico

creo que este grid garden estaba mas dificil.

CSS Grid layout contiene 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.

Al igual que las tablas, el grid layout permite autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos m谩s dise帽os y de forma m谩s sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadr铆cula podr铆an posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.

Grid Implicito:

Elementos que tu defines o claras

Grid Explicito

elementos que var铆an seg煤n el tama帽o del navegador y tama帽os definidos

Recomiendo este curso para ganar fortaleza en el manejo de css-grid-layout:
https://platzi.com/clases/css-grid-layout/
Lo dicta Leonidas Esteban.

El recuros de Jen Simons: https://labs.jensimmons.com
y el juego de los mismos creadores de flexbox frlogy para Grid: https://cssgridgarden.com

En su momento algunas personas utilizaban tablas para realizar la maquetaci贸n. Hoy en d铆a GRID facilita y soluciona todo de la mejor manera!!! Que importante!!!

Hasta aqu铆 llegu茅 yo 馃槮

El layout que se puede construir con css grid es como posicionar con coordenadas, me gusta mucho m谩s que flex, supongo que cada uno tendr谩 su caso de uso verdad? alguien podr铆a decirme cual ser铆a el caso de uso para uno y otro?

Me encant贸 el ejemplo de CSS Grid de Jen Simmons, gran canal y muy buenos aportes en general en la secci贸n de Archivos y Enlaces.

Lo mejor del curso es que la profesora nos deja gran documentaci贸n

驴Alguien me puede explicar por favor el tema de las diferentes unidades fr y em, pude desarrollar el juego del jard铆n p
ero aun no entiendo como funcionan esas unidades?

con el juego de Grid Garden aprendes mucho mas rapido, gran dev el que creo ese juego

隆Has ganado! Por el poder de CSS Grid, has sido capaz de cultivar suficientes zanahorias para que Froggy pueda cocinar su mundialmente famosa tarta de 20 zanahorias. Qu茅, 驴esperabas a alg煤n amigo diferente?

Si has disfrutado de Grid Garden, 茅chale un vistazo a Flexbox Froggy para aprender otra nueva caracter铆stica de dise帽o en CSS. Tambi茅n puedes mantenerte al d铆a de mis otros proyectos en mi blog o Twitter.

驴Quieres apoyar Grid Garden? Prueba los mejores cursos de dise帽o web y programaci贸n ofrecidos por Treehouse. 隆Y comparte Grid Garden con tus amigos y familia!

GRID GARDEN
隆Has ganado! Por el poder de CSS Grid, has sido capaz de cultivar suficientes zanahorias para que Froggy pueda cocinar su mundialmente famosa tarta de 20 zanahorias. Qu茅, 驴esperabas a alg煤n amigo diferente?

Si has disfrutado de Grid Garden, 茅chale un vistazo a Flexbox Froggy para aprender otra nueva caracter铆stica de dise帽o en CSS. Tambi茅n puedes mantenerte al d铆a de mis otros proyectos en mi blog o Twitter.

驴Quieres apoyar Grid Garden? Prueba los mejores cursos de dise帽o web y programaci贸n ofrecidos por Treehouse. 隆Y comparte Grid Garden con tus amigos y familia!

Recomiendo instalar Firefox Developer edition para trabajar con Grid! tiene muy buenas funciones!

驴El css grid es como el sistema de grillas de bootstrap?

驴C贸mo se podr铆a simplificar este c贸digo de Grid:
grid-template-columns: 1fr 1fr 1fr; ?

No mostro al poderoso grid-area, invest铆guenlo es brutal

Les recomiendo bastante el juego de CSS grid, no s贸lo practicar谩n sino que tambi茅n aprenden, ya que ah铆 explican varias funciones.

No se que opinen los dem谩s pero siento que en temas importantes, se pasan de largo solo con enlaces a otros sitios y se queda mucho tiempo en temas mas 鈥渟encillos鈥

Aqui les dejo el link del curso completo de CSS Grid:
Curso de CSS Grid
Suerte 馃檶

Aprender jugando, luego leer la documentaci贸n y por ultimo crear un layout para practicar no tiene comparaci贸n

Definitivamente debo buscar m谩s documentaci贸n de Grid.
Ya no supe pasar 馃槮

Recordando, CSS siempre se ha utilizado para dise帽ar nuestras p谩ginas web, pero antes no hacia un buen trabajo. Primero, usamos tablas, luego flotantes, posicionamiento y bloque en l铆nea, pero todos estos m茅todos fueron esencialmente dificiles. Flexbox es una excelente herramienta de dise帽o, pero su flujo es unidireccional 隆Grid y Flex en realidad funcionan bastante bien juntos!
Grid es la mejor soluci贸n para hacer layouts nativa de CSS!

Siempre dec铆a un profesor de Inform谩tica, siempre es mejor Leer las cosas de las p谩ginas Oficiales

Muy fan de aprender as铆 jeje, divertido y al ser repetitivo se quedan bastante bien, toca ahora empezar a aplicarlo a los proyectos propios.

Todo iba bien en la ranita, y en las zanahorias, pero los 煤ltimos niveles que era de combinar se empez贸 a complicar., lo bueno es que lo pude terminar.

C贸digo de ultimo nivel de grid garden

grid-template: 1fr 50px / 20% 1fr;```

Les dejo est茅 video que acabo de encontrar (tiene subtitulos en espa帽ol), muestra estilos de una sola l铆nea que nos pueden ayudar mucho a la hora de crear nuestros layout con CSS Grid.

10 disposiciones modernas de una l铆nea en CSS

Excelente documentaci贸n y buenos juegos para fomentar la practica les recomiendo los diferentes cursos de la carrera arquitectura frontend donde aprender谩n mas ha detalle de estos conceptos .

justify-content:flex-end; hace un efecto inverso cuando los elementos est谩 situados al lado derecho

Me encanto de nuevo la pagina para jugar con CSS Grid siento que aprendo mejor 馃槃

DEBEN MODIFICAR EL
grid-area:g-r-s/g-r-e/g-c-s/g-c-e

PORFAVOR DECRETO DE URGENCIA CSS

sinceramente no me gusto este video, no ense帽a b谩sicamente solo te envia a otros lugares a que te ense帽en como se hace o como funciona 馃槖 un poco decepcionado ciertamente por las expectativas que tengo de esta plataforma de educaci贸n

Flex & CSS Grid quedaron mucho m谩s claros con esos juegos!

Dejo una alternativa a Flexbox/Grid que me pareci贸 buena. https://youtu.be/syG7ljxqzNg

Gracias por la documentaci贸n. Muy completa la informaci贸n.

hola compa帽eros les recomiendo que si quieres ir mas a fondo de este gran tema como lo son los grid
pasen hacer el curso con el profesor leonidas explica muy bien super entendible y no es tan largo son como 2 horas de contenido
https://platzi.com/clases/css-grid-layout/

En resumen, CSS Grid es primero antes que cualquier framework basado en grillas como Bootstrap, de ah铆 la importancia para entenderlo y aplicarlo en nuestros proyectos.

Excelente el juego de Grid Layoout, lo complete鈥 馃憤

el responsive es un gran plus, super necesario ahora que la gente navega tanto desde el celular,

I鈥檝e always want to learn grid, Now platzi has a great course for that, im gonna take when y done with this one, i cant wait

Ejemplo de layout:

HTML
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
CSS
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

![](

Uy鈥 ahora si le batalle en los ultimos niveles.

Hola a todos les comparto los links para entrenar lo visto en la clase anterior y en esta clase:

Por si no lo conoc铆an, CSS Grid Garden es un juego para aprender y practivar CSS Grid:

https://cssgridgarden.com/

(鈼忊欌棥鈥欌棌)

Muy interesante, debe ser 煤til para la maquetaci贸n de sitios. Creo que revisar茅 el curso de Platzi de esto.

Excelente el desarrollo de esos juegos, es la forma m谩s simple de comprobar tu entendimiento de los sistemas de Layout

Asi es como va quedando mi pagina, no es mucho pero es lo que hay se aceptan comentarios.

Grid Garden me ayud贸 bastante a reforzar Grid!

Yo me puse a jugar jajajaj

Me gust贸 mas Grid SIUUU

Genial aprender con juegos

MI juego finalizado

Un plugin para chrome es este Gridman, no es como las funcionalidades que tiene firefox instaladas por defecto en su navegador, pero ayuda bastante.

Esta s煤per bonito el juego de la rana!!

LISTO!


El juego es muy bueno para reforzar, el ultimo nivel se me complico en poco pero pude lograrlo:)

Excelente juego, me gust贸 mucho

https://codepip.com/ y aqui encuentran todos los juegos para practicar muchos temas de CSS ademas de felx y Grid.

Que buen contenido de estas clases antes saber que para que los elementos estuvieran alineados utilizaba tablas pero con eso de CSS Grid parece que me ayudara de ahora en adelante

Flexbox fluye segun la imagen

Me encanto el juego, una forma muy din谩mica de conocer las diferentes formas de aplicar Grid 馃挌

Documentaci贸n CSS Grid

gran juego.

Grid Garden Completado!

La verdad se aprende un mont贸n con Grid Garden, y lo mejor de todo es que es divertido 馃槃

gracias

Grid es muy 煤til cuando se trabaja con cards para, por ejemplo, una lista de productos, cursos, etc鈥

Que interesante desafio sera mezclar flexbox con ccs grid

馃槑

馃槑

otra forma de aprender es jugando, asi que animo

Gracias por el material de estudio 馃挌. Excelente canal Layout Land 馃憣

esto es como boostrap?

El juego me parece genial !


Listo!

GRID GARDEN superado 馃槂

GRacias

Que bonito es CCS Grid!! :鈥)

grid area se las recomiendo mucho