Fundamentos de Programación

1

Programación Básica: Fundamentos y Creación de Proyectos en Línea

2

Programación Básica en Google Chrome: Variables y Funciones

3

Creación de una Página Web Básica con HTML

4

Estructura Básica de un Documento HTML

5

Estructura y funcionamiento básico de HTML y JavaScript

6

Instalación y uso básico de Visual Studio Code para programar

7

Declaración y Uso Básico de Variables en JavaScript

8

Programación de Piedra, Papel o Tijera en JavaScript

9

Programación de Piedra, Papel o Tijera en JavaScript

10

Generación de Números Aleatorios con JavaScript

11

Creación y uso de funciones en programación

12

Ciclos y Condiciones en Programación: Piedra, Papel o Tijera

13

Programación de un Juego de Piedra, Papel o Tijera en JavaScript

14

Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web

15

Manipulación del DOM y Eventos en JavaScript para Juegos Web

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación de Páginas Web para Videojuegos en HTML

17

Selección de Mascotas en HTML para Juegos Interactivos

18

Programar eventos de clic en botones HTML con JavaScript

19

Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota

20

Selección de Mascota en JavaScript: Implementación y Validación

21

Manipulación del DOM con JavaScript para mostrar mascota seleccionada

22

Selección Aleatoria de Mascota Enemiga en JavaScript

23

Eventos de clic y lógica de ataque en JavaScript

24

Ataques Aleatorios para Mascotas Enemigas en JavaScript

25

Creación de Mensajes Dinámicos en Combate HTML y JavaScript

26

Lógica de Combate en JavaScript para Juego Mokepon

27

Operadores Lógicos en Programación: AND, OR y NOT

28

Actualización de Vidas en Juego de Combate con JavaScript

29

Validación de Vidas y Mensajes Finales en Juegos

30

Funcionalidad de Reinicio y Desactivación de Botones en Juego

31

Mostrar y ocultar secciones en HTML con JavaScript

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Estilos CSS: Selectores, Propiedades y Valores

33

Tipos de Visualización en CSS: Display Block, Inline e Inline Block

34

Alineación de Elementos con Flexbox en CSS

35

Modelo de Caja en CSS: Espaciado y Bordes

36

Diseño y Estilo de Páginas Web con HTML y CSS

37

Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas

38

Estilos CSS para Mejorar la Interfaz de un Juego

39

Estilizado de Pantallas de Juego con CSS y Flexbox

40

Separación de mensajes y estilos en JavaScript y HTML

41

CSS Grid: Organiza Elementos en Rejillas Bidimensionales

42

Diseño Responsivo con CSS: Media Queries y Flexbox

43

Pseudoclases en CSS: Mejora la Interacción del Usuario

Quiz: Estilos con CSS

Optimización de código

44

Optimización de Código JavaScript con Clases y Objetos

45

Optimización de Código JavaScript: Variables y Funciones

46

Clases y Objetos: Fundamentos para Optimizar Juegos

47

Construcción de Clases y Objetos en JavaScript

48

Uso de Arreglos para Almacenar Objetos en JavaScript

49

Agregar ataques a objetos en JavaScript

50

Renderizado Dinámico de Objetos en HTML con JavaScript

51

Solución de errores en variables y elementos HTML en JavaScript

52

Uso de Objetos para Centralizar Información en JavaScript

53

Selección de Mascota Aleatoria en JavaScript

54

Iteración de Arreglos y Manipulación DOM en JavaScript

55

Crear Función "mostrarAtaques" en JavaScript para Juegos

56

Eventos de Clic en Botones con JavaScript

57

Secuencia de Ataques y Validación de Resultados en JavaScript

58

Implementación de lógica de combate en juegos JavaScript

59

Programación de Juegos: Lógica de Ataques y Victorias

60

Optimización y Corrección de Errores en Juegos Web con JavaScript

Quiz: Optimización de código

Mapa con canvas

61

Dibujo y manejo de gráficos en Canvas con JavaScript

