Conclusiones del curso

Quiero compartirles mi portafolio hecho con bootstrap https://innacroft.github.io/portfolio/

Resuelto, habiamos cambiado el id en el navbar pero faltaba modificarlo en el data-target del collapse.
data-target="#navbar"
A rendir!

Solución del bug:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

Solo es cuestión de cambiar en el data-target de “#navbarSupportedContent” a “#navbar”

No tube el bug con el botón del menú porque al momento que le cambiamos el id por navbar en la clase de ScrollSpy también se lo cambie en la referencia al menú en la propiedad data-target.

es un curso muy bueno, aunque dejen bugs como desafíos XD

es pasar de esta linea de codigo

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

a esta:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

listo! es mas simple de lo que creen… una pista, recuerden los data-target

Docs
https://getbootstrap.com/docs/4.3/components/navbar/

En la sección final de “external content” podes encontrar la documentación relacionada con el bug.

Te invito a que te animes a resolverlo.

¿Por qué Sacha? ¿POR QUÉ? Yo confiaba en ti

Mi pagina del curso, pero dirigida a la medicina!

https://kathleenmbp.github.io/medicine-page/

Para los mas nuevos en el curso el error esta en que el
data-toggle="collapse" data-target="#navbar" necesitan tener bs- para que funcione se verian de la siguiente manera.

Antes:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

despues:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

La forma de solucionarlo en bootstrap5 el bug (o al menos la que me funciono a mi) es en el button del nav hacer el sgte cambio

data-bs-target="#navbar"

Excelente curso, les comparto el website que hice practicando lo aprendido, https://tache95.github.io/ agradecería si me dan feedback para cuando le haga las mejoras.

Yo me di cuenta cuando hicimos el header sticky y lo reparé en ese momento.

Bug solucionado!! Jajajaja! Que buen profesor! Seguiré con el curso de Foundation y luego me iré por JavaScript!! Gracias Sasha!!

a por el examen !

Muy buen curso, totalmente recomendable!!!

Un curso muy muy bueno! Desde ahora haré mis proyectos con Bootstrap! Sacha explica muy bien y en sus cursos realiza proyectos cheveres!

Mmms ese bug ya lo tenia resuelto y no me di cuenta jaja.

Excelente curso Sacha, entre tu y Leonidas son son mis profesores preferidos!

Bug resuelto

Me encantó el curso 10/10

Solucionando el bug, haciendo un nuevo commiit

El bug se produjo al cambiar la clase subrayada en celeste ya que se usa como control para el botón de menú, yo usé la clase subrayada en blanco ya que es el contenedor de la lista en sí y no otro contenedor.

a mi no me apareció ese Bug xD

Muchas Gracias Sacha, me has ayudado mucho.

https://carlosjimenez1990.github.io/GoldPrice_Bootstrap4/

Oye, muy buen Bug de prueba. Lo encontré como tres clases atrás y lo solucioné en un momento 😄

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">

Ya me había percatado del bug en clases anteriores y lo solucione antes. 😂

https://j-alexander-acosta.github.io/Bootstrap/

Ese bug lo vi desde el inicio!!! pero sabia que iba a pasar algo!!!

#navbar

solucionado!

El burger button debe estar linkeado por data-target al id del navbar-collapse 😉

Sasha eres un grandeeeee.
Excelente el curso, muchas gracias.

Faltaba modificar el data-target del button.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

Gracias Sacha! Excelente curso, me has hecho amar Bootstrap

justo lo que buscaba en un curso

jajaja que troll con el bug

Acá está mi proyecto finalizado!
https://pablojorgeandres.github.io/platziconf/

El bug está en el id del nav y el problema apareció cuando cambiamos ese id para poner el #navbarSupportedContent.

no puedo subir de nuevo el proyecto con el bug arreglado D:

sacha el mejor

Cuando das click sobre un enlace del nav te dirige a esa sección, pero el mismo NAV tapa los títulos de la sección, ¿Han encontrado una solución, pero que no sea aumentar el padding-top? Yo agregué padding top, pero rompe el diseño

Muy buen curso, Sacha. MIl gracias.

Saludos

Ya lo había notado el bug. Seguí usando el mismo ID del menú en la nueva implementación.

Consulta, cuál es la función del aria-controls en el siguiente código:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

Me di cuenta cuando hacia testing del sitio 😃

Bueno aca dejó mi proyecto:
https://marinopabl0.github.io/platziConfHawaii/

gracias Sacha, aprendi bastante

Dejo todos los retos, y mi sitio : https://github.com/Christiano0407/Bootstrap-reto

Muy buen curso. Gracias, Sacha.

ejercicio repo.
https://eriksacz.github.io/bootstrap-platzi2018/

¿Alguien más notó el 2n bug?

Cuando estás en la versión móvil el alto de nav es mayor a “57px” que es lo que se añadió como ’ data-offset=“57” ’ en el body, para leer donde nos encontramos en la web.

Pensé que se podía solucionar con media queries, pero al estar en el HTML, no sé como hacerlo, ¿Alguna idea?

