Fundamentos de Programación

1

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

2

Programación en Navegadores: Primeros Pasos

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?

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

1/84
Recursos
Transcripción

¡Hola! Bienvenido o bienvenida a la primera clase de este curso. Antes de empezar, déjame contarte sobre el proyecto del curso y te daré algunos consejos que te ayudarán en el camino. El proyecto de este curso consiste en crear un videojuego en línea. Nada mejor para aprender que haciendo un proyecto interesante, ¿no crees? 😉

Tú estás a la altura de este proyecto 💪. El perfil de profesores en Platzi te enseñará a construirlo desde cero a lo largo de 6 módulos. Tendrás la oportunidad de hacer preguntas y experimentar un poco durante el camino.

¿Qué aprenderás en este curso?

Los módulos que verás son los siguientes, cada uno con un profe diferente:

  1. Fundamentos de programación
  2. Desarrollando un juego con HTML y JavaScript
  3. Estilos con CSS
  4. Optimización de código
  5. Mapa con Canvas
  6. Backend: videojuego multijugador

Y recuerda: ver las clases no es suficiente para aprender.

Anímate a programar

Si quieres aprender de verdad, tienes que programar junto a los profesores, experimentar usando lo que aprendes, hacer los retos, observar los aportes de tus compañeros, realizar preguntas y responderlas si sabes como hacerlo.

No estás solo o sola. Puedes emplear el sistema de aportes de la clase para comunicarte con tus compañeros, y también puedes unirte al Discord de Platzi para interactuar un poco más con la comunidad. Ahora pasa a la siguiente clase y prepárate, porque ahí escribirás tus primeras líneas de código.

Contribución creada por: Jhonkar Sufia y Alfredo A. Figueroa (Platzi Contributors).

Aportes 961

Preguntas 95

Ordenar por:

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

Bienvenidos a esta aventura!

Tú, sin duda, vas a aprender a programar con este completo y ambicioso curso. No lo lograrás solo viendo clases. Sigue cada ejercicio, programa cada letra de código y no te rindas.

No te rindas. Y nunca pares de aprender.

Estas a escasos días que tu vida profesional cambie para siempre, aprendiendo a programar 💚

intento numero 200 ojala esta vez pueda lograrlo

Lo más importante mencionado en esta clase es aprender haciendo. Primero siguiendo las clases y después con tus propios proyectos es fundamental.
Antes o inmediatamente después a este curso sugiero los siguientes:

  1. Pensamiento Lógico
    1. Algoritmos y Diagramas de Flujo
    2. Funciones y Estructuras de Control
    3. Lenguajes de Programación
  2. Introducción a la Terminal y Línea de Comandos
  3. Git y GitHub

Programar más que aprender la sintaxis de un lenguaje se trata de resolver problemas, por tanto con un buen pensamiento lógico se te hará más sencillo programar en cualquier lenguaje.
A diferencia de las interfaces gráficas, la forma usual de interactuar con la computadora, la terminal agiliza tu flujo de trabajo y será el medio para ejecutar la mayoría de herramientas que usarás como programador.
Una de las tecnologías que se usan con la línea de comandos es Git. Junto a GitHub es esencial que lo aprendas cuanto antes. Con esto podrás comenzar a construir tu portafolio con proyectos para mostrar a tus empleadores, además de ser muy útil para trabajar en equipo y registrar cambios, entre otras cosas.
.
Después de haber aprendido esto, no habrá nada que les detenga. Asegúrense que después de cada curso en Platzi apliquen lo que aprendieron. Pueden modificar y añadir características a su gusto los proyectos hechos durante las clases o también hacer proyectos nuevos desde cero. Sugiero hacer los proyectos que incluye el currículo de Free Code Camp y The Odin Project. A mí me gustan los de Odin porque tienen un servidor de Discord en el que puedes pedir ayuda para sus proyectos.
.
Resumiendo, nunca pares de programar.

Este año no se acaba sin que yo sepa programar 💪

Hace 2 años intente hacer el anterior curso de programación básica, lo había intentado hacer 2 veces pero siempre me rendia y lo dejaba, hace un mes me pico el bicho de intentarlo de nuevo y antes de ayer lo termine completo, y precisamente ayer me vengo a enterar de que iban a sacar este nuevo curso!, parece hasta magico jajaja a darle con toda!

Un nuevo intro de Platzi, un nuevo logo en el curso, nuevos profesores, un nuevo sistema de comentarios (aportes), una nueva interfaz, varias cosas han cambiado desde el anterior curso de programación básica pero las ganas de nunca para de aprender, no ❤️

¡Un abrazo mis estimados y que lo disfruten!

