CSS Grid Layout, ejemplo Práctico de Sitio Web
Вставка
- Опубліковано 2 сер 2024
- Este video es un ejemplo practico de CSS Grid, en el que crearemos la estructura de una pagina web bastante sencilla usando columnas y filas, así como tambien el uso de Flexbox. El proposito es que entiendas el layout y luego lo puedas aplicar a tus propios sitios web.
CÓDIGO DEL EJEMPLO
github.com/FaztWeb/cssgrid-la...
CURSO DE HTML
• Curso HTML para Princi...
CURSO DE CSS
• Curso CSS para Princip...
FORMULARIO CON CSS GRID
• HTML & CSS | Formulari...
CURSO DE GIT
• Git y Github | Curso P...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
FAZT - UA-cam:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
#cssgrid #css #html - Наука та технологія
Gracias men, llevo mucho tiempo siguiendo tus vídeos y la verdad veo el progreso gracias a ti MUCHAS GRACIAS!!!!
Sube más sobre CSS GRID :O ES IMPRESIONANTE! Gracias por compartir!
Grid y Responsive layout, directo y fácil. Dios este vídeo me ha salvado la vida!! Tengo que hacer una pagina web muy parecida para clase, una simplemente de ejemplo y la que has hecho es suuuuper parecida a lo que me piden!! Thxxx!!
Increíble 👏🏼 es el segundo video que veo de tu canal, y ademas de una explicación buenisima me has solucionado muchas dudas que tenia 👏🏼
muchas gracias Fazt, lo vi hace casi un año y me gustó pero ahora lo veo y lo entiendo mucho mejor. De echo me ha ido genial para repasar css grid y aplicarlo en un proyecto que me salió por fin :)
Grande Maestro! Continue con CSS grid por fa, son una maravilla estas practias!
Muchas gracias Fazt. You blow my mind dude :). Excelente tutorial y lo haces muy fácil de entender, tienes el Don. Saludos hasta Perú
Muy buen video! Me sirvio un monton para poder entender y aplicar para el curso que estoy haciendo.
Muchisimas gracias.
Te ganaste un nuevo suscriptor!
Ojala sigas subiendo videos de este tipo.
Saludos desde Argentina!
GRID hizo que me vuelva a encantar css.
Gracias
Llevo poco con la programación, actualmente estoy estudiando el tema de los tipos de display Flex y Grid y estaba confundido, tu video me aclaró muchas dudas. Muchas gracias hermano.
Buenísimo el video, gracias por compartir tus conocimientos con nosotros!!! ¡Bendiciones Amigo!
este video es oro puro, muchas gracias!
Muchas gracias por esta explicación, me ha enseñado un montón, que Eterno te de mucha salud siempre.
este ejemplo es completisimo y sencillo!!
Uno de los mejores canales de CODING!
gracias por enseñar el grid ,lo e entendido todo en este video, gracias por esto y puse un me gusta y me e suscrito.
justo terminaba de leer esto mismo en css tricks, excelente explicación
me propuse a hacerlo con un camino diferente y que quede lo mas similar posible , y enserio me ayudo mucho ver tus vídeos !!!
Jefe Loopback Full Stack con Reactjs por faaa. Thanks. Mereces el cielo. 🙌
Gracias fazt por compartir tu conocimiento y explicar tan chido!
Gracias!!!, Excelente explicación, Dios le bendiga.!!!
Espectacular, aprendí muchísimo.
Excelente video, muy bien explicado! Gracias!!!
Un maestro muchas gracias por tu aporte!!
Muchas gracias sos un genio, sin vos no entendia una chingada y ahora entiendo perfectamente! me suscribi! sos un crack abrazo grande!
Muchas gracias Amigo, entnedi un poco mas Grid, os conceptos y la forma que hacer una pagina responsive. Saludos desde Argentina/Misiones exactamente y ya estoy subscripto....Saludos.
Fazt tus vídeos estan haciendo History. He estado al pendiente de los nuevos, mientras tanto estoy viendo los anteriores.
Excelente. Tus vídeos son geniales
Lo entendí completito, que clase magistral maestro.
Un gusto que te haya servido Juan. Exitos
Fazt Code hello, very beautiful, understandable, and most importantly competently!!! Так держать!!!🙂🙂🙂
¡Buenas! Primero que nada gracias por tu aportación a mi formación. Grid es un tema árido cuando entudinado sólo con documentación. El 'code along' facilita mucho. Tus videos fue lo primero que encontre cuando comenze y me dieron ganas de continuar. ¿Se utiliza mucho la grid en React.js? No me imagino haciendo map() los elementos de un arreglo en celdas de una grid.
Dios mío cómo sabes tantooooo 🤷. Gracias por tus vídeos
Wow , muy bueno. Muchas gracias !
muy bien , me esta sirviendo bastante, te mando un saludo!
te felicito, se me hace que tienes muy muy pocas visitas, tu contenido es de calidad
Muy interesante y sobre todo muy explícito amigo; te agradezco por compartir tus conocimientos; saludos cordiales.
Saludos Humberto
Excelente gracias por enseñarnos
Excelente video gracias. Te felicito
mis respetos, un genio.
Buen video , muchas gracias
Super...Muchas gracias
excelente, muchas gracias!
Muchas gracias tio Grande
muchas gracias me ayudo mucho
Aun no termino de ver el primero, pero gracias por la practica :) la hare despues de terminal el primero
buen video. muchas gracias
Gracias Fazt!
Gracias me sirvio bastante para repasar grid css :P
Perfecto 👌
Muy buen contenido
Buenas!! antes que nada gracias por tus videos!
ahora, te hago una consulta, conviene utilizar grid areas o es preferible utilizar css grid?
Buenísimo! Cómo todos tus videos . Tenés alguno dónde comentes sobre los atajos de teclado por ejemplo que utilizas o que plugins instalar en vs code. ? Porque cada vez que haces algo como acomodar el código o rellenar automáticamente un div con contenido aleatorio me da ganas de hacerlo pero no sé cómo. !?
Muchas gracias
Hola muy buenos tus videos, puedes hacer tutoriales sobre blockchain? programación en blockchain.
Exelte vídeo, no se si de pronto podrias hacer videos sobre pug template engine, para trabajar de forma más rápida con html.
Genial!
Ufff man, bien bien
Gracias por el video Guapo !! xd
sos un crack
un video de tu workstation, saludos
ReactJs + Login Jwt 🙏🙏
Me sorprende eres muy bueno
Podría pasarme en la codificación
Pro!
:0000 gracias
que crack
❤
Te amo
Una pregunta, en lugar de crear una grilla de 5 se podría crear una grilla de dos (panel y side bar) y el que era 5 elementos ser un nuevo grid dividido en 5?
¿Se pueden tener varias etiquetas ?
corrijanme si estoy equivocado pero yo puedo entender entonces que grid sirve para maquetar o distribuir los items en la pagina web mientras que flexbox sirve para alinear los items que estan dentro de grid
Buen tutorial basico pero para hacer buenas practicas se tendria que hacer "Mobil first"(Responsive)
Genial practica, solo una aclaración a nivel estructural... solo debe haber un h1 por cada layout, y de ahi h2, h3...
¿no es asi?
Excelente vídeo, perooo como se la a cambiar el formato (En Teclado)
genial!! lo unico que me sembro dudas es porque cada vez que modificabas la seccion de sidebar las imagenes eran otras (veia que las imagenes cambiaban) XD
por que el sitio que el usa que le proporciona imagenes "lorem pixel" pone imagenes al azar cada vez que recargas se hace una peticion a lorem pixel y esta devuelve una imagen cualquiera de su galeria con el tema relacionado: Sports/Deportes People/Personas esas son algunas categorias como ejemplo
Continua con css grid en una web completa que tenga menu porfa.
Como puedo acomodar otro side al lado izquierdo de la pagina?
Gracias -excelente curo- M egustaria saber porque coloco dos etiquetas h1. Me puede indicar como colocar un png de mi logo en el header? GRACIAS
disculpa gracias por tu video muy facil de entender, pero tengo un problema no me funcion el cursor
Hola podrias subir el link de los patrones y de las imagenes, me figura error cuando intento buscarlos.Muchas Gracias.
Igual tres h1 no se si es lo mejor opción si fuera un caso real para el seo
Fazt, excelente vídeo, pero a estas alturas (2019) es mejor diseñar con la técnica Mobile First, hace más simple el código y mucho más óptimo; no lo contrario.
¿Podrías explicar más sobre eso o enviar algún enlace?
@@rodrigodrk1 , claro que sí; actualmente el desarrollo web es Responsive Web Design; o sea diseño adaptable a cualquier pantalla; y entre las técnicas del RWD está Mobile First, o sea diseñar primero para los dispositivos móviles e ir escalando hacia dispositivos más grandes hasta llegar a Desktop, esto permite hacer diseños más sencillos con solamente lo indispensable para Celulares y Tablets, logrando mejor desempeño de una web e ir incluyendo mayor complejidad en el diseño para dispositivos de pantallas grandes.
En la web encuentras miles de enlaces al respecto:
es.ryte.com/wiki/Mobile_First
Una duda un poco, tal vez absurda, cuando se usa y cuando no se usa ">" en CSS?
Saludos!
Se usa ">" cuando quieres que solo los hijos directos de cierto elemento sean aplicados.
Por ejemplo: div.container-posts > div.post , estás diciendo que el estilo solo se aplique a todos los div con la clase "post" que sean hijos DIRECTOS del div con la clase "container-posts".
Como ordenar?
hay un error en el codigo que esta escrito en GIT aparece una etiqueta article cerrada en la parte del aside
Amigo yo tengo un problema, yo coloco que hay 2 columnas y el 1fr al contenedor padre, logicamente abajo de eso tengo el contenedor hijo, le digo que ocupe de la columna hasta la 2 pero no la ocupa, solo ocupa 1 sola columna, alguna solucion?
Alguien acá que crea que Fazt debería habilitar un Patreon.
ago lo mismo del video pero mi imagenes se ponen en diferente lugar, y el .title no se pone tampoco
Uno de flexbox? 🤔
y yo sintiendome especial porque hice el logo de windows con css grid xddd
Por que no instalas 'live server' para no estar refrescando la pantalla a cada minuto.
Hola, estoy haciendo el tutorial poco a poco y revisando todo el código pero no logro que el sidebar me quede bien.
.container .sidebar{
grid-column: span 2;
background-color: #485460;
color: #fff;
/*usamos flex*/
display: flex;
justify-content: center;
align-items: center;
/*cambiamos la dirección*/
flex-direction: column;
}
.container > .sidebar img{
width: 100%;
margin-top: 5px;
}
Ves el error???
A grandes razgos lo solucione poniendo una foto de 400x267.
Saludos.
12:42
El video está genial, muchas gracias por compartirlo, pero no entiendo por qué usas tantos h1. No se debe usar más de un h1 en un documento HTML, podias haber usado un h1, un h2, y luego dentro de los articles crear sections...
como hiciste el fondo ??
esta hecho con puro css en la descripcion dejo un sitio web con los fondos hechos. Aunque para ser mas especificos el lo menciona y muestra como en el video
creo que el h1 no se repite...
¿Se pueden tener varias etiquetas?
Si claro, se usan mas que todo en los titulos, las veces que sean necesarias. Pero recuerda es no jaja saludos
Si, aunque creo que una vez escuche a alguien decir que no era muy SEO amigable, pero no estoy muy seguro asi que si quieres podrias usar etiquetas distintas y darles el mismo tamaño con css
una duda. por que para acceder por ejemplo al "content" accedes desde el container ( .container > .content) y no directamente (.content) si hay alguna diferencia y alguien me lo explica gracias =)
Solo por buenas prácticas
creo que pudiste hacerlo solo en grid sin usar nombres de html
Hay un error en el minuto 15 del video. Para que la Grid se acomode correctamente, después de .container > .footer, escriban .container > .related post (no .related .div). Saludos.
me volvi loco 5 minutos, hasta que inspeccione y me di cuenta que no me tomaba ese div, y le puse el nombre de la clase que mencionas. ojala hubiera visto tu comentario antes jeje. saludos!!
Genial ! pero por favor para alguien que esta empezando esto NO ES SENCILLO ! xD