CSS Tutorial: Before and After Pseudo Selectors | Web Development Tutorials #33 

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

looking for the comments that says shuru se padhao harry bhai 😂.

you made my programming life easier

I search a lot on RU-vid for web development course and my search end here..all thanks to you Harry bhai..this course is best on whole RU-vid

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 the only best thing that has happened to me this year.. God bless you sir!

Tip {: By default z-index is 1 for all the elements; 😉 }

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.

Can you explain a bit more about the properties you used with header::before? It all happened in an eye blink & without any idea.

Meaning of Technique is fulfilled by Harry Bhai....tu mera bhai hai..💓

For the first time with tutorials I feel like I am learning something..All thanks to harry bhai😍💗

What an amazing work you've done for us thank you so much for this amazing course..❤️

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 : ru-vid.com/show-UCeVMnSShP_Iviwkknt83cwwplaylists 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

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

Sir You are the best teacher with your teaching method !!!👍

A really good website I am happy now I can create the website. Thank You.

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

Thanks Harry Bhai, You are the best trainer tutor, million of thanks for such type of Amazing content which help us to give confidence to do better.

The best tutorial ever ever ever!!!!

Waiting for this video. Thank you sir.

Amazing web development course I love it. Thanks, Harry bai You are awesome. I access all the videos......

you are the best teacher for coding. thanks sir! God bless you sir! This is amazing bebsite created by Harry sir!.

Thank you Harry bhai ye video se meri 2,3 problem solve ho gai like lite background 🤗🤗

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).

I'm learning so much from you. I can't thank you enough

Thank you Harry sir for sharing such amazing tutorials. You are toooooooooo good... :)

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

That lockdown due to covid-19 has transforming myself to one of the best coders of India with the help of Harry Bhai...🖐️❤️

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

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.

5:15 b4 & after pseudo selectors

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.

This was an amazing website sir. Learning a lot from you. Wish to make such great website all by myself soon. Thank you Harry Bhai.

i have already learnt web development from other yt channels but you are the best

ohh man align-items : align items in vertically and justify-content: justify the content in horizontal dirrection. who is agree with me?

👉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.

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

best tutor i have ever met in my life thank u so much sir for your efforts

Pls sir explain header : : before property

*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); }

Thank you so much for these videos and I like this change.. hindi mein... 👍

One of the best teacher in my life Love you Harry bhai....♥️♥️

Dikha dea na Vai..apne oukat..😂😭 Bana dea na beautiful website 😍😍

can anyone please tell me what is background music at the end of videos. I am really fantasize.

You really created amazing design brother...Thanks

Your are just Love Sir Harry.. May Allah Bless you More. and keep teaching us. Lots of Love sir

bhai what is center center/cover in background-image?

Brother work on augmented reality on web apps

Thank you so much Harry Bhai start let kiya but end jaldiii krunga sb videoes dekh ke ...

wow i just realized that how choosing perfect pictures with just simple tags we can make a beautiful website. am just a beginer so its hard for me to remember these tags but i will be able to it afterwards with more practice

How header:: before can cover whole background...?? Sir please ans..

When you start the course is Java script I wating for this

Harry bhai you gave me the way of life how to create a web site you R the BOSS

Masa aa gaya bhao hi badiya tareeke se samjaya aapne sir ji...love your videos thoda sa late dekh raha par aajyenge track pe

Harry bhai, exactly samaj me nahi aaya.. Ye kya kiya aapne.. header::before aur ye sab.. I mean, confusion ho gaya background ko leke

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...🙏🙏🙏😭

Thanks Harry bhai. Started from tutorial 1. Now I am at the 33rd video.

This lecture is really amazing ❤❤

thanks brother for source code it really saves time

In every CodeWithHarry video, I listen Thanks for watching music, I feel satisfaction that I learned something new.😃👍

thank you for really enjoying your course...

Thank you very much for this full course....

Awesome course 😃😃 Thank you 🙏🏻😁

Excellent! Tutorials. Recommended for every body.

Great video, I am enjoying these videos and learning alot

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.

Most helpful video in this playlist.... 👍👍 Keep it up Harry bhai ... 😀

Wow bro, every vid of yours is worth it

you and brad traversy are enough to master web development

thank you so much harry bhai kaash saare teachers aap jaise hote mza aa jata

nicely explained,,, thank your harry bro

I liked this website and video.Thank you!

Thank you bhai for this playlist

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

thankuh so much sir for delievering such a great knowledge

Thank you harry bhai opacity use karne mein kafi prblm hoti thi abhi sab samaj gaya acche se. Thank you so much bhai

i think you are the best youtuber for coding your way of teaching is very nice

Love you sir this video is very amazing, superb,excellent 🤩🤩

Excellent work.

wow youre the best teacher ever..thank u so much

you are the greates project you ever work on

Lots of love to you harry bhaiiiiiiii,,, You are a living Legend❤❤❤

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

WoW...what a nice Tutorial 👍❤️

you are just: . . . . . Awesome

You are great buddy Thank you so much man

I cant even believe that i made a beautiful website , by just listening to you carefully.

thanks Harry Sir.. video was useful..

Good Presentation.

kamal ki hai padhane ka tarika is vey good hai bhaiya, in desi language

bhaiya website is very good and thankyou for teaching

harry bahi thanks for your code its very easy to learn so easy.

Harry bhai mjaa aagyaa itne bdia website se bnkee 😊 thanks

Harry Sir your are amazing...

I was facing same kinda design, thanks a lott sir

Wow!!! Detailingly explained!!!!!!

thank's for this beautiful website design, because i want to learn this code and design 😀

You live 1000 years ,God bless you.

thank you sir ,awesome tutorial