Тёмный

Como CREAR una PAGINA WEB con CSS GRID 

AlexCG Design
Подписаться 124 тыс.
Просмотров 58 тыс.
50% 1

Aprende a crear un sitio web con CSS GRID, desde cero esto sitio es totalmente responsivo es decir adaptable a dispositivos móviles, las tecnologías o lenguajes aplicados son HTML, CSS y el modulo de diseño CSS GRID.
👨‍💻 Curso diseño animaciones CSS, Flexbox y más:
www.udemy.com/course/curso-di...
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta para un 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger.com/alexcg
✉️ Redes sociales:
Blog de desarrollo web: www.alexcgdesign.com/blog
Facebook: goo.gl/7o77tx
Linkedin: goo.gl/byCJnS
Github: github.com/AlexCGDesign

Наука

Опубликовано:

 

12 апр 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 89   
@AlexCGDesign
@AlexCGDesign 4 года назад
👨‍💻 Curso diseño animaciones CSS, Flexbox y más: www.udemy.com/course/curso-diseno-web-avanzado-html5-css3-js/
@Bisson156
@Bisson156 3 года назад
amigo buenas tardes! Sabes que he hosteado el sitio en github pages pero al ingresar al sitio no se muestran las imagenes, tienes idea de porque puede estar sucediendo esto? He cambiado a jpg e incluso svg y tampoco se muestran.
@danest029
@danest029 4 года назад
definitivamente queremos muchas más web.
@emybenzecry
@emybenzecry 4 года назад
Gracias!!!!! la mejor explicacion que vi de css grid desarrollando una pagina web. Gracias gracias gracias por tu tiempo.
@Ascenso_asc
@Ascenso_asc 2 года назад
No tienes ni idea cuanto nos ayudas con estos tutoriales! Eres un crack, por favor has más vídeos así mismo pero con páginas web que integren también javascript y un poco mas complejas
@diegocastle9523
@diegocastle9523 4 года назад
Es increible y muy interesante. Me encanta. Saludos desde Centroamérica
@kikemaya7758
@kikemaya7758 2 года назад
Eres una bestia brutal del olimpo, master.
@IsenShark
@IsenShark 3 года назад
Excelente video. La verdad que cada vez me apasiona más este mundo del diseño web, increíble lo que se puede hacer. Gracias por compartir tus conocimientos. Espero que pronto puedas subir el curso completo de CSS3. Saludos desde Venezuela.
@FernandoGoni-eq2hg
@FernandoGoni-eq2hg 3 года назад
No te imaginas la cantidad de veces que insulte por la velocidad en la que nombras las clases y lo divs.. pero quiero decirte GRACIAS porque me sirve muchisimo para mejorar el tipeo del teclado y el codigo. Muy buenos cursos. Saludos!
@angelfigueroa6662
@angelfigueroa6662 3 года назад
A muchos les pareciera aburrido aprender los fundamentos y quieren volar a hacer edte tipo de sitios web desde el principio, la verdad me alegra mucho haber comprado tu curso de diseño web desde 0 ya que todo lo qie mencionas aquí lo entendí perfectamente y pude incluso aprender como implementar css grid, ya que nunca lo había hecho. En verdad gracias, eres un verdadero maestro
@AlexCGDesign
@AlexCGDesign 3 года назад
Excelente Angel, un saludo
@LuisLopez1099llg
@LuisLopez1099llg 4 года назад
Me encantó!!! Super increíble
@DavidAppleton
@DavidAppleton 4 года назад
Aún no he visto el video pero le e dado a me gusta porque sé que será bueno.
@elianarismendi3963
@elianarismendi3963 3 года назад
Es un hermoso layout, muchas gracias
@miguelmontemayorrios8879
@miguelmontemayorrios8879 3 года назад
hola, solo queria dejar mi comentario, me encanto GRID la verdad es que no seguí el curso anterior , me anime a hacerlo directo y está bastante amigable entenderlo. Por otro lado me gustaria tambien comentar que al final en el footer por alguna razón que desconozco no me funciono juntar las clases footer-item para acomodar los iconos de las redes sociales, lo resolvi ocupando [class^="fab fa"] para darle el tamaño y el color . Para darle espacio ocupe [class^="footer-item"] solo de esa manera pude resolverlo. Alex te agradezco por tu tiempo y compartir estos temas con toda tu audiencia , disfruto mucho de tus videos.
@codevictor-code33
@codevictor-code33 7 месяцев назад
Excelente. Buen trabajo.
@syzurssyzurs7072
@syzurssyzurs7072 2 года назад
excelente me sirvió mucho, comprendí varías cosas
@Rhast-zi6my
@Rhast-zi6my 4 месяца назад
Este contenido es oro
@cristianfernando2951
@cristianfernando2951 3 года назад
muy bue video, quiza como recomendación: 1) en proximos videos mejor trabaja con unidades de medida relativas y no con px y 2) seria interesante un proyecto a´plicando la filosofia movil first. Gracias por tu aporte a la comudad de desarrollo web. Saludos
@AlexCGDesign
@AlexCGDesign 3 года назад
Gracias por el feedback compañero, un saludo!
@andresromero592
@andresromero592 4 года назад
Hola Álex te felicito por los cursos que has subido de verdad que adquiero bastante conocimiento con tan buena énfasis en la que explicas. Me gustaría por favor que hiciera en un vídeo de RU-vid el como hacer un contador de visitas funcional. Espero tu respuesta. GRACIAS !!!
@weslinmartinez1802
@weslinmartinez1802 3 года назад
Aprendi mucho gracias profesor y si hace una mas compleja mucho mejor
@hernanmartinmarega9348
@hernanmartinmarega9348 3 года назад
Muy bueenooo!!!!!! muchas gracias!!!
@miguelmontemayorrios8879
@miguelmontemayorrios8879 3 года назад
otras cosa ALex estaria genialisimo que nos pudieras compartir una ecommerce, espero lo puedas tener en mente o una pagina con registro de usuarios.
@yolandajoseribasbastidas8460
@yolandajoseribasbastidas8460 4 года назад
Muchas gracias, me sirvió mucho tu practica, ademas del recurso de ilustraciones no lo conocía y esta buenísimo.
@AlexCGDesign
@AlexCGDesign 4 года назад
Gracias Yolanda y si gustas estamos abriendo un curso desde cero
@LuisLopez1099llg
@LuisLopez1099llg 4 года назад
La verdad, también, en cuanto ví esa página, dije: "tengo que guardar esa página!!!"
@mitubo1970
@mitubo1970 3 года назад
Fantástica forma de explicar detalladamente. Gracias por enseñar. Y hacerlo ¡tan bién! ¿realmente utilizas @media... en vez de explotar minmax() de grid?
@engineeringstudentthatlike4409
@engineeringstudentthatlike4409 4 года назад
Muchas gracias. Saludos
@ZeR0ByTe
@ZeR0ByTe 4 года назад
Hola, muy bueno!! Estaría bueno que expliques más videos de efectos o cosas que quedan bien en las webs. Por ejemplo explicaste clip-path, el efecto skew, estaría bueno que expliques más efectos en menues, en cabeceras, o menues desde los costados. En resumen, mas animaciones/efectos que son geniales y quedan muy bien!
@AlexCGDesign
@AlexCGDesign 4 года назад
Si amigo, gracias por el consejo
@yanl_yan6975
@yanl_yan6975 3 года назад
Eres el mejor bro
@mood9081
@mood9081 3 года назад
Alex muchas gracias por tus enseñanzas son de mucha ayuda podrías hacer un tutorial explicando como crear una página web pero paso a paso para entender cómo armar perfectamente una página en html y el por que de cada div eso es lo único que se me complica css comprendo mejor.:( sería de mucha ayuda
@joseenciso9099
@joseenciso9099 3 года назад
Excelente video!!! Tiene el repostorio? Necesiot ver en que falle para comparar el ejercicio con mi fallido seguimiento :)
@tomasolivari1775
@tomasolivari1775 10 месяцев назад
muy buen video, bastante claros y especificos todos los conceptos! seria posible que compartieras el codigo utilizado para el diseño de la pagina? muchas gracias!!!
@JesusGarcia-zx9tk
@JesusGarcia-zx9tk 3 года назад
buen video
@jorgeivanamat5214
@jorgeivanamat5214 3 года назад
Hola Alexander, muchas gracias por tus videos, te hago una consulta, si trabajamos con una imagen .jpg podemos trabajarla de la misma manera que una .svg?
@jesusveliz2150
@jesusveliz2150 3 года назад
Yo tengo una duda, como hago si no tengo inter ahí una forma de hacer, que si no tengo internet busque las imagen de mi carpeta de imágenes de mi proyecto.
@ricardoboso6514
@ricardoboso6514 4 года назад
Gracias Alex. Pero el proyecto no lo encontré en github podras . COMO PUEDO OBTENERLO
@roxanavicentelo9370
@roxanavicentelo9370 4 года назад
Muy buen vídeo, para diseñar usas algún programa? me gustaría saber cual es la lógica que utilizas a la hora de diseñar
@AlexCGDesign
@AlexCGDesign 4 года назад
Manejo XD, pero esta web está basada en un diseño que encontré en Pinterest, un diseño sencillo pero que nos ayuda a comprender mejor CSS Grid y Flexbox
@Malvinas_siempre_argentinas
Quisiera saber como te soluciono lo qie live server cuando no hace los cambios de css..a mi me sigue sin realizar los cambios
@lizavolta1543
@lizavolta1543 4 года назад
Yeahhhhhhhhh
@ealfriadez
@ealfriadez 4 года назад
Saludos, como hacer una pagina dinamica con todo lo que enseña??
@xmensm6155
@xmensm6155 3 года назад
bro me gusto la pagina pero hay una falla que no comenzaste como otros videos de crear pagina web desde cero!
@Bisson156
@Bisson156 3 года назад
Hola a todos! Tengo un problema, al momento de ir reduciendo el tamaño de la pantalla, todas las grillas se reducen en igual medida excepto la grid del footer que se va haciendo mas pequeña que el resto.. esto hace que en 250px el texto contactame quede cortado. Alguien tiene alguna solución que pueda ayudarme a resolver mi problema? Gracias!
@zkeviin9966
@zkeviin9966 4 года назад
Estuvo bien el video pero creo que haciendo columnas a los propios elementos podrías haberte ahorrado tantas cosas del mediaquery
@misterjeque
@misterjeque 3 года назад
buenas... man como insertar una imagen/foto como de fondo para este estilo de sitios web
@ianramirez1577
@ianramirez1577 4 года назад
hola alex muy bien tutorial, mira te explico yo actualmente estoy en el proceso de mi titulación y para eso me piden realizar una pagina web ya casi la termino gracias a tus tutoriales pero estoy atorado porque necesito que a mi pagina le puedan llegar correos pero en todos los tutoriales que he visto no les entiendo muy bien vi uno de php pero me preguntaba si hay otra manera de enviar correos te agradeceria si pudieras hacer un tutorial de ello me apoyarías mucho a titularme gracias buen día
@davidgonzalezsantis4889
@davidgonzalezsantis4889 4 года назад
prueba formspree, puede ser que te sea de utilidad
@Bisson156
@Bisson156 3 года назад
Alex excelente curso! Tengo un problema con el responsive design.. En mi caso he realizado todo identico al video pero al bajar de 800px la grid del header como que se mete debajo de la grid del section y la imagen empieza a cortarse, como metiendose debajo del grid del section.. Podrìas decirme porfa como puedo resolverlo? Excelente curso y muchas gracias!
@Bisson156
@Bisson156 3 года назад
Bueno lo pude resolver achicando un poco el max-width de img.. en mi caso a 800px le puse un max-width de 260px.. no se si sera la mejor solución pero si a alguien le pasa que sepa que así se puede solucionar jajaja
@bernardoalvez7769
@bernardoalvez7769 Год назад
hola el codigo con las imagenes a donde esta?no encuentro para hacer el proyecto saludos!
@ccbe4858
@ccbe4858 3 года назад
¿Soy el único al que le incomoda el uso arbitrario del español y el inglés al nombrar las clases CSS?. Aparte de ello, se agradece el tutorial.
@AlexCGDesign
@AlexCGDesign 3 года назад
Si amigo perdón, de ahora en adelante será todo en inglés, gracias por el comentario:)
@LizzyMendivil
@LizzyMendivil 3 года назад
Hola, una consulta, Chrome tambien tiene ese feature de poder ver el grid? Gracias.
@hard6769
@hard6769 3 года назад
Sip, solo dale en inspeccionar y ahi buscar y veras
@josellantoyflores3585
@josellantoyflores3585 Год назад
Quisiera tomar el curso de diseño web
@oscargm1979
@oscargm1979 3 года назад
Yo pondré el selector asi -> footer > .grid > div[class^="footer-item"] a {} a ver si cuela :))
@hard6769
@hard6769 3 года назад
xd
@giovannysarmiento3820
@giovannysarmiento3820 5 месяцев назад
37:44
@gregorysubero3005
@gregorysubero3005 4 года назад
Holaa! Alex me gusta una interactividad que tiene tu página web que al hacer click en un link por ejemplo a opiniones te lleva ahí en la misma página y no abre otra página como se ve habitualmente, como se hace eso?
@AlexCGDesign
@AlexCGDesign 4 года назад
Cómo?
@danest029
@danest029 4 года назад
@@AlexCGDesign creo que se refiere de ajax
@dark-er
@dark-er 3 года назад
Hola, amigo. Lo que utiliza Alex en su página web son anclas. Se consigue que te lleve a un determinado lugar mediante la aplicación de un id a la parte a la que quieres ir. Te dejo un ejemplo: Ir a Opiniones Cuando alguien dé click en el enlace que está más arriba va a venir a esta parte de la página. A su vez, Alex también tiene un scroll lento. Esto se consigue de dos formas: utilizando librerias externas de javascript (como Jquery) o utilizando un selector css. El selector no funciona en todos los navegadores. Para lo de Jquery te recomiendo que investigues por tu cuenta, porque es un tema bastante complejo. Para realizar simplemente con estilos css, se debe añadir lo siguiente: html{ scrool-behavior: smooth; } Espero haberte ayudado. Sigue investigando sobre enlaces y su comportamiento.
@TheMrPoKu
@TheMrPoKu 4 года назад
Una consulta, no es mejor usar grid areas ?
@manuelrm5465
@manuelrm5465 4 года назад
Lo mismo me pregunto.
@EvelynFriasParadise
@EvelynFriasParadise 4 года назад
Es posible, pero es mas complicado, de esta forma para mi personalmente se adapta mucho mas rápido y es mas flexible.
@ianramirez1577
@ianramirez1577 4 года назад
Necesito ayuda porfavor no se que paso con mi vscode pero cuando creo un archivo .css y pongo codigo de css me aparece esto { "resource": "/c:/Users/ian9o/Desktop/.css", "owner": "_generated_diagnostic_collection_name_#1", "code": "css-lcurlyexpected", "severity": 8, "message": "{ expected", "source": "css", "startLineNumber": 1, "startColumn": 4, "endLineNumber": 1, "endColumn": 4 } y me aprece codigo que no es de css alguien me ayudaria a solucionarlo
@hard6769
@hard6769 3 года назад
Instalalo y desinstalalo
@maurofranco7927
@maurofranco7927 4 года назад
Muy buenas Alex , Primero que nada.. buenos tutos se te los agradece mucho !!!. Tengo un problemas, espero que puedas ayudarme: Al visualizar mis paguinas en mi pc (osea dando solo doble click al HTML), las imagenes y los efectos CSS no aprecen, solo me abre o me visualiza solo el texto del HTML. Pero si lo abro desde el editor con un plugins de server (atom-live-server) me funciona perfecto. Espero me puedan ayudar :/ pd: el codigo y las rutas de los archivos estan bien ya los revise muchas veces.
@AlexCGDesign
@AlexCGDesign 4 года назад
Quizá pueda ser la caché amigo, la verdad que nunca me había pasado ese error
@AlexCGDesign
@AlexCGDesign 4 года назад
Saludos Mauro
@maurofranco7927
@maurofranco7927 4 года назад
@@AlexCGDesign Si estoy viendo por ese lado pero no tengo excito. si lo quiero abrir desde la web usando "GitHub Pages" tambien aparece ese problema...
3 года назад
Una pregunta, ¿Porqué usaste la misma clase .grid en varias partes de la página? A todas le estás añadiendo 12 columnas... eso no sería desordenado?
@dezer6201
@dezer6201 3 года назад
Por una parte es mejor ya que no hay que estar escribiendo mucho código y tan solo darle un estilo a una clase que esta en varios contenedores es mejor y el desorden ya seria de la persona si se confunde o no
@Ascenso_asc
@Ascenso_asc 2 года назад
Bro ayúdame con algo, porque a mi no me sale la opción de "inspeccionar elemento"?, solo me sale la opción de "inspeccionar" y ahí no me aparecer nada de las cosas que te salen a ti bro, porfavor ayúdame con eso
@Hielodev_cortos
@Hielodev_cortos 2 года назад
Es por que es otro navegador web -_- mozilla tiene eso, inspecionar es lo mismo
@grissor6462
@grissor6462 4 года назад
una pregunta la diseños los puede utilizar cualquier persona lo digo por los derechos de autor
@AlexCGDesign
@AlexCGDesign 4 года назад
Exactamente
@grissor6462
@grissor6462 4 года назад
@@AlexCGDesign eso quiere decir que podemos utilizar tus diseños y subirlos a la web ????
@AlexCGDesign
@AlexCGDesign 4 года назад
Si, sin ningún problema
@lemisdavidbarcenascarrillo4925
@lemisdavidbarcenascarrillo4925 3 года назад
no me sale el grid
@jesulyrobain1271
@jesulyrobain1271 3 года назад
como agregar bases de datos a un sitio wed
@seleneandrade5571
@seleneandrade5571 Год назад
codigo?
@Hielodev_cortos
@Hielodev_cortos 2 года назад
6:29 entonces eres de estados unidos :o
@alejandrocuba1916
@alejandrocuba1916 4 года назад
(Y)
@danielunodotres4097
@danielunodotres4097 4 года назад
usare esta plantilla para mi proyecto alexcgdesign.com/blog/crea-una-pagina-web-profesional-con-html-css-y-javascript/
@primoviaje
@primoviaje 2 месяца назад
Muy poco claro y en especial con unDraw, donde no se entiende cual es el vinculo a copiar y como usarlo
Далее
👨‍💻 CREA una LANDING PAGE en HTML CSS
1:05:27
Просмотров 44 тыс.
💻 Como CREAR una PAGINA WEB con HTML CSS y JAVASCRIPT
1:16:46
Ummmm We "HAIR" You!
00:59
Просмотров 8 млн
Microsoft Homepage Clone - CSS Grid, Flex & Media Queries
1:10:59
Galería de imágenes responsive con CSS Grid
24:06
Просмотров 57 тыс.
CSS Grid Layout, ejemplo Práctico de Sitio Web
30:01
Дорогие компы БЕСПОЛЕЗНЫ?
1:00
Просмотров 754 тыс.
Mac Studio из Китая 😈
0:34
Просмотров 130 тыс.
Дорогие компы БЕСПОЛЕЗНЫ?
1:00
Просмотров 754 тыс.