Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

Complete Responsive Food/Restaurant Website Using HTML/CSS/JQUERY – Step By Step

39.1K views on YouTube

complete responsive website design using html5, css3, jquery, and javascript from scratch.
complete responsive food/restaurant website tutorial for beginners.
how to make complete responsive website using html, css, jquery / javascript step by step.

the main feature of this website are:

✔ responsive sticky header with scroll spy and double header effect.
✔ responsive home / hero section with wave / cloud animation
✔ responsive about section using flexbox
✔ responsive dishes section with image filter effect
✔ responsive chef section with team card hover effect
✔ responsive specialty section using flexbox
✔ responsive newsletter section
✔ responsive footer section using flexbox.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/drive/folders/199uuzqzXji1TupfNtlzM-DBpidVhFNvc?usp=sharing

fonts are from google fonts:
https://fonts.google.com/specimen/Open+Sans

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

jquery cdn link:
https://cdnjs.com/libraries/jquery

New To My Channel Subscribe Now And See More Stuff Like This:
https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw

TimeStamps:

0:00 demo
6:52 file structure
8:15 header / navbar section
18:10 home hero section
21:50 wave / cloud animation
23:05 about section
27:52 sticky header / navbar
29:03 scroll spy
31:05 dishes section
38:33 chef section
43:45 specialty section
49:54 newsletter section
53:54 footer section
1:00:28 mobile first

#FoodWebsite
#CompleteWebsite
#ResponsiveWebsite
#MobileFirst
#foodWebsite
#restaurantWebsite
#HTML5
#CSS3
#JQUERY
#Javascript
#WebDevelopment
#WebsiteDesign