Programa la Página Principal de Youtube con HTML, CSS, Flexbox y GRID

Подписаться 511 тыс.

Просмотров 61 тыс.

50% 1

En este video aprenderás como programar tu propia pagina principal de youtube utilizando HTML, CSS, Flexbox, CSS Grid y Javascript.
🚀 Blog de Diseño Web:
www.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
📄 Código del Proyecto: github.com/falconmasters/pagi...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters

Наука

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

7 янв 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 219

@FalconMasters 4 года назад

Si te gusto este video dale manita arriba! 👍 📌Indice del video: 1:58 - Creando la estructura con CSS Grid 18:11 - Creando el header 43:21 - Creando el menú lateral 54:35 - Creando la sección del contenido principal 1:01:05 - Haciendo nuestro sitio Responsive

@CreativeDesignPE 4 года назад

Hola soy tu seguidor desde el principio, quisiera pedirte que agas tutorial de FLUENT DESIGN en css Thank you

@FalconMasters 4 года назад

@@ManelBenlloch Todavía existe google plus ?

@leonardoscuro 4 года назад

FalconMasters quale estensione hai per mettere il css le proprietà di colore blue?

@jesussalazar342 3 года назад

Buenas tardes. eres GRANDE ;) oye tengo una duda, como podria hacer el modo cine a un video como youtube? como sería la funcion y despues regresarlo a su modo preterminado Gracias

@Zosei Год назад

SIUUUUU XD LO VI COMPLETO ERES UN CRACK Y LIKE, SUB++ Y VAMOS...

@sayedakbarali5650 4 года назад

although i cant understand the language, I followed along your Tutorial, and Learnt a lot from this great tutorial, and thanks for not using any framework just pure html, css, and js

@FalconMasters 4 года назад

Wow, thanks for watching the video. I am glad you were able to learn from this video!

@nasajpg 4 года назад

El mejor profe de la web..he aprendido mucho con tus tutoriales. Se que ayudas a muchos que estamos empezando. Gracias. Sigue así Falcónmaster

@FalconMasters 4 года назад

Gracias por el apoyo!

@byronhernandez 4 года назад

@@FalconMasters estoy agredecido , estoy iniciando a retomar el tema de la programción y no he encontrado un profe, como tu persona espero pronto optar por tu curso completo de udemy, primero quiero estar terminar tus cursos disponibles aca en RU-vid asi obtener el Certificado.

4 года назад

Excelente, lo que estaba necesitando para mí proyecto.

@damasodanieltellesochoa6633 4 года назад

Me gustó tu manera de explicar así que ya te compré el curso de desarrollo web. Está muy completo y a un precio casi regalado.

@deleted7023 4 года назад

De los mejores RU-vidrs que conozco, excelente Carlos, eres genial. 👏🏻👏🏻👌🏻

@FalconMasters 4 года назад

Gracias!

3 года назад

Muchas gracias por compartir tus valiosos conocimientos que es de gran ayuda, aprendo full con tus videos.

@ransesrivas142 4 года назад

logre la practica muy buen vídeo, gracias falcon me estoy iniciando en el mundo de la programación y tus vídeos me han ayudado mucho

4 года назад

Wow!! Subidón, subidón. ¡Magistral vídeo! una pasada, amigos. Os lo recomiendo al 100%. Enseña un montón y aprendes a aplicar conocimientos muy demandados, como lo es combinar las Grids, Flexbox, CSS avanzado y Javascript. ¡Muchas gracias por esta labor, Carlos, nos ayudas y nos encaminas muy bien en el diseño web de manera responsiva, profesional, divertida y amena. ¡Supermegalike!

@ronaldsegura3776 Год назад

Casi todo lo que he aprendido en Php y web, lo he aprendido con Falcon. Andaba ahora buscando algo similar, y esto es genial. Claro me gustaría que la barra superior fuera fija.

4 года назад

Excelente video, buen proyecto de maquetación con HTML, CSS, Flexbox y GRID, con un ejemplo muy bueno, que todos estamos acostumbrados a utilizar con lo cual se hace más fácil aprender.

@carlosandresramirez9808 4 года назад

