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

Adaptando HTML al diseño del juego

38/84
Recursos

Aportes 106

Preguntas 26

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Lo que más me gusta de esto es con la forma que lo explican y hacen las cosas , en verdad se siente que se aprende y se tiene un avance significativo.

Si quieren ver que cambie de flecha a manita al pasar por encima de las mascotas, escribe esta línea de código:

.tarjeta-de-mokepon:hover {
    cursor: pointer;
}

Este curso con la intervencion de varios profes en un solo proyecto me gusto mucho, ojala hayan más proyectos así 😀😀😀

Para que puedan guiarse mientras organizan el código en html

Así quedo: 💚.💚



  • Me obsesioné un poco, pero el resultado obtenido por el momento me encanto. Me tardé más o menos 8 horas repartidas en 2 semanas aproximadamente.
  • Use muchas de las herramientas que nos dio la profesora y tuve que investigar y practicar algunas cosas.

Me gustaría que me comenten que les pareció. También estaría genial que me den su Feedback, creo que puedo hacer más cosas, pero por el momento es hora de seguir con las siguientes clases.

El mío anda quedando así

Asi va el mío :3

Así llevo mi primera sección del juego! 🤩😁

Yo resolví el mío sin modificar la estructura original.

Jeje

Siento que el tema visual es mi principal defecto, a darle mas!

¿Cansado de cortar y pegar código cuando tienes que moverlo de lugar?

Fresco, usa este atajo de teclado y ahorrarás valiosos segundos de tu tiempo.

Selecciona el texto que quieres mover y presiona Alt + Flecha arriba o flecha abajo.

Mueve tu código línea por línea hasta que lo tengas donde lo quieres

A sí va el desarrollo de mi diseño, espero les guste!
CSS creo que es mi parte favorita de las páginas web.

Asi va quedando la parte de atras

le agregue animaciones e imagines🖱🛠📷 gif tratando de que se vea como el pokemon de gameboy :3 👌⚡🔥

asi me va quedando a mi jeje

Bueno ya muchos de mis compañeros han escrito sobre esto, pero es que no me aguanto y yo también quiero decir algo:
Me encanta, y me fascina la manera detallada en la que todos los profesores explican, la profesora Estefany, el profesor Juan David y Freddy. Todos, de verdad estoy muy agradecido, se siente la buena vibra, la buena energía y el amo con el que trabajan llega hasta acá.
Felicidades por su trabajo.

asi va quedando, poco a poco a se va mejorando… Gracias Platzi por este buen curso.
cada unos de los profesionales explican muy bien🎈

Es increíble la facilidad que tienes para explicar y hacernos entender. Estoy llevando un curso alterno y tenía tantos vacíos que ni consultando en google los había podido llenar, no te imaginas el alivio que me da saber que he podido entender muchas cosas que antes no y ahora ya puedo crear un estilo más pulido. Muchas gracias de corazón!

Muchas gracias por la clase, todos los profesores excelentes

Truco de VSC si seleccionas lo que quieres mover, presionas la tecla alt + flecha arriba o abajo, puedes mover los elemntos sin cortar y pegar

Tengo una duda, veo que han puesto vi que pusieron un <section>
<div>
<section>
</section>
</div>
</section>

Estaría bien que haya un section dentro de otro section? yo pensé que eso no era correcto.

Por otro lado, por qué un div y no un section?, cumplen la misma función?

Lo que dice Estefany es muy cierto. Antes de diseñar una pagina web, se debe hacer un bosquejo de como quiere que se vea. Esa parte sabia que se usaba lapiz y papel, pero en caso de los programadores es programas utiles para trabajarlo.

segunda pantalla, como va quedando…

Así es como va quedando mi juego 😄

Yo aún no puedo creer que esto sea gratis.
Mil gracias a todo el equipo de platzi, termino este curso y yendo a pagar la suscripción.

Tips para mejorar nuestra pagina:

1_ Ver en que punto estamos en nuestra pagina.
2_ Dibujar como queremos que se vea en una hoja.
3_ Acomodar el HTML al dibujo.
4_ Modificar el JavaScript si es necesario.

