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

Aún puedes aprender 1 año a precio de Black Friday

Antes: $199

Currency
$129/año
regístrate

termina en:

1D
11H
50M
58S

¿Y ahora qué curso tomar?

84/84
Recursos

Aportes 60

Preguntas 13

Ordenar por:

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

Like si tienen el Diploma del PRIMER CURSO DE PROGRAMACIÓN básica 😎😎😎

Like los que acabaron este curso en 2022 💚

Fue un placer ver este curso con ustedes 😎💚

Esta es una clase del anterior grupo de programación básica para que comparen la calidad y a el pequeño Freddy
https://www.youtube.com/watch?v=C7NLf7K7hLA&ab_channel=Platzi

Un mes haciendo el curso, no entiendo como algunos los “terminaron” en un par de dias pero bueno XD
Me gustaría compartir mi codigo pero esta un poco desordenado aun, así que dejo un par de capturas mientras hago la v 2.0 😄

Acá empieza realmente la carrera de muchos y es el inicio de futuros desarrolladores, emprendedores, marketers, etc. y es donde empieza la magia de esta industria. Éxito a todos en sus carreras y vidas que si siguen aprendiendo sin parar, el día de mañana serán quienes guíen nuestro mundo.

¿Alguien más ya lleva años programando pero se hizo el curso por gusto XD? Me encantan estos profes

Suerte a todos en su exámen ojalá lo pasen!!! y sigan con el curso de git y github les va a servir mucho! 💪💚

cuando logre desarrollar un proyecto que quiero realizar en web y llevarlo a móvil ese día gritaré por todo lo alto "lo logré" y lo haré tan fuerte que haré que mi familia se enorgullesca de mi
Felicitaciones a todo el equipo de Platzi por crear tan increible curso y totalmente gratuito, el nivel de producción, conocimientos, edición, etc es digno de aplaudir, con este curso muchos empezarán su ruta en programación!. Recuerden, nunca paren de aprender 💚

La energía que tiene el profe Juan es tremenda!!

Cuentenme los que ya son desarrolladores, ¿que cosa nueva aprendieron? ¿Cúal fue eso nuevo que aprendieron y que dijeron: “wow tantos años programando y eso no lo sabia”?

Empiezo yo: el tema del canvas no lo conocia muy bien, me gusto mucho aprender ese tema. 👍

freddy me pone nervioso :v

Que genial curso!, El primer comentario del final!
Saludos a todos, espero hayan aprendido un montón.
¡¡Nunca paren de aprender!! 😎

El curso esta muy bueno jejej
like si lo completaron

Felicitaciones a todos los profesores, que hicieron parte de este curso muy bueno. Ya que para mi fue el nitro de seguir con esta bonita carrera de programación, y a mi compañeros tambien les doy las gracias ya que a veces no entendía algo y miraba el chat.

Ya esto no es seguir un sueño es una meta, NUNCA PARES DE APRENDER:))

Increíble !!!
Se supone que esto es programación Básica y es gratis pero este curso va mas allá, estoy muy contento, este curso me enseño el camino para entrar a la industria de la tecnología !!!

💚💚💚💚💚💚💚💚💚💚

Felicitaciones al equipo de Platzi por este curso excelente! 💚

¡¡¡ GRACIAS PLATZI !!!
Dios los siga bendiciendo 😃
Vamos por más, esto recién comienza.
NUNCA PARAR DE APRENDER 💚
Sueño con tener mi Startup y ser el primer unicornio de mi país, soy de Bolivia 💓💛💚

Grandes!!!

Excelente curso! sabia cero de programación y esto me ha ayudado mucho a tener las nociones de front end y backend. Lo culminé aproximadamente en mes y medio. Felicito a todos los prof. en especial a @Juan porque explica de una forma muy entretenida y responde todas las dudas

Viendo la ultima clase, y aún no enendí la primera.

terminé todo el curso usando windows 7 32 bits xd

Fase 1 terminar todo el curso.

Fase 2 Reparar el código.
(La fase 2 solo se detiene en caso de emergencia… Llorar no es considerado una emergencia)

Sin duda este curso cuando empecé a aprender a programar hubiera sido fundamental y me hubiera evitado muchas perdidas, pero pues en costo beneficio de tiempo y material pues ya aprendí en otros lados más de la mitad del curso y tocan temas que prefiero profundizar xd.