Hola Carlos gracias por el tutorial. Eres mi Teacher. Enseñas re-bien. Muchas gracias otra vez.

@zcoding8355 4 года назад

Excelente tutorial; como siempre.. ¡Te felicito y gracias por ayudar a tantos y con calidad nivel excelencia! Comentario aparte; Maestro me extrañó que no utilizó en este tutorial ni las medidas EM/REM en vez de los pixeles, ni las variables CSS; había dicho que de ahora en adelante las usaría en sus tutoriales con más frecuencia....

@luis920810 4 года назад

Excelente practica, gracias por los aportes.

@igor.miranda 4 года назад

Genial aprenderé esto para crear un backend ya que la plantilla adminlte me tiene re aburrido jajajaa. Grande maestro!!

@krishcm3016 4 года назад

Gracias por el buen contenido que compartes! 🙌👏👏👏

@marioorochena3066 4 года назад

Recién acabo de intentar algo luego de ver tu video, algo más simple, y responsive, y me quiero morir.... no pude hacer mucho... se siente feo, se que debo luchar y seguir intentando. Mil gracias por tu enorme aporte con estos videos.

@edgareliamsantos5751 4 года назад

Genial video, logré comprender los estilos aunque dudo poder hacerlo solo😅. Espero un día manejar tecnologías front end tanto como lo haces Falcon. Gracias por compartir tu conocimiento. Saludos.

@sjr4303 4 года назад

Muy bien, muchacho. Saludos desde Brasil.

@MarkcartneyR 4 года назад

Hola! Sigo tus cursos en Udemy desde hace tiempo y son muy buenos, me apunto esta práctica para realizarla cuando finalice un curso que estoy realizando. Estaria muy bien un curso tuyo de un sistema grande usando php javascript por ejemplo un punto de venta

@Sergio-ep8zh 3 года назад

La verdad que el video ha estado muy bien y he aprendido bastantes cosas!! un buen like!! saludos !!

@ulisescruzgonzalez2677 3 года назад

muchas gracias, excelente ejercicio

@JValenteM92 4 года назад

Esta muy bueno, le seguirás haciendo más cambios como por ejemplo el header fijo, o cuando se hace scroll el menu-lateral que no se mueva a no se que se le ponga el puntero encima!!!...porque he intentado hacerlo pero al usar grid como que se desforma un poco!

@dennismartel2209 2 года назад

Muy bueno está muy bien explicado felicidades sigue así está excelente el tutorial

@demiantah3179 11 месяцев назад

tremendo tutorial, me pongo al tanto de los cursos!

@victornarvaez521 3 года назад

Muy útil el tutorial. Gracias.

@MrAsolares69 4 года назад

Excelente, Gracias Maestro. saludos

@gabiadq 4 года назад

Buenísima la data. Muy claro todo. Se agradece

@Thom.Zille. 4 года назад

Sou brasileiro, mas entendi tudo o que você disse. Explicação muito fácil de entender também. Parabéns!

@aleatoreoaleateoreo3262 4 года назад

Mil gracias FalconMaster por realizar estos vídeos. Estoy comenzando en el desarrollo web y me has sacado muchísimas dudas que tenía. No te detengas nunca. Un saludo desde Argentina

@FalconMasters 4 года назад

Me da mucho gusto escuchar eso, intentare no parar nunca. Saludos!

@alejandrorodriguez8293 4 года назад

Hola!! Exelente video, hasta la fecha desconocía sobre css grid pero me a gustado mucho, luego de ver todo el video me fije que hace falta que el menú y la barra lateral se queden fijo en pantalla así como el de la pagina oficial, desconozco de como hacerlo con css grid podrías explicármelo o hacer un video explicándolo tomando siempre esta practica por favor... de ante mano muchas gracias. Sigue asi!!

@andresbadillo2706 4 года назад

Buenisimo, eres un Crack, Muchas Gracias!!!!

@juandavidnupanguzman9855 4 года назад

waooo, me gusto mucho este video, gracias FalconMasters

@four-leggedcat285 4 года назад

Gracias por mas contenido con css grid Carlos Arturo ! (Y)

@krizalidzero9249 4 года назад

muy bueno, justo quería ver ejemplos prácticos de aplicación de programación web y maquetado xD Gracias

