here "justify content:center" is making the content center vertically, let me tell you why this is happening....when you set flex-direction as column, then you use justify content then it makes the content vertically center....and when flex-direction is set as row(default), then "justify content:center" sets the content to center horizontally...i hope thats clear!......u can play flex box froggy then these concepts will be more clear
btw harry sir had taught this concept in last videos only. however thanks for the box froggy information. i will definitely try it as i want to practice more
because justify-content alter the space around axis where flex direction is pointed. for example- if your flex direction is row it will distribute space along x-axis and for column it will distribute along y-axis.....i hope u got ur ans🙂
Sir inone before pseudo header me kiu lgaya body me kiu ni agar header me lgaya to background i,age ne poori jgah kese le lyi bcz section header ke wad aa rha
I love the way you teach. You don't just jump to topics by skipping some basics. You clear the basics first which i like the most. Its my 3rd day and i have made a good looking homepage. Keep it up bro.
POINT OF THUS VIDEO : If we wanted to reduce opacity of bg we would have to do it in body{} which would reduce opacity of text also. So to seperate bg and text he used ::before with bg & no content. Now reducing opacity in section::before selector reduces opacity of bg but not the text because they are seperate now. Correct me if I am wrong but I think this is what is happening
I'm form Pakistan's and harry brother your are doing very great work, yours these lectures are very help full for me and my students. Thanks a lot and good wishes for you and your family.
Harry Bro there's no-one who could have taught it any better. Thank you for this series and also for doing it for society i.e. for free, it now even inspires me to do something for this society to make it better. Thank you very much brother.
today i am very happy for this kind video and this video help me above trillion + because i was very frustrated but finally i get the solution from this video (video start 15:05).actually i was working on a project (my school website) ;i have to spend about 10 hours just a simple problem in css which was "z-index:-1"; in which i have to research every where just wanted to solve that problem.problem was in img styling,i have already created header,navbar separately and under navbar i heve to include a group photo in styling mode and under group photo i have to include stuff member.but when i included images one by one with card info;all boxes were good but when i scroll down images were overwriting above navbar and i am getting stuck and' i try and try ,again and again' and finally i get the solution from your video and thank you very much and you know sir , i am your old subscriber.i watch about all video on your channel to learn something from you:- " Learn In One Video In Hindi "(javascript,html,php,etc...). 1.---some css style not included here as header,navbar,bg1 etc.. 2.--in this code,if you not include css "z-index:-1" property you will definitely stuck and get frustrated. here some styling is missing which i indicate line no 1. 3.--Always code with harry and guys please subscribe this channel and also hitting the playlist for your help which was created by harry bhai link is here : th-cam.com/channels/eVMnSShP_Iviwkknt83cww.htmlplaylists
Harry Bhai apne ik trh s mera future bna diya h...m CS ka student hn or mjhe uni m oop c++ m prhai gai but mera us m interest nhi tha. mera we ki trf tha but mjhe web m y smjh nhi a rha tha k kahan s shuru karoon and then i got your course that changed my life or ab m bs web ki trf dehan deta hn uni m bhi bs degree ki had tk kch nhi prhate zaleel kr k paper de dete hain... knowledge to m aps l rha hn. May God bless you bahi. Thank you for all your hard work.
Sir Harry Many Ap ky channal py any sy pahly Technology Word Channal Sy Web Development Sekh raha tha But Ap ny to jasy consept sy bataya ha Maza a giya ha Love you Sir
waao bhai kitni acchi website bnane sikhaai h apne mene try kia maja agya me apke video dekhta hu saath saath me khudse type krta hu shortuct bhi use karta hu but maja ata h apnse krne me
at 6:29 I think it is the align-items center that is getting your items to vertically center The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
no here "justify content:center" is making the content center vertically, let me tell you why this is happening....when you set flex-direction as column, then you use justify content then it makes the content vertically center....and when flex-direction is set as row(default), then "justify content:center" sets the content to center horizontally...i hope thats clear!
👉REMEMBER: 1)When flex-direction:row then:- a)Align-items work VERTICALLY. b)Justify-content works HORIZONTALLY. 2)When flex-direction:column then:- a)Align-items work HORIZONTALLY. b)Justify-content works VERTICALLY.
Hello harry sir. I will be having no words to thank you if I will learn making websites from your course. I have completed 31 tutorials as of now. Thanks very much. And could someone tell that if one will complete this course (not just complete but if he/she learnt all the things seriously) then will he/she be able to do freelancing as web developer???
In case you are wondering, we could have decreased opacity without using the before selector and set z-index as -1. But it's used here for demonstration, if you want to see the actual use of ::before, see the building a website tutorial in this playlist.
*Easy way to place a Background Image with color overlay is* : body { background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0, 0, 0,0.4)) , url(../img//bg.jpg); }
Header sabse pahale aata hai website me or jaisa humne dekha ki sabse pahala tag humne header ka hee use kiya hai because hum header lagana chahte hai ya navigation bar at the top. or issi liye hum chahte hai ki website me sabse pahale background image load ho sabse pahale header ke bhi pahale.... to hum issi liye yaha likh rahe hai ki header :: before means ki please ye header ke before yaane header ke pahale ye jo bhi meine dekr rakha hai header::before {} wali property me wahi sab header ke pahale lagao... yaane overall ...sabse pahale background image set karo...ya lagao
@@jankipatel2392 in background: url() harry bhai ne cover property use kari hai na...and width and height 100% set kiya hai na & position absolute se top: 0 and left: 0 kiya so wo black line bhi chali gayia😊
AR Mein Machine Learning Aati Hai Warna Toh Vo Bekaar Ho ( Mere Hissab se ) Iss video main jo app h uss app Ne bhi Machine Learning Use Kri H th-cam.com/video/3XuZ7GHhvJU/w-d-xo.html
my age is 12 & i have to become a programmer so my father has told me that there were codewithharry youtube channel here you can easily learn programming & now I am a profitable web developer. Thanks Harry Bhaiya 😘😘😘😘😘😘😘😘😘😘😘😘
here "justify content:center" is making the content center vertically, let me tell you why this is happening....when you set flex-direction as column, then you use justify content then it makes the content vertically center....and when flex-direction is set as row(default), then "justify content:center" sets the content to center horizontally...i hope thats clear!......u can play flex box froggy then these concepts will be more clear
btw harry sir had taught this concept in last videos only. however thanks for the box froggy information. i will definitely try it as i want to practice more
because justify-content alter the space around axis where flex direction is pointed. for example- if your flex direction is row it will distribute space along x-axis
and for column it will distribute along y-axis.....i hope u got ur ans🙂
Sir inone before pseudo header me kiu lgaya body me kiu ni
agar header me lgaya to background i,age ne poori jgah kese le lyi
bcz section header ke wad aa rha
Jazak Allah , Brother....
@@nileshsingh2076 thanx
I search a lot on TH-cam for web development course and my search end here..all thanks to you Harry bhai..this course is best on whole TH-cam
you made my programming life easier
Thanks
You are the only best thing that has happened to me this year.. God bless you sir!
i agreee
agreed
SUS AF
sir plzz can u guide about source.unsplash bhut koshish kk baad bhi mujha isaa use krna mhi aya
@@tayyabhassan6018 just copy the link from harry's source code which he provides get the image url from here
I love the way you teach. You don't just jump to topics by skipping some basics. You clear the basics first which i like the most. Its my 3rd day and i have made a good looking homepage. Keep it up bro.
POINT OF THUS VIDEO :
If we wanted to reduce opacity of bg we would have to do it in body{} which would reduce opacity of text also. So to seperate bg and text he used ::before with bg & no content. Now reducing opacity in section::before selector reduces opacity of bg but not the text because they are seperate now. Correct me if I am wrong but I think this is what is happening
You are absolutely right bro and also solved my confusion, thankyou very much.
@@abhinav9793 thanks
@@pillu562 your welcome
bro kindly tell me how to use unsplash random images url as nowadays there is no url available for random images am really confused kindly help
@@ABDULREHMANCHUGHTAI1 copy the url from harry's code . it will work just same 😉
I'm form Pakistan's and harry brother your are doing very great work, yours these lectures are very help full for me and my students. Thanks a lot and good wishes for you and your family.
Harry Bro there's no-one who could have taught it any better. Thank you for this series and also for doing it for society i.e. for free, it now even inspires me to do something for this society to make it better. Thank you very much brother.
go watch global mentors and then say
you are very right
Don't watch 💯😐
today i am very happy for this kind video and this video help me above trillion + because i was very frustrated but finally i get the solution from this video (video start 15:05).actually i was working on a project (my school website) ;i have to spend about 10 hours just a simple problem in css which was "z-index:-1"; in which i have to research every where just wanted to solve that problem.problem was in img styling,i have already created header,navbar separately and under navbar i heve to include a group photo in styling mode and under group photo i have to include stuff member.but when i included images one by one with card info;all boxes were good but when i scroll down images were overwriting above navbar and i am getting stuck and' i try and try ,again and again' and finally i get the solution from your video and thank you very much and you know sir , i am your old subscriber.i watch about all video on your channel to learn something from you:- " Learn In One Video In Hindi
"(javascript,html,php,etc...).
1.---some css style not included here as header,navbar,bg1 etc..
2.--in this code,if you not include css "z-index:-1" property you will definitely stuck and get frustrated. here some styling is missing which i indicate line no 1.
3.--Always code with harry and guys please subscribe this channel and also hitting the playlist for your help which was created by harry bhai link is here : th-cam.com/channels/eVMnSShP_Iviwkknt83cww.htmlplaylists
B.H.School
#member{
padding:0px;
margin:0px;
}
.column{
float:left;
padding:20px 50px;
text-align:center;
width:80%;
height:90%
display:block;
}
.card{
padding:40px;
padding-bottom:50px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.5);
}
#member img{
position:relative;
width:100%;
height:50%;
opacity:1;
object-fit:cover;
border-radius:50%;
-webkit-transform:scale(0.9,0.9);
transform:scale(0.9,0.9);
-webkit-transition:all is ease;
transition: all is ease;
z-index:-1;
}
/*img:hover{
-webkit-transform:scale(1,1);
transform:scale(1,1);
}*/
.title{
color:#999999;
}
@media screen and (min-width:650px){
.column{
width:30%;
padding:20px 20px;
}
}
B.H.School
Home
About
Contact
Courses
More..
Our best Teacher
etc
principale
lorem ipsom...
etc
Asst.Teacher
Hi ,My name is etc and i am the instructor of B.H.School
etc
Asst.Teacher
Hi ,My name is etc and i am the instructor of B.H.School
etc
Asst.Teacher
Hi ,My name is etc and i am the instructor of B.H.School
Barkat Ullah
Asst.Teacher
Hi ,My name is etc and i am the instructor of B.H.School
Nice...👍👍
Good
why did u link css file while u already have done the styling in tag??
looking for the comments that says shuru se padhao harry bhai
😂.
You can't find something that doesn't exist 😂
suru se padhao harry bhaiya
@@ajiteshmishra lol
😂😂bde harami ho bete
shuru se padao harry bhai
Harry Bhai apne ik trh s mera future bna diya h...m CS ka student hn or mjhe uni m oop c++ m prhai gai but mera us m interest nhi tha. mera we ki trf tha but mjhe web m y smjh nhi a rha tha k kahan s shuru karoon and then i got your course that changed my life or ab m bs web ki trf dehan deta hn uni m bhi bs degree ki had tk kch nhi prhate zaleel kr k paper de dete hain... knowledge to m aps l rha hn. May God bless you bahi. Thank you for all your hard work.
Or ab 9 months bd aap Harry Bhai sy seekhny ky bd kiya kr rahy hain?
Tip {: By default z-index is 1 for all the elements; 😉
}
ha malum tere bhai ko mat sikha
ty :)
Sir Harry Many Ap ky channal py any sy pahly Technology Word Channal Sy Web Development Sekh raha tha But Ap ny to jasy consept sy bataya ha Maza a giya ha
Love you Sir
For the first time with tutorials I feel like I am learning something..All thanks to harry bhai😍💗
waao bhai kitni acchi website bnane sikhaai h apne mene try kia
maja agya me apke video dekhta hu saath saath me khudse type krta hu shortuct bhi use karta hu
but maja ata h apnse krne me
Sir You are the best teacher with your teaching method !!!👍
One of the best teacher in my life Love you Harry bhai....♥️♥️
Thank you Harry bhai ye video se meri 2,3 problem solve ho gai like lite background 🤗🤗
Really sir !!! this type of content can't be found in paid courses either.YOU did really great work Thank you.
A really good website I am happy now I can create the website. Thank You.
Can you explain a bit more about the properties you used with header::before? It all happened in an eye blink & without any idea.
That's what I was thinking 😅
@@saarthakjohari9045 i am thinking rightnow
you would have missed the content thing or u forgot to put apostrophe in url
That's what I am thinking Right Now... 😅
True, what was even the purpose of it? It was the same any way you could have achieved the same results without using pseudo-selectors.
This is a great trick because when i looked online, most people were saying there is no way to reduce just the background image opacity
The best tutorial ever ever ever!!!!
i have already learnt web development from other yt channels but you are the best
at 6:29 I think it is the align-items center that is getting your items to vertically center
The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
That's what i am thinking too.
Yes absolutely Correct!
no here "justify content:center" is making the content center vertically, let me tell you why this is happening....when you set flex-direction as column, then you use justify content then it makes the content vertically center....and when flex-direction is set as row(default), then "justify content:center" sets the content to center horizontally...i hope thats clear!
@@zahidraza1902 👏👏👏...ryt
Because flex direction is column.. so text align n justify content horizontally n vertically
boht badhiya website banayi harry bhai
What an amazing work you've done for us thank you so much for this amazing course..❤️
you are the best teacher for coding. thanks sir! God bless you sir!
This is amazing bebsite created by Harry sir!.
That lockdown due to covid-19 has transforming myself to one of the best coders of India with the help of Harry Bhai...🖐️❤️
tu kaha pohche bhai
@@sameerkhan-m7n8m😂😂
@@sameerkhan-m7n8mabhi pubg Khel rha hoga lockdown ne adat laga di hogi 😂
Lots of love to you harry bhaiiiiiiii,,, You are a living Legend❤❤❤
Meaning of Technique is fulfilled by Harry Bhai....tu mera bhai hai..💓
Guys everybody like harry bhai video's because he is giving his 101% love uh bhai touch wood❤️💝❣️
👉REMEMBER:
1)When flex-direction:row then:-
a)Align-items work VERTICALLY.
b)Justify-content works HORIZONTALLY.
2)When flex-direction:column then:-
a)Align-items work HORIZONTALLY.
b)Justify-content works VERTICALLY.
thanks man
ty bhai
concept of main axis, main axis change the way we are heading.
Summarized in nutshell.
Thank you
Thank you so much Harry Bhai start let kiya but end jaldiii krunga sb videoes dekh ke ...
Hello harry sir. I will be having no words to thank you if I will learn making websites from your course. I have completed 31 tutorials as of now.
Thanks very much.
And could someone tell that if one will complete this course (not just complete but if he/she learnt all the things seriously) then will he/she be able to do freelancing as web developer???
Of course you can do it
Harry bhai you gave me the way of life how to create a web site you R the BOSS
In case you are wondering, we could have decreased opacity without using the before selector and set z-index as -1. But it's used here for demonstration, if you want to see the actual use of ::before, see the building a website tutorial in this playlist.
So the same process can we write in the body where we entered the bg link can we?
@@sankalpsachan9199 yes, probably. I did this a while ago .. little rusty. Give it a try
@@misanthropy101 aaaa but it did't worked and i think i got it why
@@sankalpsachan9199 why?
which opacity? decreasing body opacity will blur everything in body
i think you are the best youtuber for coding your way of teaching is very nice
Waiting for this video.
Thank you sir.
Masa aa gaya bhao hi badiya tareeke se samjaya aapne sir ji...love your videos thoda sa late dekh raha par aajyenge track pe
5:15 b4 & after pseudo selectors
Amazing web development course I love it. Thanks, Harry bai You are awesome.
I access all the videos......
ohh man align-items : align items in vertically and justify-content: justify the content in horizontal dirrection.
who is agree with me?
No body
@@ru-mu3065 Hahaha
Free me A1 quality content 🙂
Biggest thanks 👍❤️
*Easy way to place a Background Image with color overlay is* :
body {
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0, 0, 0,0.4)) , url(../img//bg.jpg);
}
Best
kamal ki hai
padhane ka tarika is vey good hai bhaiya, in desi language
Dikha dea na Vai..apne oukat..😂😭
Bana dea na beautiful website 😍😍
thank you so much harry bhai kaash saare teachers aap jaise hote mza aa jata
Pls sir explain header : : before property
Header sabse pahale aata hai website me or jaisa humne dekha ki sabse pahala tag humne header ka hee use kiya hai because hum header lagana chahte hai ya navigation bar at the top. or issi liye hum chahte hai ki website me sabse pahale background image load ho sabse pahale header ke bhi pahale.... to hum issi liye yaha likh rahe hai ki header :: before means ki please ye header ke before yaane header ke pahale ye jo bhi meine dekr rakha hai
header::before {} wali property me wahi sab header ke pahale lagao... yaane overall ...sabse pahale background image set karo...ya lagao
best tutor i have ever met in my life thank u so much sir for your efforts
When you start the course is Java script I wating for this
javascript ka course katam bhi ho chuka hai
Kab ham to playlist ko bookmark kar kiya hai
Thanks Harry bhai. Started from tutorial 1. Now I am at the 33rd video.
Bro aapne css k flexbox m btaya th k justify content s content horizontally ho jata h lekin yaha pr apne ulta btya h ...plz anyone help me out...🙏🙏🙏😭
bhai flex direction column kiya hai
toh phir justify... align ke jaisa behave karega & align.... justify jaise
@@___vijay___ thanks bhai
Maja aa gya Harry bhai ye website ko dekhke.
bhai what is center center/cover in background-image?
Yeah He didn't explain it. Center Center is position along x-y axis. Cover will stretch the image appropriately along x axis and y axis
Harry bhai🥺🥺love your teaching skills ❤️ Harry bhai angaaar hai baaki sab bhangaar hai
How header:: before can cover whole background...??
Sir please ans..
@NULL no I don't know??
@@jankipatel2392 in background: url() harry bhai ne cover property use kari hai na...and width and height 100% set kiya hai na & position absolute se top: 0 and left: 0 kiya so wo black line bhi chali gayia😊
Bahut khoobsurat website ❤️
Brother work on augmented reality on web apps
@@LabhamJain Bhai machine learning nhi karni hai AR pe kaam karna hai
AR Mein Machine Learning Aati Hai Warna Toh Vo Bekaar Ho ( Mere Hissab se )
Iss video main jo app h uss app Ne bhi Machine Learning Use Kri H
th-cam.com/video/3XuZ7GHhvJU/w-d-xo.html
@@LabhamJain AR aur ML me bht fark hai bhai ye sirf AR wala app hai isme ML ka koi use nhi hai
@@zaidkhan4877 jaise TH-cam ML Use Krta Hai Vaise Hi Ye App Bhi Use krta h
And Mere Dost Ki Team Ne Hi Ye Banaya Hai
kyaa kehny hurrry bhai .... just too good..
from pakistan
can anyone please tell me what is background music at the end of videos. I am really fantasize.
Vibe Tracks - You Like It
@@momithasan9162 ... thanks buddy 🎉
so beautifull website bnai hai main ne herry bhai aapki terha bilkul thank so much yr web designer ka course sikhane k liye herry bhai
Harry bhai, exactly samaj me nahi aaya..
Ye kya kiya aapne.. header::before aur ye sab..
I mean, confusion ho gaya background ko leke
Thank you harry bhai opacity use karne mein kafi prblm hoti thi abhi sab samaj gaya acche se.
Thank you so much bhai
I'm learning so much from you.
I can't thank you enough
my age is 12 & i have to become a programmer so my father has told me that there were codewithharry youtube channel here you can easily learn programming & now I am a profitable web developer. Thanks Harry Bhaiya 😘😘😘😘😘😘😘😘😘😘😘😘
Harry bhai mjaa aagyaa itne bdia website se bnkee 😊 thanks
Thank you so much for these videos and I like this change.. hindi mein... 👍
Bahut hi kammal ki website bana diya bhai...... 🥰🥰🥰
I'm very thankful to you sir.
I learned many of things from your video.Thanks for giving us so much for free.
may god bless you.
Sir You are great
Yaar ye to bahot hi Kamal ki website hai 👍🔥
You really created amazing design brother...Thanks
This lecture is really amazing ❤❤
you and brad traversy are enough to master web development
thanks brother for source code it really saves time
Excellent! Tutorials. Recommended for every body.
website kya dikh rhi hai harry bhai, dil khush kr dia, man krta hai website ko dekhte hi rha💚
best teacher for any computer language = harry
Your are just Love Sir Harry.. May Allah Bless you More. and keep teaching us. Lots of Love sir
Harry Bhai tusi great ho tohfa qabool kro
Love from PAKISTAN ❤️
wow youre the best teacher ever..thank u so much
عمدہ ویب بنی ہم نے بھی ساتھ بنائی بہت دلچسپ تجربہ رہا ہے۔
Bht achi website bnai hai harry bhai..
Most helpful video in this playlist.... 👍👍 Keep it up Harry bhai ... 😀
You are the Best Harrybhai!
In every CodeWithHarry video, I listen Thanks for watching music, I feel satisfaction that I learned something new.😃👍
harry bhai kya website banai
wah bhai wah maja aa gaya
Wow Harry Bhai Kay Website Banani Hai🙏👌👍
Mst website banai h harry bhai❤❤❤❤❤✌✌
Just Superb Harry bhai ❤
Yaar kya hi website hogya Sirji😙💗
Harry bhai ek portfolio banane ka tutorial le ao, ekdm mast sa garam garam 🐱💓
you are the greates project you ever work on
sir duperb design hai website ka ...........thanks for videos..
Bahut enjoy k sath program sikhte hai☺☺👌👌👌
You are the best 😘❤️💛 Harry bhai
thanks a lot harry bhai from Pakistan much respect Sir
Harry bhai aap to zero programmer ko bhi hero bana sakte he
👏🏻👏🏻👏🏻👏🏻
Bhai bca krne chla gya kuch samajh nahi aya or phir apki video dekhni shru kar di kafi kuch seekh gya Harry Bhai love u from bihar
Love you sir this video is very amazing, superb,excellent 🤩🤩