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.
- Learn how to fork this repo
- Clone this repo into your
labsfolder - Make sure you use
classandidselectors throughout your exercise. Remember, only usetagselectors if you want to modify every element of thattag. - 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
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]
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.
Here's a high-fidelity mockup of the expected output:
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.
Happy coding! 💙