Crea una Pagina WEB con BOOTSTRAP 5 desde 0 | Rapido
Вставка
- Опубліковано 12 бер 2021
- En este video hacemos una pagina web responsive con bootstrap 5. Bootstrap es uno de los frameworks mas populares de CSS y que mas se usa en practica. Si te gustaria aprender Desarrollo WEB en youtube:
bit.ly/3f0Xh7B
Aprendemos como usar:
1) la clase navbar de Bootstrap para crear el menu
2) la clase carousel para crear un slider de Imagenes
3) el grid system de Bootstrap
4) Formularios, botones
5) Iconos
🗨️ Twitter: / emprinnos
📱 Instagram: / emprinnos
Recursos:
github.com/tameemsafi/typewri... (Typewriter JS)
getbootstrap.com/ (Pagina Oficial de Bootstrap)
getwaves.io/ (Imagen SVG para fondo)
Proyecto Completo:
github.com/Emprinnos/bootStra...
#bootstrap #desarrolloWEB #paginaWEB #programacion
![Lp. Последняя Реальность #107 РОДНОЙ ДОМ [Финал] • Майнкрафт](http://i.ytimg.com/vi/IK3QKzKUlHM/mqdefault.jpg)
chequen este video para aprender como crear un portafolio web con tailwind CSS, otro framework de CSS bastante popular, ua-cam.com/video/TC5s9p6T04c/v-deo.html, saludos!
Un capo la verdad, gracias!!!! Te ganaste otro suscriptor porque tu contenido lo amerita
Hola Emprinnos estoy aprendiendo Bootstrap y me sirvió mucho como practica! un abrazo.
Muchas Gracias! Excelente desde el principio hasta el fin!
Muchas gracias, me has salvado, explicas muy bien, sigue así, de nuevo gracias !
Excelente capacidad para enseñar, te felicito!!! y gracias!!!
Entendi más en una hora acerca de bootstrap aquí que con mi profesor en una semana . GRACIAS por salvar mi Proyecto
que bueno Adrian, comparte con otros amigos, saludos!
Excelente video! Estoy volviendo al diseño web, antes usaba bootstrap pero de tanto tiempo sin verlo me había olvidado practicamente de todo. Muy valioso tu contenido!! Un saludo!
Que bueno Nico! Saludos!!
Excelente video y explicación, muchas gracias por compartir sus conocimientos
Puede que haya aprendido menos en una semana de clase que en una hora viendo este video, un tutorial de 10 amigo te felicito.
que bueno amigo! Comparte con otros amigos que estan aprendiendo Bootstrap, saludos!
Eres todo un crack muchas gracias por este contendió de excelente calidad, no tienes ni idea de cuanto me ayudo
Que bueno que te haya ayudado, saludos!
Muy agradecido por compartir tus conocimiento y tu generosidad por dejar el código, excelente video.
gracias amigo, saludos!
es la mejor explicación que he visto, te mereces millones de seguidores. Like, suscrito, compartido y recomendado! muchas gracias!!
gracias amigo por tu apoyo, saludos!
Buenisimo! Nuevo subscriptor, aprendí mucho te explicas muy bien! 😄
muchas gracias, desde Chile , muy bien explicado , Saludos
Lo que andaba buscando joya, muchas gracias, aprendo y de paso entrego el proyecto final =)
que bueno que te haya ayudado el video, comparte con otros amigos, saludos!
este video aportu mucho a la comunidad. Gracias por tu esfuerzo.
Gracias amigo, saludos!
Sos un crack amigo, empezé este año con html, css, bootstrap, etc y con esto entendi todo lo que hablaban en clase y obvio me ayuda muchisimo para el trabajo final.👏👏👏
gracias amigo, saludos!
Muy buena explicación!! fue de muchísima ayuda que haya explicado las clases de bootstrap mientras las iba usando, me despejó muchas dudas. Y esa forma de usar las media queries y acomodarlas me viene muy bien, es una muy buena practica ordenarlas así! eternamente agradecido, muchas gracias y continúe subiendo estos valiosos ejemplos por favor!! saludos
gracias amigo, saludos!
De pelos, de lo mejor que he visto. Tengo mil notas, ni me di cuenta de cuantas tenía hasta que terminé. Gracias.
Que bueno que te haya ayudado el video, saludos!
Hola muchas gracias por tu aporte, me has ayudado mucho, yo no lo entendia hasta que vi tu video y me a gustado gracias😁☺ No dejes de compartir contenido
claro Ana, saludos!
Gracias hermano, muy generoso de tu parte de dejar el codigo completo, no todos lo hacen. Muy buena explicacion. Bendiciones.
De nada Ernesto, saludos!
Muchas gracias, eres un titan de la enseñanza, felicitaciones sinceras
gracias Jorge!
El mejor tutorial que eh visto
¡Estupendo! Este video es valioso verlo aunque no nos vayamos a especializar en Bootstrap, por la gran cantidad de técnicas y recursos que presenta 😎👍
Gracias, saludos!
Muchas Gracias por tu aporte a la comunidad
De nada Juan, saludos!
Este video me abrió la mente a muchas posibilidades. Muchas gracias!! 😃
de nada Juan, salduos!
Muy buen video, me sirvio mucho!!
Muy Bueno el video
Me ayudo muchos.
super bueno. gracias
mil gracias por la información compartida. Me sirvió muchisimo. Me suscribo!
Gracias Andrey!
Que barbaro!!!, buenísimo, gracias!!!
Me alegro que te haya ayudado el video Ruben, saludos!
Muchas gracias, lo hice al proyecto! Muy buena práctica!
la practica es lo mas importante Fabian, saludos!
De verdad muy bueno, yo aproveché el proyecto y diseñé uno que quería hacer y a la vez practicar, sin duda que sirve además, como proyecto para el repositorio. Gracias, gracias, muy bien. Además, habla muy bien el español, por el acento asumo que no es su lengua nativa.
Me alegro mucho que te haya ayudado el video, saludos!
Excelente explicación, estoy aprendiendo mucho!
que bueno amigo, saludos!
excelente, muchas gracias! Saludos desde Republica Dominicana 🙌🏼👏🏼👏🏼👏🏼🙌🏼
Saludos Juan!
ya antes habia hecho proyectos pero con bootstrap 4, buen proyecto, primera web que hago con la quinta version
siempre cambia, pero la base mas o menos es la misma, saludos!
Muy buen Video. me ayudaste mucho con varias dudas. !!! y gracias por el codigo me ayudo a ver errores . saludos.
Que bueno que hayas usado el codigo para guiarte, saludos Luis!
Muchas gracias, sos un genio!
gracias amigo, comparte con otros amigos, saludos!
Gracias me gusto muy bien explicado
que bueno que te haya gustado, saludos!
Un capo muchas gracias a prendí mas en este video que lo que me enseño mi profesor en el año
que bueno Tomas que te haya ayudado el videom, saludos!
Muy buen video... Buenisima explicación... Muchas gracias por compartir tus conocimientos. Un saludo!!
gracias Cesar, saludos!
Excelente contenido, muchas gracias!
que bueno que te haya ayudado Byron, saludos!
Sin palabras 👏👏👏😃
que nivel, en 1H, se me hizo super rapida, y senti que iba encajando todos los conocimientos que he ido adquiriendo, es decir, entendi todo lo que hacia y me sorprende lo que en teoria podria llegar a hacer, solo que no confiaba en si verdad ya tengo lo suficiente, con este video confirme que ya puedo hacer algo asi, obviamente me demorare mas, pero wow, confien en ustedes e intentelo, seguro con lo que saben pueden hacer mucho mas de lo que creen.
10/10 GRACIAS
que bueno que te haya ayudado el video amigo, saludos!
Gracias ....muy didactico....aprendi rapidamente.
Gracias David, saludos!
muy bueno, gracias me sirvió pero tengo una duda y es sobre el uso del main.js que se supone que se usan para hacer que una pagina tenga mas funciones y pestañas
Eres un crack man, en serio
Que bueno que te haya ayudado el video
Demasiado util y bien explicado!!!!!
gracias Maria, saludos!
Gracias me has resuelto muchas dudas 👌😃
Que bueno, Saludos!
Buen video , te felicito
Un curso increible. Un master. No tiene millones de vistas, porque este tema solo le interesa al 0.001% del planeta. Caso contrario tendria millones, Gracias por todo. Saludos desde Costa Rica
Gracias Franklin, saludos!
Éxito total ❤
gracias amigo, saludos!
Excelente video, ya tienes nueva seguidora! Solo que estaría bien que explicaras al inicio que debemos tener descargado Live Server
No hay problema, el live server es para ver los cambios sin recargar el navegador, no tiene nada que ver con el bootstrap, es una extension de vs code, pero podria ser cualquier otro editor, saludos!
Gracias por este video! 🙌
de nada Sergio, saludos!
Muchas gracias por su tiempo!! Saludos desde Buenos Aires, Argentina!!!
Gracias campeon, saludos! comparte con otros amigos
Se agradece crack
Gracias amigo, saludos!
A los 2 minutos me convencio de suscribirme con ese uso de los comentarios
Gracias Ricardo, saludos!
@@Emprinnos No, a vos en una noche realice el index de mi tienda virtual y nunca se habia visto mejor, saque un 100 en mi clase y ahora ya di el primer paso para tener mi tienda virtual
Excelente!!! ⭐⭐⭐⭐⭐
Excelente video, me gustaría más contenido, saludos!
Claro amigo
Mil gracias!! Me ayudó mucho para mi proyecto en la universidad!
Que bueno Angel, saludos!
Gracias por el vídeo!
todo bien Paco, saludos!
Muchas gracias!!!!!
Super explicativo
gracias amigo, saludos!
Excelente contenido!!!
Gracias Cristian, saludos!
tome su like, buen hombre
lo amo profe
Gracias Fernando, saludos!
Gracias bro me encanto la pagina
que bueno que te haya gustado, saludos!
Excelente muy explicado
talvez me gustaría saber si podrías hacer un grid de imágenes tipo carrusel el cual al darle click se haga grande, por lo demás excelente saludos
No hay problema Carlos, esto se llama galeria de imagenes modal, si hago otro tutorial de bootstrap, la voy a implementar
Excelente explicación
Gracias Juan, saludos!
Un capo 😎👍🏼👍🏼
Gracias Robinson, saludos!
Excelente. Gracias 👍🔔 👈
gracias Henry, saludos!
Aprendí más aquí que con mi profesor, buen video profe 🥰 nuevo sub.
gracias Toram, saludos!
x2
gracias!! excelente
De nada Jimenta, saludos!
Sos un genio, tu manera de enseñar es muy pedagógica, podrías hacer un vídeo sobre React! Saludos!
Claro amigo, saludos!
@@Emprinnos Hola, no encuentro el navbar que tienes en el video.
@@heidyjuliethcruzacosta9823 has miradao en la version 5.1.3
Echo en falta las CARDS, no se si las tienes en otro vídeo genial explicado. Saludos
Todavia no hice ningun video relacionado al componente CARD, pero lo tomare en cuenta para el proximo, Saludos!
excelente video
gracias amigo, saludos!
Muchas gracias amigo
Saludos Ivor!
te amo,no entiendo una chota pero tengo que hacer un tp en un curso de programacion que al principio del curso entendia pero como pelotudo no estudie y se me hizo todo una bola de nieve y lo principal que es paginas html no entiendo nada. Te amo por explicar tan bien!!!
que bueno que te haya ayudado el video, comparte con otros amigos que de repente lo necesiten, saludos!
Genial tu video, fui paso a paso ralizando todo lo que comentabas, puede realizarlo, solo me quedo mal el texto en la parte del mapa, ya vere como solucionarlo, muchas gracias, buscare otros, espero puedas seguir subiendo del tema.
Si lo implementaste igual, puedes bajar el proyecto de github, a ver si te ayuda, es cuestion de acomodar el texto
Que makina...
Gracias Jose, saludos!
muchas gracias! espero ver mas videos de front end! explicas muy bien, un video de react sera posible?gracias
Claro
@@Emprinnos gracias !! Empecé hace medio año a estudiar por mi cuenta y personas como tu que suben videos sin beneficios enseñando a otros cambian vidas !! Si me capacito y consigo empleo también te lo debo a ti muchas gracias
@@mikmattos es totalmente factible, la cuestio es ser perseverante y no desanimarse
Antes que nada Muchas Gracias por haber hecho ésta página, me ayudaste mucho, tuve que buscar el tutorial ya que no entendí muy bien las clases de mi profesor, en todo ese proceso me dio la gran sensación de que la programación no es para mi, ya antes de comenzar la carrera tenia ese sentimiento y pensamiento ya que la tomé en primer lugar porque es la carrera que mas se acerca al área que me llama la atención o que me gusta, que son las computadoras, pero en realidad no me llena, no me llama demasiado la atención, y ahora que lo pienso en realidad no se que me llama la atención, no se que haré, espero sacar buena nota en el proyecto de la página, muchas gracias por leerme, y que tengas un feliz día.
El area de la computaction es super amplia, mas adelante vas a encontrar el aspecto que mas te guste, el de aprender es cuestion de tiempo y perseverancia
@@Emprinnos Muchas gracias por el consejo, lo aprecio mucho, de verdad, y te vuelvo a agradecer por el video está muy bien explicado, y aprendí cosas que no sabia. Tienes razón, trataré de ser fuerte y resistir lo más que pueda. Muchas gracias
@@maikolguerrero9395 todo bien amigo, animo!
@@Emprinnos Gracias 😊
muy buen video. que plug-in utiliza para las clases de bootstrap, no me molesta escribir pero es bastante practico el autocompletar y pues evita errores. muchas gracias.
intenta html css support es una extension disponible en vscode
excelenet+
Saludos Celso!
Estimado buenas tardes te consulto por que me pasa que tanto en el slider como en la seccion de servicios elegi imagenes de distintos tamaños que tuve que aplicarle individualmente height and width para que esten todas iguales pero al achicar pantalla todas pierden su tamaño y no se como solucionarlo. Agradesco una ayuda gracias😮
Gracias por tomarte el tiempo de explicar detalladamente cada punto!!! Consulta...como configuro mi correo para que me lleguen los correos desde la pagina?
fijate en este video amigo, seria la forma mas facil, ua-cam.com/video/hZdy2G__1BU/v-deo.html
Hola! Muchas gracias por compartir tus conocimientos. Estoy estudiando y tengo el mismo codigo que vos. Tengo una consulta con respecto al contenedor del form, cuando le coloque la posicion absoluta se super posiciono sobre la imagen del mapa y sobre el footer. Tambien la imagen del mapa me quedo pegada al margen y el texto de local mas abajo, desordenado en fin. Podrias ayudarme?
Me imagino que es al cambiar el width de la pantalla, es cuestion de modificar las propiedades con media queries. Lo que podrias hacer es bajar el archivo de github el link esta en la descripcion del video, de esta forma lo puedes probar y tenerlo como referencia
Muchas gracias por este valioso aporte. Espero me respondas mi duda: porque me aparece invertido el contenido del nav del boton y de todo lo demás. A la derecha una cosa y a la izquierda la otra.
claro amigo, si me das mas detalles intentare ayudarte, no se a que te refieres con invertido, si es la posicion, el orden de los enlaces o algo mas, los navbar de bootstrap todos tienen la misma estructura, fijate en estos ejemplos a ver si tambien te parecen invertidos
getbootstrap.com/docs/5.3/examples/navbars/
Hola! Gracias por tu aporte amigo. Tengo una duda...usar bootstrap es una de esos casos específicos en los que usar "!important" en CSS está bien?
Si, es muy comun esto
Muchas gracias. Excelente video 👌. Una consulta con tu experiencia que recomendarías. Para mejorar la lógica de programación?
La verdad Luis es que no hay trucos magicos, pero lo que si te va a ayudar es primero tener una comprension solida de los conceptos basicos y de ahi es practica, haciendo proyectos reales, porque es asi como vas a mejorar
Hola amigo antes que nada gracias por aportar esos conocimientos sin duda un gran video, una pregunta tengo un problema con las imágenes dos se ajustan bien, pero la tercera tiene mayor altura y cuando carga esa imagen, se mueve el contenido hacia abajo, por que podrá ser?, gracias de antemano
Es porque el contenedor donde esta la imagen no tiene suficiente espacio, intenta cambiar el width y el height de tu imagen, a ver si te funciona o tambien puedes cambiar el tamano del contenedor y le pones widht 100% y height auto
Buenas, muy bueno el tutorial, me gusto mucho, una pregunta, que addons de chrome utilizas para redimensionar y se actualice la pagina sin refrescar ya que en mi pantalla no se ajusta las imágenes al ejemplo.
Hola Guillermo, para el tutorial usaba los dev tools de edge, ctr + shift + i para abrirlos y en vs code tenia la extension live server que hace que se actualice todo al guardar los archivos
@@Emprinnos Muchas gracias, muy amable al responder.
De nada Guillermo, Saludos!
Hola, realmente muy bueno tu video tutorial! Me surgió una duda, cómo puedo cambiarle el color a "Ubicado en Miami Florida"?
El color del texto se debe a la clase txt primary que es azul en bootstrap, le puedes poner una clase tuya y en archivo css usa color: y le pones el color que quieras, si lo haces asi, quitale la clase txt primary para no tener conflicto o usa otras clases de bootstrap, aca estan
getbootstrap.com/docs/5.0/utilities/colors/
Hola, muchas gracias por este video. Me podrías ayudar con la opción "With captions"... no me muestra el ni el ... mucho te lo agradecería.
El div donde se coloca la imagen tiene que tener este formato:
First slide label
Some representative placeholder content for the first slide.
Fijate en el ejemplo de la documentacion:
getbootstrap.com/docs/5.1/components/carousel/
Hazte un ejemplo simple en un archivo aparte a ver si funciona
@@Emprinnos Muchas gracias por tu respuesta!!!... lo voy a intentar...
y los juego de zamsun contra dewalt? :)
Muchas gracias! Muy buena práctica para empezar con Bootstrap. Lo que sí, intenté y revisé todo y no me aparece el mapa. Alguna idea de qué podría estar pasando?
El mapa es una imagen, probablemente sea la ruta del archivo
Hola muy buenos los vídeos, tengo un problema para hacer una página full responsive. Ya probé cambiar los tipos de contenedores y las class, podrías ayudarme? Estoy iniciando en esto de la programación. Desde ya muchas gracias
Hola Matias, no se que estas tratando de armar, pero si lo estas armando con bootstrap primero tienes que hacer wl layout o sea la distribucion de las secciones principales tanto para desktop como para movil, puedes usar el grid de bootstrap, fijate en el playlist de bootstrap, hice un video acerca del grid y todas las clases. Un error comun es empezar a colocar contenido sin tener una idea clara del layout. Si no usas bootstrap, puedes usar css grid o flexbox, tambien hice videos acerca de esto. Bootstrap usa flexbox para su diseno responsive.
una pregunta que extensiones le instalaste al visual studio?
Fijate en este video amigo, Mejores extensiones VS Code para Desarrollo Web
ua-cam.com/video/F0Xzxq0L814/v-deo.html, como theme mayormente uso atom dark
👏👏👏🙏👍