Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Conceptos básicos de Bootstrap Creando formularios con Bootstrap Agregue CSS personalizado a su sitio de Bootstrap

Atrapado con el objeto multimedia. problema con alinear el contenido

<!DOCTYPE html>
<html lang=es>
  <head>
    <title>Conferencia Full Stack</title>
    <!-- Etiquetas meta requeridas -->
    <meta charset=utf-8>
    <meta name=viewport contenido=width=device-width, initial-scale=1, shrink-to-fit=no>

    <!-- Bootstrap CSS -->
    <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css integrity=sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M crossorigin=anonymous>
    <link rel=stylesheet href=css/custom.css>
  </head>
  <body id=inicio data-spy=scroll data-target=.navbar data-offset=100>
    <!-- barra de navegación -->
    <nav class=navbar navbar-expand-lg navbar-dark bg-primary fixed-top>
      <div class=container>
        <a class=navbar-brand order-1 mr-0 href=https://www.teamtreehouse.com target=_blank>Presentado por Treehouse</a>
        <botón class=navbar-toggler type=button data-toggle=collapse data-target=#navbarNavAltMarkup aria-controls=navbarNavAltMarkup aria-expanded=falso aria-label=Alternar navegación>
          <span class=navbar-toggler-icon></span>
        </botón>
        <div class=collapse navbar-collapse id=navbarNavAltMarkup>
          <div class=navbar-nav>
            <a class=nav-item nav-link href=#home>Inicio <span class=sr-only>(actual)</span></a>
            <a class=nav-item nav-link href=#about>Acerca de</a>
            <a class=nav-item nav-link href=#speakers>Ponentes</a>
            <a class=nav-item nav-link href=#schedule>Horario</a>
          </div>
        </div>
      </div>
    </nav><!-- /barra de navegación -->

    <!-- jumbotron -->
    <div class=jumbotron jumbotron-fluid bg-info text-white>
      <div class=container text-sm-center pt-5>
        <h1 class=display-2>Conferencia Full Stack</h1>
        <p class=lead>¡Una Conferencia de Un Día Sobre Todo lo Relacionado con JavaScript!</p>        
        <div class=btn-group mt-4 role=group aria-label=Botones de llamada a la acción>
          <botón type=button class=btn btn-primary btn-lg data-toggle=modal data-target=#register>Regístrate ahora</botón>
          <a class=btn btn-light btn-lg href=#speakers>Ver ponentes</a>
        </div>        
      </div>
    </div><!-- /jumbotron -->

    <div class=container pt-4>
      <!-- acerca de -->
      <div id=acerca de class=fila>
        <div class=col-lg order-lg-2>
          <h3 class=mb-4>Acerca de Full Stack Conf</h3>
          <img class=mb-4 img-fluid rounded d-none d-sm-block src=img/pdx.jpg alt=Portland>
              <p>¡La hermosa ciudad de Portland, Oregón será la ciudad anfitriona de Full Stack Conf!</p>
              <p>Explora el futuro de JavaScript con un alineación de profesionales de la industria. Descubre nuevas técnicas para avanzar tu carrera como desarrollador web.</p>
        </div>
        <div class=col-lg order-lg-1>
              <h3 class=mb-4>Oradores expertos</h3>
          <p>¡Nuestro alineación de oradores expertos acaba de ser anunciada, así que no esperes demasiado antes de conseguir tus entradas!</p>
              <p>¿Quieres conocer la comunidad internacional de JavaScript y compartir habilidades con algunos de los mejores expertos, hackers y creadores del mundo? ¡Sé el primero en saber qué esperar del futuro de JavaScript.</p>
              <p>Full Stack Conf se compromete a ser inclusiva y acogedora para todos. Esperamos con entusiasmo otro día intensivo de aprendizaje y intercambio.</p>
        </div>
        <div class=col-lg order-3>
          <h3 class=mb-4>Lo Que Aprenderás</h3>
                    <div class=list-group>
                      <a href=# class=list-group-item list-group-item-action><strong>MongoDB</strong>: base de datos NoSQL</a>
                      <a href=# class=list-group-item list-group-item-action><strong>Express</strong>: Marco de trabajo para Node</a>
            <a href=# class=list-group-item list-group-item-action><strong>React</strong>: biblioteca de JavaScript</a>
                      <a href=# class=list-group-item list-group-item-action><strong>Node.js</strong>: entorno de JavaScript</a>
                      <a href=# class=list-group-item list-group-item-action><strong>ES2015</strong>: última versión de JavaScript</a>
                      <a href=# class=list-group-item list-group-item-action><strong>Babel</strong>: compilador de JavaScript</a>
                    </div>
        </div>        
      </div><!-- /acerca de -->

      <!-- oradores -->
      <h1 id=oradores class=display-4 text-center my-5 text-muted>Ponentes</h1>
            <div class=fila>
                <div class=col-md-6 col-lg-4>
          <div class=tarjeta mb-3>
            <img class=tarjeta-img-superior src=img/vivianne.png alt=Vivianne>
            <div class=cuerpo-tarjeta>
              <h4 class=card-title>Vivianne McVue</h4>
              <p class=card-text>Vivianne es una desarrolladora web y educadora apasionada por construir aplicaciones web escalables y basadas en datos, ¡especialmente las que abordan problemas antiguos con tecnología nueva!</p>
            </div>
          </div>          
                </div>

                <div class=col-md-6 col-lg-4>
          <div class=tarjeta mb-3>
            <img class=tarjeta-img-superior src=img/nodestradamus.png alt=NodeStradamus>
            <div class=cuerpo-tarjeta>
              <h4 class=card-title>NodeStradamus</h4>
              <p class=card-text>"NodeStra" es un ingeniero de software y filósofo que intenta dejar el mundo mejor de lo que lo encontró. Codifica para organizaciones sin fines de lucro, comercio electrónico y aplicaciones web a gran escala.</p>
            </div>
          </div>            
                </div>

                <div class=col-md-6 col-lg-4>
                <div class=tarjeta mb-3>
                  <img class=tarjeta-img-superior src=img/robbie.png alt=Robbie>
                  <div class=cuerpo-tarjeta>
                    <h4 class=card-title>Robbie Redux</h4>
                    <p class=card-text>Robbie es un desarrollador de JavaScript que trabaja en aplicaciones a gran escala. También es un educador que se esfuerza por apoyar a los estudiantes en la eliminación de barreras para aprender a programar.</p>
                  </div>
                </div>          
                </div>

                <div class=col-md-6 col-lg-4>
                  <div class=tarjeta mb-3>
                  <img class=tarjeta-img-superior src=img/ecma.png alt=Ecma>
                  <div class=cuerpo-tarjeta>
                    <h4 class=card-title>Ecma Scriptnstuff</h4>
                    <p class=card-text>Ecma descubrió su pasión por la programación y la enseñanza hace más de 15 años. Está emocionada de presentarte todas las maravillas de JavaScript.</p>
                  </div>
                </div>          
                </div>

                <div class=col-md-6 col-lg-4>
                <div class=tarjeta mb-3>
                  <img class=tarjeta-img-superior src=img/jay.png alt=Jay>
                  <div class=cuerpo-tarjeta>
                    <h4 class=card-title>Jay Query</h4>
                    <p class=card-text>Jay es un desarrollador, autor de CSS: The Missing Manual, JavaScript &amp; jQuery: The Missing Manual, y educador de desarrollo web.</p>
                  </div>
                </div>          
                </div>

                <div class=col-md-6 col-lg-4>
                <div class=card>
                  <img class=tarjeta-img-superior src=img/json.png alt=Json>
                  <div class=cuerpo-tarjeta>
                    <h4 class=card-title>Json Babel</h4>
                    <p class=card-text>Durante toda su vida profesional, Json ha trabajado con computadoras en línea; es un programador políglota y le gusta utilizar las herramientas adecuadas para el trabajo.</p>
                  </div>
                </div>          
                </div>
            </div><!-- /speakers -->

      <!-- horario -->
      <h1 id=horario class=display-4 text-center my-5 text-muted>Horario</h1>

      <ul class=list-group>

        <li class=list-group-item>
          <div class=d-flex justify-content-between>
           <div class=media row>
            <img class=rounded-circle mr-3 col-2 p-3 d-block src=miniaturas de orador/avatar-nodestradamus.png alt=Imagen de marcador de posición genérica>
            <div class=media-body>            
            <h5 class=mb-1>Discurso de apertura: Internet de las cosas</h5>
            <span class=badge badge-pill badge-info p-2 >9:00am</span>
           </div>
          </div>
          </div>
          <p class=mb-1>NodeStradamus</p>
        </li>

        <li class=list-group-item>
          <div class=d-flex justify-content-between>
            <h5 class=mb-1>Fundamentos de React</h5>
            <span class=badge badge-pill badge-info p-2>10:00am</span>
          </div>
          <p class=mb-1>Vivianne McVue</p>
        </li>
        <li class=list-group-item>
          <div class=d-flex justify-content-between>
            <h5 class=mb-1>¡Hey, Mongo!</h5>
            <span class=badge badge-pill badge-info p-2>11:00am</span>
          </div>
          <p class=mb-1>Jay Query</p>
        </li>
        <li class=list-group-item list-group-item-success>
          <div class=d-flex justify-content-between>
            <h5 class=mb-1>Almuerzo</h5>
            <span class=badge badge-pill badge-info p-2>12:00pm</span>
          </div>
          <p class=mb-1>¡Pizza gratis para todos!</p>
        </li>
        <li class=list-group-item>
          <div class=d-flex justify-content-between>
            <h5 class=mb-1>Introducción a ES2015</h5>
            <span class=badge badge-pill badge-info p-2>1:00pm</span>
          </div>
          <p class=mb-1>Ecma Scriptnstuff</p>
        </li> 
        <li class=list-group-item>
          <div class=d-flex justify-content-between>
            <h5 class=mb-1>Iniciación a Redux</h5>
            <span class=badge badge-pill badge-info p-2>2:00pm</span>
          </div>
          <p class=mb-1>Robbie Redux</p>
        </li> 
        <li class=list-group-item>
          <div class=d-flex justify-content-between>
            <h5 class=mb-1>¿Qué es Babel?</h5>
            <span class=badge badge-pill badge-info p-2>3:00pm</span>
          </div>
          <p class=mb-1>Json Babel</p>
        </li>        
      </ul><!-- /horario -->

      <!-- botón de llamada a la acción -->
      <botón type=button class=btn btn-outline-info btn-lg d-block mx-auto my-5 data-toggle=modal data-target=#register>No te lo pierdas, regístrate ahora</botón>      

      <!-- formulario de registro -->
            <hr>
            <div class=row py-4 text-muted>
                <div class=col-md col-xl-5>
                    <p><strong>Acerca de Treehouse</strong></p>
                    <p>Treehouse brinda educación tecnológica asequible a personas en todas partes para ayudarles a lograr sus sueños y cambiar el mundo.</p>
                </div>
              <div class=col-md col-xl-5 ml-auto>
                <p><strong>Mantente actualizado sobre Full Stack Conf</strong></p>
                <div class=input-group>
                  <input type=text class=form-control placeholder=Correo Electrónico>
                  <span class=input-group-btn>
                    <botón class=btn btn-primary type=button>Registrarse</botón>
                  </span>
                </div>
              </div>
            </div>
            <hr><!-- /formulario de registro -->

      <!-- pie de página -->
            <div class=row py-3>
                <div class=col-md-7>
          <ul class=nav>
            <li class=nav-item>
              <a class=nav-link href=#>Comunidad</a>
            </li>
            <li class=nav-item>
              <a class=nav-link href=#>Tracks</a>
            </li>
            <li class=nav-item>
              <div class=btn-group dropup>
                <botón type=button class=btn btn-outline-secondary>Otras conferencias</botón>
                <botón type=button class=btn btn-outline-secondary dropdown-toggle dropdown-toggle-split data-toggle=dropdown aria-haspopup=verdadero aria-expanded=falso>
                  <span class=sr-only>Alternar menú desplegable</span>
                </botón>
                <div class=dropdown-menu>
                  <a class=dropdown-item href=#>CSS Conf</a>
                  <a class=dropdown-item href=#>Python Conf</a>
                  <a class=dropdown-item href=#>Java Conf</a>
                  <a class=dropdown-item href=#>Swift Conf</a>
                </div>
              </div>
            </li>
          </ul>
                </div>
                <div class=col-md text-md-right>
                    <small>&copy; 2017 Full Stack Conf &amp; Treehouse</small>
                </div>
            </div><!-- /pie de página -->

    </div><!-- /.container -->

    <! =====================================
        MODAL DE FORMULARIO
       ===================================== >

     <div class=modal fade id=registro tabindex=-1 role=dialog aria-labelledby=formulario de registro aria-hidden=verdadero>
      <div class=modal-dialog role=document>
        <div class=modal-content>
          <div class=modal-header bg-info text-white>
            <h5 class=modal-title id=exampleModalLabel>Regístrate para Full Stack Conf</h5>
            <botón type=button class=close data-dismiss=modal aria-label=Close>
              <span aria-hidden=verdadero>&times;</span>
            </botón>
          </div>
          <div class=modal-body>
            <!-- formulario de registro -->
            <form class=was-validated novalidate>
              <div class=alert alert-warning alert-dismissible fade show role=alert>
                <botón type=button class=close data-dismiss=alert aria-label=Close>
                  <span aria-hidden=verdadero>&times;</span>
                </botón>
                <strong>¡Date prisa!</strong> El registro de madrugada termina en dos días.
              </div>              
              <h5 class=mb-4>Información básica</h5>
              <div class=form-group>
                <etiqueta class=form-control-label para=nombre>Nombre:</etiqueta>
                <input type=text class=form-control id=nombre>
                 <div class=valid-feedback>
                  ¡Se ve bien!
                 </div>                
              </div>
              <div class=form-group>
                <etiqueta class=form-control-label para=email>Correo electrónico:</etiqueta>
                <input type=email class=form-control id=email>
                  <div class=invalid-feedback>
                    Por favor inserte una dirección de correo electrónico válida.
                  </div>                
              </div>
              <div class=form-group>
                <etiqueta para=role>Rol laboral:</etiqueta>
                <select class=custom-select form-control id=role>
                                    <option valor=desarrollador full stack js>Desarrollador Full Stack JavaScript</option>
                                    <option valor=desarrollador front end>Desarrollador Front End</option>
                                    <option valor=desarrollador back end>Desarrollador Back End</option>
                                    <option valor=diseñador>Diseñador</option>          
                                    <option valor=estudiante>Estudiante</option>                   
                </select>
              </div>

              <hr class=my-4>
              <h5 class=mb-4>¿Cuáles son los temas que más te interesan?</h5>

              <div class=verificación de formulario>
                <etiqueta class=custom-control custom-checkbox>
                  <input type=checkbox class=custom-control-input>
                  <span class=custom-control-indicator></span>
                  <span class=custom-control-description>Marcos de JavaScript</span>
                </etiqueta>                
              </div>
              <div class=verificación de formulario>
                <etiqueta class=custom-control custom-checkbox>
                  <input type=checkbox class=custom-control-input>
                  <span class=custom-control-indicator></span>
                  <span class=custom-control-description>Bibliotecas de JavaScript</span>
                </etiqueta>                
              </div>
              <div class=verificación de formulario>
                <etiqueta class=custom-control custom-checkbox>
                  <input type=checkbox class=custom-control-input>
                  <span class=custom-control-indicator></span>
                  <span class=custom-control-description>Node.js</span>
                </etiqueta>                
              </div>
              <div class=verificación de formulario>
                <etiqueta class=custom-control custom-checkbox>
                  <input type=checkbox class=custom-control-input>
                  <span class=custom-control-indicator></span>
                  <span class=custom-control-description>Herramientas de compilación</span>
                </etiqueta>                
              </div>
              <div class=verificación de formulario>
                <etiqueta class=custom-control custom-checkbox>
                  <input type=checkbox class=custom-control-input>
                  <span class=custom-control-indicator></span>
                  <span class=custom-control-description>ES2015</span>
                </etiqueta>                
              </div>

              <hr class=mb-4>
              <h5 class=mb-4>Información de Pago</h5>

              <div class=form-row>
                <div class=col-lg-6 form-group>
                  <etiqueta para=cc-num>Número de tarjeta:</etiqueta>
                  <input class=form-control id=cc-num type=text>
                </div>

                <div class=col-lg form-group>
                  <etiqueta para=zip>Código postal:</etiqueta>
                  <input class=form-control id=zip type=text>
                </div>

                <div class=col-lg form-group>
                  <etiqueta para=cvv>CVV:</etiqueta>
                  <input class=form-control id=cvv type=text>
                </div>
              </div>

              <div class=form-row>
                <etiqueta class=col-lg-12>Fecha de vencimiento:</etiqueta>

                <div class=form-group col-lg-8>
                  <select class=custom-select form-control id=exp-month>
                    <option valor=1>1 - Enero</option>
                    <option valor=2>2 - Febrero</option>
                    <option valor=3>3 - Marzo</option>
                    <option valor=4>4 - Abril</option>
                    <option valor=5>5 - Mayo</option>
                    <option valor=6>6 - Junio</option>
                    <option valor=7>7 - Julio</option>
                    <option valor=8>8 - Agosto</option>
                    <option valor=9>9 - Septiembre</option>
                    <option valor=10>10 - Octubre</option>
                    <option valor=11>11 - Noviembre</option>   
                    <option valor=12>12 - Diciembre</option>                         
                  </select>                    
                </div>

                <div class=form-group col-lg>
                  <select class=custom-select form-control id=exp-year>
                    <option valor=2016>2016</option>
                    <option valor=2017>2017</option>
                    <option valor=2018>2018</option>
                    <option valor=2019>2019</option>
                    <option valor=2020>2020</option>                        
                  </select>                   
                </div>                
              </div>

              <hr class=mb-4>
              <botón type=submit class=btn btn-primary btn-lg>Registrarse</botón>              
            </form><!-- /formulario de registro -->

              <script>
              // Ejemplo de JavaScript de inicio para deshabilitar envíos de formularios si hay campos inválidos
              (función() {
                'use strict';
                window.addEventListener('load', función() {
                  // Obtén todos los formularios a los que queremos aplicar estilos de validación personalizados de Bootstrap
                  var forms = documento.getElementsByClassName('needs-validation');
                  // Recórrelos y evita el envío
                  var validation = Array.prototype.filtro.llamar(forms, función(form) {
                    form.addEventListener('submit', función(event) {
                      if (form.checkValidity() === falso) {
                        event.preventDefault();
                        event.stopPropagation();
                      }
                      form.classList.add('was-validated');
                    }, falso);
                  });
                }, falso);
              })();
              </script>


          </div>
        </div>
      </div>
    </div>   

    <!-- JavaScript opcional -->
    <!-- jQuery primero, luego Popper.js, luego Bootstrap JS -->
    <script src=https://code.jquery.com/jquery-3.2.1.slim.min.js integrity=sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN crossorigin=anonymous></script>
    <script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js integrity=sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4 crossorigin=anonymous></script>
    <script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js integrity=sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1 crossorigin=anonymous></script>
  </body>
</html>