Adaptando HTML al diseño del juego

Lo que más me gusta de esto es con la forma que lo explican y hacen las cosas , en verdad se siente que se aprende y se tiene un avance significativo.

Si quieren ver que cambie de flecha a manita al pasar por encima de las mascotas, escribe esta línea de código:

.tarjeta-de-mokepon:hover {
    cursor: pointer;
}

Este curso con la intervencion de varios profes en un solo proyecto me gusto mucho, ojala hayan más proyectos así 😀😀😀

Para que puedan guiarse mientras organizan el código en html

Así quedo: 💚.💚

• Me obsesioné un poco, pero el resultado obtenido por el momento me encanto. Me tardé más o menos 8 horas repartidas en 2 semanas aproximadamente.
• Use muchas de las herramientas que nos dio la profesora y tuve que investigar y practicar algunas cosas.

Me gustaría que me comenten que les pareció. También estaría genial que me den su Feedback, creo que puedo hacer más cosas, pero por el momento es hora de seguir con las siguientes clases.

El mío anda quedando así

Asi va el mío :3

Así llevo mi primera sección del juego! 🤩😁

Jeje

Yo resolví el mío sin modificar la estructura original.

Siento que el tema visual es mi principal defecto, a darle mas!

¿Cansado de cortar y pegar código cuando tienes que moverlo de lugar?

Fresco, usa este atajo de teclado y ahorrarás valiosos segundos de tu tiempo.

Selecciona el texto que quieres mover y presiona Alt + Flecha arriba o flecha abajo.

Mueve tu código línea por línea hasta que lo tengas donde lo quieres

Asi va quedando la parte de atras

A sí va el desarrollo de mi diseño, espero les guste!
CSS creo que es mi parte favorita de las páginas web.

asi me va quedando a mi jeje

le agregue animaciones e imagines🖱🛠📷 gif tratando de que se vea como el pokemon de gameboy :3 👌⚡🔥

Bueno ya muchos de mis compañeros han escrito sobre esto, pero es que no me aguanto y yo también quiero decir algo:
Me encanta, y me fascina la manera detallada en la que todos los profesores explican, la profesora Estefany, el profesor Juan David y Freddy. Todos, de verdad estoy muy agradecido, se siente la buena vibra, la buena energía y el amo con el que trabajan llega hasta acá.
Felicidades por su trabajo.

segunda pantalla, como va quedando…

asi va quedando, poco a poco a se va mejorando… Gracias Platzi por este buen curso.
cada unos de los profesionales explican muy bien🎈

Es increíble la facilidad que tienes para explicar y hacernos entender. Estoy llevando un curso alterno y tenía tantos vacíos que ni consultando en google los había podido llenar, no te imaginas el alivio que me da saber que he podido entender muchas cosas que antes no y ahora ya puedo crear un estilo más pulido. Muchas gracias de corazón!

Muchas gracias por la clase, todos los profesores excelentes

Yo segui con la logica de piedra papel y tijera…

Truco de VSC si seleccionas lo que quieres mover, presionas la tecla alt + flecha arriba o abajo, puedes mover los elemntos sin cortar y pegar

Tengo una duda, veo que han puesto vi que pusieron un <section>
<div>
<section>
</section>
</div>
</section>

Estaría bien que haya un section dentro de otro section? yo pensé que eso no era correcto.

Por otro lado, por qué un div y no un section?, cumplen la misma función?

Lo que dice Estefany es muy cierto. Antes de diseñar una pagina web, se debe hacer un bosquejo de como quiere que se vea. Esa parte sabia que se usaba lapiz y papel, pero en caso de los programadores es programas utiles para trabajarlo.

Así es como va quedando mi juego 😄

Yo aún no puedo creer que esto sea gratis.
Mil gracias a todo el equipo de platzi, termino este curso y yendo a pagar la suscripción.

Nunca pensé que aprenderia todo esto en menos de un año, estos profesores de verdad que son lo máximo, motivan a seguir aprendiendo y sus explicaciones son excelente, mejores que toda una vida en el aburrido colegio . Ojala hubiese conocido la programación mucho antes, sinceramente es a lo que me dedicaré el resto de mi vida.

Tips para mejorar nuestra pagina:

1_ Ver en que punto estamos en nuestra pagina.
2_ Dibujar como queremos que se vea en una hoja.
3_ Acomodar el HTML al dibujo.
4_ Modificar el JavaScript si es necesario.

Ahora sí siento que aprender, nada que ver con el curso definitivo de HTML y CSS, le faltaba esto: un proyecto práctico unificado para toda la clase, pues todas las clases era algo distinto y eso hacía que uno se confundiera mucho.

cursor: pointer;

Para que salgue la manito en sus botones.

¡Excelente curso enseñan de una manera donde todos podemos aprender! 😊

he entendido todo, pensé que esta parte de css seria mas difícil y me iba costar aprenderlo, pero la profe explica muy bien

Va mejorando, toda la razon😁 lo de dividir en cajitas mucho mejor.

Excelente clase

Me encanta la manera de explicar de la Profe. Es buenísima!!