62

Movimiento de Capipepo en Canvas con HTML y JavaScript

63

Movimiento Continuo de Personajes en Canvas con JavaScript

64

Eventos de Teclado para Controlar Personajes en Juegos

65

Pintar Fondos y Personajes en Canvas HTML

66

Métodos de Clases en JavaScript para Juegos Interactivos

67

Detección de Colisiones en Videojuegos con JavaScript

68

Programación de eventos y colisiones en un juego interactivo

69

Ajuste Responsivo de Mapas en Pantallas con JavaScript

70

Estilos Responsivos en HTML y CSS para Mapas Interactivos

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

Desarrollo de Juegos Multijugador con Cliente-Servidor y API

72

Instalación de Node.js en Windows para desarrollo backend

73

Uso básico de la terminal de comandos y Node.js

74

Creación de un Servidor Básico con Express.js en Node.js

75

Conceptos Clave de URIs y Verbos HTTP en Node.js

76

Desarrollo de API con Node.js y Comunicación Frontend-Backend

77

Selección de Mokepon y Comunicación JSON en Express.js

78

Implementación de un Endpoint para Coordenadas de Jugadores en Node.js

79

Integración de Coordenadas de Jugadores en Mokepon Multijugador

80

Optimización de Coordenadas en Videojuegos con JavaScript

81

Batalla Final en Mokepon: Implementación de Colisiones y Back-End

82

Implementación de Ataques en Tiempo Real para Videojuego Mokepon

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Corrección de errores en juego multijugador con Node.js

84

Desarrollo Colaborativo con Git y GitHub para Programadores

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas

37/84
Recursos

¿Cómo estandarizar el botón de tu pantalla de juego?

En esta clase, continuarás personalizando y dándole vida a tu primera pantalla de juego al estilizar el botón de inicio. Aprende a ajustar el tamaño, el borde, el fondo y el tipo de letra para que se adapte perfectamente al diseño de tu juego.

¿Cómo modificar el tamaño y el borde del botón?

  1. Definir dimensiones:

    • Ancho: El ancho del botón puede ser igual al de las tarjetas o ajustarse según tus preferencias.
    • Alto: Opta por un alto de 40 píxeles para mantener un tamaño estándar.
  2. Bordes redondeados:

    • Usa la propiedad border-radius para agregar bordes redondeados de 20 píxeles, creando un look más atractivo.
boton {
  width: 100px; /* define tu ancho deseado */
  height: 40px;
  border-radius: 20px;
}

¿Cómo personalizar el fondo y el borde?

El siguiente paso es personalizar el fondo y el borde, buscando contraste y atractivo visual.

  • Transparencia y Bordes:
    • Fondo: Opta por un fondo transparente.
    • Borde: Usa un borde sólido y elige un color distinto como blanco. Ajusta el grosor del borde según lo desees.
boton {
  background-color: transparent;
  border: 2px solid white;
}

¿Cómo elegir y aplicar tipografías al texto?

Distinguir el botón con una tipografía adecuada es crucial para su visibilidad.

  • Tipo de letra:

    • Cambia al tipo de letra Poppins con un grosor de 300 para mantener un texto ligero y legible.
  • Incorporar fuentes:

    • Importa las fuentes necesarias e incorpóralas en tu código. Asegúrate de aplicar la tipografía seleccionada al botón y al resto del documento.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

boton {
  font-family: 'Poppins', sans-serif;
}

¿Cómo gestionar los márgenes para posicionar el botón?

Un correcto manejo de márgenes asegura que el botón tenga suficiente espacio alrededor, mejorando la estética y usabilidad.

  • Márgenes individuales:
    • Utiliza margin-top para separar el botón de las tarjetas superiores, asegurando que el espaciado sea uniformemente agradable.
boton {
  margin-top: 30px;
}

¡Adelante! Prueba estas técnicas y experimenta con diferentes estilos y tamaños para personalizar tu botón de inicio. Con estas habilidades, tu primera pantalla de juego destacará por su diseño impecable y profesional. Prepárate para avanzar a la próxima pantalla de tu juego.

