Recipe with HTML
For this optional project I will be working with HTML through Codepen.io. I have used HTML briefly in middle school but have not used it since then, and this is my first time using Codepen.io. For this project I chose a cinnamon and banana muffin recipe to create my ordered and unordered lists.
Getting Started:
To begin this page I used the default screen that appears after signing up for Codepen.io and going through the tutorial steps. I will only be altering the HTML screen, which is the first from the left. The other screens that could be edited are CSS and JS but I did not change these from the default so the colors and formatting is the same as the default page.
First, I created a heading and subheading using HTML. After watching the LinkedIn Learning tutorial the instructor described how to make headings. To do this you must use the tags <h1></h1> to create the largest heading. There are six sizes for headings and they adhere to a hierarchy of size. Due to this I wanted my subheading of “Cinnamon Banana Muffins” to be smaller so I used the heading tag <h2></h2>.
Then, I entered all of my ingredients into an unordered list. This means that there is no defining way of sorting the list and the items will just appear as entered.
To complete this you must begin your list with <ul> and enter all of the items within your list by surrounding each item with <li></li>, then you must end your list with </ul> to signal the end of the list.
This caused all of my items to appear with bullet points and they are listed on the website as entered in the HTML code.
Next, I entered my ordered list, which is the sequence of instructions to complete this recipe. This is an ordered list because it must be completed in a specific sequence for the desired result.
To do this you begin the ordered list with <ol>, followed by all of the items in the list, each surrounded by <li></li> and then end the list with </ol>.
This resulted in the listed items being put into a numbered list corresponding to the order you must complete the steps in the recipe.
Finally, the completed recipe is available on HTML and on a theoretical webpage displaying an unordered and ordered list.
HTML and Codepen.io are very beginner friendly and easy to use once you get the hang of using tags. It would be interesting to learn CSS and JS and get to add to these pages even more.
Leave a Reply