@cleidysbrooks 4 года назад

Excelente Carlos Arturo. Gracias por tus ensenanzas. Feliz y Prospero 2020

@FalconMasters 4 года назад

Muchas gracias y te deseo un gran año igualmente.

@andresgonzalez7367 4 года назад

Muy buen video, amo tus trabajos.

@yairgarizabalo9821 4 года назад

Realmente genial, si analizamos un poco mas el códigos y si usamos las unidades en "rem". la versión responsiva es mejor que la de RU-vid.

@osepulvecl 4 года назад

Carlos Arturo, gracias otra vez por tus videos, cuando puedas nos compartes unas recomendaciones para construir sitios multilenguajes !!!!!

@victorguevara4698 4 года назад

Bestial. Saludos desde El Salvador.

@fer7295 4 года назад

Hola Gracias Por Todo FalconMaster

@Drysdev 4 года назад

Gracias a tus vídeos aprendí css

@SebastianOspinaHD 4 года назад

Hermoso. Sigue así y llegarás lejos.

@andresgonzalez7367 3 года назад

Wow, aprendí mucho con este video

@jjjjssnn 4 года назад

Excelente como siempre. Gracias.

@romuloalves9349 4 года назад

Ótimo vídeo parabéns 👏.

@realcryptos 4 года назад

Excelente amigo... Saludos.!

@mariovaledor 4 года назад

Grandes aportaciones, gracias!

@romeobetances7964 4 года назад

Genial amigo, siempre me sorprendes.

@JuniorMosquera2016 4 года назад

Falcon te felicito muy buen contenido muchas gracias por compartir tus conocimiendo con nosotros!!!

@FalconMasters 4 года назад

Muchas gracias

4 года назад

Viejo estas como el vino....cada dia mejor. Gracias.

@FalconMasters 4 года назад

Haha gracias!

@dj0000 4 года назад

guau el mejor profe del mundo falcon eres un super pro me encantan tus vidos😎😎👍👍

@DanielHernandez-to7fj 4 года назад

Entre a la descripción para ver el curso que ofreces y resulta que ya lo tengo comprado :0 Me pareció conocer la imagen del curso en donde aparece WORDPRESS jaja. No eh podido iniciarlo por que aún no acabo el curso en el que estoy.

@sebatecning5207 4 года назад

Excelente, ahí tienes un nuevo suscriptor

@analuciamarzocca3748 3 года назад

Me encantó! Gracias.

@propts2953 3 года назад

excelente!!!! , te la rifaste en este tutorial

@alexo2537 4 года назад

Wooo aprendi algo nuevo como es trabajar con CSS y como hacer responsive las paginas ya que siempre trabajaba con bootstrap o templates ya definidos que eran responsves. Gran tutorial

@FalconMasters 4 года назад

Me alegra mucho que hayas aprendido esta forma genial de diseñar sitios!

@ramonalejandrourbinalinare4002 2 года назад

Hola amigo te quiero dar las gracias fue un tutorial muy entretenido y aún podría estar mejor si la barra de búsqueda fuera funcional para mostrar un contenido como resultado de búsqueda, por favor anímate a hacerlo todos quisiéramos eso estoy seguro para que sea más completo partiendo de este proyecto. Bendiciones amigo.

@johnjlac9379 4 года назад

Oye que bueno esta esto excelente para hacerle la competencia a RU-vid jjjjjjjjj Gracias FalconMaster

@thebetoxpro 4 года назад

Es increible la forma en la que explicas, increible contenido

@FalconMasters 4 года назад

Gracias!

@clauq347 4 года назад

Excelente lo tuyo ....Impecable ...cada dia mejor

@FalconMasters 4 года назад

Gracias!

@cristiansantander Год назад

buen video, muy instructivo

@raulreyes1823 4 года назад

Un pequeñito tip para que se vea mejor el icono de expandir la barra, en CSS agregarle la misma animación que tiene el lateral para expandirse en la regla que tiene hover y en la otra :)

@edwinloaiza1017 3 года назад

Arturo saludos excelente video solo tuve un inconveniente en los iconos de fontawsone que no me aplicaron los estilos con la clase fas, me toco colocarle una clase diferente para poder que me tomara los estilos me parece curioso alguna respuesta. muchas gracias.

