Bootstrap 5 tutorial español - Login con HTML5 y CSS3

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

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

50% 1

En este tutorial aprenderás a crear una pantalla de Login con la nueva versión de Bootstrap 5
Descargar archivos gratis: gum.co/trqyN
Imágenes en Unsplash: unsplash.com/@xps
Logo Dell: worldvectorlog...
Si te interesa apoyarme puedes comprar mi curso de "Diseño Web" en Udemy www.udemy.com/...
Hola me llamo Diego Velázquez Rabasa, si te gusto el video sígueme en mis redes sociales.
Twitter: / diegovr77
Instagram: / diegovr7
Dribbble: dribbble.com/d...
Behance: www.behance.ne...
LinkedIn: / diego-velazquez-rabasa
#UX #UI #Bootstrap5 #Diseño
Tutoriales recomendados:
Las mejores páginas web: • Las mejores páginas we...
Página web con Bootstrap 5: • Página web con Bootstr...
Crear clon de instagram con Bootstrrap 5: • Bootstrap 5 tutorial e...
Crea un header increíble con Figma: • Figma tutorial español...
Hover en Figma: • Figma tutorial español...
Scroll Horizontal y Vertical en Figma: • Figma tutorial español...

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

14 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Si te interesa apoyarme puedes comprar mi curso de "Diseño Web" en Udemy con 60% de descuento por tiempo limitado www.udemy.com/course/diseno-web-ux-ui-profesional-curso-completo/?couponCode=JULIO2022 Si te gusto el video te agradecería si le dieras like, te suscribieras al canal. Ve el nuevo tutorial de Bootstrap 5 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WBgw_Fgb4cY.html Las mejores páginas web: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pXD5OainmTY.html

@VictorManuel-go7ch 3 года назад

al momento de realizar el row g-0, no se quita la barra, alguien sabe por que? tenía esa duda, en vez de g-0, puse m-0, afectaría en algo?

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

en 26:37 pudiste haber utilizado 'justify-content-center' en vez del 'align' y te ahorrabas todo lo que hiciste para centrar los elementos verticalmente. Esto pasa porque al usar el flex en column se cambian los ejes de dirección (el eje principal pasa a ser el vertical) por lo que 'justify-content' pasa a manejar la alineación vertical y align-items pasa a manejar el horizontal (por eso te pasó que los bloques se contrajeron). Buen tutorial, estoy aprendiendo boostrap después de aprender flex y gridd.

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

Después me fijé que querías poner los elementos separados por lo que en vez de 'justify-content-center' se podía usar 'justify-content-around' o 'justify-content-between'

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

YESSSSSS

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

Excelente trabajo amigo... no se por que casi no te dan Like si eres genial haciendo esto.

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

Hola Dani, te agradezco por tu comentario, jaja espero que crezca más el canal en 2021.

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

Brutal!!! Mil gracias por dejar el archivo para descargar!! Me suscribo!!

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

Perfecto Arturo, que bueno que te gusto :D

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

Que super y efectivo, muchasssssssssssssssssssss gracias por compartir el conocimiento !

@Deus-lo-Vuilt 2 года назад

Muchas gracias , ojalá mas material de B5 , saludos

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

Gracias por el aporte me fue muy util, podrias hacer uno de login con conexion a una base de datos?

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

Hola, Joan tal vez en el futuro. Mientras puedes buscar en RU-vid, hay otros tutoriales buenos de autenticación. Por ejemplo aquí usan React con Firebase ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-aTlr4SC4Skw.html

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

Muy buen video y ya estoy subscripto a tu canal.

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

Super, me encantó me dio mucho animo para regresar a maquetar. Saludos

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

Qué bueno, me alegra escucharlo. muchas gracias :D

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

@@Templune gracias de verdad!, me ayuda mucho, estoy actualizandome, me aleje, pero ahora gracias a ti regreso a una de mis pasiones.

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

@@kolorkreativa4524 Perfecto, si es bueno estar siempre aprendiendo y más ahora que todo avanza muy rápido. Te deseo mucha suerte :D

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

Broooooooo, estás en otro nivel, en serio

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

Muchas gracias Salomón, me alegra bastante que te sirvan :)

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

bueno muy bueno pero al final con el carousel de boostrap en la clase de d-none , es donde empieza el lio.

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

amigo buen tuto, pero el input password me afecta al input de arriba también que es un type email, me coloca el background del type email como si fuera password, tienes idea de por que?

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

Excelente video 😃

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

Gracias Diego, que bueno que te gusto

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

Qué tal, Diego. Primero que nada quiero agradecerte por el contenido que subís al canal porque me está ayudando muchísimo con maquetación. En segundo lugar quería consultarte respecto a este template. En Chrome la columna del slider ocupa todo el 100% del height, pero el slider con id carouselExampleCaptions tiene un height menor. A qué puede deberse esto?

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

Tengo una pregunta cuando le das click al placeholder tiene un color blanco y yo quisiera saber si hay una forma de que se quede igual

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

.form-control:focus{ background-color: var(--dark-x); color: var(--light); font-size: 1.4rem; //Tengo rem ajustado a 1rem == 10px (Es decir, serían 14px) }

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

eres un CRACK!!

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

Buenisimo,siga asi

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

Gracias por tu comentario 😁

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

Hola Gracias por este tutorial, esta muy bueno. Te comento tengo un problema estoy en la parte que agregas los iconos a los botones y al intentar separar el icono con el texto con la clase mr y ml, en mi VSCode me indica mr2 y no mr-2, coloco el mr2 y no me entrega la separacion. Google

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

Tengo el mismo problema casi me vuelvo loco

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

x2 no me toma los mr o ml D:

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

descubrí que en la version mas actual de bootstrap 5 ml=ms y mr=me por si aun no encuentran solucion saludos.

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

No puedo centrar lo verticalmente, es decir no sucede nada utilizando mx-auto. :/

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

Hola Luis, mx-auto es para centrar horizontalmente. prueba poniendo la clase de d-flex al padre y al hijo ponle align-self-center. Igual puedes revisar la documentación de bootstrap 5 la sección de Flexbox

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

Gracias, soy nuevo en esto, todo lo que hiciste es front end?

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

Hola, si es solo el diseño. No tiene funcionalidad.

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

@@Templune gracias por el aporte :)

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

@@icmbrs8249 De nada, espero te sirva :D

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

Muy bonito diseño.... consulta por queble dices vichual studio code, si es con S y no CH

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

Gracias por el comentario, jajajaja no me habia fijado. Lo que dice Google de como se dice Visual: www.google.com/search?q=how+to+pronounce+visual&oq=how+to+pronounce+visual&aqs=chrome..69i57j0l7.10190j0j1&sourceid=chrome&ie=UTF-8

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

Pero si estas hablando en español....jijiji