CSS Grid Layout, ejemplo Práctico de Sitio Web
HTML-код
- Опубликовано: 21 сен 2019
- 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 - RUclips:
/ 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!!
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 :)
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 👏🏼
Grande Maestro! Continue con CSS grid por fa, son una maravilla estas practias!
este video es oro puro, muchas 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.
Muchas gracias Fazt. You blow my mind dude :). Excelente tutorial y lo haces muy fácil de entender, tienes el Don. Saludos hasta Perú
GRID hizo que me vuelva a encantar css.
Gracias
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!
Buenísimo el video, gracias por compartir tus conocimientos con nosotros!!! ¡Bendiciones Amigo!
Muchas gracias por esta explicación, me ha enseñado un montón, que Eterno te de mucha salud siempre.
Gracias!!!, Excelente explicación, Dios le bendiga.!!!
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.
Gracias fazt por compartir tu conocimiento y explicar tan chido!
Espectacular, aprendí muchísimo.
justo terminaba de leer esto mismo en css tricks, excelente explicación
Excelente video, muy bien explicado! Gracias!!!
Un maestro muchas gracias por tu aporte!!
este ejemplo es completisimo y sencillo!!
Jefe Loopback Full Stack con Reactjs por faaa. Thanks. Mereces el cielo. 🙌
Lo entendí completito, que clase magistral maestro.
Un gusto que te haya servido Juan. Exitos
Muchas gracias sos un genio, sin vos no entendia una chingada y ahora entiendo perfectamente! me suscribi! sos un crack abrazo grande!
Wow , muy bueno. Muchas gracias !
Uno de los mejores canales de CODING!
Excelente. Tus vídeos son geniales
me propuse a hacerlo con un camino diferente y que quede lo mas similar posible , y enserio me ayudo mucho ver tus vídeos !!!
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.
muy bien , me esta sirviendo bastante, te mando un saludo!
mis respetos, un genio.
Muy interesante y sobre todo muy explícito amigo; te agradezco por compartir tus conocimientos; saludos cordiales.
Saludos Humberto
Buen video , muchas gracias
Super...Muchas gracias
excelente, muchas gracias!
Muchas gracias tio Grande
Fazt Code hello, very beautiful, understandable, and most importantly competently!!! Так держать!!!🙂🙂🙂
Fazt tus vídeos estan haciendo History. He estado al pendiente de los nuevos, mientras tanto estoy viendo los anteriores.
Excelente video gracias. Te felicito
Dios mío cómo sabes tantooooo 🤷. Gracias por tus vídeos
Gracias Fazt!
buen video. muchas gracias
muchas gracias me ayudo mucho
¡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.
Excelente gracias por enseñarnos
Perfecto 👌
Gracias me sirvio bastante para repasar grid css :P
Muy buen contenido
Aun no termino de ver el primero, pero gracias por la practica :) la hare despues de terminal el primero
sos un crack
Buenas!! antes que nada gracias por tus videos!
ahora, te hago una consulta, conviene utilizar grid areas o es preferible utilizar css grid?
Genial!
te felicito, se me hace que tienes muy muy pocas visitas, tu contenido es de calidad
Hola muy buenos tus videos, puedes hacer tutoriales sobre blockchain? programación en blockchain.
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. !?
Ufff man, bien bien
Muchas gracias
Gracias por el video Guapo !! xd
un video de tu workstation, saludos
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.
Me sorprende eres muy bueno
Podría pasarme en la codificación
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?
que crack
ReactJs + Login Jwt 🙏🙏
Pro!
:0000 gracias
¿Se pueden tener varias etiquetas ?
Te amo
Hola podrias subir el link de los patrones y de las imagenes, me figura error cuando intento buscarlos.Muchas Gracias.
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
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
disculpa gracias por tu video muy facil de entender, pero tengo un problema no me funcion el cursor
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)
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.
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?
Buen tutorial basico pero para hacer buenas practicas se tendria que hacer "Mobil first"(Responsive)
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?
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.
ago lo mismo del video pero mi imagenes se ponen en diferente lugar, y el .title no se pone tampoco
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
Igual tres h1 no se si es lo mejor opción si fuera un caso real para el seo
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
Por que no instalas 'live server' para no estar refrescando la pantalla a cada minuto.
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
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...
Uno de flexbox? 🤔
Alguien acá que crea que Fazt debería habilitar un Patreon.
¿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
y yo sintiendome especial porque hice el logo de windows con css grid xddd
creo que el h1 no se repite...
12:42
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!!
Por cierto a dia de hoy 19/05/2021 lorempixel no funciona
revisa de nuevo xD a mi si
creo que pudiste hacerlo solo en grid sin usar nombres de html