#23: Arrays in React JS in Hindi | ReactJS Project Netflix App #2 in Hindi in 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 KZbin 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...

[@ThapaTechnical]

Guys series kaisa lag rha hai jarror batana :) ➡️ React JS Project Netflix App Part #1 in Hindi in 2020: kzbin.info/www/bejne/foPLe4l9n66ll6c ➡️ Array in JavaScript in Hindi: kzbin.info/www/bejne/sHjPqYKulN2Gl7s ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: kzbin.info/aero/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ

[@shelendrasingh2301]

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

[@CodeWithJava114]

Bro Css stuffs kaise milega?

[@dikshantjain6544]

sir itne aage tak series dekh li , aap sab detail me batate ho par wo css bhi batao

[@chinmaysahal06]

Bro har card pe alag alag css use krni h , kaise kre ?

[@prithwijoysaha3649]

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

[@ui-passion]

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

[@shahidbagwan-bu5fh]

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

[@pritamadhikari9324]

please send also responsive css code

[@shahidbagwan-bu5fh]

@@pritamadhikari9324 nahi hoga re baba😁

[@Aranyak.123]

👍👍👍👍👍

[@muhammadamjad8462]

Thanks bro❤❤

[@Shortify_0]

Bhagwan nikle bhai aap to

[@bhushanpawar6245]

I learn here a lot... amazing teaching style and awesome video

[@thedevlife1611]

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

[@bhautikpatel4742]

Sir Thank's to learn very nicely I have a question 1) { toAbsoluteUrl } ke sath image attachment kai se kare { toAbsoluteUrl } matlab dynemic path

[@umaironlinepro]

awesome Thappa kitna clear tareekey sey samjhaya hai Vinod u r great

[@pawanpatidar4204]

Explain the Css code Especially for beginners, It is just request 🤗

[@prashantsingh9645]

Mujse lelo

[@mukulvishwakarma3585]

@@prashantsingh9645 bhai css ka code dedo

[@ayushthakur2896]

@@prashantsingh9645 dede bhai

[@thelalitpurvlogs8094]

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

[@thecollective2404]

@@thelalitpurvlogs8094 bro woh css file mai @media wala code mai kya likhna hai?

[@saurabhpotdar2175]

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

[@eramperwez4617]

Amazing sir very interesting...

[@gjtechnical3179]

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?

[@royarpan]

ClassName will work if you use this in first div instead of h3 tag. like

[@umarfarooq6145]

yes

[@priyankaranjan1471]

You told that you will explain Css part that is used in this card.But you don't do that.

[@talhashah2847]

I m from pakistan bhot he useful videos he plz carry on

[@swapnilbagul7502]

Agar each card component ke liye diff style chahiye hogi toh kya hum inline css apply kar sakte hai?

[@shetheexplorer1469]

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?

[@chinmaysahal06]

same doubt here , how can we design card individually with different css property ?

[@Ali-bl3iq]

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";

[@itsumair001]

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 ?

[@_shubhamjadhav]

Would u pls share the index.css file code ?

[@kahanijag970]

Same m bhi yahi keh raha hu

[@bhupendranagda9563]

Can we use loop in index.js so that we have to use only one time

[@healthandfitness3273]

yes you can use foreach loop and goes to every array item

[@kNimrahBano]

Hello... can you please explain the css part of this project?

[@SouvikDas-mw3rm]

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

[@kahanijag970]

Same question

[@arjunkhanna1803]

Apne customized props me styling kr skte hai?

[@kahanijag970]

Same question

[@rahulbaghel1680]

bhai agr 100 data h to 100 k dalna padega kya aise .iska b koi shortcut ni h

[@tasneemkhan1405]

I was waiting since 10am sir, today you uploaded late . But finally you are here😍

[@SantoshYadav-xb2hg]

Me also

[@aftereternity4654]

no no But finally Boom !!😍

[@atrangibaat2225]

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

[@bipinmsit7380]

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!

[@YourOnlineAdviser1540]

yes, we would like to see the tutorial as well of CSS