💚 Me siento muy afortunado por haber terminado el anterior curso de programación básica! Animo para todos los nuevos que entran!! lo que más importa es que nunca paren de aprender. 🚀

Recuerden que en la programación la practica hace al maestro! ^-^ 💪

Pequeña anecdota: Hace años aprendi a programar hablamos de un 2012 en Visual Basic y Visual Fox Pro, la cosa es que deje de programar luego de graduarme de la escuela, por asares de la vida encontre un empleo tradicional donde no ejercia lo que estudie, tiempo después, 7 años despues para ser exactos no me sentia cómodo en mi trabajo y era porque no me permitia desarrollarme como yo quería y ejercer lo que a mi me gustaba, retome lo de programación solamente que cuando lo hice me senti perdido muchas cosas habían cambiado y por más que intente me costaba entender o comprender ciertos conceptos de la programación y más que ahora era un mundo mas extenso.

Mi punto es que muchas veces tenemos que desaprender para luego volver a aprender, no solo se trata de no parar de aprender sino también no parar de intentarlo, nunca se es tarde para interntarlo, pero sobre todo aprendamos a disfrutar del camino porque cuando se llega al objetivo la satisfacción es enorme, así que me dare la oportunidad de desaprender para volver a aprender con este nuevo curso 💪🏻

¡Gracias Platzi! 🧑🏼‍💻💚

El curso anterior fue el primero que hice de forma online y el que me incentivó a volver al mundo web.

Si están iniciando, denle con todo.

Aunque el camino se vea largo, vale totalmente la pena.

Desde que vi el curso anterior hasta hoy he aumentado 2x mi sueldo.

Hola, compañeros de curso tengo 10 años, y voy a aprender programación con este curso con el apoyo de mi voluntad y de mi padre

Ya que hemos decidido no parar de aprender. Hagamos Networking con un grupo de estudio
https://chat.whatsapp.com/B7M6HjozjL8ICIriOX4gQO

Texto de Odin Project
Sobre aprender a programar.

Puede que le lleve más tiempo que a los demás comprender los conceptos, o puede que le lleve menos tiempo. Esto no significa que seas más inteligente o más tonto que los demás, significa que has tenido diferentes experiencias de vida que pueden o no haberte preparado para aprender estas cosas. Alguien que creció alrededor de un ingeniero puede tener algunas ventajas sobre alguien que no lo hizo, pero eso no significa que no puedas aprender esas habilidades.
Tendrá más éxito estudiando si le dedica un tiempo constante en lugar de trabajar en él una vez a la semana. Desarrollar el hábito de estudiar todos los días a una hora específica y con un objetivo específico asegurará que hagas un progreso constante.

La nueva generación de programadores nace hoy 💚

53 años, ya sé que estoy algo grande, aún así me emociona mucho estar aquí, además, nunca es tarde… 💚

No fue en este sino en el anterior curso donde mi vida profesional cambió para siempre. A tan solo 15 años de edad di mis primeros pasos en programación…Solo inténtenlo, les aseguro que valdrá la pena!

🚀 Let’s Gooo!!!

¿Quién más viene del platzi live de lanzamiento del curso? 😄

Estaba esperando este curso 🤓

Hoy tomé la decisión de aprender esta habilidad.

_
Soy Padre, Esposo e Hijo, trabajo 14 horas al día, se ma hace muy difícil, pero no es imposible.
_
Volveré a este comentario el 21/12/2022, donde les informaré todo mi avance profesional.
_

¡Les deseo el mayor de los éxitos!

Aprendí a programar en BASIC en 1987 en una calculadora CASIO FX 5200 P, en esa época el profe de Matemáticas no entendia como resolviamos cosas magicamente y nos eximia (a mi y otro compañero que también tenia la misma calculadora y que se hizo ing. electrónico)… Yo me hice ing. de sistemas.

Y dar un paseo por acá es vivificante.

Ese compañero, Freddy y yo compartimos el gusto por los Aviones y la Astronaútica.

Así que acá, aplicando el Slogan de #NuncaPararDeAprender.

QUE EMOCIÓN !!😃 MUCHA SUERTE COMUNIDAD 💚💚

Hola, si estas leyendo esto por casualidad compartire mi experiencia aprendiendo programacion en platzi. Si no sabes nada de programacion te recomiendo encarecidamente que antes de echarte este enorme curso vayas primero al curso de pensamiento logico, donde te ensenaran las bases teoricas mas esenciales de la programacion y las bases de algunos lenguajes y a partir de ahi busques que lenguaje te gustaria aprender erspecificamente. este curso se enfoca en html el cual esta bien pero esta muy enfocado en paginas web y ademas mas adelante se nota que el curso esta dirigido para aquellas personas que ya tienen las bases teoricas de la programacion, si estas enfocado en otro medio como los videojuegos te recomiendo que busques otro curso como los de c# y unity. pero definitvamente creo que antes tienes que ver el curso de pensamiento logico. de esa forma estas clases seran un poco mas sencillas de entender

