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

Estilos del botón

37/84
Recursos

Aportes 234

Preguntas 26

Ordenar por:

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

Les recomiendo que acabando este curso revisen la escuela de diseño gráfico, les servirá mucho para mejorar sus estilos en CSS 💚 💚 💚

https://platzi.com/diseno-grafico/

Me pasé todo el día haciendo la wea pq quería aportar :3

No es tanto pero ahi voy!

Asi va el mio

Así va el mio, hice mis propios diseños para las mascotas que mejorare después con el curso de illustrator😊

Hola Platzi!
Asi va mi web de inicio, con botón desactivado hasta que selecciones alguna mascota…

Aca les dejo una imagen con los 3 estados de mis inputs, normal, :hover y checked… y el botón ya activo para continuar.
Me encanta este curso, Saludos!

practicando animación

Que buen ojo para los estilos, tengo que trabajar duro para desarrollar ese buen ojo o gusto, yo no puedo hacer nada de esto sin un diseño pre-definido, excelente ver como va haciendo cada cosa y va teniendo sentido y se ve tan cool.

💅

En el css de los botones pueden usar esta opcion para que les salga la manito del click:
cursor: pointer;

hola

Reto Cumplido.

Así voy! No he podido centrarlos bien con

justify-content: center;

, si alguien me da recomendación les agradecería.

Espero les guste!

Les comparto mi pequeña pantalla.
Acepto recomendaciones. Gracias.

listo profe asi quedo

Yo, HTML siempre he sido mejor amigo de JavaScript. Nunca habías tenido problemas, éramos nosotros dos.
Hasta que apareció ella.
CSS, la más encantadora. y sin duda los demonios están hechos para pecar con los ángeles.

yo aquí casual, tratando de darle romance a esto 🤣🤣🤣

Muy contento con el resultado hasta ahora.

Un poco old School

Adapté un poco el juego para que fuera una extensión de mi emprendimiento!!! poco a poco voy aprendiendo. Le quiero poner unas lógicas distintas pero luego de terminar el proceso del curso!!

Acá esta mi diseño, espero les guste!!

y este es mi código CSS

@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

body{
    margin: 0;
    background-image: url(./imagenes/fondo.jpg);
    background-size: contain;
}
#seleccionar-mascota{
    display: flex;
    flex-direction: column;
    height: 80vh;
    width: 500px;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #E8AA42;
    margin-top: 60px;
    margin-bottom: 60px;
    border-radius: 12px;
}
.titulo{
    margin-top: -30px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFE5B4;
    width: 450px;
    border: 1px solid #256D85;
    height: 80px ;
    margin-bottom: 68px;
    font-size: 70px;
    font-family: 'Silkscreen', cursive;
}
h2{
    font-family: 'Poppins', sans-serif;
    color:#FFE5B4
}

.contenedor-labels{
    display: flex;
    justify-content: space-between;
    width: 470px;
    height: 150px;
    margin-bottom: 40px;
}
.tarjeta-de-mokepon{
    width: 150px;
    height: 150px;
    background: #256D85;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 300;
    
}
.tarjeta-de-mokepon img{
    width: 110px;
    margin-bottom: 0;
    margin-top: 0;
}
.nombre-mokepon{
    font-family: 'Poppins', sans-serif;
    color: #231955;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 25px;
}
#boton-mascota{
    width: 300px;
    height: 45px;
    color: #FFE5B4;
    background: transparent;
    border-radius: 8px;
    border: 2px solid #256D85;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    
}
input{
    display: none;
}

 

Le hice unos pequeños cambios al botón:

#boton-mascota{
    color: black;
    background-color: #F7FF93;
    width: 210px;
    height: 45px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 40px;
    border-radius: 20px;
    border: 1px solid white;
    font-family: 'Press Start 2P', cursive;
}


Asi me va quedando, la verdad que me emociona

Juegazo

Agregué unas propiedades a mi código para los botones. Se las comparto con su significado (todavía no defino los colores, pero lo hice como ejercicio y ustedes pueden modificarlo).

#boton-mascota {
    width: 144px;
    height: 52px;
    border-radius: 20px;
    border: none;
    background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-top: 30px;
    cursor: pointer;
}

input {
    display: none;
}

