<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>D-Coding</title>
  <link rel="stylesheet" href="style-final.css">
</head>
<body>

  <!-- COMIENZA SECCION LOGO -->
  <div id="seccion-logo">
     <img src="http://populardcoding.com/tutorial1/img-logo.gif"> 
  </div>
  <!-- TERMINA SECCION LOGO -->
  <!-- -------------------- -->
  <!-- COMIENZO SECCION FOTO PRINCIPAL -->
  <div id="seccion-foto-principal">
    <img src="http://populardcoding.com/tutorial1/img-foto-1.jpg">
  </div>
  <!-- TERMINO SECCION FOTO PRINCIPAL -->
  <!-- -------------------- -->
  <!-- COMIENZO SECCION INICIATIVA -->
  <div id="seccion-iniciativa">
      <div>
          <img src="http://populardcoding.com/tutorial1/img-foto-2.jpg">
      </div>
      <div>
        <h2>
            Iniciativa
        </h2>  
        Dentro del compromiso comunitario y de innovación de Popular, estamos ofreciendo los talleres D-coding, libres de costo.
      </div>
  </div>
  <!-- TERMINO SECCION INICIATIVA -->
  <!-- -------------------- -->
  <!-- COMIENZO SECCION ICONOS -->
  <div id="seccion-iconos">
    <div>
      <img src="http://populardcoding.com/tutorial1/img-icon-1.gif">
      <h2>
        Coding
      </h2>
      Coding es el lenguaje de programación y análisis que se utiliza en el diseño y funcionamiento de los procesos computadorizados con el propósito de asignar, clasificar y ejecutar.
    </div>
    <div>
      <img src="http://populardcoding.com/tutorial1/img-icon-2.gif">
      <h2>
        Expertos
      </h2>
      Charlas educativas llevadas a cabo por expertos en la materia, que forman parte de nuestro equipo de tecnología y un empleado actual de la red social LinkedIn.
    </div>
    <div>
      <img src="http://populardcoding.com/tutorial1/img-icon-3.gif">
      <h2>
        Taller
      </h2>
      Se le estará dando la oportunidad a los estudiantes a codificar mediante un taller "hands-on", donde tendrán la oportunidad de completar un juego.
    </div>
  </div>
  <!-- TERMINO SECCION ICONOS -->

</body>
</html>
TIPS
Estaremos utilizando los siguiente elementos HTML:

Elemento HTML	¿Qué hace?
<form>	Indica que vamos a aceptar input del usuario
<input>	Tags de input de usuario
Estaremos utilizando los siguientes elementos de Javascript:

Evento	¿Qué hace?
onClick	Ejecuta una acción cuando se hace clic al elemento HTML
onmouseover	Ejecuta una acción cuando se le para el cursor encima al elemento
onmouseout	Ejecuta una acción cuando el cursor sale del área encima del elemento HTML
Para poder identificar los elementos únicamente le estaremos colocando su propiedad de identificación como en el tutorial anterior( id=“” ) 

*IMPORTANTE: 
Nuestras funciones utilizan varias propiedades de Javascript:

Para poder utilizar nuestras funciones de Javascript, debemos declarar los eventos anteriores como propiedades del elemento de HTML y colocar nuestra función luego de un signo de igual entre comillas.
Cada input debe tener un tipo, si queremos aceptar texto se escribe type="text"
Nuestras funciones contienen una serie de paréntesis luego de su nombre, es aquí dentro donde debemos poner si nuestra función recibe algún parámetro
Ejemplos

onmouseover: <input id="input" onmouseover="function()">
onclick: <div id="submit" onclick="function()">
Resultado final:
            
            <input type="text" onclick="function()">
               
            </input>
            
Aquí es donde se entra el texto

            
Creando mi primer JavaScript
1. Añadir el siguiente elemento HTML <form> dentro del elemento <div id="seccion-logo">, debajo de la imagen.  Indicando que vamos a aceptar valores del usuario.
Es aquí donde vamos a colocar nuestro encasillado y nuestro botón de someter.

            
            <form id="form" onsubmit="return false;">
               <input style="" type="text" id="userInput" /> 
               <input style="" type="submit" onclick="hello();" /> 
            </form>
            
            
