Complete Responsive Website Using HTML CSS | Responsive web design tutorial

[@GowthamTirri]

1-on-1 Classes with me : www.buymeacoffee.com/gowthamtirri/e/219232 Source Code :www.buymeacoffee.com/gowthamtirri/e/97581

[@benitosunisankar3851]

So far the only tutorial I've seen that takes it slow and doesn't require prior experience to soft design.

[@aestheticsbynoor6906]

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

[@kenanklovitch8117]

Sir, you make the best HTML/CSS tutorials on youtube -- You ROCK!!😀

[@GowthamTirri]

You're Amazing! ❣️

[@umershaik2493]

​@@GowthamTirri urdu or hindi main banow sir jee

[@umershaik2493]

​@@GowthamTirrieveryone can't understand English including me ❤

[@realityfacts_]

@@GowthamTirri hi bro. I have a problem with the 4 pictures on section "UPCOMING TOURS & DESTINATION". I am trying to fix it. if i say "width: 50%;" Its not working.

[@mr.penguin4115]

THE BEST TUTORIAL EVER MADE...Thanks bro

[@himankverma125]

@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

[@awabelmahe9700]

@Entertainment Roller Coaster Bad. When you zoom in the text should get bigger.

[@rjs_world_shades]

Great video ,but some of the css features are not working in my project,y?(I'm using pycharm )

[@rinallubiz]

may i have the code? because the results do not match the video

[@neeharika7632]

The clarity in your explaination is soo good ..you deserve more subscribers

[@GowthamTirri]

Thanks neeharika

[@magdalena9684]

Hi, does this work for multiple platforms? (website adapts to phone, laptop etc?)

[@shaktidash1675]

Yes it is a responsive design.. works in every platform

[@DominicNweze]

Yes.

[@ab_tech532]

Thanks bro really appriciate, more knowledge to come bro

[@harisp6033]

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.

[@GowthamTirri]

Glad, you loved it ❤️

[@ilahbwalya1887]

I'm loving the content so far, but I have trouble with my background image, it is only appearing on half the screen

[@DougDimmadome__]

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?

[@abhinandtp9048]

Bro I should tell you you are gonna be a big KZbinr, cause your explanation is good as well as your work ethic .

[@GowthamTirri]

Glad you liked it ❤️

[@livesports4522]

Awesome Course for Learning HTML5 and CSS3 #CodingWithRohani

[@GowthamTirri]

❣️

[@asadhalane]

the script type of mobile- menu is not working for me, some help.

[@EducationSimplified]

for me too & source code is paid

[@Christina-yd6rf]

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!!!

[@GowthamTirri]

Thanks Christina, so glad you liked it.

[@Sushovan_95]

@Christina Can you provide me those images, please?

[@jaymonjames9336]

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.

[@musicfan1485]

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.

[@adrionbass]

i found this problem, and others: images in "events" shows full size and doesn't show in responsive mode

[@Thaistenello]

Hi. I'm having the same problem. Can you tell me how I fix this?

[@puloii7800]

The only thing that bothers me is that he used h1 multiple times. But overall, it was intuitive and have a very clear explanation.

[@Jazhina-nj6fy]

when you click one of the button in navigation bar will it bring you to another section??

[@mohanrajk9926]

please make react project my dear bro it will be really helpful bcoz the way your are teaching so clear..

[@GowthamTirri]

Soon..

[@mrchesca3820]

Where can i get class mobile-menu in responsive navbar....i dont get that class in your index.html

[@mokshpatel007]

yes exactly where is mobile-menu?

[@kyliegrass9026]

It's a great tutorial but could be easier to follow. Newbies beware even someone with 3 years under their belt found this hard to follow but only because there was constantly jumping around to different lines. This is understandable however it could again be cleaner

[@GowthamTirri]

Thanks Kylie, Constructive feedback 🙌

[@mateoatencia9147]

Why do you use two heading h1? In the same document?

[@arii4514]

for a beginner this is amazing. Great work you're doing, just want to add the image's link does not really work.

[@monk_widom]

Why you make header-content flex end when you can use center ?

[@cloudforest4087]

Greatly appreciate your video! It really helps!

[@mateofernandez9361]

How can I get the nav bar working for example when click about us Take to that part

[@mvmclx5622]

Thanks man, I reference the link to this video on my site since it was so efficient and useful.

[@hariom0921]

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

[@quiztherapy6851]

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.

[@techsabastudio6177]

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

[@GowthamTirri]

Not because of arrow functions, it maybe another thing in your code

[@DivyatejaKomiri]

Thank you so much Anna . It is really helpfull. Make some more videos.

[@huseyinugur7455]

Why did you linked google fonts if you won't use it?

[@lawrencemotions8720]

Excellent work bro from london great video and content, keep it up one of the best online design was really great

[@chaunriquekrotz9388]

I feel that you should next time start from the start by showing people how to insert a imag etc. I’m pretty sure many people were lost but your explanation is very Good. Also go abit slower.

[@GowthamTirri]

Insightful, thanks for the comment.

[@MuskanSolanki-qy9tz]

As a beginner this tutorial is amazing!!! thank you so much....

[@GowthamTirri]

Glad you liked it

[@Sushovan_95]

@Muskan Can you provide me those images?

[@gospelsomtochim7210]

I really love this project

[@doziemadu5411]

Nice video Bro. But you're very fast. Try taking it easier in subsequent videos. It will help everyone follow along better.

[@sameerdevil8875]

please upload figma as well of this design

[@dyracho6667]

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?

[@NimeshaParanathantri-v1c]

Nice work, can you explain how mobile-menu at css works?

[@001minky]

I loved this awesome tutorial! Thank you!!

[@AlsoManas]

can you explain about that "mobile-menu" class which you used while making the navbar responsive

[@charusheelabari5257]

My question is same

[@saranshrawat975]

@@charusheelabari5257 put it here with navlinks

[@Ravikumar-dt7ig]

Why did you stop posting videos..... Your videos are great for learning 🔥🔥

[@GowthamTirri]

Thanks for the comment ravi ❤️ video's Coming soon..

[@princesamboudafonseca3873]

its good so good work , you must precise a reponsive witdh max right at the end

[@Fsdhjgh]

Thankyou for your guidance 🎉🎉🎉🎉

[@mohammedelamin9899]

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

[@GowthamTirri]

Make sure you target "a" tag in css

[@frankhorrigan8175]

When I paste your same images, mine look smaller with more space between them. Could I have done something wrong?

[@aryanaravinth26]

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?

[@gabrielformoso8425]

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

[@rain_yy]

same problem, have u fixed it?

[@vd4538]

Thank You so much! Excellent Tutorial!

[@joemarmonteroso6727]

the @media only screen and (max-width:850px) is not working, why is that?

[@doongtr805]

love u bhai for awesome tutorial.Please keep guiding noobs like us.

Thank u so much man, keep up the awesome work.

[@hemanthkumarallam3894]

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.

[@GowthamTirri]

I'm glad it helped you, I'll bring more css projects :)

