HTML & Codepen.io
For this project, I am working with HTML and Codepen.io, both of which are new to me. I will document my process as I use them to create unordered and ordered lists.
I found an Eggnog cookie recipe online to demonstrate how to create unordered and ordered lists. The URL link to the recipe I chose for this project is included above.
Let’s get started!
Unordered list
First things, first. Open Codepen.io and login.
Step 1:
Click start New Pen
Upon starting a new pen three boxes will open up. One for HTML, CSS, and JS.
Example: 1
Again for this project we are going to use the HTML box.
I am going to start by creating an unordered list using the ingredients from the Eggnog cookie recipe.
To create an unordered list, you use <li> and <ul> elements.
li = list item
ul = unordered list
Step 2:
Start creating your unordered list by using <li> elements.
Don’t forget to use the opening and closing <li> </li> elements for each item.
Example: 2
This is an example of what it looks like before you use <li> elements. See how the first two ingredients are not in list form?
The ingredients are displayed on the same horizontal line, making them difficult to read and understand.
Step 3:
Now, let’s finish the unordered list by using opening and closing<ul> </ul>elements.
We selected <ul> because it effectively represents an unordered list.
Example: 3
Don’t forget to have an opening/closing <ul> </ul> elements.
There you have it!
You have just created an unordered list.
Leave a Reply