Complete Responsive Website Using HTML CSS | Responsive web design tutorial
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- In this video we will learn how to create a complete responsive website from scratch using html and css step by step. By the end of this video you able to make a complete responsive website in html css from scratch.
1-on-1 Classes with me : www.buymeacoffee.com/gowthamt...
🎁 Free images : bit.ly/3JzQzUK
👨💻 Source Code : www.buymeacoffee.com/gowthamt...
💬Let's Chat Instagram : / gowthamtirri
💝 SUBSCRIBE : / @gowthamtirri
=========🕘Time Stamps =======
00:00 Intro
01:21 Header | Full Screen Background using html css
06:52 Responsive navbar using html css
15:55 Events section | css flex box
22:04 Explore Section
26:26 Tours Section | image gallery using html css
31:49 : Footer
33:54 : Make complete website responsive using html css
so, we build this complete adventure website in html and css with some little animations and made this website complete responsive in html css
===== = 🎁 Free courses 🎁 ======
🔸 Build Complete Website with Animations : • How To Make A Complete...
🔸 Reponsive Personal Portfolio Website : • Responsive Portfolio W...
🔸 Complete websites using html css and javascript Playlist : • Build Complete Website...
▶️ Javscript Projects Playlist: • Javascript projects
▶️ HTML CSS Projects Playlist : • HTML CSS projects
Tags:
HTML and CSS Website Design
Make Website Using HTML And CSS
Create Website Using HTML and CSS
Complete Website Design
Full Website Design
complete website in html and css
Make Resonsive Website
Responsive Website Design HTML and CSS
HTML Website
html css responsive website
complete responsive webiste
responsive website using html5 and css3
responsive website using html and css
html css website
responsive website html css
responsive website html css
complete website using html and css
responsive website design using html and css
complete web design project
responsive website from scratch
make responsive website html css
complete website in html and css - วิทยาศาสตร์และเทคโนโลยี
1-on-1 Classes with me : www.buymeacoffee.com/gowthamtirri/e/219232
Source Code :www.buymeacoffee.com/gowthamtirri/e/97581
So far the only tutorial I've seen that takes it slow and doesn't require prior experience to soft design.
Too much easy lacture sir itna easy nhi tha jitna Apne smjha kr krdia hai maene koi 30 plus videos dkhi thi lkn smjh blkl ni ai Apne bht acha btaya and successfuly MRI same ban Gai website
Hi.
What can be the reason that my image is not resposive?I work on mac desktop and the screen is very wide. The image covers only half of the screen. I follow your tutorial step by step and at the point where we gave selectors to the header in css i started to have a problem.
is there is a way to adjust an image?
while i did found a mistake instead of width 100vw i wrote q
100 vh.
but now i have another problem when i enlarge the screen the whole view of the picture isn there . Just the enlarged part of the image.
Thanks man, I reference the link to this video on my site since it was so efficient and useful.
THE BEST TUTORIAL EVER MADE...Thanks bro
Excellent work bro from london great video and content, keep it up one of the best online design was really great
Thank You so much! Excellent Tutorial!
You have explained concept well and made good website. It helped me out to understand animation and responsive website. Please do share html file as well.
How can I get the nav bar working for example when click about us
Take to that part
Thank you so much for this video! I love that you explain what you are doing and showing us what is being done on the website. Your channel deserves to have way more subscribers, thank you!!!
Thanks Christina, so glad you liked it.
@Christina
Can you provide me those images, please?
me encanta lo voy a hacer justo lo que estaba buscando
In navbar, when I make its position: absolute, I can no longer use justify-content property. Do you have any idea how to fix that problem?
Thank u so much man, keep up the awesome work.
In css i wrote the same things as shown in this video example navbar and it reacts opposite background image comes to half screen of computer i dont know why
Thank you so much Anna .
It is really helpfull.
Make some more videos.
I loved this awesome tutorial! Thank you!!
Thanks bro really appriciate, more knowledge to come bro
Bonjour,
je suis bloqué à partir de @14:00 , je ne comprends pas pourquoi le "mobile-menu" n'est pas en HTML ? lorsque je clique sur l'icone en haut à droite pour voir le menu, il n y a aucun changement. Merci de votre aide !!!
Greatly appreciate your video! It really helps!
may i have the code? because the results do not match the video
when you click one of the button in navigation bar will it bring you to another section??
This has helped me so much thank you.
please someone answer me, where did this .mobile-menu come from?
the @media only screen and (max-width:850px) is not working, why is that?
When I paste your same images, mine look smaller with more space between them. Could I have done something wrong?
@5:00 using v min for font size will make it responsive but also going to impact the zooming ability as while zooming in the site text will not get bigger in size
@Entertainment Roller Coaster
Bad. When you zoom in the text should get bigger.
love your class!
I am already a developer but don't know how to create a beautiful responsive website, but I know the codes.
Thanks for your tips.
Glad, you loved it ❤️
As you make website after zooming all the stuff get spoil you know about it if we zoom after making website using htm k and css
Plz reply and have me solution plz reply 🙏
Why do you use two heading h1? In the same document?
The clarity in your explaination is soo good ..you deserve more subscribers
Thanks neeharika
Thank you so much, god bless you.
Why you make header-content flex end when you can use center ?
love u bhai for awesome tutorial.Please keep guiding noobs like us.
When I insert the second img, it sits on top of the first img instead of being under it😢
Thanks for this video really helpful
I really love this project
Great video ,but some of the css features are not working in my project,y?(I'm using pycharm )
Thanks for the Video.. 🥰🥰🥰
Thanks bruh i learn a lot from this video, really eager to watch more videos of yours in future
Im glad you liked it. ❤️
Thankyou for your guidance 🎉🎉🎉🎉
image file shows error : file is in owner's trash. and not able to download
Ummm, my background image is not getting inserted.....What to do now?
Incredible video, keep up the awesome work! :)
Thanks
@@GowthamTirri hey can you tell me why did you
give left and top zero in navbar
The link on the css where did it come from??
Really awesome!
My images are not resizing, what could be the problem
Sir, you make the best HTML/CSS tutorials on youtube -- You ROCK!!😀
You're Amazing! ❣️
@@GowthamTirri urdu or hindi main banow sir jee
@@GowthamTirrieveryone can't understand English including me ❤
Can i get the inages you used the drive link has been expired
Spot on!
I'm not sure if I'm missing something but i cannot understand how you're able to link your photos in css. Ive tried going about it the same way you did and it does not work?
sir in poppins exactly which font to select please metion in your comment section
Great tutorial. Thanks for that . But one question. At 28:03 you ad "image-col" to the "col"-class.Seconds later it is deleted. No matter, what I do, the gallery won't appear in 2cols and 2 rows, but 1col 4 rows. It drives me crazy, that I cannot find the point, where it doesn't work.
i found this problem, and others: images in "events" shows full size and doesn't show in responsive mode
Hi. I'm having the same problem. Can you tell me how I fix this?
Where can i get class mobile-menu in responsive navbar....i dont get that class in your index.html
yes exactly where is mobile-menu?
Thank u for tutorial 👍
the script type of mobile- menu is not working for me, some help.
for me too & source code is paid
My menu bar is not changing pages when I click. I don't know what's happening. T_T
i was to ask, even tho i followed every steps, the alignment on my items is center but when its on the live website it isnt centered
same here, for me the issue is with the navbar that it wont align into 1 row, were u able to solve this
Great Video. Thank you very much for the tuition.
❤️
can you explain about that "mobile-menu" class which you used while making the navbar responsive
My question is same
@@charusheelabari5257 put it here with navlinks
Why did you linked google fonts if you won't use it?
thanks a lot man
As a beginner this tutorial is amazing!!! thank you so much....
Glad you liked it
@Muskan Can you provide me those images?
I'm loving the content so far, but I have trouble with my background image, it is only appearing on half the screen
its good so good work , you must precise a reponsive witdh max right at the end
Sir Arrow would arrow function work in all devices..
My toggle property ia not working.. I guess it is because of arrow function which is advanced function
Not because of arrow functions, it maybe another thing in your code
Thanks a lot man. So clear, and to the point.
I'm glad you liked it. ❤️
Thank you sir for making this vedio. Explanation is very clear. please if you could start small course on CSS it is very helpfull to us. You deserve More SubScribers.
I'm glad it helped you, I'll bring more css projects :)
Bro I should tell you you are gonna be a big TH-camr, cause your explanation is good as well as your work ethic .
Glad you liked it ❤️
Hi, does this work for multiple platforms? (website adapts to phone, laptop etc?)
Yes it is a responsive design.. works in every platform
Yes.
bro from where get the images?
Thank you so much
Is it responsive because my background is changing in different devices in my pc
i got one small issue that my menu button is not creating an animation whenever we click on it. Also my text color is not visible(white). Please can you help me out there?
I can help you with source code. Dm insta
please upload figma as well of this design
Hi, the two photos in the event section, when you try to decrease the screen size(ie browser tab), the margin between two photos get disappeared and it looks like both photos are connected or glued or no margin is there and it shows bad animation during hover. In the Media query the photos are coming ok as its direction is column but this issue happen between before reaching media query condition. go to 34:07 and pause you will see it. Any tips? Also the images are not of the same dimension, so the alignment is not matched between the photos. Great Tutorial Btw.
Same issue that that i have encountered, have you found the solution for this?
@@marvinferrer5099 I don't remember the solution but what I did I think is I added a margin-left and margin-right for both photos so like that it will have some space in between and also on the right and left side. Also for the photo's dimension give same height for the div element in which these photos are stored and stretched the photo i.e fill. if they are not in a div element just make one
I'm having problem with the Menu btn. it's not responsive huhuhu
Super bro
very nice explain i like it
my navbar - the hambarger doesnot work.
Thanks dear
Nice work, can you explain how mobile-menu at css works?
we are best study for web
where is .mobile-menu class in html file?
Excellent Tutorial!! Very well explained, step-by-step tutorial on creating a responsive website. I especially like that the website layout is created using flexbox (and no framework). Thank you for sharing.
One question for you. If one wanted to animate the mobile menu icon, for example, by toggling the hamburger image with an image of X, how would one modify the CSS and JS?
❤️ I really appreciate your comment,
you can do something like this
//change icons in navbar html
X
//In JS
const mobileNav = document.querySelector('.mobile-nav')
const menuBtn = document.querySelector('.menu-btn')
const navlinks = document.querySelector('.nav-links')
const closeBtn = document.querySelector('.close-btn')
mobileNav.addEventListener('click',(e)=>{
navlinks.classList.toggle('mobile-menu')
if(e.target === menuBtn){
menuBtn.replaceWith(closeBtn)
closeBtn.style.display = 'block'
}
if(e.target === closeBtn){
closeBtn.replaceWith(menuBtn)
}
})
@@GowthamTirri Thank you so much.
@@GowthamTirri your github id
You explain wowwwwwwww
With live server
for a beginner this is amazing. Great work you're doing, just want to add the image's link does not really work.
Great job
Hey bro👋
Please my image gallery does no appear in grid form as yours.
It's displayed vertically.
I've followed all the steps.
Please help🙏
I seem to have the same issue any solution ?
Dm in insta for source code
Thanks for this!
I tried doing everything the exact same way. However, the nav links don't turn into the whitesmoke color.. don't know why... I'v done exactly everything you've done
Make sure you target "a" tag in css
hello sir, this is a wonderful video! However, if I got the font-size from my coworker in design team as px unit but I need to make the website responsive should I stick with px or change it to vmin like u use?
use em is recommended for fontsizing
Toggle button is not working please help
hello sir can help me with the mobile-menu class in html I am not seeing it
Same problem can someone tell where did he put in html
Hi i am trying do your code but it's not working when class tours and another class like row and col when I am using display flex
Refer to source code.
@@GowthamTirri thank so much for this video it help me a lot.
Excellent video, only issue is, i did what you did with the navbar, but somehow it doesn't line up into one row (like u have). I dont understand why, someone have an explanation on why it won't shift?
My nav links dont get the white colour, and when I put the class active to the "home" it was supposed to be pink, but then it got white hahahah, can't figure whats going on
same problem, have u fixed it?
What is your VS Code template?
Cannot download images.. help
Thank u
The link to the images don't work :(
Nice video Bro. But you're very fast. Try taking it easier in subsequent videos. It will help everyone follow along better.