React Cards with Props | UI Card Design with React JS

Recipe Cards with HTML & CSS: • Build Recipe Cards fro...
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
CSS Grid Auto-Fit Tutorial: • Responsive CSS Grid No...
In this video I go over how to create these recipe cards using React. I show you the full front end coding tutorial, where I create the structure of the elements with React Components and then write all of the styling and effects with CSS. I use CSS grid for the layout, flexbox for the card structure and then I add styling and hover effects.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
Codepen: codepen.io/ang...
In this video I show you:
0:00 - Intro
0:33 - Setup
1:06 - HTML Code
1:30 - React Code
2:45 - Card Component
4:11 - Props
6:33 - CSS Code
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.co....
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/a...
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

[@michaelw.881]

Angela, you are an awesome instructor. Thank you for your content!

[@angeladesign737]

Thank you so much!

[@vikasmv5952]

@@angeladesign737 how to navigate to particular receipe using reusable component

[@tecstack2768]

Legit! Implemented this myself and the cards worked as advertised. Thanks for the video

[@francodosha]

brief and straight to the point

[@Vivi-Price]

Wow! I learned so much from watching this video. It was extremely helpful!😊

[@user-jc7og9cv3p]

You just saved me!!!!! Thank you so much

[@naveenp5940]

You just nailed it 🔥🔥🔥🔥
darling ❤️❤️ loved it

[@pratikwadekar4981]

This is so simple yet clean design. Thanks Angela

[@angeladesign737]

Glad it was helpful!

[@danobaro204]

Thanks, great content. Just simple and neat code. You are a great instructor.

[@LolareiRa]

God bless you! 💟 Thank you. This is the best tutorial I ever seen. It's all clear. :)) Awesome job.😊

[@omar97muhammad]

second time watching before start to learn it , you make it easier to accept the learning course .. thanks

[@angeladesign737]

Glad it helped!

[@CodingCush]

Love your coding style ❤️❤️

[@RainyNixie]

Hi, thank you so much for your videos, super helpful! I have a request - could you do a video on Sass/SCSS? Thanks!
Edit - Just watched your "Complete Website in HTML & CSS" video and it helped answer a lot of the questions I had. Thank you for all you do!

[@angeladesign737]

Happy the videos have been helpful! And thank you for the video request!

[@syedishaq2594]

How to use that cards in loop by adding data in array can we do that

[@WhereAreYouNowAtlantis]

I just fell in love with your voice

[@mariuszgolik7040]

Great work and a beautiful sonorous voice. I suggest More react, next and gatsby.. Best regards and see you next time .Thanks very much Angela !

[@angeladesign737]

Great suggestions, thanks!

[@marsdwarf]

Perfect tutorial, thanks so much!

[@beinyourguard]

very nice. this is a great introduction to react props

[@angeladesign737]

Thanks! Glad it was helpful

[@ar_soukrat]

Thank you, that was so clear and easy

[@omar97muhammad]

Hello Angela, it is really PERFECT video looking forward course for React, thank you

[@angeladesign737]

Thank you so much! Happy it was helpful

[@DoctorWarlock_]

Great tutorial! I was learning some of the basics of React and this video really helped give me good example. I may be thinking about this the wrong way but, I was wondering, instead of using "function App()" could you have used class components? Such that it may be "class App() extends React.Component"? is it better to use function components? Thanks! :)

[@angeladesign737]

Glad it was helpful! You can use either; I prefer function components so I can use Hooks. Check out the documentation: reactjs.org/docs/hooks-intro.html

[@ZahidKhan-th8pz]

Hi can you solve my problems ?
I want to 10 different color of cards by react js props
Create only one card but pass value in app.js
and so on

[@thepotatoofheaven]

does anyone know how to resize images inside the card or do I need to crop/resize before I import into the card

[@manishdhameja9302]

Thankyou, Thankyou Thankyou so much.. You are a life saver

[@chansolkim3609]

U safe my life angela 😭

[@wadudshuvro3709]

Amazingly described ,

[@musclecatnana]

thanks ! that's really helpful !

[@deepikachauhan2494]

how did u add image link

[@ritiksingh6137]

how to apply popover effect on cards in react... please make a video on it.

[@badiajojo]

Requesting if you could do the same fetching card details from a db.json

[@badiajojo]

Nice explanation though

[@kookkiop7240]

Love this tutorial!! helped alot, but i have a question .. how do you have different view recipes buttons ? am really stuck in this and cannot figure it out

[@devennandapurkar7786]

how can i place two cards side by side ?

[@naveenp5940]

Your voice is so sweet 😍😍

[@johncooter6483]

Great tutorial

[@angeladesign737]

Thank you!

[@trelearning6370]

TY TY

[@Maayan_1]

Hi,
Thanks for sharing this precious stuff!! I have an issue with showing the images when trying to load like this: Any suggestion?

[@breadandbuns304]

I think you need to import a image on the top of the .js file

[@Maayan_1]

@@breadandbuns304 Thanks for the "quick response"'. I did't and it work fine!

[@RaghvendraSingh_]

Nice video 😍. Can you please make responsive header in Reactjs ?

[@angeladesign737]

Great topic suggestion, thanks!

[@codedjango]

Do you plan to do any tutorial for NextJS frontend design with chakra-ui?

[@angeladesign737]

Great suggestion! I will look into it

[@strugglingElds]

I love you Angela!

[@angeladesign737]

🎉

[@quacquac_quacquac]

Love it 💕💕

[@angeladesign737]

Thank you!

[@quacquac_quacquac]

@@angeladesign737 💕💕

[@seaofanime1705]

Thanks! :D
But i know how to make

[@keyserteste327]

Stopped RUclips ?