salocodes / lab-css-recipes-clone-es

LAB | HTML & CSS - Clon de recetas

Introducción

Hoy sólo hemos aprendido lo más básico con HTML y CSS, así que ¿qué diablos podemos construir realmente, verdad? Error, ya podemos construir algunas cosas geniales, y vamos a hacer precisamente eso.

Todos tenemos que comer (al menos, deberíamos hacerlo), así que vamos a hacer unas prácticas páginas de recetas. Vamos a recrear una receta de tarta de manzana. Como paso extra, preparamos también la receta de Sopa de Cebolla Francesa.

Clonar algo que ya existe es la mejor manera de mejorar en el desarrollo del frontend, así que echa un vistazo al entregable de abajo para ver lo que esperamos.

Ya se ha proporcionado algo de código de inicio, por lo que puede saltar directamente a él.

Requisitos

• Haz un fork de este repo
• Clona este repositorio
• Asegúrate de utilizar selectores de clase e id en todo el ejercicio. Recuerda, sólo usa selectores de tipo si quieres modificar cada elemento de ese tipo
• Utilice una única hoja de estilos CSS externa para dar estilo a todas las páginas
• Utilice las imágenes proporcionadas para construir los elementos apropiados en la página:
  • El fondo con una imagen de la tarta de manzana
  • La sección de raciones / nutrientes de la receta
  • La sección de preparación

La presentación

Al terminar, ejecuta los siguientes comandos:

$ git add .
$ git commit -m "done"
$ git push origin master

Cree una solicitud de extracción para que sus tutores puedan comprobar su trabajo.

Instrucciones

Trabajarás en la carpeta apple-pie. Allí encontrarás todos los archivos, imágenes y contenido de texto necesarios para crear la página. El texto está en el index.html, y se crea un archivo CSS en styles/style.css.

Entregable

A continuación encontrará una captura de pantalla de los resultados esperados:

Práctica extra

Si crees que necesitas más práctica, puedes seguir trabajando en el ejercicio de la sopa francesa. Allí encontrarás el archivo expected-result.md donde podrás ver lo que se espera de ti para construir. Esta carpeta tiene la misma estructura que la de apple-pie, así que sigue los mismos pasos.

Recursos extra

• Referencia CSS de MDN
• Imagen de fondo CSS

Feliz codificación! ❤️