Hello everyone!
Cent here with the next installment.
Today I did my first project with the Odin Project! It was a relatively simple once, just focusing on the HTML lessons I've gone over in the previous days. I would've added more style to it, but I tend to think its best to just follow the project requirements. It's a project for HTML lessons not CSS lessons, so I don't want to be super focused on getting a design for this simple project down.
This project was just a simple recipe site, with specific pages for each recipe made. I'll share the code for the index page, which is just a list of recipes, and one of the recipe pages.
The link to the project is here: https://centanomics.github.io/odin-recipies/
index.html
<h1>Odin Recipes</h1>
<ul>
<li>
<a href="./recipes/rice-bowl.html">Rice Bowl</a>
</li>
<li>
<a href="./recipes/mac-n-cheese.html">Mac and Cheese</a>
</li>
<li>
<a href="./recipes/pbnj.html">Peanut Butter and Jelly Sandwich</a>
</li>
</ul>
Simple enough, right? Now let's look at the rice bowl recipe page.
<h1>Cent's Rice Bowl</h1>
<img src="https://theviewfromgreatisland.com/wp-content/uploads/2020/04/korean-beef-rice-bowl-8506495-April-24-2020.jpg" alt="Rice bowl with rice, green beans, ground beef, and an over easy egg"/>
<h2>Description</h2>
<p>Cent's rice bowl is a cheap and easy meal that you can customize to your liking. It will usually contain rice, some form of meat, and some form of vegetables</p>
<h2>Ingredients</h2>
<ul>
<li>Rice</li>
<li>Ground pork</li>
<li>Mixed Vegetables</li>
<li>Your favorite blend of spices</li>
<li>Cheese (optional)</li>
</ul>
<h2>Steps</h2>
<ol>
<li>Put one serving of rice into a rice cooker</li>
<li>While the rice is cooking start browing the ground pork, mixing in the spices while the ground pork is cooking</li>
<li>Once the ground pork is close to done you can heat up the mixed vegetables in the microwave</li>
<li>Once the rice is done, add your ground pork and mixed vegetables and mix it all together</li>
<li>If you want you can add cheese as well</li>
</ol>
Just a few lists and an image for the related food item. As I mentioned, simple, stuff I already know. However, I want to do everything again, and the practice won't hurt.
Today was a bit of a shorter day as finishing the project was a good stopping point for me. Tomorrow we'll start on the CSS lessons!
Until tomorrow!
Top comments (0)