Aportes 251

Preguntas 28

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!

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.

💅

Reto Cumplido.

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

hola

Así voy! No he podido centrarlos bien con

justify-content: center;

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

Espero les guste!

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 🤣🤣🤣

Juegazo

Muy contento con el resultado hasta ahora.

Un poco old School

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

listo profe asi quedo

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;
}

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


Asi me va quedando, la verdad que me emociona

Mi aporte!

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.

![](https://static.platzi.com/media/user_upload/image-8b24bae0-9e52-4b80-bf69-7daf3d23065f.jpg)![](https://static.platzi.com/media/user_upload/image-58961583-278b-4fb2-9558-a904ea775eaa.jpg)

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;
}

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 🤣

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 🤟

Mejor me quedo jiji 😄

Cada vez mejorando 💪

Asi me va quedando 😄

Poco a poco!
va tomando buen aspecto

![](https://static.platzi.com/media/user_upload/image-361034f4-584b-45d1-b6f9-7759a6d3d5e8.jpg) Así me quedó al final de la clase anterior. Me encanta.

Bueno, por ahora va quedando asi:

Mi boton inicial se ve asi por que tiene una animacion hover… me gusta como va quedando pero claro mucho por mejorar!!

![](https://static.platzi.com/media/user_upload/image-8025761d-cb49-48ec-a8f1-f62bc0370a90.jpg) asi vamos
![](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

![](https://static.platzi.com/media/user_upload/upload-7741195e-6f24-4967-ae1c-433f878f657d.png) asi va quedando el mio
Buscando un estilo más retro, además las imágenes las generé por IA. Esto esta divertido 😊😊 ![](https://static.platzi.com/media/user_upload/upload-a2301b1f-b166-4b14-977c-f74f92976381.png)
```js ```![](https://static.platzi.com/media/user_upload/upload-247239fc-e0e7-4400-be23-94cdf0930cb9.png)
Así voy: ![](https://static.platzi.com/media/user_upload/image-f3ca25cd-f14d-4cf0-a30a-5b39e001fe31.jpg)
![](https://static.platzi.com/media/user_upload/image-aa5e05ac-1317-489e-ae23-688c4fffffde.jpg)Cumpliendo ! Saludos
💻 Comparto mi avance haste el momento: 💙Pantalla 1: ![](https://static.platzi.com/media/user_upload/Pantalla1-9045d91b-35c3-4641-bcc6-6f54274037c7.jpg) 💙Pantalla 2: ![](https://static.platzi.com/media/user_upload/Pantalla2-f3f33d9f-128f-430a-8479-c7ceb9bedb82.jpg) 🧡Demo: ![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDR5ZXYyc215ZHkzMjF0bncxZzhnem1zN2JnMHBlODhiMWlvOHAzeSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EJkKEllHIhTVHA5glU/giphy.gif) \---------------------------------------------- 💻 Repo: <https://github.com/raulsr92/Proyecto-mokepon-platzi> 🎮 Testea: <https://raulsr92.github.io/Proyecto-mokepon-platzi/mokepon> \---------------------------------------------- 🎬 Mira los tutoriales: ▶Capítulo 1: <https://youtu.be/0R4ViLlMq9I?si=JV8KtX7R0baJZIVZ> ▶Capítulo 2: <https://youtu.be/B9RNBucB60U?si=OOAQdu6_1dmzWfTh> ▶Capítulo 3: <https://youtu.be/3fUl04cOGKg?si=_fzODQCZWuJedaTm> ▶Capítulo 4: <https://youtu.be/OkeeJejQ9g8?si=y2yDUugzOqGa4BUe> ▶Capítulo 5: <https://youtu.be/4GR0OuFKqq8?si=dvSXy-Q0s0rUkcXR> ▶Capítulo 6: <https://youtu.be/NGGX1m3ellI> ▶Capítulo 7: <https://youtu.be/oF-fBLxPH2s?si=8wBS3DZJ1qq9xvsd> ▶Capítulo 8: <https://youtu.be/odPlaMx92D8> ▶Capítulo 9: <https://youtu.be/coZcP_HOtCU?si=oC9V_XoKH6FUYYYT> ▶Capítulo 10: <https://youtu.be/oZpMokqk_d0?si=-b56es0zKOvNkXdh> ▶Capítulo 11: <https://youtu.be/xUafUriu-20> Autor: Raúl Sánchez R.
Desde que empezaron con la lógica del juego, me desvié un poco y en lugar de hacer tipo el piedra, papel o tijera, lo hice un poco más realista. Dejé un buen tiempo las clases en stand by mientras lo desarrollaba, y conforme se me presentaban problemáticas de acuerdo a mi idea de cómo lo quería, fue que he ido aprendiendo más funciones y maneras de realizar las cosas, les agradezco mucho la manera práctica y sencilla en que explican las cosas. Saludoss!!![]() ![](https://static.platzi.com/media/user_upload/PaginaMokepon-7e9d4302-eabd-4a56-8df0-b11ac9cd14da.jpg) ![](https://static.platzi.com/media/user_upload/PaginaMokepon1_1-4c803e89-363f-435b-b595-15f55816e736.jpg) ![](https://static.platzi.com/media/user_upload/PaginaMokepon2-6d7c620b-5e17-400f-8e59-ccbf02a4ae6c.jpg)
Yo eliminé el botón y deje las imágenes con eventListener, una vez se seleccione al jugador, se ocultan las opciones y aparece la sección de ataques. ![](https://i.imgur.com/WIWXpSi.jpeg)
📌Presento mi proyecto hasta el momento: ![](https://static.platzi.com/media/user_upload/VistaIndex-ef540c2c-e70f-4de2-97d4-11afe85ab85c.jpg) 🖤 Repo: <<https://github.com/raulsr92/Proyecto-mokepon-platzi>> 🎮 Demo: <<https://raulsr92.github.io/Proyecto-mokepon-platzi/mokepon>> 🎬 Tutoriales CSS: 1\) Parte 1: <<https://www.youtube.com/watch?v=0R4ViLlMq9I&t=2s>> 2\) Parte 2: <<https://youtu.be/B9RNBucB60U?si=zG4co3iq-7S8tJo0>> 3\) Parte 3: <<https://youtu.be/3fUl04cOGKg?si=hZyR48MX-T5YdFHZ>>
![](https://static.platzi.com/media/user_upload/image-51444b4e-9444-4c3c-8fa2-7813c6affae3.jpg)
![](https://static.platzi.com/media/user_upload/image-a94e3ff1-936e-4939-9fab-ed2b90c63eeb.jpg)
![](https://static.platzi.com/media/user_upload/Captura%20desde%202024-11-05%2022-40-33-52d99ccb-cc58-4e11-9bad-75ff362d3140.jpg)
![](https://static.platzi.com/media/user_upload/image-8924e370-0103-41bd-acbc-f905a5faf3a8.jpg)Mi pequeño aporte jaja! :D
![]()![](https://static.platzi.com/media/user_upload/image-03dee810-9eb2-4ea9-be3d-a89b3e684ba0.jpg)
Mi trabajo hasta ahora :) ![](https://static.platzi.com/media/user_upload/image-f484aca0-6f97-434d-aa6e-6c051362d499.jpg)
Dejo mi captura de cómo lleva la primera página del jueguito de MokePon! ;D![](https://static.platzi.com/media/user_upload/MokeponV1-b2a3f1ee-135c-43f5-9f4c-5c2d3ab1b1f9.jpg)
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20%284%29-b3448f74-10b2-47a8-80b7-1f14ff57e3db.jpg) ![]()**Hola, llevo un tiempo aprendiendo a programar, pero nunca había hecho algo como esto. Aquí les dejo mi aporte, ¡espero que les guste! Saludos desde Venezuela.**
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.