[@AbdulSattar-uv5rq]

sir kia ham is jaha pe ap ne index 01234 dia hai waha pe loop chala sakte hain.

[@Ankitmathur_01]

Div ke ander Div deke usme ky kiya vo nhi smjh nhi aya..?

[@taqikhan5418]

Thank you kya loop use nahi krskte jsx me

[@KCWonderWorld]

Agr srf ek card ko style karna ho toh kaise karenge

[@chinmaysahal06]

same doubt

[@keshavsharma9423]

sir an error TypeError: Cannot read property 'createElement' of undefined is coming while accessing the array elements using props in card componenet. please help

[@pablu_7]

Card components should be exported and then imported in index.js. Make sure that the names matches correctly

[@RohitKumar-ei5sp]

why u are not show all the process of CSS implement plz request u to show all the process to learn according to them

[@VijenderSingh-rr5zt]

Vinod bhai, clear thanks

[@kashiking7936]

Thank u sir a lot keep rocking man

[@vandanasingandipe2203]

hello please provide that array object of netfix series

[@shivambatholiya_mcl]

Thanks

[@azadrawat920]

Jo aap vedio bnate ho unko agr zip bna kr dete to shayad jayda behtar hota

[@nazimchaudhry8470]

Hello Thapa Sir can you please share me CSS of Netflix App Part #1.

[@deepsaha200]

google keep per kaise collabrator ka functionality kare usko viedo banaye na please

[@Code_express]

thank sir

[@harshjaiswal5060]

Bhai CSS code to explain kiya he nhi nd last ka code dikhaya bhi nhi index.css ka

[@muhammadshiraz8187]

what if we use for loop except for Hardcode

[@ashu_gaming_and_vlog]

Bhai Sdata file error aa rha ha import nhi hota hai aur CSS batayein v nhi details me batana hai to batao na bhai taki thora kuch sikh v sakein

[@omsingh6879]

Can anyone having his notes

[@ashishjaiswal8778]

Instead of writing multiple times,Does we can create loop there???

[@dharmang]