Pero el curso está excelente para personas que apenas inician, intermedios o incluso avanzados con tiempo libre, practicas muchas habilidades en un proyecto divertido

Fredy Vega es una inspiración para mi, como diría un niño pequeño, cuando crezca quiero ser como el 😃

Felicitaciones para todos los profesores y quienes colaboraron en la elaboración de este gran curso.
Y para los iniciados bienvenidos, esto es solo una pequeña parte de lo que encontraran en esta gran comunidad.

este curso me ayudo mucho, como hacer algo completo fue genial, me dio muchas ideas, para hacer en otros codigos, se pude hacer el mismo juego en java python, cuando puede conectar para que puedieramos jugar con el wifi de la casa fue algo super genial la verdad me exploto la cabeza y me motivo muchisimo.

Estuve detallando todo el contenido del curso y esta una maravilla omee 😄😄, agregado en mi ruta de aprendizaje!

Uff este curso es como pasarse el Dark Souls pero una ves que lo terminas y pasaste por todas las dificultades UFFFFF que bien se siente, muchas gracias a todos los profes!!

Excelente Curso, la verdad me dejo sorprendido como evolucionamos con el conocimiento, los catedraticos saben del tema y lo describen de una forma facil de comprender… cambiemos el mundo gracias a Platzi !!!

Buenisimo

Lo que es freddy y juan david, me inspiran mucho, enseñan muy bien

Estoy fascinada con este curso en serio se nota una gran diferencia con el primero, todos los profes increibles, muchas gracias por tanto. Mi juego tiene algunos errores pero por estos dias mis cerebro esta frito. Me despejaré haciendo algunos proyectos pequeños y volver con todo. Ya me cambie de carreraaaaaa !!! Entonces debo estudiar para mis nuevas materias CURSO DE MATEMÁTICAS DISCRETAS VOY POR TI 😍 Saludos y abrazos a cada persona que ha hecho y hace posible todo esto. PD: Algún dia los conoceré :3

Pregunta y aporte:

Reto culminado, de aquí tengo claro que salgo para el curso de Git y Gihub, pero después no estoy segura con que seguir, cuantos de uds están en las mismas? Que hicieron para saber que están escogiendo bien su lugar en el mundo de la tecnología?
Para conseguir trabajo tengo experiencia en data analyst pero tengo una vocesita dentro que me dice que me valla por el Frontend, la gente te pregunta ¿Qué te gusta ? pero al ser tan nueva en esto es como si me pidieran opinion de varios platos en un restaurante que es completamente nuevo para mi

Muchas muchas gracias por este curso!!! 🙏🙏🙏

excelente curso!!

Hermoso curso! La parte de backend hay que corregir varias clases! Pero me encanto. De hecho los errores me sirvieron para buscar bugs y entrenar lo logica del algoritmo.

Son cracks!

Llegue… estuvo bueno aunque me imagino que mas adelante tienen un mejor metodo de ensenanza.
Muchas gracias!

Un muy buen curso! 😄

Finalizamos exitosamente el curso, gracias a todos los profes que hicieron posible este maravilloso curso.

Curso terminado 😃 y ahora a seguir aprendiendo.

cambien anime por curso : )

esos son buenos para programación ya es el fin del curso

Gente subí mi primera página es el piedra papel o tijera pero mejorado con botones acá el link
Piedra, papel o tijera

muchas gracias aprendi muchisimo, este es apenas el principio pero tengo fe de que llegare lejos. 😃

Algo a tener en cuenta: estoy por cumplir 1 año en Platzi, y cambiaron 3 veces el listado de cursos dentro de la Escuela de Videojuegos. 2 de esas 3 veces me retrocedieron el puntaje que llevaba completado. No se si pasa lo mismo con el resto de las escuelas, pero personalmente resultó frustrante ver mi avance disminuido. Incluso luego de escribirles por mail, lo único que recibí fue un mail genérico y ninguna respuesta concreta. Les recomiendo guardarse algun tipo de listado al empezar una escuela, para saber que cursos agregaron o quitaron cuando vuelvan a hacer estos cambios.

