A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones
  • vanilla.js

  • HTML and CSS

Editar en Github

Empieza un proyecto con Vanilla.js

1) ¿Cómo puedo ejecutar mi código?

Empieza a programar en 30 segundos abriendo esta plantilla en un nuevo ordenador en la nube aquí.

O puede descargar la plantilla en su ordenador e instalarla manualmente siguiendo los pasos que se indican a continuación:

  1. Recuerda instalar primero los paquetes npm:
1$ npm install
  1. Construye y empieza a codificar

Construir la aplicación por primera vez...

1$ npm run start

Y empieza a codificar tu aplicación Vanilla.js, actualiza el src/index.html, src/style.css o src/app.js dependiendo de tus necesidades.

1) ¿Cómo puedo ejecutar mi código?

  • Escriba en la línea de comandos $ npm run start y escriba localhost en el navegador.

2) ¿Dónde escribo mi código?

Depende del lenguaje, pero tienes ./src/app.js, ./src/style.css y ./src/index.html respectivamente, puedes añadir nuevos .html a tu gusto, sólo asegúrate de importarlos en el app.js.

Nota: recuerda que el flujo de trabajo JS comienza dentro de window.onload.

3) No veo mis cambios.

Cada vez que cambies cualquier archivo dentro de la carpeta ./src la URL pública del sitio web refrescará automáticamente los cambios (es un proceso llamado hot deploy) Recuerda también refrescar limpiando la caché (command+shift+r en Mac, control+shift+r en PC y Linux)

4) ¿Cómo puedo incluir más imágenes en mi proyecto?

Añádelas dentro de la carpeta ./src/assets/img e impórtalas desde cualquiera de tus archivos JS. Por ejemplo: import "../assets/img/rigo-baby.jpg";.

5) ¿Cómo incluyo más archivos JS?

Simplemente añade los archivos en la carpeta JS e importa los archivos/variables en tu app.js. Por ejemplo: import myVar from "./archivo2.js".

6) ¿Cómo publico el sitio web?

Este boilerplate es 100% compatible con el alojamiento gratuito de páginas en Github. Publica tu página web ejecutando:

1$ npm run deploy

¡Muy fácil y en un solo paso! Empuja a tu rama main y utiliza el alojamiento gratuito que viene con GitHub pages, el proyecto está listo para ser publicado. Recuerda elegir ejecutar la página de Github desde tu rama maestra.