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

[@FalconMasters]

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]

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

[@FalconMasters]

@@ManelBenlloch Todavía existe google plus ?

[@leonardoscuro]

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

[@jesussalazar342]

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...

[@nasajpg]

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]

Gracias por el apoyo!

[@byronhernandez]

@@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 KZbin asi obtener el Certificado.

[@sayedakbarali5650]

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]

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

[@alexo2537]

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]

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

[@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.

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!

[@lRemoved]

De los mejores KZbinrs que conozco, excelente Carlos, eres genial. 👏🏻👏🏻👌🏻

[@FalconMasters]

Gracias!

[@damasodanieltellesochoa6633]

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.

[@Sergio-ep8zh]

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

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

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

[@FalconMasters]

Haha gracias!

[@marioorochena3066]

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.

Excelente, lo que estaba necesitando para mí proyecto.

[@aleatoreoaleateoreo3262]

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]

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

[@carlosandresramirez9808]

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

[@DanielHernandez-to7fj]

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.

[@ransesrivas142]

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

[@JValenteM92]

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!

[@yairgarizabalo9821]

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 KZbin.

[@yo_mastermind]

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....

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.

[@ignacioleon4087]

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

[@FalconMasters]

Me alegra mucho escuchar eso!

[@igor.miranda]

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

[@sjr4303]

Muy bien, muchacho. Saludos desde Brasil.

[@demiantah3179]

tremendo tutorial, me pongo al tanto de los cursos!

[@dj0000]

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

[@alejandrorodriguez8293]

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!!

[@fenigraal]

waooo, me gusto mucho este video, gracias FalconMasters

[@MarkcartneyR]

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

[@ulisescruzgonzalez2677]

muchas gracias, excelente ejercicio

[@krizalidzero9249]

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

[@osmeig6025]

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]

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]

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

[@FalconMasters]

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

[@edwinloaiza1017]

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.

[@pablocastillo9040]

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]

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.

[@dennismartel2209]

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

[@edgareliamsantos5751]

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.

[@raulreyes1823]

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 :)

[@ivanleiva9651]

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

[@Drysdev]

Gracias a tus vídeos aprendí css

[@cleidysbrooks]

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

[@FalconMasters]

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

[@clauq347]

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

[@FalconMasters]

Gracias!

[@osepulvecl]

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

[@andresgonzalez7367]

Wow, aprendí mucho con este video

[@ramonalejandrourbinalinare4002]

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.

[@thebetoxpro]

Es increible la forma en la que explicas, increible contenido

[@FalconMasters]

Gracias!

[@enriqueduarte1380]

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]

no te preocupes ya me di cuenta

[@SebastianOspinaHD]

Hermoso. Sigue así y llegarás lejos.

[@gabiadq]

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

[@ferdy77cc]

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

[@santisalasb]

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.

[@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.

[@victornarvaez521]

Muy útil el tutorial. Gracias.

[@DanielStanlyInterianoRapalo]

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]

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.

[@colommbiano]

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 ???

[@sebac0des]

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 ?

[@andresbadillo2706]

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

[@analuciamarzocca3748]

Me encantó! Gracias.

[@Thom.Zille.]

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

[@sebatecning5207]

Excelente, ahí tienes un nuevo suscriptor

[@K69-d6g]

Y como añado el icono de busqueda por voz directamente para evitar escribir

[@victorguevara4698]

Bestial. Saludos desde El Salvador.

[@kevin_neamt]

tengo una duda porque descarge el temple /demo y no funciona lo de la barra lateral la transicion para guardar los que escribe directamente se esconde muy bruscamente , necesito ayuda plis . Gracias y muy buen video

[@FalconMasters]

En el video menciono que la transición solo funciona en chrome de momento.

[@kevin_neamt]

@@FalconMasters gracias por responder pero si exactamente Chrome estoy usando pero no pasa nada miraré a ver que puedo hacer, gracias por dar tu tiempo en responder

[@FalconMasters]

@@kevin_neamt Puedes hacer la animación si no usas css grid.

[@Magistrado1914]

Excelente tutorial Visto en 07/02/2020

[@diegorabanal2146]

Como hago para que el menú lateral quede fijo?

