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

Visual Studio Code

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 53

Preguntas 15

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

💡 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.
.

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

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 !!! 💚💚💚

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

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

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

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

Esta página con todos las etiquetas en HTML que seguro te serán útiles 💚
https://allthetags.com/

  • 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

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

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).

Yo le agregue los tipo aire y trueno de una 😅

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-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>

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

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

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

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

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

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

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

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 😊

Nota:

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

Solo podemos usar h1 una ves en nuestro html

Jajaja el profe es Timothee Chalamet.

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.

Enlaza la llama

Así va nuestra estructura:

Me encanta que empezemos a crear proyectos de manera profesional 😁😁

Holaaa a todos

Bastante chevre la dinamica y se puede mejorar 😃

Que buen nombre del juego jajaja

Una explicación genial. A seguir practicando sin rendirse.

¡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🎉

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

No sabia q Timotheé Chamalet era profesor de platzi xdd

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>MOKEPON !</title>
    </head>
    <body>
        <h1>MOKEPON ! 🔥💧🌱</h1>

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

            mascotas

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

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

            <p>Tu mascota tiene <span>3</span> vidas</p>
            <p>las mascota 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 mascotas del enemigo atacá con TIERRA - GANASTE 🎉🎉🎊🎊</p>

        </section>

        <section id = "Reiniciar">
            <button>Reiniciar</button>
        </section>
    </body>
</html>

¡El profesor Juan David es un crack! Me gusta que enseñen HTML.

Si sienten muy difícil toda la secuencia de la programación hecha en este curso vuelvan al principio y avancen hasta que comprendan, como dijo David, no importa cuantas veces lo veas, lo que importa es que comprendas y entiendas la lógica que se implementa y esto se debe a que no estamos acostumbrados a las funciones, pero al repetirlas se van familiarizando y vas comprendiendo mejor, en mi caso vi 3 veces la explicación de Juan(Alias Loki) y hasta ese entonces comprendí muchas cosas como lo de Inner Element y children… estoy muy agradecido con estas personas que ayudan a la comunidad nueva… y más si te apasiona aprender todo sobre programación entonces ahí es donde debes estar

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.


<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title> MOKEPON! 🔥💦🌿 </title>
</head>
<body>
<h1>MOKEPON 🔥💦🌿</h1>

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

     //MASCOTAS

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


<section id="selecciona-ataque">
    <h2>Elige tu mascota</h2>

    <p> Tu mascota tiene <span>3</span> vidas</p>
    <p> El enemigo tiene <span>3</span> vidas</p>

    <p>
        <button>FUEGO🔥</button>
        <button>TIERRA🌿</button>
        <button>AGUA💦</button>
    </p>
</section>

<section id="mensajes">
    <p>USASTE FUEGO,EL ENEMIGO TIERRA,GANASTE</p>
</section>

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

</html>

Codigo de clase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mokepon | Programacion Basica |</title>
</head>
<body>
    <h1>¡MOKEPON! 🔥 🌊 🍃</h1>

	//
    <section id="selectPet">
        <h2>Elige a tu mascota:</h2>

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

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

        <p>Tu mascota tiene <span>3</span> vidas</p>
        <p> Las mascota 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, la mascota del enemigo atacó con TIERRA - GANASTE 🎉</p>
    </section>

	//
    <section id="reboot">
        <button>Reiniciar</button>
    </section>

    
</body>
</html>

Atajo o shortcut para hacer comentarios
Ctrl + Shift + 7 (/)

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

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

siento que voy lento 😅apenas es mi primera semana

¡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! 💚

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

(Y) por Juan

¡¡Genial!! Hacer magia con esto.

Vamos bien

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MOKEPON</title>
</head>
<body>
    <h1> Mokepon! 🌱🔥💧 </h1>
    
    <section id="seleccionar-mokepon"></section>
        <h2>Elige a tu Mokemon:</h2>

        <p>AQUI ELIGES TU MOKEPON</p> 

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

        <p>Tienes <span>3</span> vidas</p>
        <p>El contrincante tiene <span>3</span> vidas</p>

        <p>
            <button>Tierra 🌱</button>
            <button>Fuego 🔥</button>
            <button>Agua 💧</button>
        </p>

    </section>

    <section id="mensajes"></section>
        <p>MENSAJE ATAQUE</p>

    <section id="reiniciar-terminar"></section>
        <button>Volver a jugar</button>
        <button>Terminar</button>
    
</body>
</html>