Curso de Diseño Web con CSS Grid y Flexbox

Curso de Diseño Web con CSS Grid y Flexbox

Instruido por:
Estefany Aguilar
Estefany Aguilar
Intermedio
3 horas de contenido
Ver la ruta de aprendizaje
Curso de Diseño Web con CSS Grid y Flexbox

Curso de Diseño Web con CSS Grid y Flexbox

Progreso del curso:0/28contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/28contenidos(0%)

Descubre qué ha cambiado en nuestro medio

Material Thumbnail

Todo sobre el diseño de páginas web acaba de cambiar

02:31 min

Conceptos que forman parte del diseño en CSS

La importancia de recordar las herramientas existentes

01:05 min

Material Thumbnail

Flujo normal del documento: Display block, inline e inline-block

06:17 min

Material Thumbnail

Contextos de formato: Formato de Contexto de Bloque (BFC)

06:41 min

Material Thumbnail

Posicionamiento + Dinámica: ¿Cómo se vería?

11:33 min

¿Flexbox o CSS Grid?

Material Thumbnail

Diferencias entre Flexbox y CSS Grid

02:44 min

Material Thumbnail

Similitudes entre Flexbox y CSS Grid

04:08 min

Material Thumbnail

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

02:04 min

Material Thumbnail

Dinámica: ¿Qué usarías? (Parte 1)

06:39 min

Material Thumbnail

Dinámica: ¿Qué usarías? (Parte 2) + Reto

05:42 min

Material Thumbnail

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

09:05 min

Modern Layouts con CSS Grid

Material Thumbnail

¿Qué son los Modern CSS Layouts?

09:04 min

Patrones para usar como punto de partida

00:42 min

Material Thumbnail

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

02:56 min

Material Thumbnail

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

05:56 min

Diseño web para desarrolladores

Material Thumbnail

Dinámica: No puedo dejar de ver

08:22 min

Material Thumbnail

Design System y detalles visuales a tener en cuenta

12:59 min

Material Thumbnail

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

13:16 min

Material Thumbnail

Wireframes y comunicación visual simple, intuitiva y atractiva

03:23 min

Material Thumbnail

Figma para devs: Auto Layout y Neumorphism (Parte 1)

11:42 min

Material Thumbnail

Figma para devs: Auto Layout y Neumorphism (Parte 2)

07:01 min

Del diseño al código

Material Thumbnail

Primeros pasos y estructura inicial

01:51 min

Material Thumbnail

Ubicación y creación de elementos

10:48 min

El futuro de CSS Grid

Entendiendo las versiones de CSS: ¿existirá CSS4?

00:47 min

Material Thumbnail

Native CSS Massonry Layout

01:45 min

Material Thumbnail

CSS feature queries: @supports

02:18 min

Material Thumbnail

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

02:29 min

nuevosmás votadossin responder
Randy Oswaldo Guerra Padilla
Randy Oswaldo Guerra Padilla
Estudiante

Porque en algunos casos se usa la position: relative primero y en otros sucede al reves,es decir position: absolute, me explican?.

4
Alejandro Alberto Pachas Chavez
Alejandro Alberto Pachas Chavez
Estudiante

Que tal chicos, quisiera amplicar mi imagen a las otras celdas.
alguna sugerencia? lo he intentado ya de esta forma:** 1 / 1 / 1 / 3**; pero tampoco funciona, espero su ayuda
Captura de pantalla (489).png

.body{

    display: grid;
    grid-template:repeat(2,1fr) / repeat(3,1fr);
    
    width: 100%;
    height: 400px;
    

    grid-template-areas: "imagen imagen imagen""texto texto texto";
}

.body__image{
height: 200px;
width: 470px;
grid-area: imagen;
}
.body__text{
    grid-area: texto;
}

2
Shuriko Alzate
Shuriko Alzate
Estudiante

Son tantas cosas¡… -_- pero pasito a pasito, vamos aprendiendo… con mucha paciencia.

5
Nicolas Ortiz
Nicolas Ortiz
Estudiante

En un grid item puedo usar flexbox como padre?

4
Ariel Angel Santillan Reyna
Ariel Angel Santillan Reyna
Estudiante

Hola buena tarde, diculpen alguien me podria decir por favor por que “grig-gap” no me hace efecto

/* CSS */
.nav{
    background-color: papayawhip;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 10px;
    height:60px;
    width:360px;
}

.item{
    align-self: center;
    justify-self: center;
}

.nav__item--1{ grid-column: 1;}
.nav__item--2{ grid-column: span 2;}
.nav__item--3{ grid-column: 6;}
.nav__item--4{ grid-column: 7;}
.nav__item--5{ grid-column: 8;}

img{
    width:20px;
}



!DOCTYPE html>
<htmllang="es"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Ejemplo1</title><!-- <link rel="stylesheet" href="./Ejemplo1_F.css"> --><linkrel="stylesheet"href="./Ejemplo1_G.css"></head><body><navclass="nav"><sectionclass="nav__menu"><imgsrc="https://img.icons8.com/android/24/000000/menu.png"/><p>Page Title</p></section><sectionclass="nav__icons"><imgsrc="https://img.icons8.com/metro/26/000000/filled-like.png"/><imgsrc="https://img.icons8.com/android/24/000000/search.png"/><imgsrc="https://img.icons8.com/material-sharp/24/000000/menu-2.png"/></section></nav></body></html>
4
Geovanni Javier Nuñez Barrueta
Geovanni Javier Nuñez Barrueta
Estudiante

Grid gap ¿para que erá?

2
Felipe Molano Corredor
Felipe Molano Corredor
Estudiante

estoy super confundido porque la profe dice que al ponerle subgrid hereda el numero de columnas o de filas del padre, pero al contar las filas y las columnas del hijo no conincide en ninguna de las dos en el 1:35 veo que el padre tiene 9 columnas y 4 filas y el hijo solo tiene 5 columnas y 3 filas alguien que me ayud eporque no entendi nada

2
José A Olalde Galván
José A Olalde Galván
Estudiante

Lo que no entiendo es si el .item hizo subgrid de el template-rows de su padre, por que tiene 3 filas en lugar de las 4? en dado casi el .subitem al decir 1/2 no deberia agarrar 1/4 parte de las filas de .item ? ya que si parece que agarro 1/5 parte de las columnas

2
Felipe Molano Corredor
Felipe Molano Corredor
Estudiante

hola, si entendi como hacer la grid principal, pero no sabria como hacer para hacer las grid que son hijos. alguien podria guiarme como se veria el codigo o guiarme de alguna manera? gracias

1
Giselly Romero Nuñez
Giselly Romero Nuñez
Estudiante

Una consulta cual es la diferencia entre swipe y scroll? ó es lo mismo?

2