[@jaykumar-jt9fp]

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 🙏

[@luan_ferreira_]

please someone answer me, where did this .mobile-menu come from?

[@arshvlogs299]

sir in poppins exactly which font to select please metion in your comment section

[@susheelkumawat2744]

we are best study for web

[@makeyourday5199]

You explain wowwwwwwww With live server

[@charisgombakomba3276]

My images are not resizing, what could be the problem

[@bigjoshallen]

Really awesome!

[@menofdaruss]

Your intro is fire🔥🔥🔥

[@GowthamTirri]

Only a few people appreciate these kinds of things, Thanks mate! ❣️

[@clairzu4461]

My menu bar is not changing pages when I click. I don't know what's happening. T_T

[@ReejohnStellas]

Thanks bruh i learn a lot from this video, really eager to watch more videos of yours in future

[@GowthamTirri]

Im glad you liked it. ❤️

[@gauranggarg5163]

Is it responsive because my background is changing in different devices in my pc

[@arundev7100]

Thanks for the Video.. 🥰🥰🥰

[@vensvens2213]

where is .mobile-menu class in html file?

[@nass5340]

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 !!!

[@khaludi8584]

When I insert the second img, it sits on top of the first img instead of being under it😢

[@amadinice6161]

The link on the css where did it come from??

