HTML & CSS Project Tutorial – Build a Recipes Website

Ecommerce Empire Academy

In this HTML and CSS project tutorial, you will improve your HTML and CSS skills by building a recipes website.

πŸ’» Code:

✏️ Course from John Smilga of Coding Addict. Check out his channel:

πŸŽ₯ Starter Project video referenced in tutorial:

πŸŽ‰ Thanks to our Champion and Sponsor supporters:
πŸ‘Ύ Wong Voon jinq
πŸ‘Ύ hexploitation
πŸ‘Ύ Katia Moran
πŸ‘Ύ BlckPhantom
πŸ‘Ύ Nick Raker
πŸ‘Ύ Otis Morgan
πŸ‘Ύ DeezMaster
πŸ‘Ύ AppWrite

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

30 thoughts on “HTML & CSS Project Tutorial – Build a Recipes Website”

  1. John hi! Tough time following all your projects for Html 5. Any chance you can include projects with python and large projects for multinational projects and large data sets. Thanks 35x buddy! πŸ˜πŸ™‚πŸ‘¨πŸ‘†

  2. John Smilga is a coding legend. Learning a lot from him. Watched his 15 react projects, 8 hours plus node.js tutorials and 3hrs plus serverless functions.

  3. John is amazing. I done this toturai when he upload it in parts and he is the best. “Codding Addict” is Gold!

  4. Thanks everyone that’s worked on this, this has been a great help along my journey. I hope if I’m ever skilled enough to help others I would not hesitate to do so.

  5. I have completed this lesson and what I would like it suggest is that: try to make layout yourself at first and if you stuck at anything take help from video. In this way you can exactly figure out where your flaws are and you can improve yourself rather then just watching and copying and pasting. HAPPY CODING !!!

  6. For the following code, the tags-list display “grid,” and the tags-list a display “block”
    What is the relationship between the “grid” and “block” here, please explain in details.

    .tags-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    .tags-list a {
    text-transform: capitalize;
    display: block;
    color: var(–grey-500);
    transition: var(–transition);

  7. i’ve got semi colon expected and selector expected warning when I try to code color and letter-spacing property at 19.34 . Is there any solution for that ?

  8. Jonh is a great teacher, saw his name here and i remenber the amazing courses he has from Udemy

  9. The Teflon Don

    John. I enjoyed watching this tutorial. I, however, had a question. for the single recipes, should one put in more than one recipe, will the css you did cover every recipe or will copying and pasting need to be done for every recipe thereafter

  10. Victoria Adedayo

    Wow! Thank you so much for this tutorial. I have been away from coding for a while and just needed a refresher and I am happy I came across this.

  11. For the overlay on the simply recipes banner there is no need for postion: relative or absolute. It goes div 1-> div 2-> div 3 so all you need to do is have div 2 the same height and width as div 1(the parent container) and change the background.

Comments are closed.