Creating Fully Responsive Website Project Using HTML & CSS in Hindi | Web Development Tutorials #39
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- ► Source Code & Notes: codewithharry....
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutori...
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hin...
►Python Complete Course In Hindi - • Python Tutorials For A...
►C Language Complete Course In Hindi -
• C Language Tutorials I...
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials I...
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video...
►Django Complete Course In Hindi -
• Python Django Tutorial...
►Machine Learning Using Python - • Machine Learning Tutor...
►Creating & Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Developmen...
►Advanced Python Tutorials - • Intermediate/Advanced ...
►Object Oriented Programming In Python - • Object Oriented Progra...
►Python Data Science and Big Data Tutorials - • Python Data Science an...
Follow Me On Social Media
►Website (created using Flask) - www.codewithhar...
►Facebook - / codewithharry
►Instagram - / codewithharry
►Personal Facebook A/c - / geekyharis
Twitter - / haris_is_here
Harry bhai tumhari sabse achi baat ye hai ki tum jo project ya playlist start karte ho ushko pura end bhi karte ho. 😊
Nahi yar cpp ki play list me video 35 hi hnain
@@bhargavsavaliya5952 BHAI CARRY NE BOLA HAI WO CPP SIKH RHA HAI ISILIYE VIDEO DELAY HO RHE
20:30 Position relative karne se navbar ki height kam kaise ho gayi ?
@@sameersharan8564 100% height honay k baad b 19:00 pe height background half page pe q arha hai ? Full height pe black q ni hai ?
@@bhargavsavaliya5952 bhai cpp mtlb ?
This takes a lot of effort man. There are courses in udemy but you are doing it for free. You really deserve respect. From Australia
Udemy k bhi free m mil jayengey
flex and align not working how to save and make them work
Better than the Udemy course, He explains everything deeply.
@@suraj-op2bx udemy classes kahan sy milyain gi??
@@amanagantitejognya5141 still facing problem?
It was a really fun project to work on. I learnt a lot. Thank you so much for sharing your knowledge at this platform, it helps all the people who are willing to learn web development.
Your way of teaching has clear concepts and simplicity which makes it easier for viewers to follow through and have better understanding of the topics covered in this playlist. Hats off!!
👏👏
I don't skip add just because of i want to payback of your hard work for us thank you so much harry bhai and make more website project videos Allah bless you...
Click karke back kar dene ka. Usko paisa bhi milega aur full ad dekhne se farak nahi padta.
So better cli ck on the ads so that he gets paid for that small amount. Also don't click too often and only on his alone else he'll be suspected of false clicks.
@Muzzammil Shaikh E RMI MU M E
Images kahan se download honge
You are my best web development teacher
20:30 Position relative karne se navbar ki height kam kaise ho gayi ?
@@sumitbaghel7250 Bro laga pata??
@@sumitbaghel7250 bro isliye hogyi kyuki relative to its parent and parent is navigation bar
Yes bro i am doing the same thing using before but nothing is happening..if anybody know plz. Tell me bro
Yes this is right my too
I recently completed this course. I was very happy and after completing this course I feel the power in my hand. Like I am a college student and my classes are online. But in online classes, I don't understand very much. But this (your) online course is very well understood by me.
Appka course online hote hue bhi itni acchi se samaz mai aata hai. Itna acha to koi offline mai bhi nahi padhata.
Very huge respect to you. As you are doing it for us without charging fees (you're so kind). May God fulfill all your wishes.
I also completed your python course of 15 hours.
You are the best. You make the youtube as a very good platform for online learning. This channel is a very good platform for all engineering students.
Again thank you very much.
Sir your channel should be 1M subscribers minimum....
Your likes should be IM more..
But all are busy with tik-tok or others bakwas sites...thanku so much....
Absolutely Right bro...log faltu h to faltu kaamo ke pichhe hi to bhagenge...
@@arunjain2987 100% height honay k baad b 19:00 pe height background half page pe q arha hai ? Full height pe black q ni hai ?
@@John12685 haa aur aur navbar ki position relative karne pr how did it got that small what is the logic behind it
update: tiktok is banned in india
update : he has got over 1M subscribers
fixed properties for *Before* Pseudo seletor
content: "";
position: Absolute;
Background/Background-color: ....;
Width: xyz%;
Height: xyz%;
Z-Index: -1;
opacity: 0.X;
remember or copy this information for future use, and save your time. 🙏
Kyuki agar ham before bina use kare background lagayenge aur fir opacity badalne ki koshish karenge toh text ki bhi opacity badal jayegi lekin agar hamne before use karke kia toh bas background ki hogi opacity kam text hamesha dark hi rahega
@@DeepakPanwar-gv7rk @Osama Khalid Ha aur jo logo laga rahe hai uski bi opacity kaam ho jayegi jisse bo clear nahi dekhega
@@DeepakPanwar-gv7rk yr yeh bta de koe bacground image kaise fix pori screen pe nhi hurhii agrr woh center center no repeat cover krne se image ghaib hujati
@@sheriibhai2408 background-size: cover;
hello ye project me clients ke background ki image nahi show kar rahi he psedo laga kar , 56.30 video me. solution he kuch?
After all the research I did, I can now finally conclude that this playlist is the best playlist for the web development course. Thanks Harry bhai!❤
Bhai mera responsive kasam hi nhi kr rha h yrrrr kya yrrrr m 1ghnte se preshaaan hu plzzz koi btado meri phone. Css me background color change nhi ho rha h m atakgaya hu yrrrr😤😤😤totally frustrated😑😑😑😑😑😑😑😑😑😑😑😑😑😑plz help
@@Kalufuning damn me bro
@@japoetrycollection5201 kya bhai tumhare sath bhi ho rha h kya
@@Kalufuning wapis nai batao Dhyan se aur Har ek code dalne ke bad check Karo ya do moniter lagalo app ko kasam se Kam ek din iss jise web site ko banane mai Dena padega ga .
Mere ko bhi bhoot time laga broo
But all can do it.
@@Kalufuning bhai thik hua kya Mera bhi same hora to comments dekhne aaya abhi😂
Thank you for giving this webde series for free.we have to given above 10000 to same for learn this types of tutorial in outside world.
i already gave 13500 ... Regret...!
20:30 Position relative karne se navbar ki height kam kaise ho gayi ?
@@sumitbaghel7250 Bro wo islye k navbar ko relative position de kr ham ne navbar ko parent bana dia. Or jo :: before wala part hao wo uska child ban gya. So an child parent k according hi height lega. Hope u clear now
@@John12685 thank you bro kisi ne bhi bahut samay tak nahi bataya fir maine ise aise hi yad rakh liya tha samjhane ke liye thank you
@@sumitbaghel7250 U r welcome bro. No problem
We people are really lucky to have great teacher such as you you provide fully free courses and useful courses thank you!!👍👍🙏🙏
Pls help me out... Nav bar logo full page pr aa rha.... 😢
@@soldiernamami2303 set the logo height
mera bhii phly pury page pa aa raha tha phir ma na iskii height ko set kia phit thk aa gaya
Finally i made my second project in html,css just because of you ........Thank You so much Harry Bhai❤
Whenever i feels alone and think about my career in software development then i think about your free course and suddenly i go to your channel and start making project for my "CV".
Thanks Harry Bhai you are very kind may good bless you bro...you are a source of Inspiration for me.
Best youtuber ever...Kya bolti public...
navbar::before ki height 100% krne pr vi usne sirf aadhi hi height kyu cover ki?
Hello can you please help me
Hello
I'm unable to add images
@@simrangupta5910 yes... I can ..dear
it took me 9 hrs+ to make this responsive website (almost same) watching your tutorial and at the end i dont know what happened my whole css code got changed , dont know how and now it looks so bad.
It's Ok you tried and you know that you can do it .... So don't worry 🤠
brother Where can I find all pictures ????
@@mostafasadik636 try unsplash
Sir you have literally helped the students who cannot pay lakhs of rupees. A big salute to you
Tip from Kevin Powell the CSS King -
1. Make the website keeping in mind the mobile first.
2. Then add things to it to make it desktop compatible.
Thank you for the information buddy
Really???
th-cam.com/users/shorts3sWVuYeX0E4?feature=share
@@sourabhdhyani6695 yes.
But what's the benefit of it man ..
I have watched out your web development, learn in one videos, python, Python-Django, python-flask n Python-tkinter courses....
@Mystical Saints Can you please share me the link of your website so that I can help☺
@Mystical Saints well its seems you just get zoomed in try ctrl+mouse scroll😂
@Mystical Saints even i am facing the same issue!
@@teraasajan Facing same issue, did you find a solution?
Thank You HARRY BHAI .... You're great .... Because of you I can able to create my first responsive website ❤❤❤❤❤
17:00 navbar
22:30 home
23:00 bg in home
26:50 utility class
28:40 styling text
31:20 - 34:20 styling button
36:40 services
51:00 client
1:15:00 Responsive
1:03:50 footer
1:38:38 Smooth scrolling
Thank you Harry, I gained tons of knowledge. God Bless!
@Mystical Saints you have to set it on responsive when you inspect element from it is available on top
@@kartikgoswami 8 months baad reply kar raha hey bhai. ab tak woh banda expert ban chuka hoga
You are great harry bhai. Nobody can denied the fact that you are the best coding and web development teacher on TH-cam . ❤️❤️❤️❤️❤️❤️❤️❤️❤️👍👍👍👍
@@soldiernamami2303Sure bro. What you want me to help you with. I will be happy to help you.
You are such a great soul. I really really enjoy your tutorials and I really respect your efforts. 👌👌✌✌✌👌👌👌🥰
Bhai just abi apke iss project 2 ko pura kiya hai, aj pure din or raat ke 3bje yani abi tak isey dekha or khud web bnayi hai. Harry bhai thank you so much is web development series ke liye 🙏. Bhai ek waqt esa hoga jab apki videos per millions of likes aayenge, or jald hi. Keep growing. ❤️❤️🙏.
भाई आपका तरीक़ा बहुत अच्छा लगा पढ़ाने का बहुत मजा आता है आपके ट्यूटोरियल देखने में पता ही नहीं चलता कि एक दो घंटे कब निकल गए। बहुत बहुत धन्यवाद सर।
You know what I left this Project 2 and moved to later videos, the idea behind it was that I left this project for my revision of HTML and CSS covered up to this video. And today I finally revised all the concepts.
It was indeed a beautiful website.
Learnt so many things I had forgotten.
Thank you so much Harry Bro for creating such free videos for us.
Love you ❤
navbar::before ki height 100% krne pr vi usne sirf aadhi hi height kyu cover ki?
@@unusableaccount9319 try without justify-content and align-items. With these, there will be some overflow upwards in some cases which we don't see.
Bhai mera responsive kasam hi nhi kr rha h yrrrr kya yrrrr m 1ghnte se preshaaan hu plzzz koi btado meri phone. Css me background color change nhi ho rha h m atakgaya hu yrrrr😤😤😤totally frustrated😑😑😑😑😑😑😑😑😑😑😑😑😑😑plz help
@@Kalufuning dont know if late but don't use "css/" behind ur "responsive" CSS file while linking...or at least that was the issue for me
@@kunwarsingh1274 bro thnks
You are my best web development teacher. Harry Bhai Big Love From Pakistan . It amazing Project i like it very much
Successfully created my first responsive website 😀 It happened because of you, Harry ❤️.... Thankyou for sharing all the tip and tricks throughout the video :)
I am also learning currently.
from where u get images?
Pls help me... Mere nav bar me logo full page pr a rha... Starting vala jisme harry bhai ne apni foto ka logo lagaya h... Mera corner me nahi aa rha.. Mene same process kri h fir b nahi aa tha.. Pls help
@@soldiernamami2303 apka img ka dimension ki waja se ho raha hoga
@@soldiernamami2303khud se logo ka size kam kardo, edit photo size use karke bahar ke tools se
Harry Bhai bht Bharya..... Zabardast 💓
Best Teacher 💓
Best Voice 💓
Best Way to Understand us 💓
Boostrap sy bh sekhao yr Harry bhai ...
Sada Khush Raho... AAmeeeen💓
You are amazing teacher...i think you are one of the best teacher of web development i have ever seen
finally done with this project started 22 january 2023 and today 25 january(finishing date ).
thank you a lot harry sir. beacause i was zero liltrally.A lot Of Respect from Pakistan.
Hats off to the hard work you have done to provide quality tutorials for so many languages.
Seriously you deserve a compliment. :)
Can you pls help me I'm struggling with my vc code 😞
@@soldiernamami2303what is your problem.
brother i created the website by myself but at some points i just take the reference i am just loving the course
This takes a lot of effort man. There are courses in Udemy but you are doing it for free. You really deserve respect. From Pakistan
I don,t like india But I like a man Who live in india by name Harry
Sir with due respect I really appreciate your work ypu are doing I want to request one thing plss lauch a live course for us paid or unpaid ur choice because some doubts are not cleared if they will be cleared it will be more easier although you are delivering quality content but doubts should also get cleared.thank you🙏🙏🙏🙏
Made my second website project successfully. But I didn't add responsive design fully because I felt it very hard. Will try responsive design in next project.
Yeah I too. As a newbie, making responsive is very hard for me now...but will learn with time
Ahh finally someone said it. I was finding it soo hard and it started to ruin my mood so I stopped making it responsive.
@@toobaaaaa62 Same. Responsive design seems hard. I used containers and flex properties but everything got messed up. Will have to learn that from scratch.
@@toobaaaaa62same
1.5 day laga par bana diya , kya concept clear hue hai flex, positioning and z-index ke Harry maza aagya. Also best way to achieve responivess fast is use developer mode effectively.
bro did u targeted #navbar twice, once in beginning while doing display flex and 2nd time when doing position relative? its not working for me because we cant target same element twice
I really needed a project from you.
.. Thank you so much bhai.
Iske baad mai apne projects bna paunga
@Mystical Saints ha ...bnaya maine ye
@@FbiCreates oh
Making it responsive is hell of a task!
I literally couldn't get that part😞
how did the navigation bar got in size by setting property to relative?
@@shouryamkumar6158 I wanna know too 😬
@@mohitkhandelwal1901 absolute and static act same here thats why!
1:15:05 , making the website responsive starts
1:38:38 smooth scrolling
Thank you 🙏🏻🙏🏻
You are such a good teacher😍
Keep it up we all are with you.🤗
0:59 Setting Up
3:48 Navbar
20:47 Section
one of the great great teacher i have ever find in my life.....
Advance congratulation for 1M
I apriciate you for doing such a great work may your life fulfil with all your dreams.
In sha Allah one day you will be able got 1M subscribers love from Pakistan
It took me two days to learn properly, thanks bhaiya.
Hey Harry, First of all, I would like to thank you for making this understandable playlist of web development.....
Secondly, I have completely played all your tutorial videos and understood them by coding them properly without error(s). I would like to say that, i have completely made an website according to your command in this video, but here the problem arising is, making website "Responsive", this is the most confusing css code. Lastly, I would like to share my website outlook with You, if possible..?
And Yes, you are an Good Web Developer!!
navbar::before ki height 100% krne pr vi usne sirf aadhi hi height kyu cover ki?
@@unusableaccount9319 q ki
Hello brother.
I've been learning python and many more things from your youtube channel and website.
I've a request for you
Please can you provide a video on creating an e-learning website like udemy or unacademy.
It'll be very helpful for me.
Thank you brother.
@Mystical Saints let me see what I can do .. I will reply soon brother
@Mystical Saints abhi tak reply nhin aya
abhi tak reply nahi aya bhai kr de yar ab to 1 saal ho gaya
amazing project bhaiya
thank u for all the help and support
people like u deserve padma bhushan
Bhai aapne 20:06 pe before lga ke uski height km krke kaise black ki hai code me to apne 100%ht. And width diya hai
Plz. Explain
making websites responsive feels exactly same as mastering your music after a mix ...
1:15:09 Responsive Website Code Starts
If you already that how to create a webpage but You dont know to make it responsive then you start watching from here. It will save time.
Sir Thank You So Much For very Important Course and wonderful project!!! i've loved it
Apki playlist follow kr rha hu web development ki
completed this projects in two weeks. Lots of things explored after learning the whole front-end. Special thanks to harry bhai.😀😀😀😀🥰
Can you pls help me? I'm struggling with my vs code
@@soldiernamami2303 I can send you the code..if you give me your email id
harry bro Please make a video on ADDING IMAGES & MAKING FOLDERS, I always stuck in this @codewithharry
Bro ,
Img ko copy krke jis folder m apka html k project save h wah ja k save kr do img ko apka kam hojayega
Harry sir....Very helpful video for beginners. you explain concept very descriptively which is very helpful for me because I have just started my development journey & I don't have any IT background.
If I wanted to discuss few doubts with you how should I ask?
To center an element -
display: block;
margin: auto;
if element are already block then give them a width -
width: 50%;
Great sir, lots of love and respect for you..
Bestest trainer on TH-cam. Thanks Harry Sir for making life easier in web development.....You are "THE BEST"...:)
Ppls help me..
Mera navbar me logo full page me aa rha corner me nahi aa rha... Sara sahi se code kianh jese vdo me h... Pls help
you have to use transition effect on hover like navigation and buttons and also the from section it will be great experience...........
A fault is found in your course. When we scroll down; the navbar gets overlapped by the images in the client section and the form in the contact section
i have no words to describe your talent and make understanding way
i watched entire night with coffee, u r a legend!! i used to think we need to write separate css for tabs and phones and it used to be a nightmare for me.. ur video really helped me alot understand css concepts.. finished almost half of ur web devt playlist.. u really helped me understand some css concepts more deeper which i was struggling to understand, ur the legend!! thnx man!!!👍
have you become web developer now?
Bhai mera responsive kasam hi nhi kr rha h yrrrr kya yrrrr m 1ghnte se preshaaan hu plzzz koi btado meri phone. Css me background color change nhi ho rha h m atakgaya hu yrrrr😤😤😤totally frustrated😑😑😑😑😑😑😑😑😑😑😑😑😑😑plz help
@@Kalufuning show code where u get stuck
Bhai thanks from 💓
When are u going to teach backend?
Yes!...same ques here ;
Thank you harry bhaiya i have completed my HTML CSS from you. It was a great course thanks for making me interested in this course. 🙇🙏
Hi Harry ,requesting u to upload a core java project which should cover all concepts of java from overriding to list in collection,will be gratefull 👍 ur doing a great work ...🙂
🦍🦍🦍🦍🦍🦍🦍🦍
Sir React js playlist Bano Plese
technical thapa ka h, wo bhi hindi m,mast h
Ye content mtlb kya hota hai
bro use max width to avoid over flow and also min-hight and using of rem for all elements is another method to make our website responsive by writing a liitel bit code by ging rem in all properties and in the end if we only change our rem font size by media quiries our whole webpage change according to our breakpoints
1:17:40 laughed a lot 😂, will understand if doing it at night having the same feeling as Harry Bhai.....
name - Surendra kushwaha
From Banda UP
Sir, kindly make a complete series on DBMS (SQL)
after web development
Your Big fan sir & regular viewer
Bhai gav k ho ya banda city k
@@selectiongurukul94 atarra
bhai i am also from up .i live in lucknow
@Mystical Saints I also faced similar problem , but it can be solved.
I don't clearly remember but,
As you proceed in the video, Harry Bhai make some changes on the position section of navbar and other tabs such as sticky...etc.
Till then you can try by making the inspect pannel as floating pannel
THANKX HARRY BHAI.I'M NOW LEARNING THE WEB DEVELOPMENT COURSE FROM U IN JAN 2023.YOUR WAY OF TEACGHING IS EXCELLENT.
what are you doing now?
i did not understood the before::navbar where you have used the absolute position with the width and height to 100% but why the height covers half of the page only ? and when you made the navbar class relative, how does it automatically fits the black background color wit the navbar accordingly??? anyone can tell me about this problem???????
The height means height of navbar not the actual height of body. Talking about the color, he had given the color as black on pseudo selector.
That is because Pehle Jab Position:Absolute tha for #navbar::before , then it is Width and height :100% was in regards to the body .
Body ki height utni hee hoti hai jitna content hota hai uske andar..
But when he added position:relative to #navbar (which is closest positioned ancestor to #navbar::before -which has position:absolute)
then #navbar::before will be 100% height and width in comparison to its to Parent(closest ancestor) (#navbar)
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body
@@reyheelb9805 aree bhai itna kon likhtaaa hai🤣
Bro Could you please make a playlist of react JS .It will be very much helpful.
THANK YOU HARRY BHAI VERY MUCH🤩🤩
I'm a commerce student then also enjoying my coding journey 😍🥳
thanks
Those who are getting stuck at 1:41:10 that your client section is overlapping navbar after position: sticky.
write ''z-index: 1'' in navbar, it wont overlap.
Please tell me my scroll behaviour smooth is not working.. first time it worked.. after that not working.. y
Thank you. I was searching everywhere for this solution. Now only I got the idea to search on comment section.
MERE PASS PC NHI HAI BUT PHIR BHI MENE PHONE MEIN VS CODE INSTALL KRKE PRACTISE KRTA HU
Yeh baat!!!
Kaisa
Gajab😂
Kya baat ha
Bhai kaise
ok i got it , its should not be navbar in your css if the id name is nav in your html file.
in video he initially set id in html as nav but changed it to navbar in css which is wrong, im happy that i figured it out by myself
👌👌
भगवान आपको लंबी उम्र दें और आप अपने सभी सपने पूरे करें।
sir at 19:25 you had set background using pseudo selector before and set height and width to be equal to 100% but I did not get it. Since while doing it height of navbar element is lesser than the background which we have . (While we inspect the element)
Height and width of 100% is taken by taking the reference of navbar.
While using absolute u have to make an parent element relative otherwise it will take viewport height .
So when he made navbar as relative . It took the properties of navbar height and width
100% height honay k baad b 19:00 pe height background half page pe q arha hai ? Full height pe black q ni hai ?
@@ayushmanmishra4091 pr usne half page kyu cover ki agr wo navbar k respect me height le rha hai to uski 100% height navbar jitni honi chahiye thi na
@@unusableaccount9319 It overwrites it's position from absolute to relative, so basically we declared navbar's position to it's parent element and in parent element we declared display: flex (flex-direction: row /*default*/) so according to row direction it adjusts his height. I hope this helps
@@praffulkamble4500 bhai thoda aur detail me smjhao please mujhe bhi yehi smjh ni aa rha
sir, you are doing stupendous job. May you live long and doing your work with the same impetus. I am from pakistan and i am very greatfull to you for making these videos free of cost. seriously harry bhai i have no words to say thanks to you. keep doing and shining with your effective vedios,
When Harry was about to say his secret of using 34 everywhere- me😲
When he said it-😐
Although I am following all the videos, but I am still confused between relative and absolute. Here ,while setting the nav menu….navbar::before he uses position absolute and then directly target navbar and set position relative. How both the positions differ from each other in this scanerio. Any help would be appreciable!!
watch the full video he made a mistake
Yea I am confused too
at 18:48 he has set the width to 100% , can anyone say 100% of what
@@amudalagopikrishna5745 i guess of the screen
@@amudalagopikrishna5745haa he set the width 100%, height for navigation bar so the occopy the space full 100%
Harry brothers you're great so hard work cse students ke liye TH-cam par Vrdaan ho 👍🙏
20:35
position relative karne pr how did it got that small what is the logic behind it
@@lemon-bf4lq bro why did background image is not showing in full screen inspite of using height:100%; and width:100%
@Mystical Saints Same happened to me bro that's why filahal keliye tooh maine responsiveness vala part baju mai rakha hai
@@nishantdalvi9470 1:11:00
pr check kro undock kr k
@Mystical Saints
1:11:00
pr check kro undock kr k
It overwrites it's position from absolute to relative, so basically we declared navbar's position to it's parent element and in parent element we declared display: flex (flex-direction: row /*default*/) so according to row direction it adjusts his height. I hope this helps
when i zoom in or zoom out in chrome my image n text come on one another
Harry bhai Kamal ho app, baval ho app ,dhamaal ho aap.
TH-cam par agar koi sahi me coding shikha Raha hai achhe se..
To vo sirf app hi
Thank 🎉 Harry bhai
can anyone explain at 20:29 when position became relative then how height of navbar is adjust automatically....?
It overwrites it's position from absolute to relative, so basically we declared navbar's position to it's parent element and in parent element we declared display: flex (flex-direction: row /*default*/) so according to row direction it adjusts his height. I hope this helps
@@praffulkamble4500 what is navbar's parent element?
@@anshumansharma4580 In this case navbar's parent element is a whole web page. If you don't know the parent element in relative position, you should watch his video #25 in the web development playlist.
@@praffulkamble4500 Thank you. I actually watched a couple of tutorials and could understand what I am doing wrong.
That is because Pehle Jab Position:Absolute tha for #navbar::before , then it is Width and height :100% was in regards to the body .
Body ki height utni hee hoti hai jitna content hota hai uske andar..
But when he added position:relative to #navbar (which is closest positioned ancestor to #navbar::before -which has position:absolute)
then #navbar::before will be 100% height and width in comparison to its to Parent(closest ancestor) (#navbar)
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body
I'm not able to add img in
pls help me anyone who hadn't faced such problem while doing this
same here
Same here
Same here
@Mystical Saints BRO THERE IS A OPTION FOR UNDOCK IN INSPECT
@Mystical Saints
bro husnain farooq is also my account there is solution
1:11:00 pr check kro undock kr k
Haary bhai seriuosly very very very very veryyyyyyyyyyyyyyyyyy greatful for your entire effort you've put for all of us,, free of cost..
Completed Designing the above webpage ....Took me 5 hours but it was worth the effort....
Thank u so much ..
20:36 couldn't get this part
I have the same question. Did you get it though?
Same problem
we created a pseudo selector and positioned it absolute right! So if we want it to take the same size as of nav bar we have to position the parent of ::before pseudo selector which is navbar so there we positioned it, as soon as we positioned it the ::before selector will cover the nav bar perfectly cause it is now positioned relative to nav bar i hope u understand 🙂
It overwrites it's position from absolute to relative, so basically we declared navbar's position to it's parent element and in parent element we declared display: flex (flex-direction: row /*default*/) so according to row direction it adjusts his height. I hope this helps
@@sankalpsachan9199 thanks it helped me
i got stuck in making the web responsive.....
hello sir apne puri course ka syllabus ek hi video mai cover kar diya 😀its really very helpful Thank you 👍 i am watching this video continuely without getting bored🤭 Thank you so much sir GBU
How can we use speech recognition to fill forms in html and please make backend too
20:30 Position relative karne se navbar ki height kese kam ho gayi ?
Position ka mtlb Apny parent ki trf jana ha to height apny parent ki trf jay gi isi liye
It overwrites it's position from absolute to relative, so basically we declared navbar's position to it's parent element and in parent element we declared display: flex (flex-direction: row /*default*/) so according to row direction it adjusts his height. I hope this helps
@@praffulkamble4500 i didn't understand.... please explain more
That is because Pehle Jab Position:Absolute tha for #navbar::before , then it is Width and height :100% was in regards to the body .
Body ki height utni hee hoti hai jitna content hota hai uske andar..
But when he added position:relative to #navbar (which is closest positioned ancestor to #navbar::before -which has position:absolute)
then #navbar::before will be 100% height and width in comparison to its to Parent(closest ancestor) (#navbar)
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body
at 54.45 instead of giving padding to client-items its better to give justify content as space evenly . as you said in flex-box tutorials
Jab hamne navbar ke pehle background-color : black dekr width aur height ko 100% kr diya tha to black color sir aadhi height tk kyu ai?
Container ka jitna size set karte hai utna hi background -color aata hai.
@Mystical Saints Inspect window nahi dekha raha kya?
@Mystical Saints agr apka telegram h to mujhe @DirtyToiletPaper pr msg kr dijiye aise youtube acche se smjh m nhi aa rha hai
Thanks Harry bhai Life me first website banayi hai bhutt maza ayaa!!!😄😄😄
Thanks you so much harry bhai for making this video such a wonderful web site for practice web development
Thank you so much ❤️
Love you harry bhai 🫂
Created my second website from this playlist !! Thanks Harry Bhai for your knowledge ...😃😃
Hii bro
May Almighty Allah accept your good deeds.
May Allah bless you and make you an establisher of prayer and give you Jannatul Ferdaous.
Lots of love ❤️ and prayers for you.