2. Luego vamos añadir nuestra función "hello()" a nuestro archivo de Javascript llamado script.js:

             
             function hello() {
                var input = document.getElementById("userInput").value;
                alert("Hello" + " " + input + ", welcome to D-Coding");
            }
*IMPORTANTE:
Para verla en acción, añadan en su HTML la siguiente línea de código:
            
            <script src="script.js"></script>

              
*IMPORTANTE: 
Nuestras funciones utilizan varias propiedades de Javascript:
document: indica el objeto con el cual el JS va a interactuar
alert: hace que un popup aparezca
getElementById: busca nuestro elemento en el archivo de HTML de acuerdo a su identificador
3. Añadir botones para que interactúen con non nuestro Javascript en index.html, estos van justo debajo de nuestro form:

              
            <div id="buttons">
                <input type="button" onclick="chBackcolor('red');" value="red">
                <input type="button" onclick="chBackcolor('yellow');" value="yellow">
            </div>
                    
              
4. Añadir nuestra función de Javascript, al archivo script.js que va a interactuar con ambos botones y va a cambiar el color de nuestro background:

                function chBackcolor(color) {
                    document.body.style.background = color;
                }
              

*IMPORTANTE: 
Esta función acepta un parámetro lo cual hace posible que ambos botones interactúen diferente con ella.
5. En nuestro index.html reemplazar:

  	a. 
  	<img src="http://populardcoding.com/tutorial1/img-icon-1.gif">
      por: 
    <img onmouseover="bigImg(this)" onmouseout="regImg(this)"  src="http://populardcoding.com/tutorial1/img-icon-1.gif">
  
    b. 
    <img src="http://populardcoding.com/tutorial1/img-icon-2.gif">
      por: 
    <img onmouseover="bigImg(this)" onmouseout="regImg(this)"  src="http://populardcoding.com/tutorial1/img-icon-2.gif">
  
    c. 
    <img src="http://populardcoding.com/tutorial1/img-icon-3.gif">
      por: 
    <img onmouseover="bigImg(this)" onmouseout="regImg(this)"  src="http://populardcoding.com/tutorial1/img-icon-3.gif">
	

            
6. Añadir nuestras funciones onmouseover y onmouseout en el archivo script.js:

                function bigImg(x) {
                    x.style.height = "64px";
                     x.style.width = "64px";
                }
                function regImg(x){
                    x.style.height = "40px";
                    x.style.width = "40px";
                }
                
                
                
body {
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
}
h2{
  text-transform: uppercase
}


#seccion-logo{
  background: #000;
  padding: 20px
}
#seccion-logo form{
  float:right;
  padding-top: 20px;
}
#seccion-logo #buttons{
  padding-left: 20px;
  margin-bottom: -20px;
}
#seccion-foto-principal{
  width: 100% !important;
  height: 300px !important;
  overflow: hidden
}
#seccion-foto-principal img{
  height: auto;
  width: 100% !important;
}
#seccion-iniciativa{
  padding: 20px;
  clear: both;
  min-height: 300px
}
#seccion-iniciativa div{
  float: left;
  width: 45% !important;
  padding-left: 20px
}
#seccion-iniciativa div img{
  height: auto;
  max-width: 100%
}
#seccion-iconos{
  clear: both;
  padding: 20px;
  background: #f5f5f5;
  width: 100%;
  min-height: 300px;
  margin-top: 20px
}
#seccion-iconos img{
  display: block;
  margin-bottom: 10px
}
#seccion-iconos div{
  float: left;
  width:30%;
  padding: 10px;
  min-height: 200px;
}
@media(max-width:480px){
  #seccion-foto-principal{
    height: auto  !important
  }
  #seccion-iniciativa div img{
    width:100%;
    height: auto;
  }
  #seccion-iconos div{
    min-height: 120px;
    width: 90%;
    float: none;
    display: block;
    padding-top: 10px;
  }
}
@media(max-width:768px){
  #seccion-iniciativa div{
    float: none;
    width: 100% !important;
    padding-left: 0px
  }
}