.tarjeta-de-michipon:active {
    box-shadow: 10px 10px 10px #389e8d;
}
  • La propiedad cursor: pointer; permite que al mover el cursos salga la manita.
  • La propiedad background-image: linear-gradient(135deg, #f34079 40%, #fc894d) permite que el color del botón se degrade.
  • La propiedad font-weight: permite hacer la letra negrita.
  • La función .tarjeta-de-michipon:active permite que al seleccionar la tarjeta aparezca, en este caso, la sombra del color indicado, con las medidas indicadas.

Esta es mi versión de Mokepon 😃

Puede parecer una tontería pero me cerró una idea que tengo hace meses ahí dando vueltas cuando explicó lo d los margins en sentido de las agujas del reloj, gracias profe.
Tambien, si definimos 2 valores por ejemplo:
margin: 30px 10px; el primer valor cuenta para top y bottom y el segundo para left y right. Si definimos 3 valores el primero va para top el segundo para left y right y el tercero para bottom.

Para ser una clase va demasiado rapido. Cuesta demasiado entender asi.

Así va mi avance , espero les guste

Así va mi jueguito!! Cambia de color cuando pones el mouse sobre la imagen (ejemplo Fenigo)

Aquí les dejo mi aporte lleno de Copyright 🤣

Mi aporte!

Les comparto un pequeño video de lo que llevo de mi proyecto, los gráficos los realize con aseprite, cuando finalize el proyecto completo subiré el código para compartirlo con ustedes 🤟

Asi me quedó…

@import url('https://fonts.googleapis.com/css2?family=Belanosima&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Manrope:wght@200&display=swap');


body {
    background-image: url('./assets/caracas_fondo_6.jpg');
    background-position: top;
    background-size: 1800px 1000px;
    font-family: 'Belanosima', sans-serif;
}

#seleccionar-mascota {
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.titulo {
    color: white;
    font-size: 50px;
}

.subtitulo {
    color: white;
    font-size: 25px;
    font-family: 'Manrope', sans-serif;
}

.tarjetas {
    display: flex;
    gap: 10px;
}


.tarjeta-de-elementos{
    width: 210px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid white;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
}

.tarjeta-de-elementos img {
    width: 95px;
}

#boton-mascota {
    width: 200px;
    height: 60px;
    border-radius: 20px;
    color: white;
    margin: 15px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid white;
    font-size: 25px;
    font-family: 'Manrope', sans-serif;
}

input {
    display: none;
}

Mejor me quedo jiji 😄

Cada vez mejorando 💪

Asi me va quedando 😄

Poco a poco!
va tomando buen aspecto

