Homer´s Web Page
Lleva tus conocimientos de CSS a otro nivel
Tips para llevar tu conocimiento de CSS a otro nivel + Quices
¿De dónde venimos y en dónde estamos?
¿Cómo fue pensado CSS cuando se creó?
Limitaciones de CSS y el problema de los elementos flotantes
Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
¿CSS Grid es una idea nueva? La evolución de la especificación
¿Qué significa Grid para CSS?
Control de alineamiento
Técnicas de alineamiento antes de CSS Grid: margin y line-height
Técnicas de alineamiento antes de CSS Grid: table-cell y positions
Técnicas de alineamiento de CSS Grid: pros y contras
Modos de escritura y ejes de alineamiento + Reto
Propiedades físicas y lógicas en CSS + Quiz
Técnicas de alineamiento con Flexbox
Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
Grid y las relaciones padre e hijos inmediatos + Quíz
Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
Creando nuestro contenedor: ¿display: grid o display: inline-grid?
Creando filas, columnas y espaciado + Reto
Alineamiento en el elemento contenedor + Quiz
Generación automática de tracks + Quíz
Funciones: repeat(), minmax() y fit-content()
Propiedades y valores para los elementos hijos
¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
Ubicación + Reto
Alineamiento en los elementos hijos + Quiz
¡Manos al código! Fase de ubicación y alineamiento
Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Responsive y CSS Grid
Continúa con el Curso de Diseño Web con CSS Grid y Flexbox
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 193
Preguntas 15
Homer´s Web Page
A que no adivinan qué página elegí… 👀
.
Unos “pequeños Tips”.
1- Les recomiendo “Figma”, o “Adobe XD” para maquetar sus sitios.
2- Éste sitio me ayudó a comprender el suo de las columnas (principio) (
https://chrome.google.com/webstore/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack ).
3- Por si necesitan ver un sitio como ejemplo, y comenzar a saber cómo podrían aplicar grid ( https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb ).
Por último, si quieren saber medidas ( https://www.mydevice.io/#compare-devices ).
Honestamente jamás me ha gustado el UI de wikipedia, pero después de hacer este ejercicio, sigue sin gustarme.
Elegí una web que siempre se me hizo algo caótica. Una página de noticias de Perú.
Y el subgrid de algunas de sus partes:
P.D. Elijan bien su voto 😥🟥⬜🟥
celdas
son cada cuadro de la grilla, como lo son en una tabla, como la de exel.lineas
son cada división de las columnas y los row, todas ellas se pueden nombrar.track
es prácticamente una columna o un row, y se declara con su grueso.area
es la combinación de celdas delimitada por el usuario por sus especificaciones en celdas, líneas y tracks.axis
es la alineación del contenido dentro o items o celdas de nuestra gridgutters
se traduce como canalones, y son los espacios entre celdas. Se parece al margin correspondiente a las o celdas de nuestra grid.cuevana ♥
Desde el inspector de Firefox se pueden ver las grid:
Mi reto 🤔
Lines, tracks, cell, area, gutters, grid axis, grid row, grid column
line
son las líneas divisorias que componen la estructura de la cuadrícula. Pueden ser verticales (“líneas de cuadrícula de columna”) u horizontales (“líneas de cuadrícula de fila”) y residir a ambos lados de una fila o columna.
track
es prácticamente varias celdas adyacentes o juntas en una fila o columna, como también pueden ser 3, 2 o las celdas adyacentes que se necesita.
area
El espacio total rodeado por cuatro líneas de cuadrícula. Un área de cuadrícula puede estar compuesta por cualquier número de celdas de cuadrícula. Esta propiedad también se puede utilizar para asignar un nombre a un elemento de la cuadrícula.
cell
son cada cuadro de la grilla, como lo son en una tabla, como la de excel.
Grid row
cuando pensamos en grid row vamos a pensar de forma vertical y empezamos a contar desde la linea 1 a la linea 6 (arriba a abajo)
Grid column
cuando pensamos en grid column vamos a pensar de forma horizontal y empezamos a contar de la línea 1 a la línea 6 (izquierda a derecha)
axis
es la alineación del contenido dentro o items o celdas de nuestra grid
-row axis
este eje es de forma horizontal o también lo podemos conocer como inline axis
-column axis
este eje es de forma vertical también lo conoces como block-axis
Bueno, yo agarré la opción presentada en clase. Pienso que puede ser como la siguiente grid que marque.
Challenge done.
De chess24
Me encanta la creatividad que pone teff en cada clase para hacerla mas divertida 💚
Esta pagina la hice como reto del curso Curso Práctico de HTML y CSS con el profesor Diego De Granda, donde como reto había que hacer el clon del navegador de wikipedia con CSS GRID.
P.D.: Quizás se podía hacer mejor, pero se cumplió con el reto 😅😅😅
Aqui mi aporte del layout de Musixmatch (El resto son componentes por sección) 😄
Reto :’ )
Sin duda el header de la página que escogí se podría seccionar más, pero considero que el contenido seria en una sub-grid.
Elegí mercado libre, aunque no se si la parte del slide estaría bien (Color azul)
Les dejo un sitio para practicar y entender:
https://grid.layoutit.com/
Done ✔🖥
Youtube parece bastante sencillo, o me equivoco?
El reto:
La verdad paso muy exprés cada concepto no profundizo, me hace tener que ir a ver la información en otros lados sabiendo que pague por que me enseñen aquí y no en otro lugar 😦
RETO
Hola profe, el reto lo escogi con icon8
Les dejo mi aporte 🥴
Este es mi ejemplo, basado en lo aprendido.
Mi aporte 🙌
Aporte del reto… desde mi punto de vista se podria participnarl la pagina por secciones es decir el header se puede utilizar display-flex, la parte de main o el body se podria colocar la grilla y la parte de footer grilla o display flex. espero no equivocarme 😅
Hice el reto con el hompege de OpenSea.
Mi reto:
Mi primer grid en una pagina, gracias paint!
seguramente tengo errores, por favor corríjanme
</div>
<div class="noticia">Credit Suisse: la enorme filtración de datos que revela que venezolanos acusados del saqueo de PDVSA ingresaron millones de dólares en el banco suizo</div>
<div class="noticia">Rusia-Ucrania: en qué consisten los ataques de bandera falsa y cuáles son los más recordados</div>
<div class="noticia">"Parece que perdí puntos de coeficiente intelectual": la neuróloga que investiga (y sufre) covid de larga duración</div>
<div class="noticia">Truth Social: Trump estrena su red social mientras sigue vetado en Twitter</div>
<div class="noticia">Qué es el "factor abuela" y cómo ayuda a la conservación del español en EE.UU.</div>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
}
.container1{
padding: 10px;
display: grid;
grid-template: repeat(3,1fr) / repeat(2,1fr);
background-color: darkred;
color: white;
font-size: 20px;
}
.GranContenedor{
width: 100%;
display: flex;
justify-content: center;
}
.container2{
display: grid;
grid-template-columns: repeat(2,1fr);
margin-top: 100px;
text-align: center;
width: 80%;
}
.UltimaHora{
background-color: darkred;
color: white;
font-size: 60px;
text-align: center;
padding: 40px;
}
.TextoUlt{
padding: 40px;
font-size: 20px;
}
.container3{
margin-top: 60px;
display: grid;
grid-template: repeat(4,1fr) / repeat(4,1fr);
text-align: center;
}
.noticia{
font-size: 16px;
font-weight: bold;
margin: 10px;
}
me gusta su risa
Así lo hize
Reto cumplid;
La vist de las pagina de alpina es diferente.
youtube
Yo utilice la pagina de kayak de esta manera
Reto: Blog de Chema Alonso
Hack the Box, si hay alguna sugerencia estaría muy agradecida 😃 saludos
reto:
Cada vez que veo componente pienso en react y reutilizar, jaja, la pereza en estado productivo
Reto:
Mi desafio asi me salio, no soy experta pero estoy haciendo mi máximo esfuerzo
<!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>Reto de Recetas</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<main class=“container”>
<h1>Mis platos de Comida </h1>
<section class=“dishes”>
<img class=“dishes-plato1” src=“https://i.pinimg.com/originals/fc/16/ab/fc16ab61c90fd99d1b11cc6af63fdd9e.jpg” alt=“enchiladas suizas”>
<img class=“dishes-plato2” src=“https://www.eluniversal.com.mx/sites/default/files/2019/12/19/platillos-mexicanos-extranjeros.jpg” alt=“Tacos al Pastor”>
<img class=“dishes-plato3” src=“https://www.travelreport.mx/wp-content/uploads/2017/09/Platillos-tipicos-de-Hidalgo.jpg” alt=“panuchos”>
<img class=“dishes-plato4” src=“https://www.gastrolabweb.com/u/fotografias/m/2021/6/17/f850x638-14957_92446_5358.jpg” alt=“Mole Poblano”>
<img class=“dishes-plato5” src=“https://www.elimparcial.com/__export/1554734623429/sites/elimparcial/img/2017/12/21/1786218-N.JPG_1359985867.jpg” alt=“Pozole”>
</section>
</main>
</body>
</html>
LOS ESTILOS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: 1200px;
background-color: #E6E6FA;
}
h1{
font-size: 2rem;
font-weight: bold;
text-align: center;
margin: 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.dishes{
display: grid;
grid-template-columns:minmax(50px, max-content);
grid-template-rows: 200px;
gap: 25px;
justify-content: center;
}
.dishes-plato1{
width: 300px;
height: 220px;
}
.dishes-plato2{
width: 300px;
height: 220px;
}
.dishes-plato3{
width: 480px;
height: 445px;
grid-area: 1 / 2/ 2/3;
}
.dishes-plato4{
width: 300px;
height: 220px;
grid-area: 3 / 3 /2 /4;
}
.dishes-plato5{
width: 300px;
height: 220px;
grid-area: 2/1;
}
En Chrome hay una herramienta con la que puedes ver el grid de la página que tienes abierta.
Creo que hay páginas que se explican bien pensándolas como un conjunto de Grids. En este caso, por ejemplo, hay un grid padre (rojo) y un grid hijo (azul). ¿Qué opinan ustedes? 🤔
Con la pagina de Youtube.
Les comparto mi reto. 😄
Aqui va mi aporte. La mejor compañia de drones militares del mundo.
Mi reto me quedó muy sencillo. 😛
Mi propuesta a maquetar en este reto. Es obtenida de Frontend Mentor
Hola yo intente hacer el reto, pero quede con una duda un menu se puede hacer separado por celdas o se debe hacer con un track
Como yo lo había pensado (cuando no sabía que se debe hacer la Grid completa):
Este es el reto:
![](
Basado en uno de los retos de frontendmentor
https://www.frontendmentor.io/challenges/blogr-landing-page-EX2RLAApP
Es una web muy compleja, pero creo que seria algo así.
Saga Falabella
Usé Youtube:
Yo me dedique a analizar con lujo de detalle la interfaz de GitHub 😅Me gusta mucho. Creo que adentro aun se podrían encontrar mas items pero en general así seria la vista:
acá mi reto
Así quedo mi reto
Utilice esta página como prueba XD.
Escogí youtube. La grid principal es la amarilla, la grid hijo es la roja. Interesante ver como en la grid principal elementos que se sienten separados, como lo son el menú lateral y el espacio de los videos, coinciden en sus líneas principales 🤔
Mi resultado…
Les comparto el mio. Lo hice de mi Instagram:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.