Como programador, tienes la tarea de replicar una imagen como un sitio web.
No clones este repositorio porque vamos a usar una plantilla diferente.
Recomendamos abrir el repositorio de la plantilla html usando un entorno de desarrollo como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.
Este es el repositorio que necesitas abrir o clonar:
https://github.com/4GeeksAcademy/html-hello
Por favor sigue estos pasos sobre cómo comenzar un proyecto de programación.
💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.
- Crea un sitio web que se vea exactamente como este:
Clic aquí para descargar el gif
Aquí puedes ver cada componente separado:
- Inicia el HTML y el CSS desde cero, no lo reutilices desde otro ejercicio porque terminarás teniendo un desastre.
- Antes de comenzar a programar haz un dibujo del sitio web con todos los componentes de bootstrap que usarás. Usa todos los posibles componentes de bootstrap, la idea es que los aprendas para poder reutilizarlos durante el resto de tu vida.
- Una vez hayas identificado todos los componentes, comienza con el navbar (desde arriba hasta abajo) e intenta adaptar los ejemplos que encuentres en internet a lo que se te pide en la imagen. No copies y pegues solamente, entiende y procesa, si no entiendes los nombres de las clases usadas en el componente, terminarás pegándote contra una pared y frustrado.
- Usa todos los posibles bootstrap utilities (helpers), toma el tiempo de leerlos todos porque harán tu vida 99% más fácil.
- Los proyectos tienen que ser 100% responsive utilizando el sistema de grid de bootstrap.
Tienes la lección en línea y la hoja de trucos de bootstrap en la sección de activos. También te recomendamos videos tutoriales en bootstrap de Net Ninja.
- Limpia el caché (siempre actualiza con command+shift+R), utilizando el modo incógnito en Google Chrome.
- Busca soluciones en Google.
- Habla con otros estudiantes.
- Habla con desarrolladores senior que conozcas.
- Habla con mentores en slack.
- No tengas miedo a preguntar.
- No debes frustrarte y pensar que no sirves para esto: todos los desarrolladores se quedan atascados todo el tiempo, ¡pregunta! ¿Cómo sabes si sirves o no en algo que no sabes? La programación es una ciencia, los hechos son importantes y tú no tienes hechos.
- No te cuestiones por horas sin buscar ayuda: Google solo es tan útil como tú sepas buscar en él, habla con otros estudiantes o con tus instructores.
- Cambia la estrategia: Einstein dijo una vez, si haces lo mismo obtendrás los mismos resultados.
Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.