Yo despues de ver la primera clase

Uffff!! Que alegría siempre he querido aprender a programar. Siempre tenía excusa, que el tiempo, el trabajo mis hijos mi esposa. Juummm cuántas cosas y ya tengo más de 30años. No dejaré pasar más el tiempo. Está vez lo lograré. Por mi Hogar y por mi. Siiii

Durantes estos últimos meses me he enamorado de la programación como un niño mirando de lejos a la chica que le gusta. Ahora pienso conquistarla!

Estoy hace unos 4 años siguiendo “el camino seguro” para tener un “futuro estable”. Y, aunque agradezco a mis papás por TREMENDO ESFUERZO, desde que sigo a Platzi sé que este no es para mi.

Estoy emocionado de empezar de lleno en está industria tan increíble y espero que, juntos, lleguemos a ser la potencia tecnológica que Latinoamérica necesita. Un gran abrazo para todos y mucha buena vibra!

Bienvenidos a esta nueva aventura!!!

Les comparto mis notas de clase EN NOTION, las voy a ir actualizando a medida que vaya avanzando

https://www.notion.so/NUEVO-Curso-Gratis-de-Programaci-n-B-sica-396d89e524c242578045af1396f87c4e

Tengo grandes expectativas, se que son lo mejor así que vamos con todo 😄

Estaba tomando el curso anterior y lo reemplazaron creo, me quede en el cajero, ni modo a tomar este.

Compre platzi en marzo y me he desanimado bastante, me cuesta organizarme, enfocarme, desde que anunciaron el lanzamiento de este curso lo estoy esperando. Regreso motivada para aprender programación!

Listo para hacer el remake del curso gratis de programación básica

BUSCO GRUPO DE NOVATOS hola, acabé de terminar la trilogía de fundamentación y quisiera ver si encuentro personas que estén iniciando este curso básico para apoyarnos unos con otros.

Video de bienvenida:
Aprenderemos a programar, no lo lograremos viendo las clases, nadie aprende asi. Necesitamos LEER los comentarios de compañeros en cada clase, y necesitamos programar con todos los profes.
Dominaremos desde las bases del código hasta la creación de proyectos tan interesantes como un video juego en línea, la PROGRAMACIÓN ES UNA HABILIDAD FUNDAMENTAL para el próximo siglo, además de ser una de las profesiones mejor pagadas de la historia. Cambiará mi vida profesional para siempre.

con muchas ganas aprender!

Todo para que pibotaje que quiero en mi carrera se haga realidad y aprender como nunca.

Let’s gooooo! Comunity, skills and english.

Si cumples estos 3 requisitos, triunfaras en la industria.

Go ahead 🔥🔥

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

Enjoy

“Tú estás a la altura de este proyecto” ¡me encantó esta frase!

Me entusiasma aprender a programar!!

alert(“Ya quiero aprender mas xd”);

Venga!!!
Tengo 47 años y volver a los fundamentos es bueno!!!

Back to basics!! 😎🚀

Tome el primer curso y me fue lo mejor que me pudo pasar,
me abrió un mundo lleno de posibilidades y esperanza, tenía una laptop más o menos, ayer estrené laptop; una buena máquina y hoy estrenaré este curso.
¡Me siento muy emocionado por lo que se viene!

Vamos acabo de comenzar esta aventura y sere desarollador de videojuegos cuando termine este 2023 vamos a por todas!!

Odio programar, pero con tal de saber como hacer el juego toca aguantar

Empezando, voy a ser parte de esta nueva generación para potenciar America Latina.

Bienvenidos chicos van a aprender bastante!!!
Que bueno....siempre tuve curiosidad pero por mi edad no estoy seguro. Ya estoy aca ahora ♥

