It’s time to put all of the HTML knowledge you have been acquiring so far into practice. In this project, you are going to build a basic recipe website.
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished. Not unless you’re into brutalist web design that is.
But It’s important to keep in mind this project is just to build your HTML chops; we will revisit this project in the future to style it up with CSS.
As mentioned in the introduction to Git, you’ll want to organize all your projects like a portfolio and link them to GitHub so it can be seen by others.
If you do not know how to set up a repository, follow the instructions found in Git Basics to learn how.
cdinto it. This folder will house all the projects you do at Odin.
git clone email@example.com:username/odin-recipes.git(use SSH).
odin-recipesproject directory that is now on your local machine
README.mdfile and write a brief introduction for what the current project is and what skills you have demonstrated once you have completed it. (You can do this as a self-reflection at the end of the project which is a good way to review what you have learned.)
If you are having trouble:
When you’re building your project, you will probably end up doing several
git add +
git commit cycles before being ready to push it up to GitHub with
git push origin main.
When writing code, it’s considered best practice to commit early and often. Commit every time you have a meaningful change in the code. This will create a timeline of your progress and show that your finished code didn’t appear out of nowhere.
If you have entered
git push origin main and typed out your username and password, if you refresh your GitHub page, you should see new files added onto GitHub.
Okay, that’s enough Git for the moment – time to actually build stuff!
odin-recipesdirectory, create an
h1heading “Odin Recipes” to the body.
odin-recipesdirectory and name it
recipesdirectory and name it after the recipe it will contain. For example
lasagna.html. You can use the name of your favorite dish or if you need some inspiration, you can find a recipe to use here.
h1heading with the recipe’s name as its content.
index.htmlfile, add a link to the recipe page you just created. The text of the link should again be the recipe name.
The recipe page should have the following content:
If you want to show your work (the project) to others, or submit a solution below, you will need to publish your site so that others can access it from the web, rather than just on your local machine. The good news is that if you have your project on GitHub (as described above) doing this is incredibly simple.
GitHub allows you to publish web projects directly from a GitHub repository. Doing this will allow you to access your project from
There are a couple of ways to go about doing this, but the simplest is this:
index.html. If it is not, you will need to rename it.
your-github-username.github.io/your-github-repo-name(obviously substituting your own details in the link)