YA lo estoy viendo bonito xd

Luego de este curso estoy seguro que tomaré la ruta de Web Design!

siento que esta profesora es muy organizada jajjsj

Añadir estilos a segunda pantalla del juego:

1. revisar que tenemos hasta el momento.
2. hacer un dibujo a lapiz y papel de la estructura que queremos.
3. acomodar el html para que quede acorde al dibujo. (con etiquetas div).
4. modificar el javascript en caso lo necesitemos.

Así va quedando el mío 😄

¿Chic@s, qué otro curso de la profe Estefany me recomiendan para comenzar a con CSS? 🎨

si quieren sombre en la mascota, pueden usar:
.tarjeta-de-mokepon img {
width: 80px;
filter: drop-shadow(0 0 5px black);
}

Asi va quedando , se que no es la mejor cosa , jaja pero a mi me brota la felicidad con poder estar haciendo algo asi a mis 38 , llevo 20 años como instructor de buceo y hace 2 meses decidi comenzar con esto 😃 , vamos que se puede!!

Genial…!

repito las clases solo para ver a la profe, su forma tan amena y sutil de explicar es como encantadora!

Me gusta mucho aprender contigo, gracias!

Para cambiar solo una vez el nombre de la etiqueta; el inicio como cierre. Descarga la extensión Auto Rename Tag en vscode:

Name: Auto Rename Tag
Id: formulahendry.auto-rename-tag
Description: Auto rename paired HTML/XML tag
Version: 0.1.10
Publisher: Jun Han
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Me siento feliz con lo que he aprendido…
Gracias PLATZI
Gracias profe Estefany…

Me gusta como ensenas Prode Estefany

¡Me gusta mucho que el curso sea tan intuitivo y que todos los profesores que han participado en él tengan esa capacidad de hacer ver las cosas de una forma tan fácil de entender!

Feliz de poder ir haciendo las actividades y ver como va quedando mi juego veo ue aqui hay compañeros con nivel se que antes no sabia lo que ahora pero mañana mas y mejor

me encanto este estilo de curso, donde podes ver como se trabaja en equipo y tener cierta experiencia de trabajo o al menos una idea de como se hace.

Gracias por las clases tan fáciles de entender maestra 😁

Las primeras clases con Freddy eran como los primeros dias en el inicio del año escolar, las clases con Profe Juan son como algebra, y estas con Profe Estefany es como ver Geometria; definitivamente algo tenia que servir el Cole.

Había intentado tomar como 3 cursos de HTML en mi vida y siempre me fallaba algo y no funcionaba lo que el instructor hacía, es la primera vez que hasta ahora (38) ha funcionado todo.

Super! genial el contenido de tu curso y tu manera de enseñar, Gracias.

existe una accion donde al marcar el texto y pulsar el boton alt, puedes mover el texto arriba o abajo sin tener que cortar y pegar, se que no es mucho pero espero sirva de algo…

Hace rato quiero subir una foto pero no he sabido como jejej, pero estoy muy contento con el curso, no sabia nada de programacion y es muy genial ver como paso de solo ser funcional, a verse a mi gusto, incluso pude ponerme mis propios dibujos.
muchas gracias!!!

gracias a estas clases he podido aprender sobre el diseño en css, gracias

Esta clase es una forma muy sencilla de introducir el concepto de maquetación. Que gran clase.

Con lo que he aprendido hasta ahora en estos cursos he puesto en duda si aun quiero irme por el lado del back-end… !Me ha gustado muchisimo todo eso!

¡Excelente curso!

Hace algunas clases compartí que estoy llevando mis apuntes en Notion. Aquí les comparto de esta clase: https://spangled-taleggio-d0f.notion.site/Adaptando-HTML-al-dise-o-del-juego-ca7ee6cdda194dd9ab082e7f87df551a 😃

Al pensar todo como cajas se facilita la organización de nuestra página

Para que quede seleccionado al hacer click en uno de ellos pueden agregar el siguiente código css

input[type=radio]:checked+label {
    border: 2px solid white;
}

Esto seleccionará el hermano siguiente del input que esté checkado
por ende hay que cambiar el orden del input y el label.
El input debe ir antes de su label correspondiente

<input type="radio" name="mascota" id="hipodoge"/>
<label class="tarjeta-de-mokepon" for="hipodoge">
     <p>Hipodoge</p>
     <img src="./assets/Hipodoge.png" alt="Mokepon Hipodoge">
</label>

algo basico pero asi voy

profe, muy bueno de tus clases que aprendi como modificar el css en el navegador para observar los cambios de una vez y luego se copia y pega el css en el codigo. sos la mejor

de momento va quedando así.

Lo que aprendi hoy, es importante crear un diseño preliminar para poder codear acorde a ello. Super sencillo de verlo de esta forma, soy BackEnd pero quiero mejorar mi FrontEnd. Vamo a por ello !

Saludos, gracias Profesora ! Siento que explicas demasiado claro, y adicionalmente el método empleado es el adecuado. Gracias

Juego, agua y tierra!