Create A Responsive Pet Service Shop Website Design Template Using HTML CSS / SASS & JavaScript



how to make a simple online pet shop website design using html css and vanilla javascript step by step.
create a complete responsive online pet service shop website design template using html css and vanilla javascript from scratch.

the main feature of this website are:
✅ responsive sticky header with login form and toggle navbar menu effect using javascript.
✅ responsive home section.
✅ responsive about section using flexbox.
✅ responsive cat and dog banner section using flexbox.
✅ responsive shop section using css grid.
✅ responsive services section using css grid.
✅ responsive pricing table / plan section using css grid.
✅ responsive contact form section using css grid.
✅ responsive footer section using css grid.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):

*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.

font awesome cdn link:

google fonts:

clip-path generator:

border-radius genrator:

Editor : – visual studio code with Laetus: Dark Vibrant Theme
Browser : – google chrome
UI Tool : – Figma
Images / Video / SVG : –
01 –
02 –
03 –
04 –
05 –
06 –

New To My Channel Subscribe Now And See More Stuff Like This:

Timestamp:
0:00 demo
3:57 file structure
5:17 header section
35:15 home section
41:07 about section
44:29 dog cat banner
51:50 shop section
1:0051 services section
1:06:07 plan section
1:14:43 contact section
1:19:30 footer section
1:24:40 final demo

#FrontEnd
#PetShop
#CompleteWebsite

34 comments

  1. I've always enjoyed the pawsisitve theme's aesthetic. It's cool seeing you replicate that webpage!

  2. Do you have any courses in Udemy or Share Skill? I would like to learn from you. Or can I ask you to teach me via zoom and I will pay for you. Please write your email so I can contact with you. Thank you!

  3. Why you play music background..when you make website then tech us every step in your voice kindly plz

  4. Can you please tell me why I downloaded and included the visual code and didn't run it in a beautiful format like you. Am I missing any step. Can you just say thank you? 😍👍

  5. Hello. I have been following you for a long time, and I am in need of a web profile card code, can you make and share it for everyone and me too?🙏

  6. Aapka tutorial dekh dekh ke mera bhai First year engineering me hai wo layout banake barabar dhoom macha raha hai, thank you brother

  7. How can you get these precise rem values ? Do you use some table with the values? I always use pixels and I have trouble to make pages responsive.

  8. Hello, sir thanks a lot for the amazing teaches I have a question about using scss file in the project I can't link it to HTML I mean it doesn't work can u explain how should I use it ( I'm a noob sry 🙂 ) when I type colors name ( $black) for example or other things nothing will change in browser!

  9. May I suggest you to create the HTML ,CSS & Javascript of the the dashboard after someone type the login and password? Just like you do on several templates but on the internal side? Would be amazing to practice this too!
    On other hand, i need to say: WOW sir, WOW! Amazing and very interesting to practice! Keep this up!

Leave a comment

Your email address will not be published.