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
thx a lot man, learned so many new things, great video!!
that's insane i really liked it you are just pro man
Great job man! Keep up the great work you do!
Where can i find the link of the icons ?
I've always enjoyed the pawsisitve theme's aesthetic. It's cool seeing you replicate that webpage!
Mashallah barakallah bhai kiya banate ho Alhamdulillah shukriya bhai bana ne ke liye
thanks sir .How are you .
bro class=fas fa …..
how these icon are got??
iam new to web developemenet …
respect for you !
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!
Why you play music background..when you make website then tech us every step in your voice kindly plz
big fan
Bhai linkedin id share karoge ?
Nice, thanks bro for source code.
So awesome bro, many many thanks
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? 😍👍
Give brother web development tutorial with php please bro
The best web of one is very nice cute beautiful for pet. ❤️😻
vola … ocay …
really v nice project :}
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?🙏
Aapka tutorial dekh dekh ke mera bhai First year engineering me hai wo layout banake barabar dhoom macha raha hai, thank you brother
Awesome Design…..great video
brother please
make a todo list tutorial if you want
I tempted and liked your website.
I didn't learn SASS that you can explain me about SASS please.
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.
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!
So much thanks 🙂 You're kind 😀 Keep working! I always watch your video!
Sir… Iska dynamic admin panel kaise create karenge uspar bhi ek video banaye plz
Can you upload by adding front-end and back-end
your amazing work sir please send me complete front end and back end code please
so cool
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!