[@JuniorMosquera2016]

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

[@FalconMasters]

Muchas gracias

[@HYP3RK1NECT]

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

[@kevin_neamt]

Arturo tengo una pregunta, como puedes hacer cuando le picas a la foto de la derecha que se te abra un submenu y dentro que puedas poner el modo noche u otras cosas? Pero que no abarque toda la ventana solamente unos px

[@FalconMasters]

Eso lo puedes hacer con javascript. Haciendo una ventana emergente o tooltips. Tengo varios videos que te pueden servir, puedes verlos en mi canal de youtube.

[@kevin_neamt]

@@FalconMasters muchas gracias, son tus vídeos de js con fondo amarillo? Edit: ya encontré la forma, eres un crack ❤️

[@four-leggedcat285]

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

[@propts2953]

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

[@masterghost3195]

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

[@luiscarloscarrionalvarez3506]

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

[@krishcm3016]

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

[@romeobetances7964]

Genial amigo, siempre me sorprendes.

[@secretboy8175]

Genial eres el mejor sigue así crack

[@fer7295]

Hola Gracias Por Todo FalconMaster

[@smith123456789ist]

genial, volvio FalconMasters

[@QueHayDetras]

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

[@drakmeralainrodriguezchicc6348]

justo lo que estaba buscando gracias

[@JORGELUISFABIAN]

el buscador no funciona bien en el responsi

[@susanalara1226]

porque no me sale toda la información que pongo en css al actualizar pagina no me hace nada

[@lenamacia5942]

Y si quiero poner una imagen en las miniaturas? Cómo hago para que no se modifique la imagen al minimizar la barra lateral?

[@hermano_Juan]

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??

[@jjjjssnn]

Excelente como siempre. Gracias.

[@elconde8786]

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]

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.

[@3213470]

22:37 como lo duplicas así para abajo??

[@FalconMasters]

En Vs Code lo hago con Shift + Alt mas flecha abajo

[@tomassanimbo5255]

Soy mucho feliz... yo te amo

[@eleuquenido5854]

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

[@luis920810]

Excelente practica, gracias por los aportes.

[@cristiansantander]

buen video, muy instructivo

[@DanielRodriguez-qv9ny]

Hay alguna forma de que el header y el menú lateral tengan un position: fixed; ?

[@FalconMasters]

Si, pero para en ese caso entonces ya no conviene usar css grid.

[@labibliaoficialenaudio]

Hola master soy principiante. Quisiera que mi pagina web tenga un contenedor de video ejemplo que pueda suir video y se armacene como youtube y un boton que con el link de un video mi video de. KZbin. Aparezca en mi web por ejemplo de boton video de mi mwenu yo pueda tener como una. Galeria de video no se si me entiende espero. Esa enseñanza gracias

[@andresgonzalez7367]

Muy buen video, amo tus trabajos.

[@Felipemartinezgarcia]

Como se haría Responsive?

[@SchenierLopez]

hay alguna solución para las transiciones en Chrome? Porque no solo el ancho es lo que afecta sino también en la media query 768, en Chrome no funciona.... :/

[@FalconMasters]

Para las transiciones en chrome podrias hacerlo sin css grid, y para los mediaqueries si que te deben de funcionar.

[@yovanidanielricovz1751]

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

[@FalconMasters]

Me alegra escuchar eso

[@romanargenti2233]

Me encantó ,buen video

[@Deus-lo-Vuilt]

Genial , gracias por el video

[@alejandrobravo1221]

Que theme estas usando falcon?

[@FalconMasters]

Se llama Ayu con la versión Mirage

[@BatteryProductions]

al usar grids queda obsoleto flexbox no?

[@FalconMasters]

Para nada, ambos se usan muy bien en conjunto, tal como yo los uso en este video.

[@miltonfontal]

Profe excelente vídeo, sin embargo tengo una consulta para quien la pueda resolver, estoy probando realizar un cambio para cuando la pagina este por debajo de los 576px, que consiste en que el contenido quede a ancho completo y el menú se oculte pero cuando se presione el botón que se muestre el menú a ancho completo y el contenido se oculte lastimosamente no e logrado tener éxito con los conocimientos que tengo ¿alguien sabe como se podría hacer?