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

Показать описание

Best Hindi Videos For Learning Programming:

►C Language Complete Course In Hindi -

►JavaScript Complete Course In Hindi -

►Django Complete Course In Hindi -

Follow Me On Social Media

Рекомендации по теме

Комментарии

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 can play flex box froggy then these concepts will be more clear

zahidraza

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

satyamrai

You are the only best thing that has happened to me this year.. God bless you sir!

harshnegi

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

pillu

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

TheSoccermanagement

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

killerman

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.

zkkvjfz

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.

jeffomega

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

sudarshanmhaisdhune

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.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<meta name="description" content="Free Web tutorials">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B.H.School</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
#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{

}
@media screen and (min-width:650px){
.column{
width:30%;
padding:20px 20px;
}
}
</style>
</head>

<body>
<div class="container">

<div
</div>



<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">More..</a></li>
</ul>
</div>

<hr>
<div class="bg1">
<img src="img/group.jpg">
</div>

<hr>
<h1 style="text-align: 15px;">Our best Teacher</h1>
<div id="member">
<div class="column">
<div class="card">
<img src="img/etc.jpg">
<h3>etc</h3>
<p class="title">principale</p>
<p>lorem ipsom...</p>
</div>
</div>

<div class="column">
<div class="card">
<img src="img/etc.jpg">
<h3>etc</h3>
<p
<p>Hi, My name is etc and i am the instructor of B.H.School</p>
</div>
</div>

<div class="column">
<div class="card">
<img src="img/etc.jpg">
<h3>etc</h3>
<p
<p>Hi, My name is etc and i am the instructor of B.H.School</p>
</div>
</div>

<div class="column">
<div class="card">
<img src="img/etc.jpg">
<h3>etc</h3>
<p
<p>Hi, My name is etc and i am the instructor of B.H.School</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="img/etc.jpg">
<h3>Barkat Ullah</h3>
<p
<p>Hi, My name is etc and i am the instructor of B.H.School</p>
</div>
</div>
</div>
</div>

</body>
</html>

israfulislam

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

tusharkandpal

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

PraveenKumar-brry

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

abhisheksah

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.

muaazosaid

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

pranaylagishetty

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

vishalnihalani

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

jaydepani

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

Abhishek-izlw

best teacher for any computer language = harry

muhammadarish

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

darshna

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

Learn CSS ::before and ::after in 4 Minutes

Learn CSS Pseudo Elements In 8 Minutes

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

Before und After Pseudo Elemente | CSS Tutorial Deutsch

Pseudo Classes CSS , Pseudo Elements, ::before and ::after in CSS | Web Development Course #31

CSS Pseudo-elements :: in 100 Seconds

Vibrating Heart Shape using CSS before & after | css pulse heart

CSS Before and After Pseudo Elements in Hindi/Urdu

CSS Tips & Tricks #html #css #csstips

Learn CSS Border Animations in 6 Minutes

CSS Tricks: Horizontal Lines Before and After Texts (Quick Tutorial)

These CSS PRO Tips & Tricks Will Blow Your Mind!

Learn CSS pseudo elements in 4 minutes 🔎

CSS Before and After pseudo elements explained - part three: as design elements

Learn CSS In Arabic 2021 - #36 - Pseudo Elements - Before, After, Content

QuickTip #7 : ::before dan ::after pada CSS (Pseudo-Element)

Before & After CSS Pseudo Elements Tutorial Explained

Cool CSS Menu Hover Effects - Using :before and :after pseudo element - Pure CSS Tutorial

CSS 3 Tutorial #22 - Before und After

CSS Before and After pseudo elements explained - part two: the content property

6 things I wish I knew about CSS when I started

Before/After Image Slider Comparison (HTML, CSS, and JavaScript)

APRENDE a usar AFTER y BEFORE en CSS

CSS Pseudo Elements ::Before & ::After - Complete Guide🔥