[ad_1]
https://i.ytimg.com/vi/eDsJAPszugg/hqdefault.jpg
Aprende a crear un página web completa con Bootstrap 4, paso a paso y gratis!, con los componentes más importantes de este Framework. Utilizaremos HTML y la menor cantidad de CSS posibles.
#Bootstrap #CrearPáginaWeb #DesdeCero
Este Taller #1 de nuestro curso completo de Bootstrap 2017, tiene como objetivo poner en práctica lo aprendido hasta el momento.
Analizaremos los siguientes temas:
*** Descargar Bootstrap en su versión 4 00:26
*** Configuraciones de Css, Javascripts y estructura en Html5 01:13
*** Creación de un menú (Navbar) 03:35
*** Creación de un Slider (Flexbox) 08:43
*** Utilizar el sistema Grid de Boostrap 19:52
*** Creación de Aside (Cards) 29:13
*** Configuraciones Responsives 33:22
*** Footer 35:27
*** Fin
Puedes descargar la plantilla del blog en el siguiente enlace: https://goo.gl/sN7zG8
Errores detectados (soy humano jiji):
Display: No le coloque un número asignado por lo tanto tomó la clase del h1, recuerden que pueden utilizar del display-1 al display-4
Curso de Bootstrap 4 PREMIUM!
El valor del curso es de $199 dólares pero podrás acceder por tan solo $15 dólares aquí: https://goo.gl/NeCmze
MÁS CURSOS DE BLUUWEB!
📌 HTML Y CSS: https://goo.gl/yoMdMZ
📌 JAVASCRIPT: https://goo.gl/hnQkog
📌 JQUERY: https://goo.gl/Ag7XsG
📌 CSS GRID: https://goo.gl/nR56pT
📌 VISUAL STUDIO CODE: https://goo.gl/cvu57R
📌 BOOTSTRAP 4: https://goo.gl/npezrj
📌 PHOTOSHOP: https://goo.gl/1C9k5n
📌 PSD A HTML: https://goo.gl/VYX2V6
📌 TEMAS WORDPRESS: https://goo.gl/GeiVNm
📌 PHP Y MYSQL: https://goo.gl/oao1QT
📌 FORMULARIOS CON PHP Y AJAX: https://goo.gl/GKpZAH
📌 ANGULAR: https://goo.gl/WJhtnC
📌 FIREBASE/FIRESTORE: https://goo.gl/bpKL9i
📌 PHP LARAVEL: https://goo.gl/iAbPBy
📌 MATERIALIZE CSS: https://goo.gl/7pSFY5
📌 IONIC: https://goo.gl/RNGKTD
📌 SASS: https://goo.gl/ba7mEE
📌 PROGRAMACIÓN BÁSICA: https://goo.gl/HksyVi
¿Necesitas crear formularios de contacto con PHP?
Ingresa a mi curso PREMIUM a solo $15 dólares aquí: https://goo.gl/K2SKWZ
No olvides suscribirte a este hermoso canal y destruirme en los comentarios 🙂
También puedes seguirme en Facebook: https://www.facebook.com/bluuweb/
Finalmente visita mi sitio web: http://ignaciogutierrez.cl
Original source
33 responses to “Taller #1 – ¿Cómo hacer un sitio web con bootstrap 4? – Curso completo paso a paso”
Cuando pongo la resolución en la mínima, los input se vuelven a poner en fila ¿Alguna sugerencia?
amigo coloco bg-inverse donde me dices y no me cambia el color :C
Brother es la primera vez que comento un vídeo, y me tomo el tiempo de hacerlo para felicitarte, enseñas muy bien, y gracias a ti eh aprendido mucho sobre Bootstrap, aunque la versión actual es la 4.1.1, estoy aprendiendo a leer la documentación y así solucionar algunos cambios que surgieron con la ultima versión, Gracias por todo y sigue así. Saludos.
Les recuerdos que son muchos los términos que han cambiado el curso esta genial, pero deben orientarse en la documentación y tener paciencia y seguir hasta terminar
Genial amigo lo termine todo un millon de gracias para cuando vas a subir el siguiente taller quisera seguir con este tema y hacer el del articulos completos, y tambien como subirlo a wordpress
Hablas chistoso… tu acento delata que eres Chileno :v "e´toloquepasaque…. ahie´talamaniito". jaja Buen video
Hola buenos días, una pregunta, ¿por qué en la cabecera pones dos container (uno fluid y después el normal) y no lo pones directamente debajo del nav? Ejemplo: <nav class="// // // //"><div class="container">CÓDIGO DEL MENÚ</div></nav>
Para los que están haciendo el curso en 2018, hdden-xs-down ya no existe en bootstrap 4, se remplazó por d-none d-sm-block, sm corresponde a partir de qué tamaño queremos que sea visible.
Cuando le pongo al H3 y al P la clase : class="hidden-xs-down" no pasa absolutamente nada! 🙁
Excelente explicación!
nachoooo hhermano … oiee es igual para cual platilla??'
La verdad que son muy buenos los videos por la forma tan transparente que el explica espero que continue y cumpla lo prometido en este curso y seguidmos esperando mas en wordpress. Hare una comunidad aqui para el team wordpress de bluuweb! xD
Muchas gracias Maestro !!!
Hola ignacio, muy bueno tu tuto. Quiero poner un texto slider debajo del navbar pero sin usar imagen de fondo. El texto lo imprime pero siempre detras del navbar, como flotarlo un poco mas abajo para que se pueda ver?, ya he tratado con algunas clases de flex pero no he podido. Saludos cordiales
Hola Bluuweb! que buenos son tus videos, son muy didacticos, te felicito!!. Queria pedirte si puedes hacer un ejemplo de como hacer un menu de navegacion vertical y con submenus con bootstrap 4, ya que el horizontal esta muy bien explicado pero no encuentro un ejemplo de como hacer uno vertical.
Genioo
amigo una consulta estoy siguiendo tus videos hace poco me eh quedado estancado aqui en los layouts cuando haces para ocultarlos con la clases hidden pero yo estoy trabajando con la beta 3 de bootstrap donde segun leo la documentacion ya no existe dicha clase eh probado con esto : .d-none .d-md-block .d-xl-none pero no me resulta el ocultar las etiquetas un manita por favor como podria hacerlo
hola @Blueeweb estoy siguiendo tus videos desde los cursos de html… tengo una gran duda que no he podido resolver… Como agregamos un slider con particulas aplicando boostrap ??, si me puedes responder me ayudaria muchisimo <333
Hola!!! buen tutorial, sigue adelante!!!
Hola Ignacio
1º Tu curso de bootstrap 4 es fantástico
2º ¿Programas en CodeIgniter, PHP?
3º ¿Me puedes facilitar un email para escribirte?
Gracias por todo.
Genial 😀
El mejor tutorial que he visto, ¡gracias maestro!
no me sale bosbstrap.minn.ccs
debe que ser obligadoriamente index
añadido como marcador jajaja! muchas gracias!
Muy buen taller!
SI YO DEJO LOS ARCHIVOS CSS Y JS COMO VIENEN Y NO LOS REEMPLAZO POR LOS DE BOOTSTRAP QUE PASA? ALGUN ERROR O ALGO ASI?
Asombroso me encanta el curso he aprendido bastante seria genial si pudieras hacer los diseños en photoshop y subirlos y uno que trate de hacer el desarrollo web ya ver el video por si es necesario. Aun asi pauso el video e intento hacerlo te debo muchos cafes Saludos!!
Lindo!!! Graciassssssss
Hola! amigo he estado siguiendo tus tutoriales y son buenisimos. Felicitaciones!… Te quería comentar que siguiendo este he intentado hacer el slider y haciendo las cosas como tu las haces no me sale la imagen que quiero utilizar en el mismo. Estoy haciendo algo mal? que podría estar pasando?
Necesito una ayudita por favor!!! hice un sitio com bootstrap siguiendo tus enseñanzas, todo funciona perfecto, incluso mi formulario con php, mi problema es que en explorer y en edge no reconoce los estilos de bootstrap!! Como puedo solucionarlo??? Ayudaaaaaaa
MUCHAS GRACIAS POR TODO!!!! Soy nueva en esto de crear sitios web y la verdad tus videos me han ayudado muchísimo (al igual que leer la documentación de bootstrap como mencionas en tus videos). Me gusta mucho que explicas todo a detalle y estás al tanto de los cambios en la tecnología.
Te regalaré un café.
Un abrazo 🙂
Amigo, eres uno de los mejores tutores que he visto en Youtube. No se como llegué a tu canal pero ya tienes un nuevo suscriptor. Gracias por este gran tutorial. Saludos 🙂