by 
Este tutorial para principiantes de desarrollo web para niños es para estudiantes que desean un proyecto de desafío fácil / mediano, de aproximadamente ~ 30 líneas de largo. Es perfecto para los estudiantes que actualmente están en nuestra clase de JavaScript Nivel 1 , o para cualquiera que quiera comenzar a aprender sobre desarrollo web básico. Debe tener un conocimiento básico de trabajo de qué es HTML / CSS y cómo se usa de antemano para aprovechar al máximo este tutorial.
Para obtener resultados de aprendizaje, obtendrá mucha práctica escribiendo HTML y CSS y generando animaciones con CSS. Se estima que este proyecto le llevará unos 15 minutos, ¡pero debería moverse más rápido o más lento a su propio ritmo!
Demo del proyecto
Antes de comenzar, vea cómo funciona nuestro proyecto terminado como referencia. Mire el video o vea mi proyecto y el código de la solución . También debe considerar qué tipo de características tiene el proyecto que debe intentar integrar en su proyecto.
Qué debe tener en cuenta antes de comenzar:
- Necesitamos poder centrar nuestro sushi en el medio de la página.
- Necesitamos definir algo de CSS que lo haga por nosotros.
- Para usar una animación, necesitamos definir los fotogramas clave para nuestra animación.
Pasos para codificar el proyecto
- Crea el sushi en la pantalla.
- Coloca el sushi.
- Anima el sushi.
¿Cómo realizamos cada uno de estos pasos?
Paso 1: Crea el sushi en la pantalla.
- Crea un div con el emoji de sushi dentro.
Paso 2: Coloca el sushi.
- Use CSS para asegurarse de que esté en el centro de la pantalla
- Agranda el sushi con tamaño de letra
Paso 3: anima el sushi.
- Define la animación.
- Utilice fotogramas clave. Leer más sobre cuadros de animación para contexto.
- Vincula la animación al sushi y cuéntale las propiedades que necesitará saber, como
animation-iteration-countpor ejemplo, cuántas veces se repetirá.
Ponte a prueba con funciones adicionales
¡Explora qué otras animaciones se pueden hacer o usa otros emojis e imágenes para ser creativo! Puede obtener más información sobre las animaciones de desarrollo web para ver qué es posible.
Con suerte, este tutorial básico le proporcionó una base para comenzar con proyectos de animación más complejos y ambiciosos.
¡Gran trabajo! Vea más tutoriales de codificación
¡Gracias por vernos y espero que te hayas divertido haciendo este proyecto conmigo! Cada semana, publicaremos tutoriales de proyectos como este, para diferentes lenguajes de codificación y niveles de experiencia, así como tutoriales de matemáticas.
¡Consulte nuestros proyectos de codificación paso a paso para encontrar nuestros otros tutoriales en más lenguajes de codificación!
¿Necesitas más ayuda o quieres seguir aprendiendo?
Un instructor de Juni enseña Python básico a un joven estudiante.
¡Buscar tus preguntas de codificación es una de las mejores formas de aprender! Otra excelente manera de aprender es con un codificador o instructor experimentado.
Los instructores de codificación de Juni Learning como Gabriel trabajan en estrecha colaboración con estudiantes de entre 8 y 18 años, y están especialmente capacitados para adaptarse al estilo, ritmo e intereses de aprendizaje únicos de cada niño.
Lea más sobre nuestros cursos de codificación para niños y el plan de estudios, o comuníquese con nuestro Equipo de Admisiones para saber qué curso es mejor para el viaje de codificación de su estudiante.
This article originally appeared on junilearning.com.
