Instagram es una de las interfaces de usuario más populares del mundo, este es el primero de los tres ejercicios que te harán replicar las partes más importantes y difíciles de Instagram.com.
Crea los archivos HTML y CSS necesarios para replicar esta misma imagen.
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 comandosadd,commitypushdesde la terminal de git.
Comienza por identificar que <etiquetas> HTML puedes usar para este sitio web, por ejemplo <div>, <p>, etc.
Aquí tienes una pista de una buena estrategia:
Este website utiliza la font Roboto-type de Google Fonts e íconos de Font Awesome:
- https://fonts.google.com/
- https://fontawesome.com/
⚠️ Importante: impórtalo usando una CDN (copia el primer link) en lugar de buscarlo por la página oficial (pregunta al profesor si necesitas ayuda)
Pregúntale al instructor o a tus compañeros de clase de inmediato, no te quedes estancado por más de 15 minutos, porque este es uno de tus primeros ejercicios y no se espera que sepas todo. ¡¡¡Haz preguntas!!!
Este ejercicio cubre los siguientes fundamentos:
- Estructura básica para cualquier sitio web HTML5.
- La etiqueta
<link>para importar Reglas CSS. - Utilizar fuentes (fonts) de Google.
- Usar los diferentes selectores disponibles en CSS.
- Trabajar con contenedores: borde, relleno y márgenes.
- Overflow.
- Usar Flex vs Position vs Float vs Display.
Este y otros ejercicios 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.