rebspen / lab-css-recipes-clone

An exercise to clone a recipes page and understand the basics of HTML and CSS

HTML & CSS | Recipes Clone

Introduction

We've barely scratched the surface with HTML and CSS, so you wouldn't be blamed for thinking that there's not much you can achieve at this moment. Let's challenge that.

Ironhackers can't live on beer alone. We also need tasty treats. As such, we'll be recreating a French Onion Soup recipe, as well as an Apple Pie recipe.

Cloning something that already exists is a great way to get better at front-end development, so inspect the high-fidelity mockups displayed below to see what's expected.

There's a bit of starter code, so you can jump right into it.

Requirements

• Learn how to fork this repo
• Clone this repo into your labs folder
• Make sure you use class and id selectors throughout your exercise. Remember, only use tag selectors if you want to modify every element of that tag.
• Use a single external CSS stylesheet to style all the pages
• Use the images provided to construct the appropriate elements on the page:
  • The background with a picture of an apple pie
  • The recipe servings/nutrients section
  • The prep section

Submission

Upon completion, run the following commands:

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

Create Pull Request so your TAs can check up your work. In the Pull request name, add [city-bootcamp-yourName], ex: [MAD-FTWD-Victor] or [MIA-PTWD-Jess]

Starter code

You will be working in the apple-pie-starter-code folder. The starter-code contains all of the files, images, and text you need in order to create the page. The text is in the index.html file, and you should declare your styles in the main.css file.

Deliverable

Here's a high-fidelity mockup of the expected output:

Bonus: Extra Practice

If you feel like you're in need of extra practice, you can open the starter-code/extra-french-soup/expected-result.md file. There you'll find an extra deliverable. The extra-french-soup folder has the same folder structure as apple-pie, so follow the same steps.

Extra Resources

• CSS Reference from MDN
• CSS Background Image

Happy coding! 💙