Это видео недоступно.
Сожалеем об этом.
React Cards with Props | UI Card Design with React JS
HTML-код
- Опубликовано: 14 авг 2024
- 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!
Angela, you are an awesome instructor. Thank you for your content!
Thank you so much!
@@angeladesign737 how to navigate to particular receipe using reusable component
Legit! Implemented this myself and the cards worked as advertised. Thanks for the video
brief and straight to the point
Wow! I learned so much from watching this video. It was extremely helpful!😊
You just saved me!!!!! Thank you so much
You just nailed it 🔥🔥🔥🔥
darling ❤️❤️ loved it
This is so simple yet clean design. Thanks Angela
Glad it was helpful!
Thanks, great content. Just simple and neat code. You are a great instructor.
God bless you! 💟 Thank you. This is the best tutorial I ever seen. It's all clear. :)) Awesome job.😊
second time watching before start to learn it , you make it easier to accept the learning course .. thanks
Glad it helped!
Love your coding style ❤️❤️
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!
Happy the videos have been helpful! And thank you for the video request!
How to use that cards in loop by adding data in array can we do that
I just fell in love with your voice
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 !
Great suggestions, thanks!
Perfect tutorial, thanks so much!
very nice. this is a great introduction to react props
Thanks! Glad it was helpful
Thank you, that was so clear and easy
Hello Angela, it is really PERFECT video looking forward course for React, thank you
Thank you so much! Happy it was helpful
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! :)
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
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
does anyone know how to resize images inside the card or do I need to crop/resize before I import into the card
Thankyou, Thankyou Thankyou so much.. You are a life saver
U safe my life angela 😭
Amazingly described ,
thanks ! that's really helpful !
how did u add image link
how to apply popover effect on cards in react... please make a video on it.
Requesting if you could do the same fetching card details from a db.json
Nice explanation though
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
how can i place two cards side by side ?
Your voice is so sweet 😍😍
Great tutorial
Thank you!
TY TY
Hi,
Thanks for sharing this precious stuff!! I have an issue with showing the images when trying to load like this: Any suggestion?
I think you need to import a image on the top of the .js file
@@breadandbuns304 Thanks for the "quick response"'. I did't and it work fine!
Nice video 😍. Can you please make responsive header in Reactjs ?
Great topic suggestion, thanks!
Do you plan to do any tutorial for NextJS frontend design with chakra-ui?
Great suggestion! I will look into it
I love you Angela!
🎉
Love it 💕💕
Thank you!
@@angeladesign737 💕💕
Thanks! :D
But i know how to make
Stopped RUclips ?