Freddy Vega:
Te envío este mensaje con la esperanza de que este te llegue:
tengo una experiencia con tu curso de inteligencia para ciberseguridad, ya que en el capitulo 5 “Mapeo de aplicaciones web y análisis de archivos de interés” del maestro Francisco Daniel Carvajal, al final de los recursos tiene un link que no lleva al curso que nos debería ayudar a instalar kali “https://platzi.com/clases/1583-ethical-hacking/19725-instalacion-del-entorno-de-pruebas-kali-linux/” pero resulta que al entrar a la pagina donde tenemos que descargar “Kali” , presenta un error 404.
Trate de descargar Kali pero en realidad al verme rebasado del tipo de información ahí solicitada, vi prudente dejar pendiente la instalación de este programa Linux.
Al pasar por esta experiencia me deja una inseguridad al tratar de continuar este tipo de clases de ciberseguridad, ya que siento que no le han dado la atención debida a la información del curso, ya que se ve rebasado el tema con lo que veo en la pagina de kali.
Si te llega este mensaje cree me que es porque me interesa que sepas que esta pasando en estos momentos, y si puedes ayudarme a recobrar mi confianza en este curso te lo agradeceré, ya que tengo factor tiempo en contra por razones laborales que actualmente tengo.

Sin mas por el momento, quedo de usted…

Atn
Roberto Méndez
Mérida, Yucatán. México.
11/07/2023 20:35 hrs

PD.
Comenzare los cursos de ecommerce

6 años y un sinfín de intentos, vamos a por el bueno. Lo que mata objetivos son los abandonos y aquí, ni se nos ocurre tal cosa.
Vaaaaamos
Mil gracias!
Mon

A ver si aprendo si este 2024

la verdad nunca creí que me iba a llamar la atención apreder de programación per aquí estamos espero ser capas, gracias por poner este curso gratis.

Me siento como mi primer día de secundaria, con mucho miedo y expectativa !!

Vamoss a verlo por segunda vez !

Vamos con toda, corazocíto para los que estén iniciando y están emocionados.

Estoy muy emocionado, tome el anterior curso de programación que lanzo platzi de forma gratuita, ahora con esta actualización estoy muy emocionado y mas viendo al evolución que ha tenido.

Hola con muchas ganas de aprender, saludos a todos

Bueno, inicié 06/Feb/2023 vamos a aprender.
¡Gracias a todo el equipo!

hola, de verdad es totalmente gratis?

Estoy emocionado de empezar gracias por esta oportunidad

Me he propuesto aprender a programar, daré todo mi esfuerzo para lograrlo.

😄 ¡Vamos con todas las ganas! Esta vez APRENDERÁS a programar. Nunca te rindas. Pero, sobre todo, nunca pares de aprender. ¡Arriba ese ánimo! 💚

espero aprender a programar y algún día conseguir un trabajo

estoy muy motivado

bueno a empezar a aprender 😃

Que buenoooo…muchas expectativas y dudas

quiero sacarle el mayor provecho a este curso

Esto se va a descontrolarrrrrr jaja

Esta re bueno este curso ya q soy pricipiante

Se viene algo grande… ¡Ambriento y alocado!

Interesante 😃

Lo que más necesitamos para tomar este curso es unas ganas de nunca parar de aprender

Que lindo ya quiero empezar , por primera vez ingresando al mundo de la Programación.

Buenas!!! Saludos desde Argentina.

Súperrrr!!

Waoooo!! Mi corazoncito casi explota de tanta emoción.
1 mes esperando este curso

Muchas expectativas.

Hola chicos,
Me embarcó en este curso con entusiasmo y muchas ganas de aprender, pero también con cierta temor porque es algo que no conozco y genera cierto temor e inseguridad. No tomo el curso solo por tomarlo, me hubiera gustado aprender a programar desde hace mucho. He hecho intentos, pero no lo he conseguido. Siento que esta es mi oportunidad de aprender y plasmar lo aprendido. Ya les iré contando mi recorrido. Ad maiora!

A darle con todo

Emocionado de tomar estas clases de nuevo, seguro habrá algo nuevo que aprender.

Qué alegría da ver a tantas personas interesadas por aprender a programar, así que vamos a darle que también tengo ganas de aprobar el curso y no parar de aprender uwu

Un cordial saludo a todos!
Deseandoles exito en este camino que empieza.
Freddy me encanta tu estilo y narrativa.

Saludos !

Esta cañona esta nueva versión.

Vamos a darle!
que excelente escuela, una oportunidad para los que queremos cambiar nuestras vidas
klk
Se actualizo la clase gracias Freddy.
Excelente bienvenida. Ya me emocioné. Y no soy la única.
intento numero 368263812 de aprender programación 🫡
gracias a este tutorial pude ponerme la peluca bien
empezando este curso espero poder aprender con todos
¡Vamos por una nueva aventura... la programación!
voy por el curso 8 y me esta costando por que soy nuevo principalmente pero, si termino lo dejare comentado en el ultimo curso.
gogogogo....

Tengo que aprender a programar, tengo, debo y nesecito, se que lo voy a lograr de la mano con Platzi,!!

Hoy inicio esta aventura con todo el entusiasmo y ganas de obtener nuevos conocimientos

Con emoción por aprender desde Colombia 😄