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:
The amount of work you guys put into this👏❤️
This is awesome! So in depth and easy to understand
I waited for this😊.
Please make part 2 or another html css project 🙏
Huge salute for u sir for this tutorial
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! 😐🙂👨👆
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.
Kindly share react project video link
@Dhanvi Akash thank u sister
@Dhanvi Akash ok sister
I hope you do more projects in the future!
John is amazing. I done this toturai when he upload it in parts and he is the best. “Codding Addict” is Gold!
Thank you freeCodeCamp for posting!
If you are interested in my overall project setup (default starter). Here is the link to the Github Repository.
https://github.com/john-smilga/default-starter
I explain entire setup, in great detail in readme.md
Thank you for watching and happy coding 🙂
thank you for the tutorial 🙂
You’re a legend
Please put timestamp.. Thnx!
you know i like your voice
Thanks sir.I am big fan of u from India.
This man literally taught me html and css
Excellent by john, will be a great project as it is previously built by him in gatsby.
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.
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 !!!
i agree👍👍👍
Not advisable for beginners
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.
Thanks
.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);
}
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 ?
oh my gosh thank you! i was looking for a course with a project and this one is perfect. keep it up
Jonh is a great teacher, saw his name here and i remenber the amazing courses he has from Udemy
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
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.
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.