Learn by copying, not copying & pasting
Vložit
- čas přidán 3. 07. 2024
- 🤔 Looking for somewhere to ask questions and get help? Join my Discord community: kevinpowell.co/discord
One of the best ways to learn is to copy what other people have already done, but rather than copying and pasting, try and do it on your own, and then use what you’re copying as a reference if you get stuck, or if you want to compare solutions.
🔗 Links
✅ The original card’s that I was copying: codepen.io/hexagoncircle/pen/...
✅ My video that looked at the hover media query: • Dealing with hover on ...
✅ Did you know I have courses? kevinpowell.co/courses?...
⌚ Timestamps
00:00 - Introduction
00:28 - What we'll be trying to copy
01:04 - Setting up the HTML and CSS
01:56 - Don't just copy, try to do it on your own first
03:32 - Getting back to the CSS
09:26 - The background image movement
14:50 - The text movement
18:23 - Improving the animation
20:20 - Using DevTools to analyze an animation
26:51 - Asking questions
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
The title got me cooking
LET HIM COOK!
Well done - because: You brought into play all the resources to solve a problem in a logical way so not only do you solve the problem but learn how to solve the problem at the same time. That may seem obvious but it's not often done in video presentations. The genius is reinforcing the idea that all great creations come from building on great efforts done in the past by someone else. There's no crime done, it's just the difference of struggling in the shadows and being savvy.
If you want your background image to look darker to help the text show up, layer a linear gradient on the background-image property with a comma to separate it from the image url. I didn't see that part in the video - but I learned a lot about css animation! Thanks Kevin!
Your videos are always like a comfy blanket for me :) after long days of learning how to code other stuff i always know that i can learn something useful and cool on your channel as a treat in the evenings! :) thank you for that Kevin!
This is the EXACT video I was looking for. Been playing around a lot with Code Pen and I love what they do letting non-developers or WebDev enthusiast like me be able to build something without having to start from scrath...THANKS A MILLION!!
AMAZING VIDEO BRO ! Thats what I looking for!
I like your deep understanding of css concepts and their explanation,,,,😊
Great video! Thanks Kevin 😉
Very good analysis and explanation 🙏
Thanks for this concept
That was really interesting and valuable video. You are showing the way that frontend devs should go especially at the beginning of the path. I am currently digging deeper trying to figure out how the things are working and what can we do to learn faster and become better. Thanks a lot! :)
I love these kind of videos! Practical and actually useful design tutorials. Surprisingly there is a severe lack of these types of videos. Hope you keep making more!
Thank you for all these explanations, tips & tricks. Brilliant. Have a nice day :)
Great video, thanks! I love watching the Hyperplexed channel too, he finds effects he likes and works out the code from scratch.
Thanks for another great video. Your content is always super relevant 🙏
Yes, I agree! 😉
Over my head, but so very interesting. I'm a newby again! Thank you!
Online Tutorials did something similar. Pretty cool
Imo , that's a lot like in ART, in illustrative drawing .
a lot of the advice are the same, keep pricticing, study the masters and copy to learn , but copy like Kevin described it in the video
As I do projects in tutorials, I make them different, and solve any new issues. Copy/paste feels wrong. The last thing I should do. As close as I get, when puzzled, is type it in carefully. Pasting = not learning anything.
My favourite thing in a tutorial is when I mess something up. Rather than going back in the video I try to see where I went wrong.
Takes a little longer but it keeps me engaged and I'm sure I learn more for it too.
I’ve been developing for a long long time but I had no idea you could do this in dev tools…
Steal things you like and break them.
Convert from something you stole and change it to something else that does the same thing.
Basically, tinker with stuff.
Dan Abramov sad me this thing: “Do things that someone already did”
Thanks
My only problem with CSS as a beginner is the units, em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax.
Keep it simple and use rem for like 99% of things early on 🙂
Not a professional, but I think most of the time you'll use rem and px.
Sometimes % and vh. And others if you want sometimes more specific.
Again, I assume that the way it is
I've been doing web design for 20 years and I still only know px lol
I found a really efficient way of making this type of card using your grid translate from height: 0; to height: auto; video.
Around 60 lines of code
@KB04 where is the video?
@@katr810 just search for "grid translate from height: 0; to height: auto;" on youtube, its one of the first videos to come up.
Hi Kevin, I'm a newbie here and it would be nice if you can explain more about why did you use h2 for the card-title? Why not use h1? Thanks!
Not Kevin but also an answer 😂
Basically first off, h1 is pretty big, and since that heading is not so big h2 will do. Seconds, h1 should be reserved for really important elements only and you generally only want one h1 per page (:
Hope this helps
@@jspetsandcrafts9862 Ahhh, I see! Now I understand... thank you for the response & really appreciate it!
I won't forget to make my corner of the internet, just a little bit more awesome, literally by stealing 😌😎
Is anybody else having issues with card:focus-within .card-content animation? It doesn't work for me once I include the .card { overflow: hidden; }. Otherwise, it works fine.
I thought you wouldn't look at the code? You're not copy pasting, but you're still viewing it lmao.
Why does the codepen (the onhover animation) not work in FF?
I just tried it out and it works in FF for me 🤷
Now it really works, but not 2 days ago - strange :) 🤷
be a curious burglar 😋
Tbh that feels I'm a devil inside 😅 and just curse myself for doing this.. 🥲 but I need it at the same time knowing both mess me up lol..