Responsive Burger Website Design Using HTML / CSS / SASS / JavaScript From Scratch

2 Views
Published
how to make a complete responsive single page burger / fast food / restaurant website design using html css / sass and vanilla javascript step by step.
create complete responsive animated burger website design template using html css and vanilla javascript tutorial for beginners.

the main feature of this website are:
✅ responsive home section.
✅ responsive service section using grid.
✅ responsive service section using grid.
✅ responsive menu section using grid.
✅ responsive about section using flex.
✅ responsive reviews section using grid.
✅ responsive contact section using flex.
✅ responsive blogs section using grid.
✅ responsive footer section.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1W3H-eciziZa74DzXbgqqehYYDeXgZ_Wj/view?usp=sharing

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

AOS github:
https://github.com/michalsnik/aos

AOS website:
https://michalsnik.github.io/aos/

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

google fonts:
https://fonts.google.com/specimen/Raleway

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/

New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas

Timestamp:
0:00 demo
2:39 file structure
3:52 header
24:34 home
29:33 service
32:56 menu
38:28 about
43:36 reviews
47:08 contact
55:43 blogs
1:01:16 footer
1:04:51 AOS
1:09:43 final demo


#FrontEnd
#BurgerWebsite
#SinglePage
Category
Web design
Be the first to comment