Yes. Use javascript function map. Sdata.map((card) => {

[@prakharagarwal9448]

Can u pls provide link to this css code ?

[@kahanijag970]

Same question yaar

[@faizanbhatti4797]

can i get css for this assignment?

[@kishanrai7569]

how to solve these error i am not able to get the pic whenever i try again always show errorwp6701298.jpg,:1 Failed to load resource: the server responded with a status of 404 ()

[@mehrankhan1675]

I get error in Sdata file below the imgsrc which is ^ error

[@virendramajhi8703]

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

[@thedevlife1611]

media query part??

[@LifeStoryAshita]

Completed #23

[@roshninigwal3442]

Sdata.jsx in error SyntaxError: D:\Reactaap\Sdata.jsx: Unexpected token (4:14)

[@prajwaljangale4443]

Not able to display images through url

[@kumarshashi8559]

Brother Thapa can you develop a software for me. please reply

[@rishabhjain8472]

bhai source code bhi de diya karo na

[@wolverine_d_king9422]

Kuch bhi 😂 video jabardast hai 😜

[@prathameshdesai-ve7me]

CSS ? plej bhaiyaa

[@rahul8438]

Sir , iska CSS part bhe btana sir

[@muhammadzahid1761]

Hi Sir, Sir if you would share the link of CSS file it would be very helpful to write the code?

[@findeverythingdotcom3383]

Pls share the index.css with us once..

[@Anjaliartistp]

Well done 👍👍👍👍

[@anchalpandey3619]

BOOM

[@dalmikchand]

nice content

[@k.g.ffan.s5935]

bhia css kondikaegaa bhaii

[@swatiganji9186]

where can I get Css file

[@rushikeshavachat4282]

Meri bhai give me the code of css in your thapa website.Reply me

[@nancyjackson9745]

sir please redux py b video banao please

[@afaqahmad8918]

Thapa brother kindly source code provide kiya karo yar plz

[@noumankhan8913]

Code ko public Git par upload kya kro yr.. or nichy link dya kro...

[@ritikagrawal892]

bhai css kyu nahi dikha rahe ho

[@deepakshrestha405]

Hello sir How can I get source code of this video?

[@DemonSpiritt]

What about css?

[@chizuru1999]

You are learning Reactjs right? 😆

[@wolfasad9872]

Hello i am not having your @mediaquery for this work can you share it me

[@pritamadhikari9324]

please vaiya send responsive style code

[@sageoustheory1957]

can someone tell me how to start my npm

[@Superak07]

type "npm start" in the terminal and make sure the path is set to be your react app path

[@pankajsharma-rf1ov]

what about css 🙄

[@vaibhavjain4934]

Sir email template pe video Bana ho na plzz

[@shirshghoshal3692]

plz give css code

[@sreelakshmimenon8]

Sir, one doubt.. we cant make new folder as we made awesomeapp and we are working on that...so if I want to make another folder and work there..can I? and if yes then do I need to start from create-react-appname in command promtpt??

[@chizuru1999]

Yes. "npx create-react-app appname" then "npm start" in vscode terminal.

[@dipsundarjana2905]

I need Css code

[@railwayvlogs6829]

Bro source code Ka link bhi description Mai Dal do.

[@FarmanOfficial777]

Sahi m3 yar

[@Amar-hn2vm]

Hai lekin paid

[@rahul-java-dev]

Bahut interesting lg rha h...........but css bina mjaa ni aa rha h. index.css mil skega kya ? plzz

[@kahanijag970]

Same here

[@tanyabarua8132]

Css Mila kya

[@kahanijag970]

@@tanyabarua8132 nahi mila or milega bhi nahi

[@shivampatel-vm1xv]

GitHub pe hein

[@shivampatel-vm1xv]

@Tanya Barua GitHub pe hein

[@Waseemkhan-bj9rq]

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

[@yatinsharma5637]

Worst thing about u is u don't provide source code , without css file this video is waste and we can't pay 50 rs for every video 😡

[@lofivibes4you]

Bhai css ko to samjao yr tumne isme bataya hi nhi pls dekho

[@letsknowthis1862]

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

[@abhijeetv007]

That's why I'm leaving this series

[@alokpunjsharma]

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

[@anujgupta7749]

@@abhijeetv007 Then you learn from which series?

[@abhijeetverma5627]

@@anujgupta7749 I learnt from FreeCodeCamp

[@anujgupta7749]

@@abhijeetverma5627 This series is good or FreeCodeCamp? whats your opinion?

[@AxitSojitra2002]

img ka problem aa raha hai sir kesi set kare img ko

[@shrutisinghal5682]

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.

[@UniversbeCREATIONS]

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.

[@reshulw884]

css file kripya pradan kare!

[@AbhishekMishra-gr5zk]

Aisa simplified version react ka mere samjh me kisi bhi platform p kisi bhi channel p milna next to impossible h Great sir

[@kishandave722]

Awesome me ye series' full time deta hu or aap ASE hi video upload karte rahe jise ham react developer ban sake Thanks

[@sheikhhashir9726]

3 2 1 and Boom guys

[@ajaysinha1338]

Bhai CSS bhi btaya kro please.. Bahut achi vieos hai.. Thanks a lot

[@hemantagrahari4298]

Apne index.css wala part n dikhaya wo dikhaye plzz index.css wala part dikhaiye

[@ShubhamSharma-yl2tf]

Bro image set nhi hoe, atleast tum tho explain kr dete

[@ratul1125]

Awesome sir

[@lofiboy7866]

sir please give css code for cards for new persons, where is the file for desiging

[@A1ritiktyagi]

ha bhai

[@shahharsh8433]

CSS In Card.jsx let card__imgs={ maxHeight:'200px', maxwidth:'60px', marginLeft:'70px' } let carding={ display:'inline-block', } let car_category={ marginLeft:'70px' }

[@RahulParmar-cr5wg]

Where is the CSS code yaar,,,,,,,,,, ?? and just look into your site .. there is no any source code............