![](https://github.com/xanny-ilomio/mokecat/blob/main/mokecat/images/pokecat.jpg?raw=true) estoy usando como personajes a mis gatitas jjejej
![](https://static.platzi.com/media/user_upload/image-20ba7fc6-fc79-4726-8a43-63d036e5d136.jpg)

![](

@import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’);

body {
font-family: ‘Roboto’, sans-serif;
background-color: #FFB84C;
}

.titulo {
color: white;
font-size: 32px;
/* width: 310px;
height: 50px;
background-color: teal; */
}

.subTitulo {
color: white;
}

#seleccionar-mascota {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.tarjetas {

display: flex;
/* background-color: black;
flex-direction: column;

display: inline-block; */

}

label {

display: flex;
justify-content:center;
align-items: center;
width: 174px;
height: 100px;
margin: 20px;
background-color:#F266AB;
border-radius: 20px;
color: white;

}

label img {
width: 60px;

}

Mejor veo todo el módulo css antes de sentirme mal porque hay compañeros en muy otro nivel 😁

Les vengo a mostrar mi proceso quise hacer el mío de temática fantasía

Asi va quedando mi juego 😍😍

Conseguí darle un efecto neón a los botones y las tarjetas, estoy feliz XD

así va quedando mi estilo, quise poner a mi gato como primer personaje y me esta encantando

Espero te sean utis estás imagenes teneindo como referencia lo que explica la maestra.

así vamos!!!

Quisiera poner una imagen pero la app en android no me deja😥....Pero bueno aqui les dejo un truco que de seguro en el curso mas adelante lo veremos, pero que yo ya habia visto en youtube y es genial. Lo que hace es que cuando te pares con el clic sobre la tarjeta del mokepon, o un boton, este crezca un poco mostrondo que estas sobre el. Aqui te escribo como se hace: dentro de css en la clase tarjeta-mokepon pones transition: 0.3s 0.2s; la s es de segundos entonces fuera de la clase tarjeta-mokepon escribes: .tarjeta-mokepon:hover { transform: scale(1.05, 1.05); } y listo ya deberia funcionar para cualquier etiqueta que le pongas dentro el transition, y luego crees un hover, que funciona cuando tienes encima el clic, tambien puedes poner dentro del hover cursor: pointer; y asi saldrá una manito cuando te pares encima. Saludos 🙏😁

Deberia haber elegido diferentes avatares, para que cada uno ataque con diferentes elementos, pero pues aja.

South Park enjoyers 😄

Va mejorando:

Apenas soy un novato en este mundo pero me siento conteto al ver los pequeños resultados😊

Me gusta mucho como la profe Estefany explica paso a paso cada detalle, se entiende fácilmente

Estoy siguiendo tal cual, pero, mi código en HTML, esta raro, pero si funciona, tal cual como usted realizo. Gracias profe

Envio mi aporte con fondo del frente de batalla :) ![](https://static.platzi.com/media/user_upload/Pagina%20pokemon%206-00cd0788-3ac7-4230-8169-ddc6827821ea.jpg)
Acá esta mi diseño, las tarjetas de las mascotas tienen una acción para que cuando le pases el cursor por encima se hagan mas pequeñas para indicar que la estas seleccionando, al igual que el botón de seleccionar 😁 ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-21%20015624-fc810e77-84f2-47b7-aa59-9874e40b15b3.jpg)
![](https://static.platzi.com/media/user_upload/2024-04-30%20%2821%29-984769da-564c-4277-a09c-375168250130.jpg)
![](file:///C:/Users/Raul/Platzi/CURSOS/Curso%20de%20Programacion%20B%C3%A1sica/Estilos%20con%20CSS/Mokepon%20Ra%C3%BAl/Raul%20assets/juego.png)![](<C:\Users\Raul\Platzi\CURSOS\Curso de Programacion Básica\Estilos con CSS\Mokepon Raúl\Raul assets>)![]()![]()![](file:///C:/Users/Raul/Platzi/CURSOS/Curso%20de%20Programacion%20B%C3%A1sica/Estilos%20con%20CSS/Mokepon%20Ra%C3%BAl/Raul%20assets/juego.png)
![]()![](https://static.platzi.com/media/user_upload/_E__Document%2520and%2520settings_Desktop_program_mokeponlistener.html-3a6cc8d1-6f02-4f2d-af5f-cff225a21250.jpg)![](https://static.platzi.com/media/user_upload/_E__Document%2520and%2520settings_Desktop_program_mokeponlistener.html-49dc163b-cae9-41fc-9104-ab3c70f91010.jpg) Estuve practicando en estos días, quise subir mas las tarjetas, pero la verdad no pude. Primera vez que me deja enviar imágenes.
![]()![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-03-26%20233330-c714411b-ac5e-48f4-bf73-b58186a5b1ac.jpg)
hola
![](https://drive.google.com/file/d/1WLAZiwGMPoLynnlqGb2vg_P_e6sOVMDw/view?usp=drive_link)Es trabajo honesto jejeje
![]()![](file:///C:/Users/ACER/Videos/1.mp4)
¡Orgullosa de lo aprendido! ![](https://static.platzi.com/media/user_upload/image-f5ebdae6-86d6-44cb-aada-bfe40a1b680c.jpg)
Comparto 💚 ![](https://static.platzi.com/media/user_upload/image-2d19bfec-1475-4d7c-84ba-3ce7d0d32a1c.jpg) ![](https://static.platzi.com/media/user_upload/image-c4a3b99c-c330-4860-a0fa-d8838106f1f9.jpg)
![](https://static.platzi.com/media/user_upload/image-dc8d36c7-bb22-41d0-af9f-25d012f5cf7e.jpg)
El mío va así :) me gustaba más la opción de poner las mascotas arriba del nombre, me trabé un poco ahí porque el flex-wrap no me hacía caso pero era por el tamaño de las tarjetas, por lo que tuve que modificarlas para que se viera reflejado ajajajj También le puse un fondo chulo de Avatar con "background-image" Me está encantando CSS <3 ![](https://static.platzi.com/media/user_upload/image-759ca756-1e28-4f6c-998c-e056adf19430.jpg)![]()
Hasta ahora voy así, como no tengo que preocuparme por el copyright lo hice bastante fiel a Kanto:![](https://static.platzi.com/media/user_upload/image-cafb9d26-34ff-47b5-874f-8913f2c9416c.jpg)
![]()Bueno quedo de esta forma ![](https://static.platzi.com/media/user_upload/image-cadd7827-bf53-49fe-a9cb-4c781f0d5192.jpg)
![](https://imgur.com/a/MWOEn0P)
soy yo o... por alguna razón me resulta algo dificil el CSS? es que estoy escribiendo resumenes desde que inicié con el curso pero... esta parte de CSS resumí solo algunas cosas, porque estas clases como que... no se que poner XD
![](https://static.platzi.com/media/user_upload/image-0069935a-54a0-4d30-b7d2-05f858d2c73f.jpg) ahi voy gente
* ![](https://static.platzi.com/media/user_upload/image-054b208d-f96d-4ddb-a317-e303bd2ecdbd.jpg)![]()
nono
uff
vaya
![](https://static.platzi.com/media/user_upload/image-936050c2-7e60-4d21-8713-ae6efea8466c.jpg)![]()
![](https://static.platzi.com/media/user_upload/image-b49e2f77-93ff-4fc0-b844-c5d434bb2a6e.jpg)por el momento voy así :D luego lo iré mejorando jaja
![](https://static.platzi.com/media/user_upload/image-787ea9e9-1ebf-4ed8-a981-29e0e77c7c33.jpg)![](https://static.platzi.com/media/user_upload/image-caeee7dd-3e78-40ae-9c75-bfebd678483f.jpg)
![](https://static.platzi.com/media/user_upload/mokepon-6a333966-2eac-4d59-b8d7-c6c91bd72b47.jpg)