Hola a todos, soy un viejo alumno del curso y cree el proyecto detalle a detalle como se presento y desarrollo a lo largo del curso más pequeñas correcciones y ciertas mejoras en el código.

Me alegra poder compartirlo para que puedan utilizarlo como referencia y comentarles que cuenta con su repositorio de GitHub para que puedan clonarlo.

Pagina Web: https://luisvalladaresc.github.io/platzi-conf/
Repositorio: https://github.com/luisvalladaresc/platzi-conf

Lo logre!!
https://synystergrowly.github.io/platzi-BS2018/

Tengo un pregunta, quizá de nuevo “noob”, pero, si trabajas con Bootstrap, ¿Cuándo diseñes la web, pasando por los wireframes hasta el protopito, tiene que diseñar pensando en Bootstrap, no?, ya que Bootstrap tiene sus propios margenes, paddings, etc, en mi última web, una muy simple, tenía el diseño hecho, y luego de ver el curso pensé en maquetarlo con Bootstrap, y claro, todo se me movía… ¿Cómo hacen ustedes?

Era que le cambiamos el id en el boton de hamburguesa

Perfecto! bug arreglado
Excelente el detalle

¡Gracias Sacha! Excelente curso
https://noreibi.github.io/mono_repo_platzi/Platzi-Bootstrap/Platzi Hawai/

Listo, corregido:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"```

Me volvi loco dos clases antes para solucionar esto! jajajajaj

Genial curso!

Un excelente curso, muy bien explicado, ya quiero hacer un sitio web con Bootstrap.

Ufff eso ya lo arreglamos hace ratooooo xD

Muchas gracias Sasha por toda la informacion. Arreglado el bug efectivamente fijense donde estan apuntando con el target.

Muchas gracias, a arreglar el bug y a continuar 👌😁

De que bug está hablando ? a mi si me aparece el menú hamburguesa en pantallas menores de 500px

Yo tengo una página web que elabore con boostrap, la subí por Cpanel en Go daddy al principio salia pero ahora no sale.

¿Que puedo hacer? ¿Aquí tienen un curso para saber configurar y subir páginas webs ?

Ecelente curso, Vamos a por el Examen

Ya cuando dejo de funcionar arreglé el bug, porque al tener en pantalla dividida la página y el editor de código, no se me desplegaba el nav 😃

excelente curso

https://miguel-luis-1094.github.io/platzi-bootstrap/

Excelente curso 😃

Examen ven a mí!!!

Listo arreglado solo es de modificar los identificadores correctos ya que los modificamos al hacer el scroll-spy

https://jninahualpa80.github.io/curso_Bootstrap/

buenisimo pero me quedaron un par de dudas porque tenia un proyecto personal en mi cabeza y realice el curso con ese proyecto, le dejo mis dudas a ver si me pueden ayudar.
tengo una parte de imagenes en la cual quiero mostrar unas pocas (8) que me genere una especie de Pinterest. Osea se podria usar un css-grid o flexbox?

¿Cómo ajustar el tamaño de las cards?

Excelente curso me gustó mucho

💚Excelente Curso💚

Excelente curso. A seguir ampliando los conocimientos

gracias Sacha

en el button se debe cambiar el data-target por “#navbar”

Me sale perfecto Sacha 😄 , Muchas gracias por este curso Maravilloso.

Gracias por todo maestro

Excelente curso!

https://piero9922.github.io/Proyecto-Bootstrap/

que buen profe! explica re bien!

hahahah yo he corregido el error desde que lo estaba desarrollando, gran curso

Sacha Lifszyc y Oscar Barajas los mejores profesores de programación en Patzi. Muchas gracias por este gran curso, vaya que lo disfruté.

Excelente curso!! Sacha es un profesor increíble siempre buscando diferentes maneras de enseñar.

Como curso básico de Bootstrap, estuvo bueno.
Pero quizás se hubiera explicado algunos de los atributos de los componentes y saber que significa o como se relacionan con otros, y no tan solo copiar y pegar.

Sacha muy agradecido ! Muy didacticas tus explicaciones !

Este cuate es un master en bootstrap y js 😃

Muchas gracias por lo enseñado, muy interesante este curso.

Cosas nuevas aprendidas y a ponerlas en práctica.

proyecto terminado además yo utilice el preprocesador PUG https://github.com/malombra96/Bootstrap

Buen contenido del curso, donde pusimos en practica nuestros ejercicios para desarrollar los contenidos.

Muy Buen Curso, Excelente Profesor.

Felizmente manejaba GIT a la par, y pude ver cual fue el error.
Gracias de todas maneras.

Comparto mi proyecto de bootstrap 🚀

https://saucedoinfo.github.io/curso_de_bootstrap_2018_platzi/

💪 Carpe diem.

Para boostrap 5: tienes que dejar el " data-bs-target" de la linea del Button, igual que el id de la primera linea.

<code> 
<nav id="header" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

<code> 
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

Espero les sirva.

Muy buen curso

Curso culminado

https://diegudeveloper.github.io/Proyecto18-Bootstrap/