KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

help

Revanth

11/13/2024

Need Help with Christmas Tree Growth Animation in React! 🎄

Hi everyone! I’m working on a React project and could use some guidance. The design involves a Christmas tree that starts off small and gradually grows as the user receives "appreciations" or points. For each appreciation, an envelope icon attaches to the tree as if it’s a decoration. I've attached an image for reference. Any advice on how I can implement the tree growth animation and dynamically add envelope icons to it? Would love any tips or resources on achieving this effect in React!...

vic

11/13/2024

how to re render react re usabelcomponent

So I have an resusable component for Toaster notification with message , color property for now I only make with message So In that Toaster , it contains message and close icon button so whenever I click the toaster would go off (false) but whenever I get message propes I set useEffect with setShow true So the problem is if I get same message again It doesn't show the toaster ...

snxxwyy

11/13/2024

@media | print, screen & only

Hey, i have a couple questions for some @media rules- 1) What type of things/content on your site would warrant changing in regards to the print rule? essentially, what would you want to change when printing out a page of your site? 2) i've heard the screen rule represents exactly what it says, being a screen of a certain size. That makes something like @media (min-width: 500px) different since it refers to a window size right? but aren't they technically the same? ...

Ævie

11/12/2024

Portfolio Feedback

Hi Everyone, I'm self taught, I've applied to over 100 jobs and haven't heard anything back. I was hoping to maybe get some feedback on my portfolio and the one project I have? I'm not sure if its good or bad or what I'm doing wrong....

I am Groot

11/12/2024

Are the Courses on KevinPowell.co upgradable?

I'm looking into the Courses and see that CssDemystified has three tiers. bronze silver and gold. If i buy the bronze and want to upgrade to the silver or gold, is there an option for that? Also, i was doing one of the free courses on Scrimba and I was blocked or locked out due to 10 free sections of the course. So now i have to pay the PRO membership to finish the course. Is that how its supposed to be? And if i do the Css Demystified course, do i have to have the Pro membership on Scrimba also...

ℳ𝒽𝓮𝓮𝓉𝓾 ✔

11/12/2024

Radial Progressbar w/Rounded Square Caps?

I stumbled upon this CodePen and really like the design... It's easy enough to do radial progressbars with circular caps, but I can't think of a way to achieve it with rounded square caps. Anyone know a way to accomplish this using CSS/SVG or perhaps a library that can already do it cleanly?...

Faker

11/12/2024

When to use rem and em

Hello guys, I'm currently learning how to build responsive design and I came across that we should try not to use the px units to build responsive designs; only keep that for small things, like logos etc...We should try to stick with units like ch, rem and em. From what I understand, rem is the font-size relative to our root element, the html element and em is the unit relative to the nearest parent element. But when should we choose to use rem rather than em....

Faker

11/12/2024

How do grid lines work in CSS grid?

Hello guys, sorry to disturb you all; can someone explain how the CSS grid lines work please; the thing I'm not understanding is why the grid lines (represented by the black line) doesn't start on the edge of the rows or columns but before the rows or columns, like in the gap, I'm very confused about that. It is like if our grid-container has a padding and the black line is drawn in this padding. Second is why we always have 1 more row grid line or 1 more column grid line that actual number of rows and columns....

snxxwyy

11/12/2024

forms | action and method

Hey, i have a couple of questions about the action and method attributes for forms- 1) With action, what necessarily does sending data to other html/pfp files etc do? I can imagine it's so you can use it with js that's hooked up to the page it's sending to to either use it in a query or display it on the page. This makes sense to me since i imagine you'd have to use a database or something similar to retrieve data between pages without this functionality. let me know if i'm wrong though please. 2) With the GET method, what's the function of appending the data to the url? What does it allow you to do?...

verena

11/11/2024

<audio>

I'm not sure if I'm right here. I want to trigger a "picture-changer" if the ausion is clicked to play. This is allready working. But I want to stop the picture-changer if someone clicks on pause or the audio ends. Also this is working. But if I click the play-button in <audio> again, the picture-changer is not working anymore. How can I make a question like "if the play-button is clicked --> pictors are changing, if "the paus-button is clicked or the audio is at the end, then stop the picture-changer, but if you click the play-button agein, then the picture-chanter shall work againt?...

theseeker

11/11/2024

Image Positioning

How do I replicate the original image as presented in the figma ? i need help...

lko

11/11/2024

How do you transition a height based on the height of its children?

I have this: https://codepen.io/Lko3001/pen/RwXEBea I don't want any transition on the children, I just want to transition the height of the parent when the content inside of it changes. Is it possible to do it with only CSS? Maybe with some modern CSS stuff? I tried with view transitions but it didn't work, but maybe I wrote something wrong...

Bighealspls

11/11/2024

Why does a drop-shadow get cutoff when applying it to the path of an svg?

I have two identical svgs. One having a drop-shadow applied to the <svg> element and another with the same drop-shadow applied to the <path> element inside the <svg> element. The svg with the drop-shadow applied to the <svg> element is fine. The other however get's cutoff. My question is why?...

Lexi

11/11/2024

Container grid system using react CSS modules, full-width being overridden by content-grid

I was following the "A new approach to container and wrapper classes" and trying to hook it up to a react project using CSS modules. However, when I use my full-width class it gets overwritten by the content-grid class. Is there an incapability with React CSS modules and this type of layout? Or am I missing something? ```.content-grid { --padding-inline: 2rem; --content-max-width: 120ch;...

Stu

11/11/2024

Make grid container like having margin-top

Here my grid item (.box) are overflowing to the top-side of the grid container (.wrapper). The problem is I don't want the .box looks overlapping with the .wrapper previous sibling (.first-item). One thing I can do to solve this is with adding some pixels for margin-top to the grid-container. But is there another way so the spacing can be dynamic to the height of overflowing .box? ...

snxxwyy

11/11/2024

quick css questions

Hey, i just a few quick questions 1) is there a way to select an element based off of whether it's a certain count of one on the page? I know nth-child and nth-of-type do this, but only if the elements are siblings. If i wanted to select the 3rd p element on the whole page for example, would that be possible? maybe it's with that of selector that's floating around? 2) I've noticed that if you have a list inside of another list, the child's ul/ol element will have it's user agent margin removed, what causes this? is it because of the way sub-lists work? https://codepen.io/deerCabin/pen/wvVRoVG...

snxxwyy

11/10/2024

svg sizing

Hey, just a couple questions about how sizing of an svg works- 1) If there's no viewbox and you try to resize an svg in css, the content within the svg won't scale with it, why is this? (example in codepen) 2) If you have an svg with a viewbox of 0 0 100 100 and let's say there's a circle in there that has a r, cx and cy of 50 to center it within the viewbox, if you resize the svg with css, what makes the content scale up/down since the svg is now larger/smaller than the viewbox, i'd expect the content to be cut off?...

theseeker

11/10/2024

Create this Layout

I am struggline to create this layout from a figma file. can anyone help out please?

Dev_HK

11/10/2024

transition being bumpy

https://pastecord.com/yjezopazam.js

peterpumkineaterr

11/10/2024

side index is not sticking. what i'm doin’ wrong ?

https://codepen.io/kev00690/pen/zYgpNVV i did not know how to put index on side so i put main content in one container and side part in one container. and did display: flex; and justify-content: space-between; IMAGE IS FOR REFERENCE....

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.