The Codecademy recipe card project put all my recently acquired HTML skills to the test.
Starting with the basic structure including html, head and body tags I began putting a chocolate chip cookies recipe together. Using the <h1> tag with a style attribute I included a centred heading. To put the ingredients into a bullet pointed list, I used <ul> and <li> tags. I was asked to add a little colour so, remembering #RRGGBB, I used the style attribute again with #0000FF – blue!
The step-by-step instructions for making the chocolate chip cookies needed an ordered list. The <ol> and <li> tags take care of this. Then, all that’s left to do is give allrecipes.com the credit for the recipe. At this point, I’m fairly at ease with adding hyperlinks using <a href=”URL”>. It’s satisfying to see how far I have come with HTML in the past few months.
After completing the recipe, I needed to create a table which shows the amount of ingredients required to double the mixture. Again, I started with a basic html, head and body structure before adding a title into the head section using the <title> tag. The table consisted of four rows with two columns originally – ingredients and the amount needed for one batch of cookies. Then a third column was added to show the amount needed for two batches. Headings for each column were included using the <th> tags. A title for the whole table was needed so I used the colspan attribute to have the title span across all three columns.
Proud of my achievements but mostly hungry for cookies, I’m going to have to try out this recipe. Perhaps if I’m feeling generous I will bring some in to share with my fellow Webbies, that all depends how good they are!