Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima
Aquí les dejo Color Hunt
.
Fundamentos de Programación
Bienvenida a Platzi: ¿qué necesitas para tomar el curso?
¿Cómo aprender programación?
Crea tu primer sitio web
Sitios web con HTML
Estructura de árbol en HTML
Visual Studio Code
Cómo declarar variables y usar prompt
Algoritmo de piedra, papel o tijera
Algoritmo avanzado de piedra, papel o tijera
Aleatoriedad
Refactor del código usando funciones
Ciclos
Gana 3 veces
Archivos de HTML y JavaScript
¿Qué es el DOM?
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación con HTML
Sección de elegir mascota
¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript
Escuchando eventos con JavaScript
addEventListener
Manipulación del DOM
Enemigos aleatorios
Ataques en JavaScript
Ataques aleatorios del enemigo
Imprimiendo ataques del enemigo
¿Ganaste, perdiste o empataste?
Tablas de verdad
Creando el contador de vidas
¿Quién gano el juego?
Reiniciando el juego
Ocultando elementos HTML con JS para mejorar la UX del juego
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Anatomía de CSS
Tipos de display
Flexbox
Modelo de caja
Imágenes para los Mokepones
Estilos del botón
Adaptando HTML al diseño del juego
Layout: título y ataques
Adaptando JavaScript al diseño del juego
CSS Grid
Responsive Design
Detalles finales
Quiz: Estilos con CSS
Optimización de código
Revisión de código
Don't repeat yourself (DRY)
Clases y objetos
Clases y objetos de Mokepon
Arrays o arreglos
Objetos vs. arreglos
Ciclos: manipulando el DOM con iteradores
Declaración lenta de variables
Una sola fuente de la verdad
Mascotas aleatorias con arreglos
Ataques dinámicos por cada mascota: extraer
Renderizado dinámico en HTML
Eventos de click dinámicos
Secuencia de ataques del enemigo
Iniciando el combate
Resolviendo el reto de condicionales
Optimizando el frontend del juego
Quiz: Optimización de código
Mapa con canvas
Introducción a canvas: dibujando con JavaScript
Moviendo a Capipepo hacia la derecha
Movimiento hacia todas las direcciones
Movimientos con el teclado
Imágenes y personajes de fondo
Métodos en las clases
Obstáculos y colisiones
Combate entre mokepones colisionados
Mapa responsive
Botones bonitos y viewport
Quiz: Mapa con canvas
Backend: videojuego multijugador
¿Qué es backend?
Instalación de Node.js y NPM
Terminal de comandos y Node.js
Servidor web con Express.js
HTTP, localhost, servidores y puertos
Express.js y fetch: API REST con JavaScript
JSON y POST: mokepon online
Transmisión de coordenadas
Mokepones dinámicos en el mapa
Optimizando el mapa del juego
Batalla entre jugadores
Consumiendo la API de ataques del enemigo
Quiz: Backend: videojuego multijugador
Próximos pasos
Probando el juego en varios dispositivos
¿Y ahora qué curso tomar?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 22
Preguntas 2
Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima
Aquí les dejo Color Hunt
.
🎉🎉🐲
MOKEPON
Tienes que atraparlos, mi destino así es 🎶
Me gusto el resultado final 😄
Yo lo que hice fue ponerle un borde celeste, aqui mi linea de codigo:
Hasta luego señorita Estefany 🤞
Aquí como lo hice:
input:checked + label{
background-color: #A1E3D8;
border: 5px solid #069A8E;
}
CSS me costó el triple de Java y HTML pero al final lo logré y así quedó, estoy muy agradecido con este curso!!
mi re
Asi que el mio!
Las primeras clases viendo el posicionamiento pensé “bueno, backend es otra buena opción” pero la profe es una genia y al final me termino gustando bastante todo el tema de css…
Les dejo el link al github para que lo chusmeen y dejen feedback !
Este fue mi resultado final.
Como yo le puse una imagen de fondo diferente para cada mascota (background-image), tuve que hacer que al seleccionar una de ellas cambie el color del borde (border-color), ya que esta imagen de fondo tapaba al background-color que usa Teff y “no pasaba nada” al seleccionarlos. Como ya dije. La imagen de fondo tapaba a mi background-color. CREO
input {
display: none;
}
input:checked + label.tarjeta-de-mokepon-hipodoge {
border-color: #2f00ff;
}
input:checked + label.tarjeta-de-mokepon-capipepo {
border-color: #43a800;
}
input:checked + label.tarjeta-de-mokepon-ratigueya {
border-color: #ff0000;
}
Este ha sido un curso increíble, sin duda hemos visto un montón de temas.
👏 Estefany 👏
Y así quedó mi juego jaja
yo solucion no fue cambiaar el color si no activar el borde de la tartega con un color
Que genial seguir aprendiendo! :3
encontre este "input:checked + label {
background-image: linear-gradient(blue, yellow);
}"
Para hacer un fondo en degrade de varios colores
así vamos y con ganas de mas…
![](
![](
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.