@ignacioleon4087 4 года назад

Éste tipo de vídeos gustan un montón

@FalconMasters 4 года назад

Me alegra mucho escuchar eso!

@Magistrado1914 4 года назад

Excelente tutorial Visto en 07/02/2020

@yovanidanielricovz1751 4 года назад

Muy buen video amigo gracias por compartirlo me ayudara a mi proyecto.

@FalconMasters 4 года назад

Me alegra escuchar eso

@solarcdj5802 4 года назад

Me gustó mucho utilizar la grid podrías ahora hacer el llamado de los vídeos aleatorios xfa

@Deus-lo-Vuilt Год назад

Genial , gracias por el video

@drakmeralainrodriguezchicc6348 4 года назад

justo lo que estaba buscando gracias

@torresvargascarlosmarcelo2604 4 года назад

Buenas .. un gran video😆

@secretboy8175 3 года назад

Genial eres el mejor sigue así crack

@ferdy77cc 4 года назад

Hola brother, gracias por tu tutorial. Queria hacerte una pregunta. Como se llama la herramienta que utilizas en firefox para ver el tamaño de la ventana del navegador en pixeles. Gracias

@ivanleiva9651 4 года назад

hola master,una pregunta,no es mejor poner un Ancla en vez de un button en los iconos? q diferencia habría?

@romanargenti2233 4 года назад

Me encantó ,buen video

@osmeig6025 4 года назад

Excelente! Muy buen tutorial crack! Éste tipo de videos son los que busca la mayoría de la comunidad, son un genio! Tienes algún curso de Desarrollo Web actualizado, así con éste tipo de tecnologías como CSS Grid, Flexbox, HTML5, CSS3, JavaScript? Con éste tutorial no sólo te ganaste un suscriptor sino un fanático de tu contenido! Gracias millones y eternas!

@FalconMasters 4 года назад

Muchas gracias Osmaei, mi curso de diseño web profesional cuenta con todo lo que mencionaste, salvo CSS Grid, porque eso lo enseño en mi canal de youtube.

@osmeig6025 4 года назад

@@FalconMasters Genial... lo compraré en breve... Y para conectar con backend? Curso de PHP y MySQL algo así?

@FalconMasters 4 года назад

@@osmeig6025 Si tambien tengo un curso de PHP y MYSQL, ese lo puedes ver aquí: www.udemy.com/course/php-y-mysql/?referralCode=65030D8167A2AC468B3A

@hermano_Juan 3 года назад

Excelente practica carlos Arturo justo lo que buscaba como diseñar una pagina del nivel de youtube o facebook y gracias a ti lo encontre, una pregunta porque te cambiaste del sublime a visual studio??

@douglasmorales9101 4 года назад

grande falcon muchas gracias

@QueHayDetras 4 года назад

Muy buen tutorial, y por que no haces la pagina de reproduccion del video?

@HYP3RK1NECT Год назад

Fue buena ese comando de Ctrl + D de VSC. Otra consulta. ¿Se puede hacer en React?

@JulioAlaniz 4 года назад

Muy buen video!

@marjoriesusanagaibor4660 10 месяцев назад

te adorooo graciasss

@DanielStanlyInterianoRapalo 3 года назад

Excelente, he aprendido mucho de tus videos. Te felicito por la claridad y la didáctico de tus videos. Quiero tomar uno de tus cursos en Udemy para desarrollo web, cual me recomendarías.

@FalconMasters 3 года назад

Muchas gracias! Me alegra que mis videos te sean de mucha ayuda. Si estás empezando te recomiendo mi curso de diseño web profesional abarca muchos temas que son esenciales para el desarrollo web.

@nanoyt2 4 года назад

Excelente 👏👏👏👏👏👏👏👏

@sebac0des 3 года назад

Hola Carlos, una pregunta... Cuando mencionas que la animación no funciona en Chrome y una forma de solucionarlo seria no usar CSS Grid, ¿ cual seria la practica más efectiva para que funcione ? ¿ Bootstrap ?

@pablocastillo9040 4 года назад

