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 that 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.
odin-recipes
.repos
folder that you previously created in the Git Basics lesson. The command should look like git clone git@github.com:username/odin-recipes.git
(use SSH).cd
into the odin-recipes
project directory that is now on your local machine.README.md
file and write a brief introduction describing what the current project is and what skills you will have demonstrated once you have completed it. (You can also 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:
cd
into the odin-recipes
folder?).Don’t forget everything we went over in the previous lesson about commit messages!
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.
After you have entered git push origin main
, switch over to your browser and open your repository on GitHub. You should now see all the files you just pushed.
Okay, that’s enough Git for the moment – time to actually build stuff!
odin-recipes
directory, create an index.html
file.h1
heading “Odin Recipes” to the body.odin-recipes
directory and name it recipes
.recipes
directory 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.h1
heading with the recipe’s name as its content.index.html
file, 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 your-github-username.github.io/your-github-repo-name
.
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).5-6 months
Job Guarantee
1-on-1 Mentorship