Ahora sí siento que aprender, nada que ver con el curso definitivo de HTML y CSS, le faltaba esto: un proyecto práctico unificado para toda la clase, pues todas las clases era algo distinto y eso hacía que uno se confundiera mucho.

cursor: pointer;

Para que salgue la manito en sus botones.

¡Excelente curso enseñan de una manera donde todos podemos aprender! 😊

Yo segui con la logica de piedra papel y tijera…

he entendido todo, pensé que esta parte de css seria mas difícil y me iba costar aprenderlo, pero la profe explica muy bien

Nunca pensé que aprenderia todo esto en menos de un año, estos profesores de verdad que son lo máximo, motivan a seguir aprendiendo y sus explicaciones son excelente, mejores que toda una vida en el aburrido colegio . Ojala hubiese conocido la programación mucho antes, sinceramente es a lo que me dedicaré el resto de mi vida.

Va mejorando, toda la razon😁 lo de dividir en cajitas mucho mejor.

Excelente clase

Me encanta la manera de explicar de la Profe. Es buenísima!!

YA lo estoy viendo bonito xd

Luego de este curso estoy seguro que tomaré la ruta de Web Design!

siento que esta profesora es muy organizada jajjsj

Añadir estilos a segunda pantalla del juego:

  1. revisar que tenemos hasta el momento.
  2. hacer un dibujo a lapiz y papel de la estructura que queremos.
  3. acomodar el html para que quede acorde al dibujo. (con etiquetas div).
  4. modificar el javascript en caso lo necesitemos.

¿Chic@s, qué otro curso de la profe Estefany me recomiendan para comenzar a con CSS? 🎨

si quieren sombre en la mascota, pueden usar:
.tarjeta-de-mokepon img {
width: 80px;
filter: drop-shadow(0 0 5px black);
}

Así va quedando el mío 😄

Asi va quedando , se que no es la mejor cosa , jaja pero a mi me brota la felicidad con poder estar haciendo algo asi a mis 38 , llevo 20 años como instructor de buceo y hace 2 meses decidi comenzar con esto 😃 , vamos que se puede!!

Genial…!

repito las clases solo para ver a la profe, su forma tan amena y sutil de explicar es como encantadora!

Me gusta mucho aprender contigo, gracias!

Para cambiar solo una vez el nombre de la etiqueta; el inicio como cierre. Descarga la extensión Auto Rename Tag en vscode:

Name: Auto Rename Tag
Id: formulahendry.auto-rename-tag
Description: Auto rename paired HTML/XML tag
Version: 0.1.10
Publisher: Jun Han
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Me siento feliz con lo que he aprendido…
Gracias PLATZI
Gracias profe Estefany…

Me gusta como ensenas Prode Estefany

¡Me gusta mucho que el curso sea tan intuitivo y que todos los profesores que han participado en él tengan esa capacidad de hacer ver las cosas de una forma tan fácil de entender!

Feliz de poder ir haciendo las actividades y ver como va quedando mi juego veo ue aqui hay compañeros con nivel se que antes no sabia lo que ahora pero mañana mas y mejor

me encanto este estilo de curso, donde podes ver como se trabaja en equipo y tener cierta experiencia de trabajo o al menos una idea de como se hace.

Gracias por las clases tan fáciles de entender maestra 😁

Las primeras clases con Freddy eran como los primeros dias en el inicio del año escolar, las clases con Profe Juan son como algebra, y estas con Profe Estefany es como ver Geometria; definitivamente algo tenia que servir el Cole.

Había intentado tomar como 3 cursos de HTML en mi vida y siempre me fallaba algo y no funcionaba lo que el instructor hacía, es la primera vez que hasta ahora (38) ha funcionado todo.

Super! genial el contenido de tu curso y tu manera de enseñar, Gracias.

existe una accion donde al marcar el texto y pulsar el boton alt, puedes mover el texto arriba o abajo sin tener que cortar y pegar, se que no es mucho pero espero sirva de algo…

Hace rato quiero subir una foto pero no he sabido como jejej, pero estoy muy contento con el curso, no sabia nada de programacion y es muy genial ver como paso de solo ser funcional, a verse a mi gusto, incluso pude ponerme mis propios dibujos.
muchas gracias!!!

