mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
79 lines
2.3 KiB
HTML
79 lines
2.3 KiB
HTML
<html>
|
|
<body>
|
|
<div
|
|
class="codepen"
|
|
data-theme-id="36294"
|
|
data-prefill
|
|
data-editable="true"
|
|
data-height="100%"
|
|
data-theme-id="1"
|
|
data-default-tab="js,result"
|
|
>
|
|
<pre data-lang="js">
|
|
/*
|
|
Step 1 Exercise
|
|
|
|
The power of HTML is its ability to represent complex information in a way that conveys meaning. In this exercise you are going to be creating an HTML page for my favorite recipe.
|
|
|
|
## The Exercise
|
|
|
|
1. Create a recipe page to host our recipe
|
|
2. Use header, main, footer, headings (h1/h2 etc), paragraphs, lists
|
|
3. Use ordered and unordered lists appropriately
|
|
4. Add the `baked_beans.jpg` image: https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/step1-01/exercise/baked_beans.jpg
|
|
5. Add an anchor tag around 'Wisconsin Beer Brats'
|
|
|
|
> Note that CodePen takes care of the `HTML` and `Body` tags, so you can simply start with the content
|
|
|
|
## The Recipe
|
|
|
|
Title:
|
|
4th of July Baked Beans
|
|
|
|
Description:
|
|
It's great how a single meal can take you back dozens of years. This is one of those recipes that never seems to fail to impress.
|
|
|
|
I learned this recipe from the cousin of one of my college friends back in Nashville Tennessee. We had an amazing 4th of July feast which included this recipe and some bratwurst like these Wisconsin Beer Brats https://www.culinaryhill.com/wisconsin-beer-brats/
|
|
|
|
Prep Time: 10 minutes
|
|
Cook time: 3+ hours
|
|
Servings: 12
|
|
|
|
Ingredients:
|
|
1LB Bacon chopped
|
|
3 Cans Bush's Original Baked Beans
|
|
1 Walla Wall Onion chopped
|
|
3 ground garlic cloves
|
|
4 Tablespoons of mustard
|
|
3 Tablespoons of molasses
|
|
4 Tablespoons of brown sugar
|
|
|
|
Directions:
|
|
Cook bacon until it is mostly cooked, then drain most of the grease and put aside
|
|
Cook onion in remaining bacon grease
|
|
Combine onions and bacon, then add garlic, cook for a few more minutes
|
|
Add beans and get up to simmer temperature
|
|
Add mustard until your beans are nice and yellow
|
|
Add molasses until color darkens again
|
|
Add brown sugar until properly sweet
|
|
Simmer for a long time, occasionally stirring
|
|
|
|
Expert Tips:
|
|
Burning off most of the liquid gives you nice, hearty, sticky beans.
|
|
If the beans get too dry, you can always add beer!
|
|
|
|
Nutritional Information:
|
|
Calories: lots
|
|
Fat: lots
|
|
Fun: lots
|
|
|
|
*/
|
|
|
|
</pre>
|
|
<pre data-lang="html">Add Recipe Here</pre>
|
|
</div>
|
|
|
|
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
|
</body>
|
|
</html>
|