Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de 谩rbol en HTML

6

Instalando tu primer editor de c贸digo

7

C贸mo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del c贸digo usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

驴Qu茅 es el DOM?

Quiz: Fundamentos de Programaci贸n

Desarrollando un juego con HTML y JavaScript

16

Maquetaci贸n con HTML

17

Secci贸n de elegir mascota

18

驴D贸nde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulaci贸n del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

驴Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

驴Qui茅n gan贸 el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatom铆a de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Im谩genes para los Mokepones

37

Estilos del bot贸n

38

Adaptando HTML al dise帽o del juego

39

Layout: t铆tulo y ataques

40

Adaptando JavaScript al dise帽o del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimizaci贸n de c贸digo

44

Revisi贸n de c贸digo

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaraci贸n lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques din谩micos por cada mascota: extraer

55

Renderizado din谩mico en HTML

56

Eventos de click din谩micos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimizaci贸n de c贸digo

Mapa con canvas

61

Introducci贸n a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Im谩genes y personajes de fondo

66

M茅todos en las clases

67

Obst谩culos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

驴Qu茅 es backend?

72

Instalaci贸n de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisi贸n de coordenadas

79

Mokepones din谩micos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Pr贸ximos pasos

83

Probando el juego en varios dispositivos

84

驴Y ahora qu茅 curso tomar?

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Maquetaci贸n con HTML

16/84
Recursos

Aportes 172

Preguntas 82

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃挕 HEY!! Antes de que contin煤es en tu aventura con la programaci贸n, te dejo esta herramienta que te ser谩 de utilidad en tu camino: las 44 etiquetas HTML que usar谩s en desarrollo web

Freddy te vamos a extra帽ar!!! nos deja en muy buenas manos del profe David que tambi茅n es muy Bueno馃挌

Ahora que ya estan un poco m谩s avanzados, les recomiendo que bajen la extensi贸n Live Server para el Visual Studio Code. De esta manera no deber谩n actualizar la p谩gina cada vez que hacen un cambio en sus archivos.
.

Aqu铆 les vengo a dar una nueva recomendaci贸n 馃榿馃榿馃榿