gracias a estas clases he podido aprender sobre el diseño en css, gracias

Esta clase es una forma muy sencilla de introducir el concepto de maquetación. Que gran clase.

Con lo que he aprendido hasta ahora en estos cursos he puesto en duda si aun quiero irme por el lado del back-end… !Me ha gustado muchisimo todo eso!

¡Excelente curso!

Hace algunas clases compartí que estoy llevando mis apuntes en Notion. Aquí les comparto de esta clase: https://spangled-taleggio-d0f.notion.site/Adaptando-HTML-al-dise-o-del-juego-ca7ee6cdda194dd9ab082e7f87df551a 😃

Al pensar todo como cajas se facilita la organización de nuestra página

shi
jiji
wow
lo que mas me gusta es la forma en la que enseñan i a ustedes que es lo que mas les gusta a ustedes que les gusta en platsi
si le dan al boton de extensiones van a tener muchos atajos
quien me ayuda, cuando hago lo de seleccionar mascota no me carga la siguiente pagina no se que paso
```js ```se nota que la profe sabe enseñar me encanta su manera se enseñar con esta profe hay un gran avanse cuanto me gustaria que pasasemos clase en todos los videos

profe, muy bueno de tus clases que aprendi como modificar el css en el navegador para observar los cambios de una vez y luego se copia y pega el css en el codigo. sos la mejor

super chevere, muestran como ser mas organizado, como combinar colores, ademas no sabia que desde inpeccionar se podia hacer pruebas de diseño eso si ayuda demasiado.
![](https://static.platzi.com/media/user_upload/image-3f8ed017-9133-41a1-a76e-b5da51b3a1a3.jpg)

de momento va quedando así.

Lo que aprendi hoy, es importante crear un diseño preliminar para poder codear acorde a ello. Super sencillo de verlo de esta forma, soy BackEnd pero quiero mejorar mi FrontEnd. Vamo a por ello !

Saludos, gracias Profesora ! Siento que explicas demasiado claro, y adicionalmente el método empleado es el adecuado. Gracias

Juego, agua y tierra!

Quieren oír algo triste? hice algo que rompió todo mi HTML🥲😭😭
Lo bueno? es que lo arregle. Pero cuando me paso eso sentí que me quería arrancar todo el cabello.

¡Compañeros de clase, intento desde que partí el curso, subir mis avances como lo hacen todos, pero fracase en todos los intentos, ha, ha, ha, bueno para que sepan, solo se trata de arrastrar el archivo hasta este cuadro donde uno comenta y ya está!! ¡Y ya está… nada más! Ja, ja, ja pensé que era mucho más complejo

Siento que la profe me lleva “arreado”, pero sinceramente me ha encantado los recursos y la manera de explicacion, pragmatica y rapida; pero facil para iterar y aprender mas rapido tambien 👍

Para los que no podían hacer dos pantallas como me paso a mí les dejo mi solución (Js.)

let sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")
sectionSeleccionarMascota.style.display = "none"

Me encanta la manera de explicar de la Profe. Es buenísima!!
La frase que aprendí.
“TENER UN MAPA PARA ORGANIZAR MUY BIEN NUESTRO ++HTML ++Y QUE NUESTRO ++CSS ++SEA PAN COMIDO”

tengo una pregunta freddy dijo que era buena practica poner los botones en una etiqueta <p> entonces por que se cambia a un div?

antes:

ahora :

amboz me parecen tiernos

Pense que css era mas dificil.
Ya habia hecho mi estilo antes de clase y solo llego ella con su magia a darle orden.
#MasFelizQuePoliticoEnNavidad

En HTML debe manejarse todo en cajitas.

Para los que quieran subir la imagen del trabajo que han realizado, aqui le dejo el link, a mi me funciono con un .jpg:
https://platzi.com/discusiones/1050-programacion-basica/28650-como-poner-imagenes-en-las-preguntas/#:~:text=La manera más fácil es,JPG y el tamaño adecuado.
![](

muchas gracias!!!

Sin ánimo de desmeritar a los demás profesores de todas las clases que he tomado en las diferentes app a ti es a la que mejor le he entendido y menos perdido me siento.

Veamos que tal…

me gusta mucho con la forma como explica