Monday, April 27, 2020
Lerning HTML and CSS
Learning has no age limit, So, this is the perfect time to learn something new. Here is some example of my new learning lesson.
The problem was to make a unordered and ordered list that can implement in a cooking recipe web page.
Please follow the steps as below and try it in JS-Bin. Anybody can copy and paste these code to a notepad, save the file .html and run in any web browser.
Please try it!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!--Make the Title of the webpage-->
<title>Home-Made Cookies</title>
</head>
<body>
<!--Make the heading of the topic-->
<h1>Easy Sugar Cookies</h1>
<!--Make the First paragraph for the description of food-->
<p> Quick and easy sugar cookies! They are really good, plain or with candies in them.
My friend uses chocolate mints on top, and they're great!</p>
<!--Make the sub-heading of the topic-->
<h3>Ingredients:</h3>
<!--Make the unorder list of the ingredients-->
<ul>
<li>2 ¾ cups all-purpose flour</li>
<li>1 teaspoon baking soda</li>
<li>½ teaspoon baking powder</li>
<li>1 cup butter, softened</li>
<li>1 ½ cups white sugar</li>
<li>1 egg</li>
<li>1 teaspoon vanilla extract</li>
</ul>
<!--Make the subheading of the topic-->
<h3>Steps to follow:</h3>
<!--Make the ordered list / steps to follow-->
<ol>
<li>Preheat oven to 375 degrees F (190 degrees C).
In a small bowl, stir together flour,
baking soda, and baking powder. Set aside.</li>
<!--Make an extra line in between steps-->
<p> </p>
<li>In a large bowl, cream together the butter and sugar until smooth.
Beat in egg and vanilla. Gradually blend in the dry ingredients.
Roll rounded teaspoonfuls of dough into balls,
and place onto ungreased cookie sheets.</li>
<p>
</p>
<li>Bake 8 to 10 minutes in the preheated oven, or until golden.
Let stand on cookie sheet two minutes before
removing to cool on wire racks.</li>
</ol>
<!--Make the subheading of the topic-->
<h3>Nutrition Facts</h3>
<p></p>
<!--Make the sub subheading of the topic-->
<h4>Per Serving:</h4>
<!--Make the paragraph for the description-->
<p>86 calories; 4 g total fat; 14 mg cholesterol; 60 mg sodium.
11.7 g carbohydrates;
0.9 g protein; Full Nutrition</p>
</body>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment