Это видео недоступно.
Сожалеем об этом.
#23: Arrays in React JS in Hindi | ReactJS Project Netflix App #2 in Hindi in 2020
HTML-код
- Опубликовано: 15 май 2020
- Welcome, Looping through an Arrays in React JS in Hindi. Also, we are continuing our React JS Project Netflix App part #2 in Hindi in 2020. In today's video, we will learn many new concepts and topics of ReactJS. We will simplify the Cards component into further so as to make it take less memory and space in our React Netflix App.
************ Must Watch Videos For Web Development ************
Array in JavaScript in Hindi: • JavaScript Tutorial in...
React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ Install VS Code for ReactJS LINK: www.thapatechn...
➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechn...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter RUclips Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechn...
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: www.facebook.c...
Guys series kaisa lag rha hai jarror batana :) ➡️ React JS Project Netflix App Part #1 in Hindi in 2020: ruclips.net/video/HRhJVGjIraE/видео.html
➡️ Array in JavaScript in Hindi: ruclips.net/video/zGlxOx_xSaY/видео.html
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: ruclips.net/p/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ
Sir aap ne wo nahi btaya ki ye links h inko kaha se add kare apne project me and css wala part bhi aap ne nhi btaya
Bro Css stuffs kaise milega?
sir itne aage tak series dekh li , aap sab detail me batate ho par wo css bhi batao
Bro har card pe alag alag css use krni h , kaise kre ?
Your all videos are very very good. i'm learning react from this video series. i have a question that is why we are not using the loop to use the array element??
css code 👍
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color:#d2dbdd;
}
.heading_style {
padding: 30px 0;
text-align: center;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
font-size: 1.5rem;
margin-bottom: 30px;
}
.cards {
width: 100%;
height: auto;
}
.card{
/* margin: 25px; */
margin: 6%;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
background-color: M#fff;
width: 21.25%;
border-radius: 12px;
box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
float: left;
}
.card:hover {
box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
transform: scale(1.2, 1.2);
}
.card__img{
width: 100%;
height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card__info {
background-color: #fff;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px 24px 24px 24px;
background-color: R#fff;
}
.card__category {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
color: #868686;
background-color: #fff;
}
.card__title {
margin-top: 5px;
margin-bottom: 10px;
font-family: "Raleway", sans-serif;
background-color: #fff;
text-transform: capitalize;
}
button{
padding: 5px 8px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: HI#868686;
background-color: #fff;
outline: none;
border: 1px solid black;
cursor: pointer;
}
please send also responsive css code
@@pritamadhikari9324 nahi hoga re baba😁
👍👍👍👍👍
Thanks bro❤❤
Bhagwan nikle bhai aap to
Aisa simplified version react ka mere samjh me kisi bhi platform p kisi bhi channel p milna next to impossible h
Great sir
Bro source code Ka link bhi description Mai Dal do.
Sahi m3 yar
Hai lekin paid
may be similar code i hope
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color:#d2dbdd;
}
.header_style {
padding: 30px 0;
text-align: center;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
font-size: 1.5rem;
margin-bottom: 30px;
}
.cards {
width: 100%;
height: auto;
}
.card {
margin:4%;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0, 1);
background-color: #fff;
width: 15%;
border-radius: 12px;
box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.7);
float: left;
height: auto;
border-bottom-left-radius: 12%;
border-bottom-right-radius: 12%;
}
.card_img{
width: 100%;
height: 25vh;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card:hover {
box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
transform: scale(1.2, 1.2);
}
.card_info {
background-color: #fff;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px 24px 24px 24px;
background-color:#fff;
}
.card_category {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
color: #868686;
background-color: #fff;
}
.card_title {
margin-top: 5px;
margin-bottom: 10px;
font-family: "Raleway", sans-serif;
background-color: #fff;
text-transform: capitalize;
}
button{
padding: 5px 8px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: HI#868686;
background-color: #fff;
outline: none;
border: 1px solid black;
cursor: pointer;
}
media query part??
Awesome me ye series' full time deta hu or aap ASE hi video upload karte rahe jise ham react developer ban sake Thanks
I learn here a lot... amazing teaching style and awesome video
Amazing sir very interesting...
Awesome video sir like you.
kisi bhi series me dekhlo aapke sikhaye topics kahi nahi he.
Me comparison nahi kar raha but u r unique like ur concepts n tricks to teach us
Thanks bro 🙂
I liked ctrl + d ctrl + d ctrl + d ctrl + d while your are selecting the same index key(text). Please also let us know the shortkeys as well.. thanks..:)
awesome Thappa kitna clear tareekey sey samjhaya hai Vinod u r great
Sir I'm following your series from starting and I did not able to find the video before this one where you added css file,u missed that video?if not then please share the link.
Awesome sir
the explanation was good but you didnt tell us that how did you get the Netflix links and how you done the css part the upsert many basic level Beginners
That's why I'm leaving this series
U gotta learn css urself he is teaching u react ull never learn web dev if u copy things ive made the cards with same effects myself and researched its more fun if u learn urself and practical
@@abhijeetv007 Then you learn from which series?
@@anujgupta7749 I learnt from FreeCodeCamp
@@abhijeetverma5627 This series is good or FreeCodeCamp? whats your opinion?
Explain the Css code
Especially for beginners,
It is just request 🤗
Mujse lelo
@@prashantsingh9645 bhai css ka code dedo
@@prashantsingh9645 dede bhai
sdgdfgdfgssfg box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #d2dbdd;
}
.span{
color: red;
}
.heading_style{
padding: 30px 0;
text-align: center;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
font-size: 1.5rem;
margin-bottom: 30px;
}
.cards{
width: 100%;
height: auto;
}
.card{
/*margin: 25px; */
margin: 6%;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
background-color: #fff;
width: 21.25%;
border-radius: 12px;
box-shadow: 0px 13px 10px -7px rgba(0,0,0,0.1);
float:left;
}
.card:hover{
box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);
transform: scale(1.05,1.05);
}
.card__img{
width: 100%;
height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card__info{
background-color: #fff;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px 24px 24px 24px;
background-color: #fff;
}
.card__category{
font-family: "Raleway"sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
}
.card_title{
margin-top: 5px;
margin-bottom: 10px;
font-family: "Raleway",sans-serif;
background-color: #fff;
text-transform: capitalize;
}
button{
padding: 5px 8px;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
outline: none;
border: 1px solid black;
cursor: pointer;
}
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #d2dbdd;
}
.span{
color: red;
}
.heading_style{
padding: 30px 0;
text-align: center;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
font-size: 1.5rem;
margin-bottom: 30px;
}
.cards{
width: 100%;
height: auto;
}
.card{
/*margin: 25px; */
margin: 6%;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
background-color: #fff;
width: 21.25%;
border-radius: 12px;
box-shadow: 0px 13px 10px -7px rgba(0,0,0,0.1);
float:left;
}
.card:hover{
box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);
transform: scale(1.05,1.05);
}
.card__img{
width: 100%;
height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card__info{
background-color: #fff;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px 24px 24px 24px;
background-color: #fff;
}
.card__category{
font-family: "Raleway"sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
}
.card_title{
margin-top: 5px;
margin-bottom: 10px;
font-family: "Raleway",sans-serif;
background-color: #fff;
text-transform: capitalize;
}
button{
padding: 5px 8px;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
outline: none;
border: 1px solid black;
cursor: pointer;
}
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #d2dbdd;
}
.span{
color: red;
}
.heading_style{
padding: 30px 0;
text-align: center;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
font-size: 1.5rem;
margin-bottom: 30px;
}
.cards{
width: 100%;
height: auto;
}
.card{
/*margin: 25px; */
margin: 6%;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
background-color: #fff;
width: 21.25%;
border-radius: 12px;
box-shadow: 0px 13px 10px -7px rgba(0,0,0,0.1);
float:left;
}
.card:hover{
box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);
transform: scale(1.05,1.05);
}
.card__img{
width: 100%;
height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card__info{
background-color: #fff;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px 24px 24px 24px;
background-color: #fff;
}
.card__category{
font-family: "Raleway"sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
}
.card_title{
margin-top: 5px;
margin-bottom: 10px;
font-family: "Raleway",sans-serif;
background-color: #fff;
text-transform: capitalize;
}
button{
padding: 5px 8px;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
outline: none;
border: 1px solid black;
cursor: pointer;
}
@@thelalitpurvlogs8094 bro woh css file mai @media wala code mai kya likhna hai?
@ThapaTechnical sir please explain the CSS and media query part which is used in the 'index.css' for this NETFLIX Project as you told before 🙏 this will helpful really for beginners. also provide source code of the projects in your description section.
Bahut interesting lg rha h...........but css bina mjaa ni aa rha h. index.css mil skega kya ? plzz
Same here
Css Mila kya
@@tanyabarua8132 nahi mila or milega bhi nahi
GitHub pe hein
@Tanya Barua GitHub pe hein
Sir Thank's to learn very nicely
I have a question
1) { toAbsoluteUrl } ke sath image attachment kai se kare
{ toAbsoluteUrl } matlab dynemic path
Bhai CSS bhi btaya kro please.. Bahut achi vieos hai.. Thanks a lot
the best part of ur lecture is "and guys boom".
bhai is it possible that we use for loop in index.js where we created a card, by doing this we don't have to write card again and again. and we will get our desirer result.
after completing React course,please make 5 hard multipage dynamic website using HTML,CSS,JS,JQUERY,REACT,PHP,MySQL this will increase our knoledge 100x... please sir banaoge na?
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.heading_style{
padding: 30px 0;
text-align: center;
font-family: "cursive";
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 1.5rem;
margin-bottom: 30px;
background-color: white;
color: black;
}
/* .cards{
width: 100%;
height: auto;
} */
.heading{
color: aqua;
}
.card{
margin: 6%;
transition: all 0.4s cubic-bezier(0.175,0.885,0,1);
background-color: white;
width: 21.25;
border-radius: 13px;
box-shadow: 0px 14px 10px -7px rgba(0,0,0,0.1);
float: left;
}
.card__img{
width: 100%;
height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding: 16px 24px 24px 24px;
background-color: white;
}
.card__info{
background-color: white;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding: 16px 24px 24px 24px;
}
.card__category{
text-transform: uppercase;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: gray;
background-color: white;
}
.card__title{
margin-top: 5px;
margin-bottom: 10px;
font-family: "cursive";
background-color: white;
text-transform: capitalize;
}
button{
padding: 5px 8px;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
outline: none;
border: 3px solid black;
background-color: white;
color: #868686;
cursor: pointer;
}
*{
margin: 0px;
padding: 0px;
background-color: white;
}
.heading_style{
margin-top: 0;
padding: 20px 20px;
background-color: darkgray;
color: darkcyan;
text-align: center;
font-weight: bold;
font-style: oblique;
font-family: 'Montserrat', sans-serif;
}
.cards{
margin:30px 80px;
display:inline-block;
align-items: center;
justify-content: center;
}
.card{
margin: 10px;
width: 100%;
height:100%;
border-radius: 5px;
box-shadow: 2px 2px 10px rgb(43, 44, 44);
}
.card:hover{
transition: .5s all ease-in-out;
transform: scale(.8);
}
img{
width:100%;
height:20vh;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.card_info{
font-size: 20px;
font-style: italic;
text-align: center;
}
h3{
text-align: center;
margin-top: 10px;
font-size: 20px;
font-weight: bold;
}
button{
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid black;
border-radius: 5px;
cursor: pointer;
}
button:hover{
background-color: black;
color: white;
transition: 0.5s;
}
Very useful and easy language used in video thanks
thanks Sir Udemy se bhi acha Explain kiya aap nee
I understand but what to do if image is locally store in the device. you just copy the link for image source
You can use ClassName to define different class for different name... the reason why u could see the word KuchBhi was because used the prop in the wrong place. You will have to use it against className so that u can get different class for different card.
can any one clear my confusion plzz. is project me humne Card component k liye props k through data pass kia lekin jo SData components h usse directly import kr k use kr rhe h usse humne as a props q nhi lia??
Thank you soooooooooooooooooooooooo much Sir, you are great
I m from pakistan bhot he useful videos he plz carry on
thapa bhai cards ka css code bhi batao yaar
ye maine 3 card apane bataya waise create kiye
per usake bad maine
aur 3 card add kiye
to alignment change ho rahi
isilye css part pura batao yaar
awesome playlist
Would u pls share the index.css file code ?
Same m bhi yahi keh raha hu
bro nd help , image is not showing in browser when i inspect it and it shows error "Not allowed to load local resource" on console tab.
amazing sir
ClassName will work if you use this in first div instead of h3 tag. like
yes
Really ,your series is very helpful.
This series of great help!!!! Thank you so much
nice way to teach sir all understood thanks sir
Mr. Thapa I'm a viewer from Pakistan. Your tuts are awesome.
Just need to fix your ctrl button literally chipkane men asaani ho gi bohat.
You told that you will explain Css part that is used in this card.But you don't do that.
good job vinode thapa
.
thanks sir❤
css me jo class he cards name pe agar uska hi colour de de to kya sabka alag se dena parta? Card category card image ye sab
Same question
Your React playlist is awesome
thank you so much sir , explained very well sir
Sir kia ham esa nahe karsakte ke arrays mai ids jab update ho tu app.js mai automatic update hojai ids mera matlab hai ke jab new data add kare array mai tu new data automatic card ke form mai screen par ajai
agar ham 1 line code write kare or [ ] es mai array ka data automatically ajai ?
how can I style each card individually... suppose if I want to give different background color to each card then how can I do that.
same doubt @thapatechnical
make obj in it . like we do in hello sir good morning task
bhaiya react to smj aara hain lekin ye jo aapne html css ka use krke jo cards bnaaye hain vo kaise bnaaye hain or kha store kre hain??????
Vinod bhai, clear thanks
Can we use map function to display multiple cards ?
Aapke videos bahut achhe hain thank u so much for detailed videos. Ismein Json kese use karein. please jaldi bataiyega thanks...
bahut hi helpful
Thank u sir a lot keep rocking man
Then how to design each and every card differently...... as u said we can write className in card component....then how we style all cards separately?
Same question
I am not able to target classname in css because of just one classname. 😞
Can we use loop in index.js so that we have to use only one time
yes you can use foreach loop and goes to every array item
thik hai bro hamne samja ki Card me reserved keyword className dene se vo usko prop samjega par agar hame seprate card ko koi alag style dena ho to vo kaise denge?
Thank you sir 👍👍
Hello @Thapa Technical, I am new in the field of web development. Appreciated your work for doing good job. can you please describe the css file for @Tutorial_22. Thanks!
yes, we would like to see the tutorial as well of CSS
Hello sir. Mera aik question hai aur wo yi ki aap ni iss video mi 5 cards bana lii likin inn sab ka class name 1 hai. css mi agr hr aik lii alg alg style kerna ho tu hr aik card ko individually access kesi kari gi. q k classname tu sirf aik hai.
Hello... can you please explain the css part of this project?
sir an error TypeError: Cannot read property 'createElement' of undefined is coming while accessing the array elements using props in card componenet. please help
Card components should be exported and then imported in index.js. Make sure that the names matches correctly
title as custom attribute is also used in your component code though it also is real existing attribute. What about that??
Thanks
Sir last vdo me jo alg alg cards bnaye usme alag alag props to smjh aagya lekin agr alag alag css use krna ho to how will do that?
same doubt here , how can we design card individually with different css property ?
jsx wali file mein 1 object create kro or us property mein simple just us ko color kr do
like
let cssStyle={};
or ab agar ap ko main div ka color change krna hai tou wahan ja k cssStyle.backgroud-color="Green";
I was waiting since 10am sir, today you uploaded late . But finally you are here😍
Me also
no no But finally Boom !!😍
Best explained.
Agar each card component ke liye diff style chahiye hogi toh kya hum inline css apply kar sakte hai?
thank sir
sir please give css code for cards for new persons, where is the file for desiging
ha bhai
Nys bedeo Vro
Hello Sir, My question is that why Props and this concept you are not write your code in the App.js file....actually it is too confusing because i refer your all videos from scratch and you told that the flow of App.js file
Thappa bhai agar card component ko alag sey class deni ho toh kia karen....... component ki file me alag sey css karey us k liye or usko alag sey class name dey m i right plz reply
very helpful to me
Apne customized props me styling kr skte hai?
Same question
Kuch bhi 😂 video jabardast hai 😜
Thank you sir :)
Well done 👍👍👍👍
sir react me folder se image kese upload hogi..
react app me public folder me images ka folder bnao fir usme images daal do aur direct link kro kahi bhi "images/pic-1.jpg" is tarah
CSS In Card.jsx
let card__imgs={
maxHeight:'200px',
maxwidth:'60px',
marginLeft:'70px'
}
let carding={
display:'inline-block',
}
let car_category={
marginLeft:'70px'
}
sir for loop lagakr cards create kr sakte hai kya iss example main?
sir in this project can you explain the Css which you done on the image once again
Nice
sir can u tell how u apply flex property to cards i tried but it did not workeds
Your series is really helpful...But please start providing code.
hello please provide that array object of netfix series
Apne index.css wala part n dikhaya wo dikhaye plzz index.css wala part dikhaiye
What if we have to add different styles in different component...how to do it?
nice video bro but agar component ka jsx code wala part and css ka part explain kar dete toh bohot meherbani hota.....atleast source code provide kara do bro🙏🙏
Agar humhe sabhi box k background color change krna h fir kese krege...
how can we do the same fetching data from json -server plz make 1 video on this. i am stuck at this.
Awesome series
Hello Thapa Sir can you please share me CSS of Netflix App Part #1.
U r awesome
sir can you explain the css of cards ?
Same yaar css ka samajh nahi aa raha
Hi
can you please share the code of Css which you have been used in this project?
Hey,
here it is
*{
box-sizing: border-box;;
padding: 0;
margin: 0;
background-color: #d2dbdd;
}
.header_style{
text-align: center;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
color: #868686;
background-color: #fff;
font-size: 1.5rem;
margin-bottom: 30px;
height: 50px;
padding-top: 10px;
}
.cards{
width: 100%;
height: auto;
display: block;
}
.card{
margin: 6%;
transition: all 0.4s cubic-bezier(0.175,0.885,0,1);
background-color: #fff;
width: 21.25%;
border-radius: 12px;
box-shadow: 0px 13px 10px -7px rgba(0,0,0,0.1);
float: left;
}
.card:hover{
box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);
transform: scale(1.05,1.05);
}
.card_img{
width: 100%;
height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card_info{
background-color: #fff;
border-bottom-left-radius: 12px;
border-top-right-radius: 12px;
padding: 16px 24px 24px 24px;
background-color: #fff;
}
.card_category{
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
}
.card_title{
margin-top: 5px;
margin-bottom: 10px;
font-family: "Raleway",sans-serif;
background-color: #fff;
text-transform: capitalize;
}
button{
padding: 5px 8px;
font-family: "Raleway",sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
background-color: #fff;
outline: none;
border: 1px solid black;
cursor: pointer;
}
@media(max-width: 768px){
width: 400px;
height:auto
}
@@prakritigupta5640 thanks god you helped
@@prakritigupta5640 thanks for this. can you explain what this code does
@media(max-width: 768px){
width: 400px;
height:auto
}
@@vishalpandey7393 this is the media queries used in the code... It is used to give responsive effect means that the webpage will adjust itself to the size of the screen... i.e mobile or desktop....
@@vishalpandey7393 if the max width of the screen will be 768 px or less then width of the webpage will automatically become 400px and height will be adjusted accordingly... Actually there is an error... We have to specify on which block we are applying theedia query...
@media(max-width:768px){
body{
width:400px;
heigth:auto;
}
}
This can be the correct one.... Instead of body.. u can apply this query on some other sections of code as well.
sir kia ham is jaha pe ap ne index 01234 dia hai waha pe loop chala sakte hain.
thapa bhai you dammit . maan gye bhai
5 time likh ni ki jaga loop use kar sak thi kya sir card ki liyi ??
nice content