[@papurry.c6158]

me encanta lo voy a hacer justo lo que estaba buscando

[@robertodepasamonte3434]

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?

[@GowthamTirri]

❤️ 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) } })

[@robertodepasamonte3434]

@@GowthamTirri Thank you so much.

[@GAURAVKUMAR-sx5mp]

@@GowthamTirri your github id

[@dangelokwakye6658]

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🙏

[@25tech]

I seem to have the same issue any solution ?

[@GowthamTirri]

Dm in insta for source code

[@TheVisualVortex.]

Yo bro can you plzz guide how to get that background pictures

[@HenryBaraka-j1y]

Just open your tag hope it helps

[@sylvanusjoseph1140]

Great Video. Thank you very much for the tuition.

[@GowthamTirri]

❤️

[@ComputerScienceSimplified]

Incredible video, keep up the awesome work! :)

[@GowthamTirri]

Thanks

[@Zaid-804]

@@GowthamTirri hey can you tell me why did you give left and top zero in navbar

[@psgamer9580]

Thanks for this video really helpful

[@AdityaSinghRajput-up1zx]

bro from where get the images?

[@shrutipravingore6451]

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?

[@GowthamTirri]

I can help you with source code. Dm insta

[@Noor-nv7hc]

Thank you so much, god bless you.

[@princevaghani3203]

image file shows error : file is in owner's trash. and not able to download

[@ChristianWarrior1]

What is your VS Code template?

[@takamori8623]

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

[@aryanaravinth26]

same here, for me the issue is with the navbar that it wont align into 1 row, were u able to solve this

[@AmeerAli-zf1cn]

Can i get the inages you used the drive link has been expired

[@vvmanikantakantipudi9919]

Events section is coming through side by the home page can u help me for this?

[@GowthamTirri]

Make sure you have closed all the div tags properly

[@vvmanikantakantipudi9919]

@@GowthamTirri tq for immediate reply and help😍

[@sakariyarushik6058]

very nice explain i like it

[@awabelmahe9700]

Great video, thanks for sharing. I just would like to point out that dispite loading the Poppin font you haven't really used it. You should have added a font-family property in order to make use of it.

[@GowthamTirri]

Yes, i forgot to do that back then.

[@akashsoren1368]

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.

[@marvinferrer5099]

Same issue that that i have encountered, have you found the solution for this?

[@akashsoren1368]

@@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

[@aneewan3943]

my navbar - the hambarger doesnot work.

[@Tech_Tarzan1999]

Sir there is no class given as mobile menu but we add css why?

[@jenniferconner5241]

Same question 😭

[@aryamallik3935]

thanks a lot man

[@kingKabali]

Thanks a lot man. So clear, and to the point.

[@GowthamTirri]

I'm glad you liked it. ❤️

[@ruqaiyajamil9718]

Sir your website is owsome. sir please send me source code of this website...it will help me out.

[@spyrosplays4620]

The link to the images don't work :(

[@olegbaskakov3399]

Tirri. In links you should include the names of menu items inside anchor tags. Not outside.

[@pranayrakshit3144]

yes

[@edberaga]

Thank you for this turtorial!

[@Avni-sf1hr]

It is *tutorial*

[@GowthamTirri]

Just like any other developer, he did a typo* my friend 😅

[@julianvelez6563]

Nice bro

[@GowthamTirri]

Thanks