Recuerdan que en clases pasadas Freddy utilizaba estos signos (//) en el c贸digo de JavaScript. As铆 es, el famoso comentario.

Esta es una herramienta muy 煤til que es utilizada en el proceso de desarrollo, ya que nos ayuda a dejarnos a nosotros mismos notas de ciertas funcionalidades de c贸digo o simplemente para llevar un registro mas ordenado de este mismo incluso para realizar algunas pruebas.

Lo bueno es que la mayor铆a de lenguajes de programaci贸n tienen esta funcionalidad lo 煤nico que cambia son los signo con los que indicamos el comentario.

Html

<!-- AQUI VA MI COMENTARIO -->

CSS

/* Aqu铆 va mi comentario */ 

Lo mejor de todo es que Visual Studio Code tiene Shorthands o atajos de teclado para que esto sea mas r谩pido. Tenemos 2 formas :

Seleccionar la parte que queremos comentar **oprimir ctrl + k y luego ctrl + c ** y autom谩ticamente se comentara la parte que hallamos seleccionado. Tambien podemos utilizar ctrl y la tecla que tiene el simbolo de cerrar llave, este >>" }" y se nos generara un apartado para escribir nuestro comentario.

Ahora es tu turno manos al codigo !!! 馃挌馃挌馃挌

"todos llorando porque freddy se fue"
freddy huyendo de la demanda:

por Dios Estoy recibiendo clases con Timothe茅 Chamalet!!!:VV

Estoy en clase de: Nuevo Curso Pr谩ctico de JavaScript con el profe Juan. Es un excelente maestro y aprender谩n mucho.

Esta p谩gina con todos las etiquetas en HTML que seguro te ser谩n 煤tiles 馃挌
https://allthetags.com/

隆Hola, chicos y chicas! Quisiese agregar algo un poco fuera de la clase, pero que es importante. Debemos valorar a cada profesor, Freddy es MUY bueno. Sin embargo, los dem谩s tambi茅n lo son a su estilo. Juan es incre铆ble. Diego es incre铆ble. 脫scar en incre铆ble. En general cada uno es muy especial.

隆Nunca paren de aprender! 馃挌

No sabia que el chico de stranger things daba clases de programacion鈥

  • MAQUETACI脫N: Crear la estructura de el contenido de una p谩gina web.

  • La etiqueta span es un contenedor en l铆nea gen茅rico para redactar contenido, que no representa inherentemente nada.

S铆 usas atom al seleccionar una etiqueta, atributo o elemento. El programa te dice lo que significa e incluso puedes averiguar m谩s dando click a more

Estoy paseando por la secci贸n de preguntas de cada clase para tratar de ayudar y este hombre no deja ni una sin responder jajajaj

Nota:

La etiqueta <h1> solo se utiliza una vez por cada documento HTML 

Les comparto mis notas de clase, por ahora estan en construcci贸n mientras voy avanzando!
Enjoy

cada clase de este curso es muy emocionante, felicidades a Platzi por ser una plataforma referente en el aprendizaje online.

etiquetas HTML

Apertura y cierre
La apertura y el cierre siempre llevan el nombre de la etiqueta HTML que usar谩s, y son las que sirven para delimitar el contenido de la misma.

Atributo y valor
El atributo son distintos ingredientes o modificaciones que puedes hacer a la etiqueta. Como por ejemplo colocarle un ID, especificar alg煤n evento (como los casos de onsubmit y onclick), o modificar el aspecto visual (como cambiarle el color a un texto).

El valor es la especificaci贸n de estas modificaciones. 驴Qu茅 debe suceder despu茅s del onsubmit? 驴Qu茅 color debe tener el texto? 驴Qu茅 ID tendr谩 la etiqueta?

Contenido
Es la informaci贸n que queremos que sea afectada por la etiqueta con sus modificaciones (atributos).

querido Juan!! tantos a帽os trabajando juntos y es la primera vez que tomar茅 clase contigo. me emociona aprender de ti 馃挌

Enlaza la llama

me cae bien esta combinacion de Timothe茅 Chamalet con sub urban, muchas gracias nuevo profe

Que es maquetar

Es definir la estructura y el contenido de la pagina web.

Atributos

Un atributo es un valor adicional que se le da a la etiqueta

El atributo ID

Con este atributo diferenciamos una etiqueta de otra, le damos un nombre un identificador.

Dinamico

Un valor dinamico es algo que va a cambiar, que no se queda asi por siempre o es estatico

Etiquetas

<section></section> // Me divide o secciona la pagina web.
<span></span> //Permite hacer cambios a una parte de un parrafo, dentro de una linea.

馃憠馃徑 Buenas practicas y adicionales:
No poner espacios en los nombres de ID.
Envolver los botones con una etiqueta <p>
Separar la web en secciones, de ser necesario

Yo le agregue los tipo aire y trueno de una 馃槄

<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥>
<title>MOKEPON!</title>
</head>
<body>
<h1>MOKEPON! 馃尡馃敟馃挧馃尓鈿</h1>

    <section id="seleccionar-mascota">
        <h2>Elige tu mascota:</h2>
    </section>

    <section id="seleccionar-ataque">
        <h2>Elige tu ataque:</h2>
       
        <p>Tu mascota tiene <span>3</span> vidas</p>
        <p>La mascota del enemigo tiene <span>3</span> vidas</p>

        <p>
            <button>FUEGO 馃敟</button>
            <button>TIERRA 馃尡</button>
            <button>AGUA 馃挧</button>
            <button>AIRE 馃尓</button>
            <button>TRUENO 鈿</button>
        </p>
    </section>

    <section id="mensajes">
        <p>Tu mascota atac贸 con FUEGO馃敟, la mascota del enemigo atac贸 con TIERRA馃尡 - GANASTE馃巼</p>
    </section>

    <section id="reiniciar">
        <button>Reiniciar鉀</button>
    </section>

</body>

</html>

Amigo sinceramente haces un trabajo excelente , cre铆 que cuando se fuera Fredy no entender铆a al resto de profesores pero me equivoque , tu le metes un entusiasmo que me motiva y eres excelente explicando un abraso 馃槉

馃搶 Maquetar es crear y definir la estructura y el contenido de la p谩gina web

SECTION, se usa para dividir secciones de un documento, en varias pesta帽as

ID="" Es un atributo, sirve para dar un nombre unico e irrepetible a algo( como una cedula )

<section id=鈥渟eleccionar-ataque鈥> ( asi quedar铆a, section ahora tiene un nombre unico y podemos reconocerlo)

H1, se usa para un solo titulo principal, si quiero usar mas t铆tulos H2, las veces que quiera

P, se usa para texto, p谩rrafos

SPAN, Sirve para dar estilo y manipular un texto en particular con JavaScript.

// Hola Team, les recomiendo escribir las variables y textos en INGL脡S para ir practicando. As铆 matan dos p谩jaros de un tiro 馃```

Creo que es importante saber que <H1> podemos ponerlas muchas veces y no tendremos problema, pero es una mala pr谩ctica y es lo que no nos cuentan desde el principio.
Para ayudar con el SEO de la p谩gina.

me encanta la energ[ia con la que explicas, muy diferente a Freddy , cada uno tiene su toque

Profe demasido carismatico!. Demasiado entretenida aprendiendo 馃槂

隆Las clases con el profe Juan son geniales! Me parece muy divertida su forma de explicar, est谩n logrando que me guste mucho todo esto y que lo vea con otra faceta馃帀

Muy buena clase, ya quer铆a recibir una clase con el profe juan.

MOKEPON! 馃敟馃挧馃尡

Juan David me acuerdo cuando eras estudiante en Platzi y me gusta verte dando clases.

Me encanta demasiado el entusiasmo que tiene el profesor, hace que tambien tenga el mismo entusiasmo para seguir aprendiendo en el curso. Muy buen profesor

section: es una etiqueta que permite dividir en secciones nuestra pagina web, permitiendo dar una estructura mas ordenada a la vista del usuario.

span: etiqueta que permite envolver un elmento que deseamos sea dinamico, es decir que cambie en el tiempo o por la interaccion del usuario seg煤n los eventos que este realice

Excelente el nuevo profe!
Seguimos aprendiendo.

Me encant贸 la energia con la que explica todo. Yame agrada mucho este profesor jsjsjsjsjs
Platzi se luce con sus cursos

Me gusta la actitud del profesor!! que genial de verdad!!

Llegue a Platzi por un tuit de este curso, todo bien hasta que llegue a esta secci贸n. No entendi nada, ya que el profesor da por hecho que sabemos muchos comandos que 茅l utiliza sin explicar para qu茅 sirven. Me frustre mucho y me desilusione de la plataforma, sin embargo, encontr茅 la versi贸n anterior de este curso, impartido por Freddy, y ahora s铆 entend铆 esta secci贸n. Tuve que saltarme esta secci贸n. simplemente no pude, los invito a revisar este tipo de cosas, mas en un curso introductorio, ya que puede hacer que muchos se desilusionen de platzi. Saludos.

Si te pasa que siempre que quieres comentar el c贸digo te confundes o no recuerdas como se comenta, solo tienes que seleccionar las l铆neas a comentar y darle ctrl + tecla que cierra la llave. Lo que hace esto es comentarte las l铆neas sin importar en que lenguaje est茅s trabajando

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>MOKEPON! 馃敟馃挧馃尡</title>
        <script src = "./js/mokepon.js"></script>
    </head>
    <body>
        <h1>MOKEPON ! 馃敟馃挧馃尡</h1>

        <section id = "seleccionar-mascota">
            <h2>Elige tu mascota:</h2>
            mascotas

            <button>Seleccionar</button>
        </section>

        <section id = "seleccionar-ataque">
            <h2>Elige tu ataque:</h2>

            <p>Tu mascota tiene <span>3</span> vidas</p>
            <p>Las mascotas del enemigo tiene <span>3</span> vidas</p>

            <p>
                <button>Fuego 馃敟</button>
                <button>Agua 馃挧</button>
                <button>Tierra 馃尡</button>
            </p>  

        </section>

        <section id = "mensajes">
            <p>Tu mascota atac贸 con FUEGO, las mascota del enemigo atac贸 con TIERRA - GANASTE 馃帀馃帀</p>
        </section>

            <!--Hipodoge -> Agua
            Capipepo -> Tierra
            Ratiqueya -> Fuego
            Langostelvis -> Agua y Fuego
            Tucapalma -> Agua y Tierra
            Pydos -> Tierra y Fuego-->
        <section id = "reiniciar">
            <button>Reiniciar</button>
        </section>
              
    </body>
</html>

Apenas llevo la primera clase de esta secci贸n del curso b谩sico de programaci贸n y me encanta el estilo de este profe.

Cuando hablamos de MAQUETACI脫N o maquetar quiere decir: CREAR o seguir creando la estructura o el contenido de la p谩gina html.

El audio esta muy bajo de origen, no es necesario ajustar sus aud铆fonos/bocinas.

Jajaja el profe es Timothee Chalamet.

As铆 va nuestra estructura:

Mejor profe que ya tuve !!! Excelente clase! Saludos desde Brasil!

Hay ciertas maneras para escribir codigo html mas rapido.
En html podemos utilizar multiplication(*) para decir cuantas veces queremos crear una etiqueta, por ejemplo: En el caso de requerir 5 etiquetas de 鈥渟ection鈥, podemos utilizar:
(Es importante darle a enter al terminar de escribir para ejecutar el codigo)

section*5

Resultado:

    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>

Tambien podemos crear una etiqueta y asignarle una clase o id a la vez, agilizando el proceso. Por ejemplo: en el caso de querer crear la seccion 鈥渆lige tu mascota鈥, podemos utilizar el .(punto) sirve para asignar una clase y el # para asignar una id. ejemplo:

section.elige-tu-mascota

Resultado:

<section class="elige-tu-mascota"></section>

Tambien podemos crear etiquetas y sus hijos, por ejemplo: digamos que quieres crear una seccion que tenga 1 boton adentro (utilizaremos < o > para determinar si una etiqueta es mas grande (una etiqueta padre o hija) que otra. Podemos ejecutar:

section>button

Resultado:

    <section>
        <button></button>
    </section>

Ahora, 驴que sucede si queremos crear una etiqueta padre y varios hijos dentro, pero con diferentes hijos, no como antes (section>button*3), si no que queremos crear mas cosas dentro ademas de botones? pues podemos utilizar el +
el cual nos permite agregar otros hijos dentro del contenedor

section>button*3+p

Resultado:

    <section>
        <button></button>
        <button></button>
        <button></button>
        <p></p>
    </section>

Ahora, con esto ya aprendido, podemos combinarlo todo y modificarlo segun nuestras necesidades:

section*2>h2+p+p+button*3

Resultado:

    <section>
        <h2></h2>
        <p></p>
        <p></p>
        <button></button>
        <button></button>
        <button></button>
    </section>
    <section>
        <h2></h2>
        <p></p>
        <p></p>
        <button></button>
        <button></button>
        <button></button>
    </section>

El profe me cay贸 super bien, es genial!!! y le entiendo muy f谩cil

Hola. Que buen profe es Juan David!. Le estoy entendiendo muy bien. Le deseo muchos exitos!

El profe Juan David se nota que sabe, me gusta su metodolog铆a a la hora de explicar. Vamos por la meta! 馃挭馃

Me entusiasma mucho las siguientes clases con el profe Juan, se le nota el entusiasmo al explicar, y de paso explica muy bien.

Tengo que decir que Fredy explica e imparte muy bien todo su conocimiento, pero debo resaltar al profesor Juan David, explica muy detalladamente todo y la verdad me parece excelente. La mejor forma de aprender es llendo paso a paso y detallando hasta lo mas minimo y con paciencia, ya que todos tenemos un nivel y velocidad de entendimiento muy diferente, a veces cuando se explica de forma muy general muchas cosas quedan peque帽os vacios que el dia de ma帽ana se convierten en grandes inconvenientes y eso hace que a las personas les de pereza continuar aprendiendo鈥 Siempre he pensado que la profesion de la ense帽anza es muy bonita y un buen profesor nunca se olvida, porque son tus profesores los que marcan el camino que vas a seguir en tu futuro.

Espero que Platzi continue con estos formatos de ense帽anza tan amenos y con profesores de tan alta calidad humana.

Gracias.

Fredi y Juan David fueron mis primeros profes

desplazaron a fredy

Profeeeee, muchas graciassss!!! Que bonito ver una persona tan joven dando estas clases. :3

Vaya, por ahora todo me parece complicado. Voy a tener que repetir la clase unas cuantas veces. Gracias por la clase.

hola, como aporte queria decirles, que para hacer el juego propio de uno, cambien ciertas cosas, y agreguen comentarios que les ayude a recordar como han ido estructurando todo. Me encanto la clase

banda extra帽o a freddy:(

me encanta

Un peque帽o comentario para precisar sobre HTML:
Si observan, el inicio de la declaraci贸n de un HTML comienza por

<!DOCTYPE html>

Es la declaraci贸n del tipo de documento en la actual versi贸n HTML5. En versiones pasadas HTML4 (y anteriores) la declaraci贸n era m谩s extensa. Ej:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ://www.w3.org/TR/html4/loose.dtd">

Afortunadamente vivimos en un mundo mejor donde se pueden simplificar estas declaraciones.
Adicionalmente, toda la estructura de HTML se puede crear en Visual Studio Code escribiendo el s铆mbolo de exclamaci贸n ( ! ) y presionando Enter. Esto es gracias al complemento Emmet.
.
Por 煤ltimo, para los que algunas vez hayan escuchado de HTML y se pregunten porque el profesor Juan usa <section> y no <div>. Esto se debe a que HTML5 trae nuevos elementos (o tags) para favorecer la sem谩ntica y facilitar la lectura del c贸digo. Lo que antes se hac铆a con puros div ahora se puede hacer con section, article, etc. Para m谩s informaci贸n pueden complementar esto en el Curso Definitivo de HTML y CSS

Como que el fuego le gana a la tierra?. si yo tiro tierra al fuego el fuego se apaga, pero si tiro tierra al agua se mezclan y queda empate 馃馃

Me encanta que empezemos a crear proyectos de manera profesional 馃榿馃榿

si escriben por ejemplo
section#reiniciar

vscode genera la etiqueta con el id ya incluido

<section id="reiniciar">馃憣</section>

Es interesante como el profesor David explica como usar la primera parte de la estructura HTML. Sabia algo de ese tema, pero nada con respecto al formato y la forma del dise帽o de este. Siempre terminaba mareado con el Frontend, pero ahora si le estoy captando bien y eso me gusta.

A este parcero se le nota mucho lo colombiano. Y explica con mucho entusiasmo; se ve que lo disfruta y eso hace dar m谩s ganas de aprender. Por m谩s profes as铆. 馃搱馃懆馃徑鈥嶐煆

No conoc铆a al profesor Juan David Castro, me encanta su dinamismo y su actitud, adicional se nota su amplio conocimiento el cual s茅 que nos compartir谩 y nos aportar谩 para crecer en este nuevo mundo al que nos hemos lanzado con toda 馃槂 Nunca pares de aprender 馃槂

隆El profesor Juan David es un crack! Me gusta que ense帽en HTML.

Incre铆ble en pocos minutos se maquet贸 toda la estructura del juego, grande

No sabia q Timothe茅 Chamalet era profesor de platzi xdd

Practicamente es lo mismo a PIEDRA, PAPEL Y TIJERAS, pero con figuras y otras estructuras que complementa una p谩gina web.

Hola , solo quiero decir que estoy muy agradecido con Platzi, viendo que carera escoger para la Universidad , encontr茅 a Platzi , y que suerte la m铆a , gracias a los cursos de Google y el mismo Platzi , me estoy decidiendo que hacer , mientras nunca paro de aprender.

Buen relevo, Juan DC por Freddy.
Es un gran profe!!

鈥淟o que lanzamos en las fiestas鈥 JAAJAJAJAJA

Excelente profesor, un gusto y que bueno imparte sus conocimientos.

Una cosa que en serio me gusta de Platzi es que no solo es marketin barato, ellos cumplen lo que te venden y sobretodo con la mejor actitud posible y no hablo solo de Freddy. Es cierto, 茅l es un plus pero todos te ense帽an de la forma m谩s amigable posible lo que facilita much铆simo el aprendizaje y lo convierte en algo divertido as铆 logrando que nuestro cerebro lo asocie con diversi贸n y productividad. Gracias por todo

Gracias, Freddy, gracias!
Juan David es un excelente maestro.

Con este Juan, hize el de Piedra papel o tijeras en yt xd, de ah铆 conoc铆 platzi, todo un capo

primera clase con este profesor Y ME ENCANTA SU ESTILO DE ENSE脩ANZA creo que se entiende muy bien

Siiiii, Juan David, de los mejores profesores de Platzi

Excelente primera clase con el prof Juan!!

Es solo la primera clase, pero los 谩nimos y el empe帽o que Juan David demuestra en cada explicaci贸n son bastantes energ茅ticos, qu茅 buen comienzo de la segunda secci贸n de este curso!!!

Mandaron a dormir en paz al Freddy no馃槰馃槰

Me encanto la clase, que nivel: comparto mi codigo ( he hecho modificaciones para sentir que estoy investigando y aprendiendo por mi cuenta y haciendo el juego diferente)
<html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title>MOKEPON GAME</title>
<script src=""></script>
</head>
<body bgcolor="#5A6973">
<h1><center><n>Bienvenido Mokepon 馃敟馃挦馃尩馃尓锔</n></center></h1>
<section id=鈥淪elecciona-guerrero鈥>
<h2><center><p style=鈥渃olor:#0F84D3鈥> Elige tu guerrero: </p></center></h2>

      Guerrero

      <button>Seleccionar</button>
      
    </section>
    <section id="Seleccionar-ataque">
      <h2><center> Escoge el ataque: </center></h2>
        <p><b>Tu mascota tienes <span>5</span> vidas </b></p>
        <p><b>La mascota contricante <span>5</span> vidas </b></p>
        <p>
          <button> Fuego 馃敟</button>
          <button> Agua 馃挦</button>
          <button> Tierra 馃尩</button>
          <button> Aire 馃尓锔</button>

        </p>

    </section>
    <section id="mensajes">
      <p> Tu guerrero ataco con FUEGO, el Guerrero del enerigo ataco con tierra - GANASTE 馃帀馃巿   </p>
    </section>
    <section id="reiniciar">
      <button> Reiniciar </button>
    
    </section>

</body>
</html>

Hey chicos, no es por quitarles la creatividad鈥 pero si apenas van empezando en esto sean fieles a la idea de mokepon; si lo personalizan al antojo de su creatividad, despu茅s no encontrar谩n la soluci贸n tan f谩cilmente鈥 se los digo, porque he decidido casi que volver a empezar. 馃ゲ

hola si no tiene mucha experiencia en cogido y variables les recomiendo que sigan las instrucciones paso a paso incluso con el mismo nombre de las varibales que los profesores, mas adelante el codigo empieza a cambiar drasticamente y se pueden confundir con los nombre, yo hiba en la clase 55 y me toco devolverme por que no encontre el error que tenia, en verdad les digo que despues de la clase 43 las cosas se ponen feo

Piedra papel demanda

Les recomiendo esta extensi贸n de Visual Studio Code para poder ver sus proyectos en vivo sin tener que actualizar a cada rato la p谩gina.

Claramente estoy haciendo el codigo como 鈥淧okemon鈥

La energ铆a al dar la clase inspira.

Maquetaci贸n
Definir la estructura y contenido de una p谩gina web.

Excelente la pasion que le pones es de verdad la clave.
Aprender de forma energetica.
Gracias por una clase tan apasionante

THOOR DIOS DEL RAYO TU HERMANO LOKI ME ESTA DANDO CLASES 馃帀

No me quejo por que es FREE pero no me gusta q me hablen como a NI脩O. xd! Freddy te habla como si fuera una conversaci贸n ADULTA

Gracias profe Loki! 馃槃

!Que bien hecho Luisito Comunica Programador

Al comienzo no me gustaba como ense帽aba Juan, pero ha mejorado demasiado.

(Y) por Juan

Me parece que es un proyecto genial para aplicar conocimientos en programaci贸n y reforzar sobre html, js y css