Soy Autodidacta no voy a la universidad porque el costo es muy alto donde vivo, pero estoy aprendiendo por mi cuenta, solo se Html y Css y comenzando apenas JavaScript pero me gusta esto ya que adquiero conocimiento en la practica, gracias amigo, me suscribo a tu canal.

@FalconMasters 4 года назад

Hola Pablo, me da mucho gusto que tengas la iniciativa de aprender, y no te desanimes, yo fui a la Universidad y mejor la deje, no es la gran cosa y para ser desarrollador no la necesitas realmente, lo que necesitas son ganas de aprender ya que con internet tienes todo el conocimiento que necesitas a la mano.

@Luis.628 4 года назад

Buenas podrías grabar unos vídeos haciendo una web de venta de productos con Django junto con bootstrap y otros lenguajes de programación que quieras integrar? La meta es hacer una pagina de venta con un carrito que se actualiza el precio automáticamente cuando añades productos o elimines. Saludos

@eleuquenido5854 Год назад

el primer tutorial que me funciona :"v que emoción

@colommbiano 3 года назад

Maestro y como hago para que el header y el menu lateral queden estático y que al momento de hacer scroll solo se desplace hacia arriba el contenido ???

@Eduardo-ug9ui Год назад

No sería mejor para la parte de grid videos usar flexbox para que al redimensionar la pantalla se desplaze hacia abajo los enñaces?. No se. Ando aprendiendo aún.

@santisalasb 4 года назад

Buen video, lo malo de CSS Grid es que no se puede hace mas de 1 panel deslizante, porque al cambiar el Grid Template Columns, se asigna valores para todo el grid nuevamente. @FalconMasters, Como podria activar y desactivar 2 paneles del grid, de forma infependiente.

@mr.oliver559 3 года назад

Muito obrigado!

@tomassanimbo5255 4 года назад

Soy mucho feliz... yo te amo

@enriqueduarte1380 4 года назад

hola!!! muy buen video, quisiera preguntarte como seria que para que al hacer click en uno de los items del menu lateral coloque los estilos de el "Pagina Principal" y desactive del mismo

@enriqueduarte1380 4 года назад

no te preocupes ya me di cuenta

@yorvymeza1546 3 года назад

Hola Carlos como estas? Carlos felicitaciones con todo corazón

@FalconMasters 3 года назад

Gracias!

@yorvymeza1546 3 года назад

Carlos porque no hace un video enseñando como desplegar la parte de la notificaciones y la parte de inicio donde esta el logo de falcon master sabes así como la tiene youtube y facebook sería buenisimo para este proyecto Carlos por favor, yo lo hice pero no me quedo igual ya que utilice boostrap con la clase dropdown

@sebastianospinaocampo3951 4 года назад

Excelente vídeo sos un crack

@FalconMasters 4 года назад

Gracias!

@masterghost3195 2 месяца назад

Y si yo quiero agregarle logotipo ya diseñado cual sera la formula para agregarsela es que apenas estoy aprendiendo a usar html

@stibenllunibers2443 8 месяцев назад

No mames wey neta me gusta mucho la programacion e interesante, buen video

@luiscarloscarrionalvarez3506 3 года назад

Una pregunta, a mi no me funcioó lo de Active con el container :/

@elconde8786 4 года назад

Hola Falcon me ha encantado este nuevo tutorial tanto que he decidido utilizar el diseño para un proyecto personal a futuro, pero tengo una duda y es que como puedo fijar el header y el menu latera izquierdo cuando se hace scroll a obtener mucho contenido, lo e intentado con un position fixed pero el menu se corta en el caso del header y en el caso del menu lateral izquierdo este se desproporciona, me serviria mucho una respuesta. Saludos

@FalconMasters 4 года назад

Hay varias formas, la primera y mas sencilla es que el header lo saques de la grid. Usa solamente css grid para el menu y el contenido. Y la otra que no he probado pero se me ocurre aunque es mas difícil. Es que programes un script que al hacer scroll cambie el header a fixed, corrijas los estilos necesarios para que siga luciendo igual y en el area del header que antes teníamos le pongas un min-height para que no haya un salto al pasar a fixed. Es mas complicado de esta forma, por lo que lo mejor seria la opción #1. Sacar el header de grid.