Bueno aqui dejo mi repositorio del proyecto funcionando, por si a alguien lo quiere ver 😁

https://github.com/FlexxN1/Mokepon-War

Gracias Platzi!💚💚🚀

Lo logramos amigos 🥳🥳🥳

like si estan felices por haber terminado el curso!! 🥳

Muchas gracias al equipo de platzi por este increíble curso.

Por fin terminé 🎉🎉🎉. Gracias a todo el equipo de platzi y profesores que hicieron tan bello curso, un curso muy retador.

Agradecimientos por las clases tan completas, excelentes profesores y tener un producto paso a paso en 84 clases, me siento muy feliz!!!

Me quedan unas horas de este curso gratuito y que felicidad es volver a ver mi profesor favorito de programación Freddy, voy a extrañar este curso, gracias Platzi❤️

Les contaré cómo empecé este curso y que gracias a la dedicación que le di y a Dios, hoy 17 de agosto del 2022 lo culmine, veía un curso en Udemy Academy de full stack que por cierto es bueno el curso, pero había una clase que no entendía un tema y decidí autodidactamente ver en Youtube unos tutoriales para profundizar más, en unos de los vídeos que me salieron en Youtube había uno que no tenía nada que ver con el tema jaja pero me dio mucha curiosidad, era un vídeo de platzi, donde Juan David explicaba como hacer el juego de piedra papel o tijeras en 10 minutos o algo así era el vídeo, el punto es que en el vídeo me vendieron un curso el cual es este, de programación básica gratis y yo ingresé y empecé a ver las clases y yo super encantado, sentí que estaba aprendiendo muy rápido y que eran conocimientos que me iban a perdurar, o mejor dicho que me perdurarán bastante, y ahora me encuentro orgulloso de mí mismo pq aprendí mucho con este curso, y ahora tengo que retomar el que estaba viendo de udemy que es un poco más avanzado y bueno también hay muchos más cursos que quiero hacer tanto aquí en platzii como en Udemy, estoy encantado de este curso, gracias a todos 🤟🏼

Gracias por el curso, ahora si a presumirlo con nuestros conocidos.

Les mando un saludo a todos los docentes y los estaré viendo en sus cursos para seguir aprendiendo con ustedes y darles dolores de cabeza (también aporto en los comentarios 😎).

Ánimo.

Créditos a @ric.arellano92 !!!
Para evitar el error “mokepon.js:448 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘nombre’)” lo que hice fue agregar un if que evalué si el mokepon existe o no, esta validación también se aplica en la parte de pintar mokeponEnemigo:

//---------------------Al recuperar enemigos--------------------------
                mokeponesEnemigos = enemigos.map(function (enemigo)
                {
                    let mokeponEnmigo = null
                    if(enemigo.mokepon != undefined)
                    {
                        const mokeponNombre = enemigo.mokepon.nombre 
                        switch (mokeponNombre)
                        {
                        case "Hipodoge":
                            mokeponEnmigo = newMokepon('Hipodoge', './assets/mokepons_mokepon_hipodoge_attack.png', 5, './assets/hipodoge.png', enemigo.id)
                                break
                            case "Capipepo":
                                mokeponEnmigo = newMokepon('Capipepo', './assets/mokepons_mokepon_capipepo_attack.png', 5, './assets/capipepo.png', enemigo.id)
                                break
                            case "Ratigueya":
                                mokeponEnmigo = newMokepon('Ratigueya', './assets/mokepons_mokepon_ratigueya_attack.png', 5, './assets/ratigueya.png', enemigo.id)
                                break
                            default:
                                break
                        }

                        mokeponEnmigo.x = enemigo.x
                        mokeponEnmigo.y = enemigo.y
                    }
                        return mokeponEnmigo
                })

//---------------------------------Al tratar de pintar enemigos----------------------------------------
        mokeponesEnemigos.forEach(function (mokepon)
        {
            if(mokepon != undefined){
                mokepon.pintarMokepon()
                revisarColision(mokepon)
            }
        })

Re subí la respuesta de @ric.arellano92 porque estuve rompiéndome la cabeza durante una semana y quiero que otros lo puedan solucionar, ya que desde las carpetas del curso da error.
Saludos y recuerden: Nunca Se Rindan, Nunca Paren de Aprender.